What is a responsive web design? How to proceed?

Start the first article. The old rules, first boring talk about the weather. 11 long vacation, the weather finally began some autumn flavor, sitting in the room even feel the need for hot coffee. Said two years ago is also in the National Day holiday began to do Joomla document translation; Good time for a long holiday, always can spare a day or two, quiet nest in the home Do blog, learn to do something new, simply no more comfortable things.

Say the right thing. Be prepared to focus on a few recent studies on the topic of "responsive web design", including concepts, practices, cases, and discussion of viewpoints. These articles are much longer than previous translations of documents (even pages!). ...), today's put on almost spent two days of "leisure time", the endurance is a test, efforts to improve it. Nonsense is over, here we go.

For now, almost every new customer wants their site to have a dedicated mobile device version. The perfect situation is the iphone, IPad, BlackBerry, Kindle ... Create one--page resolution must also be compatible with any device. Who knows how many new devices we need to design for the next 5 years to develop different versions of the page? When does this madness count?

In the field of web design and development, soon we will not be able to keep up with the pace of innovation in equipment and resolution. For most sites, it is impractical to create a separate version of each new device and resolution, and the result is that we will win the user base with some devices and lose those who use other devices. However, there may be another way to help us avoid this happening.

The idea of responsive web design is that page design and development should respond and adjust according to user behavior and device environment (System platform, screen size, screen orientation, etc.). Responsive Concrete practices are made up of many aspects, including flexible grids and layouts, pictures, and the use of CSS media query. Whether the user is using a notebook or an ipad, our pages should be able to automatically switch resolutions, picture sizes and related scripting features to suit different devices; in other words, the page should have the ability to automatically respond to the user's device environment. In this way, we don't have to do a special version design and development for the coming new devices.

The concept

of

responsive web design

Ethan Marcotte once published an article "Responsive Web Design" in a List apart, citing the concept of responsive architecture:

A newly emerging discipline-"responsive Architecture (responsive architecture)"-suggests that physical space should be able to respond to the situation of the person in which it exists. Combined with embedded robotics and the application of stretching materials, architects are trying to build a wall structure that bends, scales and expands according to the surrounding population, and can also use motion sensors to coordinate climate control systems to adjust indoor temperature and ambient light. There are already companies producing "smart glass": When the number of indoor people reaches a certain threshold, the glass can automatically become opaque and ensure privacy.

Extending this idea to the realm of web design, we get a whole new concept. Why do we have to build a design and development plan for each user group? Similar to responsive architecture, web design should also be automated to respond and adjust to different device environments.

Obviously, we cannot and need not use motion sensors or robotics, and responsive web design needs more abstract thinking. Fortunately, some of the relevant concepts have been practiced, such as liquid layout, media queries and scripting that help pages reformat. But responsive web design is not just about screen resolution adaptation and automatic scaling pictures, etc., it is more like a new thinking mode for design.

Adjust resolution

Different devices have their own screen resolution, sharpness, and screen orientation, and new devices that are constantly being developed will also bring new screen size specifications. Some devices are based on the horizontal screen (portrait), some are vertical screens (landscape), and even squares; for the increasingly popular iphone, ipad and other smartphones, tablets, users can also rotate the device to arbitrarily switch the screen orientation. How do you make a design that satisfies all situations?

To be compatible with both horizontal and vertical screens (users may also be able to switch directions during page loading), we must consider the size of n screen sizes. It is true that we can divide these specifications into several broad categories and then make a scheme for each category to ensure that the programme is at least as flexible as possible in this group. But even so, the results will be extremely anxious, who knows what kind of equipment in 5 years after the share of the number? And many users don't even maximize the browser's window; How much do we have to think about such variables?

Morten Hjerde and his colleagues made a statistical survey of more than 400 mobile devices in the 2005-2008 market (see report), and the following figure shows the approximate results:

After 08 years, more and more representative new equipment came out and became popular. Obviously, we cannot go on with the idea of "multiple programmes";

part of the solution: all elasticity

