How to design and create adaptive web pages

With the popularization of 3G, more and more people use mobile phones to access the Internet.

Mobile devices are surpassing desktop devices as the most common terminal for accessing the Internet. Therefore, web designers have to face a difficult problem: how to present the same web page on devices of different sizes?

The screen of a mobile phone is relatively small, with a width usually below 600 pixels; the screen width of a PC is generally above 1000 pixels (the current mainstream width is 1366×768), and some even reach 2000 pixels. It is not easy to present the same content in a satisfactory way on screens of different sizes.

The solution for many websites is to provide different web pages for different devices, such as providing a mobile version or iPhone/iPad version. This certainly ensures the effect, but it is more troublesome and requires maintaining several versions. Moreover, if a website has multiple portals, it will greatly increase the complexity of the architecture design.

Therefore, some people have long imagined whether it is possible to "design once and apply it to all", so that the same web page can automatically adapt to screens of different sizes and automatically adjust the layout according to the screen width?

1. The concept of "adaptive web design"

In 2010, Ethan Marcotte proposed the term "Responsive Web Design", which refers to web design that can automatically identify screen width and make corresponding adjustments.

He created a sample with the portraits of the six main characters from The Adventures of Sherlock Holmes. If the screen width is greater than 1300 pixels, the 6 images are arranged in a row.

If the screen width is between 600px and 1300px, the 6 images are divided into two rows.

If the screen width is between 400px and 600px, the navigation bar moves to the header of the web page.

If the screen width is under 400 pixels, the 6 images are divided into three rows.

There are more examples of this on mediaqueri.es.

There is also a test tool here that can display the test results of screens with different resolutions on a single web page. I recommend installing it.

2. Allow the webpage width to adjust automatically

How does "adaptive web design" work? It’s actually not that difficult.

First, add a line of viewport meta tag to the head of the web page code.

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport is the default width and height of the web page. The above line of code means that the web page width is equal to the screen width (width=device-width) by default, and the original scaling ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies 100% of the screen area.

All major browsers support this setting, including IE9. For those older browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js.

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

3. Don’t use absolute width

Since the web page will adjust its layout according to the screen width, you cannot use an absolute width layout or elements with absolute width. This one is very important.

Specifically, CSS code cannot specify pixel widths:

width:xxx px;

Only percentage widths can be specified:

width: xx%;

or

width:auto;

4. Relative font size

Fonts cannot be sized in absolute (px) sizes, only in relative (em) sizes.

body {
font: normal 100% Helvetica, Arial, sans-serif;
}

The code above specifies that the font size is 100% of the default size of the page, which is 16 pixels.

h1 {
font-size: 1.5em;
}

The h1 is then sized 1.5 times the default size, which is 24 pixels (24/16=1.5).

small
font-size: 0.875em;
}

The size of the small element is 0.875 times the default size, which is 14 pixels (14/16=0.875).

5. Fluid grid

"Fluid layout" means that the positions of each block are floating, not fixed.

.main {
float: right;
width: 70%;
}

.leftBar {
float: left;
width: 25%;
}

The advantage of float is that if the width is too small to accommodate two elements, the latter element will automatically scroll to the bottom of the former element and will not overflow horizontally, thus avoiding the appearance of a horizontal scroll bar.

In addition, you must be very careful when using absolute positioning (position: absolute).

6. Choose to load CSS

The core of "adaptive web design" is the Media Query module introduced by CSS3.

What it means is that it automatically detects the screen width and then loads the corresponding CSS file.

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />

The above code means that if the screen width is less than 400 pixels (max-device-width: 400px), load the tinyScreen.css file.

<link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />

If the screen width is between 400px and 600px, the smallScreen.css file is loaded.

In addition to loading CSS files using HTML tags, you can also load them in existing CSS files.

@import url("tinyScreen.css") screen and (max-device-width: 400px);

7. CSS @media rules

In the same CSS file, you can also choose to apply different CSS rules according to different screen resolutions.

@media screen and (max-device-width: 400px) {

.column {
float: none;
width:auto;
}

#sidebar {
display:none;
}

}

The above code means that if the screen width is less than 400 pixels, the column block will be unfloated (float:none), the width will be automatically adjusted (width:auto), and the sidebar block will not be displayed (display:none).

8. Image Adaptation (fluid image)

In addition to layout and text, "responsive web design" must also achieve automatic scaling of images.

This only takes one line of CSS:

img { max-width: 100%;}

This line of code also works for most videos embedded in web pages, so it can be written as:

img, object { max-width: 100%;}

Older versions of IE do not support max-width, so you have to write:

img { width: 100%; }

In addition, when scaling images on the Windows platform, image distortion may occur. At this time, you can try to use IE's proprietary command:

img { -ms-interpolation-mode: bicubic; }

Alternatively, imgSizer.js by Ethan Marcotte.

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

However, if conditions permit, it is best to load images of different resolutions according to screen sizes. There are many ways to do this, both on the server and client side.