Mobile Web design experience and experiences

⒈ resolution

This should be the most concern of mobile Web page, because the mobile devices, various resolutions have. It takes a great effort to have a good browsing experience on these devices.

• Use viewport: This is already a must for mobile Web page, it can set the width of the page, whether to allow zooming and so on.

  <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/>

  General Settings Width=device-width, is set to the screen width of the device, of course, it can be a specific value

• Percent with Max (min)-width use: Mobile Web page Not only the resolution is different, and at any time can be toggled, so the percentage width setting is necessary, and then with Max (min)-width limit the maximum (small) width, can effectively adapt to various resolutions, if there are special needs, You can see the next one, "Using Media Queries"

• Use media Queries, which is part of the responsive web design

• <link rel= "stylesheet" type= "Text/css" href= "style1.css" media= "screen and (min-width:640px)" >

  The meaning of this is to use the Style1 style in a screen width greater than 640px, or to write inside the style, such as:

  @media screen and (min-width:640px) {        . D1{background: #ccc;}        }

⒉ Content and caching
Although the 4g is now fried hot, but can not deny the mobile device network environment limitations, so it is necessary to do some processing.

• Use manifest cache

    
   Add manifest to HTML with file format content such as: 
     
   CACHE manifest# #需要离线的内容CACHE: script/jquery.jsscript/gameconfig.jsimage/ home.pngimage/logo.png# #总是访问网络的内容NETWORK:* # #访问A失败时访问BFALLBACK 
     
   The viewer caches all of the content within the Chache, and can  access offline , as long as any changes to the file will be re-read and refreshed, so changing the comment is a good way to update the cache 
   
   Here to note that 
          1,  the current page with manifest added will also be cached    so the recommended way is page caching, page dynamic content is all used Ajax access, So in the mobile site project design began to pay attention to this issue 
          2, the page to add an IFRAME and then sub-page reference manifest want to reach the cache resource without caching the current page content, is not valid. 

• As far as possible using CSS style to replace the picture, because the mobile browser to CSS3 support, so that many previous pictures can be used to replace the style
  Some of the projects we use in our company:
  
  
  The button uses a gradient + fillet + inner Shadow

  . btn_red {display:block;line-height:28px;padding:1px 0;border:1px solid #B81414; Border-radius:2px;background: # Ff5a5a;background:-webkit-gradient (linear, 0 0, 0 70%, from (#FF5A5A), to (#FF4444)); overflow:hidden;margin-top:3px; Color: #fff; box-shadow:0px 1px 1px #FFB5B5 inset;}

  
  A triangle is a border color that changes color to draw a triangle that points in a different direction.

  . tip_t{border-color:transparent Transparent #bb0808 transparent;border-style:solid;border-width:10px;width:0px; height:0px;}

  
  The arrow is a two triangle stacked together
  ......
  Not only does the size decrease a lot after using the style instead of the picture, but the maintainability is greatly improved.

• The page only shows some content, prompting the user to "click to expand" or "view more", and then asynchronously get the content, people do not want to open a website, traffic is gone

⒊ layout
The visible area of the mobile phone is small, the layout is different from the traditional webpage, need to make full use of the limited space to display the information.

• The page flow is simple and clear, complex operation as far as possible segmented display, such as:
  
  
• Hide infrequently used features, you can put them in the sidebar or pop-up layer, such as:
  
  
• Because the mobile side is operated directly with the finger, not the mouse. Therefore, the need to respond to the element click Area to be relatively obvious, large
• The screen width is small, but the upper and lower slide experience is good, so the layout can be more up and down arrangement

⒋ Other and Epilogue

• Many small manufacturers of mobile phone tablets, there are some ROMs on the system default browser version of the different (very headache), so the test work to do enough
• There are several new types of <input/> Type in HTML5, such as <input type= "Tel"/>, and clicking on the mobile side will pop up the numeric keypad by default, and you can try more