A few years ago, elastic layout (flexible layout) is almost a luxury, so-called elasticity, but also reflected in the vertical layout and font size and so on; pictures can always easily destroy the structure of the page, and even the elastic elements of the structure, in extreme cases, will still destroy the layout. So, the so-called elastic layout is not so flexible, it sometimes even can not adapt to desktop and notebook screen resolution differences, let alone mobile phones and other mobile devices.

Now we can make the page more "resilient" by responding to design and development ideas. The size of the picture can be automatically adjusted and the page layout will not be broken. Although there is never a perfect solution, it gives us more choices. The page will be truly resilient, regardless of how the user switches the device's on-screen orientation or from the desktop screen to the ipad.

In the article of Ethan Marcotte, which is mentioned earlier, he shows an example of the characteristics of responsive web design in terms of page elasticity:

The implementation of this example is a perfect combination of liquid mesh and liquid image technology, and is smart enough to use the right HTML tags in the right place. "Liquid Grid" is a very common practice; for "liquid picture" technology, the following article does a good job:

hiding and revealing portions of imagescreating sliding composite imagesforeground Images that Scale with the Layout

When it comes to creating a liquid page, it's a good idea to look at Zoe Mickley Gillenwater's flexible Web design:creating Liquid and elastic Layouts with CSS, or download a sample Zhangxian: " How to create an elastic picture. In addition, Zoe's "essential resources for creating Liquid and elastic Layouts." Provides a number of tutorials, resources, creative guidance, and best practices for creating resilient grids and layouts.

Technically speaking, while this sounds simple and feasible, it is more complicated than "combining these features". For example, take a closer look at the logo images in the example provided by Ethan Marcotte:

If we keep our browser window small, we will find that the text part of the logo image will always be reduced to the same year, to ensure its full readable, and not as the surrounding illustrations are both cut off. So the whole logo actually consists of two parts: the illustration as the background picture of the page title, will keep the size, but will be trimmed with the layout adjustment; The text part is a separate picture.

123<h1 id= "logo" > <a href= "#" ><img src= "Site/logo.png" alt= "the Baker Street Inquirer"/></a ></h1>

Where the,<h1> element uses illustrations as the background, and the text portion of the picture always stays aligned with the background.

This example shows a little bit about the idea of a responsive web design. However, this small effort is not enough to avoid the entire layout in the small size of the window to become too narrow or too short, and the logo text will eventually become too small to identify, the background picture will be too much cutting.

Elastic Picture

In response web design, an important factor is how to deal with picture problems. There are many scaling pictures of the technology, many of which are simple and easy. Among them, the first attempt by Richard Rutter is more popular, that is, the use of CSS max-width properties. This method is also mentioned in the paper of Ethan Marcotte's liquid picture.

1img {max-width:100%}

As long as there is no other style code covering the width of the picture that overrides the line, all the pictures on the page are loaded with their original width, unless the visible portion of the container is less than the original width of the picture. The above code ensures that the maximum width of the picture does not exceed the width of the browser window or the visible portion of its container, so when the visual portion of the window or container begins to narrow, the maximum width of the picture is reduced correspondingly, and the picture itself is never hidden and overwritten by the container edge. In fact, as Jason Grigsby in his CSS Media Query for the Mobile is fool ' s gold, "the idea behind the liquid picture is to ensure that, at all times, the picture is fully displayed at the maximum width of the original width." We don't have to set the width and height of the picture in the stylesheet, just let the style sheet scale the picture when the window size changes. "A simple and beautiful way."

The resolution and loading time of the picture itself is another issue to consider. Although through the above method, can be very easy to scale the picture, to ensure that the mobile device window can be full browsing, but if the original picture itself is too large, it will significantly reduce the download speed of picture files, storage space will cause unnecessary consumption.

Response Picture

The "response picture" technique, proposed by filament group, helps solve the problem mentioned above: not only scaling the picture on a year-on-year scale, but also reducing the resolution of the picture itself on a small device. You can look at the demo page first.

