Responsive web design is a technique that uses CSS to adapt a page’s layout based on screen size. It is just one strategy we are employing to cope with the mind-blowing variety of screen sizes.
Of course, responsive design is a big, fat, gnarly topic that could fill (and has filled) whole books. What I’m going to do here is introduce you to the basic ingredients of a responsive site so you get a feel for building one.
A simple example
In this section, we’ll work together on making the Jenware page responsive. The example below shows how the same Jenware HTML page will look on a narrow screen, a tablet screen in portrait and landscape orientations, and a large desktop monitor by the time we are finished.
On the smartphone-sized screen, the page has a one-column layout and very narrow side margins. On tablets in portrait mode, there is room for slightly more generous margins and wrapped text. At 1,024 pixels wide, there is room for a second column, and in very wide browser windows, the width of the content is limited with the max-width property to make sure the line lengths don’t get out of control. These are very modest adjustments compared to professionally designed responsive sites, but they should be enough to show you how it works.
Responsive design as first proposed by Mr. Marcotte has three core components:
- A fluid layout
- Flexible images
- CSS media queries
Setting the viewport
To fit standard websites onto small screens, mobile browsers render the page on a canvas called the viewport and then shrink that viewport down to fit the width of the screen (device width). For example, on iPhones, Mobile Safari sets the viewport width to 980 pixels, so a web page is rendered as though it were on a desktop browser window set to 980 pixels wide. But that rendering gets shrunk down to 320 pixels wide when the iPhone is in portrait orientation, cramming a lot of information into a tiny space.
Mobile Safari introduced the viewport meta tag that allows developers to control the size of that initial viewport. Soon other mobile browsers followed suit, and this is an essential first step to a responsive design. Simply add the following meta element to the head of the HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1">
This line tells the browser to set the width of the viewport equal to the width of the device screen (width=device-width), whatever that happens to be. The initial-scale sets the zoom level to 1 (100%).
Adaptive Layout
As an alternative approach—especially when there is no time or budget for a true responsive site redesign—some designers choose to create an adaptive layout instead.
Adaptive layouts feature two or three different fixed layout designs that target the most common device breakpoints. They may be quicker and less disruptive to produce, but the advantages of fluid layouts are lost. Some consider adaptive layouts to be more of a stopgap solution than a long-term mobile design strategy.
Sources for Further Reading
No comments yet (leave a comment)