What Is Responsive Web Design?

With the rapid growth of mobile internet, more and more people browse on phones or portable devices. Mobile has become the newest trend and is overtaking the PC as the most common way to access the internet. Web designers thus face a challenge: how to present the same page on devices of all sizes?

Phone screens are small, PC screens large; making the same content look good across vastly different screens is hard. Many sites provide different page versions for different devices, but maintenance is costly and architecture more complex. Can we "design once, fit everywhere", letting one page adapt to different screens automatically?

The concept of "Responsive Web Design"

In 2010, Ethan Marcotte introduced the concept and approach of Responsive Web Design, with a demo:

Screen wider than 1300px: 6 images in one row;
Screen 600–1300px: 6 images in two rows;
Screen 400–600px: navigation moves to the page header;
Screen narrower than 400px: 6 images in three rows.

How to implement a responsive site

Loading CSS selectively

The core of Responsive Web Design is detecting screen width automatically and loading the corresponding CSS file.

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

Different CSS loads for different page widths. The line above means: when the screen is narrower than 400px, load tinyScreen.css. You can also use JavaScript such as jQuery to load different CSS.

Making images, divs and tables responsive

Besides layout and text, images and other elements must scale automatically:

img { max-width: 100%; }

For browsers that don't support max-width, such as IE6–7:

img { width: 100%; }

On Windows, scaled images may look distorted; you can use an IE-specific command:

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

Or use Ethan Marcotte's imgSizer.js.

Benshuo Technology has rich experience in responsive web development, compatible with mainstream phones, tablets and PCs, as well as older browsers like IE6–8.