The implementation of this technique requires the use of several related files, which we can obtain on GitHub. Includes a JavaScript file (Rwd-images.js), a. htaccess file, and some sample resource files. You can refer to the documentation for responsive images using the specific method. The general principle is that Rwd-images.js detects the screen resolution of the current device and, if it is a large-screen device, adds a base tag to the head of the page and directs subsequent pictures, scripts, and style sheet load requests to a virtual path "/rwd-router". When these requests arrive on the server side, the. htacces file determines whether the request requires an original picture or a small "responsive picture" with the corresponding feedback output. For small screen mobile devices, large pictures of the original size will never be used.

The technology supports most modern browsers, including ie8+, Safari, Chrome and opera, and mobile device versions of these browsers, and gracefully degrades in Firefox and some old browsers: we still get the output of small pictures, but at the same time, the original large image is also downloaded.

disables automatic scaling of images in the iphone

In the iphone and ipod Touch, the page is automatically scaled to fit the size of the screen, the x axis does not produce a scroll bar, the user can drag and drop through all the pages, or enlarge the part of the page when needed. Here is a problem, even if we use the idea of responsive web design, specifically for the iphone's small screen output small picture, it will also be the same as the entire page with the same scale, as shown on the left of the following figure.

We can use some of Apple's proprietary meta tags to solve similar problems. Add the following code to the <head> section of the page (for more information, refer to the relevant article in the vitamin):

1&lt;meta name= "viewport content=" width=device-width; initial-scale=1.0 "&gt;

By setting the value of Initial-scale to "1", you can override the default scaling method to maintain the original size and proportions. For more information on the use of the viewport meta tag, refer to Apple's official documentation.

build the layout structure

When the page needs to adapt to the different screen size difference is too large, in addition to the picture, we should also take into account the entire layout structure of the response adjustment; we can use a standalone stylesheet, or more effectively, using CSS media query. This will not cause much trouble, most style settings will not be affected and changed, only some specific elements will be floating, width and height settings to change the position.

We can use a default main style sheet to define the main structural elements of the page, such as #wrapper, #content, #sidebar, #nav等的默认布局方式, and some global color and font schemes.

We can monitor the changes in the layout of the page with different browsing environments, if they are too narrow or too wide, then inherit the main style sheet from a child style sheet, and write a style override specifically for some layout structures. Let's take a look at the code example:

The following code can be placed in the default main style sheet STYLE.CSS:

