Mobile Web Design Considerations

When using mobile Internet, some websites will not display normally, because these pages are designed on the computer to see, if the web developer does not take into account the phone's hardware and software characteristics and people's reading habits, you can not design a mobile phone easy to read pages. Said simple, but to cut off the existing Web page re-practice, and then transplanted to the mobile phone is a big project, the author summed up four aspects to the web Developer Reference.

One, share the same Web page with the computer

Here with the Computer Sharing Web page, refers to the computer with the page is completely unmodified, directly to the mobile phone browsing. The premise is that the elements of the site itself is simple enough, the layout can not be too complex.

Second, the production of mobile phone-specific pages

This practice in the 90 's very popular, at that time, the telecommunications industry gprs/wap advertising is hot, mobile phones can browse the site is a WAP site, which is a WML-written mobile phone network, WML is very primitive HTML, content is usually only text and menu.

▲ The advantage of this method is that the WAP can be displayed normally on all phones, but it is difficult to maintain both the mobile and desktop versions of the Web pages, so that information is often not synchronized.

Third, using the browser to determine the device

Opera has a desktop and mobile version, the same chrome, Safari, Firefox is also. Some websites use browser sniffing mechanisms (browsersniffing) to determine which browser you use, but Browsersniffing's settings are cumbersome and often travel wrong. The quickest way is to add a variety of links to the Web page, allowing the browser to choose the format freely.

Iv. development of complex web sites

The compound version of the site is to be able to both desktop and mobile use of the site, it is just talked about "and computer sharing" is not the same, the composite version of the site although the content is the same, but it will be based on the screen size to render the layout. It is not difficult to do complex web sites, just use CSS and HTML tags to adjust the line, such as HTML viewport and CSS media queries.

What is viewport

Viewport refers to the "Picture View", which is a combination of a number of values, the vernacular is a little explanation of what you can see on the screen, can be divided into the Display screen view (displays viewport) and the actual picture view (actual viewport) two kinds. For a Computer browser, viewport is less important because the display view is the same as the actual picture view.

If we write width=200px in CSS, it means the object is 200px wide on the display, but not on the phone. The CSS specification encourages manufacturers to decide for themselves how many display pixels the hardware pixel should correspond to, such as the mobile phone industry may be a small screen, the proportion will be set to 1:0.5, so the screen will be less than the actual screen half.

How to adjust it? As long as the HTML syntax embedded <meta name= "viewport" content= "Width=device-width", the value of actual viewport to visual viewport, This allows the page to be completely placed on the phone's small screen. As for the CSS part, opera in this year's CSS conference to put forward the viewport tag to add CSS. If the final pass, viewport can be set directly in the CSS syntax.

What is media queries

Media queries is a new feature of CSS3, which incorporates two properties, media type and Max Min-width/max min-height media type, to display different CSS layouts under different devices. For example, to screen the layout is a general display, to print is the printer output format.

In the case of printers, if we do not want to print out the selected column of the site, you can choose a different CSS rendering under Media type.

In the following example, there are two kinds of CSS media queries display layout, they are based on the size of the screen to provide the display content, when the width is less than 480px, the page layout will change, such as sidebar will move to the bottom of the screen instead of following the main screen floating on the left (Float:left). Reading movement will also be changed from top to bottom, more suitable for the vertical type of mobile phones to read, lest the reader still struggling to move around the small screen.

Mobile Web Design Considerations