123456789101112131415161718192021222324252627282930313233343536/* Default Styles that would carry to the child Style sheet */html,body{background ... color ...} H1,h2,h3{}p, blockquote, Pre, code, OL, ul{}/* structural elements/#wrapper {width:80%; margin:0 auto; background: #fff; padding:20px; #content {width:54%; float:left; margin-right:3%;} #sidebar-left{width:20%; Float:left margin-right:3%; #sidebar-right{width:20% Float:left;

The following code can be placed in a child style sheet mobile.css, specifically for a mobile device:

12345678910111213141516171819202122232425#wrapper{width:90%; #content {width:100%;} #sidebar-left{width:100% clear:both/* Additional styling for our new layout/border-top:1px solid #ccc Margin-top: 20px;} #sidebar-right{width:100% clear:both/* Additional styling for our new layout/border-top:1px solid #ccc Margin-top: 20px;}

The approximate visual effects are shown in the following illustration:

Media Queries

CSS3 supports all media types supported by CSS2.1, such as screen, print, handheld, and so on, adding many feature properties that involve media types, including max-width (maximum width), device-width (device width), Orientation (screen orientation, horizontal screen or vertical screen) and color. New toys, such as the ipad or Android-related devices, that appear after the release of CSS3 can perfectly support these properties. So we can set a unique style for new devices through media query, ignoring old browsers on desktops that don't support CSS3.

In Ethan's article, we can see a section of media query usages:

123&lt;link rel= "stylesheet" type= "text/css" media= "screen and (max-device-width:480px)" href= "Shetland.css"/ &gt;

The code itself is a good illustration of the working mechanism: if the page is rendered on screen (nonprinting) and the screen width is no more than 480px, the SHETLAND.CSS style sheet is loaded. To learn more about the new properties of CSS3 Media, refer to the article "the Orientation media Query."

We can create multiple style sheets to fit the width range of different device types. There are more examples and explanations in the "Meet The Media Query" section of Ethan's article. A more efficient approach is to integrate multiple media queries into a stylesheet file:

123456789101112131415161718/* Smartphones (portrait and Landscape)-----------/@media only Screenand ( min-device-width:320px) and (max-device-width:480px) {/* Styles */}/* Smartphones (Landscape)-----------*/@media only Screenand (min-width:321px) {/* Styles */}/* Smartphones (Portrait)-----------/* * @media only Screenand (max-width:320px) {/* Styles/}

The code above comes from a free template created by Andy Clark that can be compatible with a variety of mainstream devices. This allows you to refer to the "hardboiled CSS3 media Queries" by integrating multiple Media Queries into a stylesheet file and the differences and relationships between calling different style sheets through media Queries.

CSS3 Media Queries

Some of the code examples shown above are CSS2.1 and CSS3. Now let's look at how to use the CSS3 proprietary media queries feature to create a responsive web design. Some of these methods have practical value in the present, and in the near future they will all come in handy.

The two properties of Min-width and max-width are reliable. With the Min-width setting, we can specify a particular stylesheet for the page when the browser window or device screen width is higher than this value, and max-width the opposite.

In the following examples, we use syntax that integrates multiple media queries into a single style sheet. As discussed earlier, this is more efficient and reduces the number of requests.

123456@media screen and (min-width:600px) {. hereismyclass {width:30%; float:right;}}

The class defined in the above code (HEREISMYCLASS) is valid only if the browser or screen width exceeds 600px.

123456@media screen and (max-width:600px) {. aclassforsmallscreens {clear:both; font-size:1.3em;}}

This code does the opposite: the Aclassforsmallscreens class works only if the browser or screen width is less than 600px.

You can see that min-width and Max-width can determine both the device screen size and the actual browser width. Sometimes, we want to act on a particular device through media queries, ignoring whether the browser running on it doesn't have the same size as the device screen size because it's not maximized. At this point, we need to use Min-device-width and max-device-width to determine the screen size of the device itself.

12345@media screen and (max-device-width:480px) {. classforiphonedisplay {font-size:1.2em;}}? 123456@media screen and (min-device-width:768px) {. minimumipadwidth {clear:both; margin-bottom:2px solid #ccc;}}

There are other ways that we can effectively use media queries to lock down certain specified devices. Refer to the following two articles from Thomas Maier:

CSS for IPhone 4 (Retina display) How to To:css for the IPad

The orientation attribute is especially useful for the ipad. Its value can be either landscape (horizontal screen) or portrait (vertical screen).

? 123456@media screen and (Orientation:landscape) {. ipadlandscape {width:30%; float:right;}}? 12345@media screen and (orientation:portrait) {. ipadportrait {Clear:both}}

Unfortunately, this attribute is really only valid on the ipad. For other devices that can turn the screen, such as the iphone, you can use Min-device-width and max-device-width to work around it, and refer to the article "Determine IPhone orientation using CSS" for details.

We can also use these properties in combination to lock a screen size range:

1234567@media screen and (min-width:800px) and (max-width:1200px) {. classforamediumscreen {background: #cc0000; width:30%; Float:right; }}

The code above can be used for all devices in the browser window or screen width between 800px and 1200px.

In fact, many designers and developers will still choose to use multiple style sheets to achieve media queries. If the benefits from the organization and maintenance of resources are indeed higher than the depletion of efficiency, then this is not bad at all:

123&lt;link rel= "stylesheet" media= "screen and (max-width:600px)" href= "Small.css"/&gt;&lt;link rel= "stylesheet "Media=" screen and (min-width:600px) "href= large.css"/&gt;&lt;link rel= "stylesheet" media= "print" href= "print.css"/ &gt;

So, there is no absolute, it is best to use media queries according to the actual situation. For example, for the ipad, we can write multiple media queries directly in a style sheet. Because the ipad user is at any time likely to switch screen orientation, in this case, to ensure that the page in a very short time to respond to screen size adjustment, we must choose the most efficient way.

JavaScript

JavaScript is also one of our weapons, especially if some old devices do not support CSS3 media query perfectly, it can be used as backup support. Fortunately, there is already a dedicated JS library to help old browsers (IE 5+,firefox 1+,safari 2, etc.) to support CSS3 media queries. The use method is simple, download css3-mediaqueries.js and call it on your page.

The following code demonstrates how to use a few simple lines of jquery code to detect browser widths and invoke different stylesheets for different situations:

? 123456789101112131415&lt;script type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/ Jquery.min.js "&gt;&lt;/script&gt;&lt;script type=" Text/javascript "&gt; $ (document). Ready (function () {$ (window). Bind ("resize", Resizewindow); function Resizewindow (e) {var newwindowwidth = $ (window). width ();//If width width is below 600px, switch to the mobile Stylesheet if (Newwindowwidth &lt;) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $ ("Link[rel=stylesheet]"). attr ({href: "Mobile.css"});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/Else If width is adjective 600px, switch to the SCM stylesheet&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else if (Newwindowwidth &gt;) {$ ("link[rel= Stylesheet] "). attr ({href:" style.css "}); }});&lt;/script&gt;

There are a lot of solutions like this. So let's be clear, media queries is not an absolutely unique answer, it's just a way to implement responsive web design ideas in pure CSS. With the help of JavaScript, we can make more changes. This "combining Media Queries and JavaScript" shows us more details about JavaScript with Media Queries.

Show or hide content

From the previous study, we have learned that for responsive web design, scaling down the element size and adjusting the layout of the page structure are two important ways. But for the text content information in the page, it can not be simply from the "shrink" and "adjust the layout structure," the two aspects to deal with. For mobile devices such as mobile phones, in terms of text content, there are many best practices and guidelines: Simplified navigation, more focused content, the information list instead of the traditional multi-line copy content.

Responsive web design, on the one hand, to ensure that the page elements and layout has enough flexibility to compatible with all types of equipment platform and screen size, on the other hand, is to enhance readability and ease of use, to help users in any device environment easier to get the most important content information.

There's a style code that we've been using for years:

1display:none;

We can use it to hide some block-level elements from a page in a style sheet for a type of small screen device. You can also use the previous method, through JS to determine the current hardware screen specifications, in the case of small screen equipment directly for the need to hide the elements to add tool class classes. For example, for mobile devices, we can hide large chunks of text content area, but only a simple navigation structure, where the navigation elements can point to the detail page.

Note that you do not use the Visibility:hidden method, because this only makes the element visually rendered, and the display property helps us to set whether the entire piece of content needs to be output. It is important to avoid these unnecessary waste of resources for mobile devices. Let's look at a simple example:

The top half of the picture is the full page displayed by a large-screen device, and the following is how the page renders on a small-screen device. The page HTML code is as follows:

? 1234567891011121314&lt;p class= "Sidebar-nav" &gt;&lt;a href= "#" &gt;left Sidebar content&lt;/a&gt; | &lt;a href= "#" &gt;right Sidebar content&lt;/a&gt;&lt;/p&gt;&lt;div id= "Content" &gt; &lt;h2&gt;main &gt;&lt;/div&gt;&lt;div id= "Sidebar-left" &gt; &lt;h2&gt;a left Sidebar&lt;/h2&gt;&lt;/div&gt;&lt;div id= " Sidebar-right "&gt; &lt;h2&gt;a right sidebar&lt;/h2&gt;&lt;/div&gt;

Here is the default main style sheet, where we want to hide the link navigation section (SIDEBAR-NAV), because the default style applies to a device screen that is large enough to show everything including two sidebar.

1234567891011121314151617#content{width:54% float:left; margin-right:3%; #sidebar-left{width:20%; Float:left margin-right:3%; #sidebar-right{width:20% Float:left; Sidebar-nav{display:none;

The following is a stylesheet code for a small screen mobile device. Now, we're going to hide the two sidebar and show Sidebar-nav. With JavaScript, the corresponding sidebar can be restored when the user clicks on the link in the Sidebar-nav. Of course, there are many ways to trigger recovery displays, that is, you can change the display property value of the sidebar by using JS, or you can add additional layout styles to it.

123