Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
“Day by day, the number of devices, platforms and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”
– Jeffrey Veen
2012 has been a very unusual year in the PC market. For the first time since 2001, PC sales are projected to be lower than they were in the previous year.
Tablet sales are expected to exceed 100 million this year. Their sales numbers may top notebooks next year. Smartphones, of course, are also a hot commodity — according to Nielsen, the majority of U.S. mobile subscribers now own smartphones, not feature phones. Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too.
For those who create websites and services, all this leads to a singular conclusion: A million screens have bloomed, and they need to build for all of them. Building apps may seem like the obvious solution. There’s no doubt that having mobile apps for the major platforms is better than having no apps at all, and yet how can they build for every app store? Last month, for instance, Mashable was accessed on more than 2,500 different devices. They could certainly build apps to reach a good number of those platforms, but probably not all of them. When it comes to news sites like Mashable, there’s even more data suggesting that the mobile web is key. According to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web than via an app. Although media companies should certainly offer apps, it’s clear that having a great mobile website should be the priority
While mobile devices are changing the display landscape, with the appearance of more and more small screens, displays are also getting larger and larger. Instead of responding to today’s needs for a mobile version (often specific to a single mobile device), along with a particular desktop Web version, the idea is to approach the issue the other way around: use a responsive web design that adapt to almost any screen.
In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. The solution, of course, is to make a flexible, fluid and adaptive web site with a responsive web design that works equally well on every device addressing the ever-changing landscape of devices, browsers, screen sizes and orientations.
Responsive web design is a way of making a single website that works effectively on both desktop browsers and the myriad of mobile devices on the market. Responsive architecture gives the best quality browsing experience – whether on a smartphone, tablet, netbook or e-reader, and regardless of the operating system. People who browse while on-the-go have very different needs than those sitting at a desk. Responsive web sites re-organize themselves automatically according to the device viewing them, so that the same website provides a great experience everywhere. Desktops get a full-blown interface with videos, large images and animations. Smartphones get a simplified website that runs fast without the bells and whistles. Tablets and netbooks get something in between.
Delivering an App-Like Experience.
Mobile environments require simpler navigation, focused content and fast page loads. If a website has a responsive design, the user does not have to manipulate the site using “pinch and zoom,” and the flow of content is more appropriate for a smaller screen. The site may reduce the amount of content presented to the mobile visitor, so it has less clutter and is easier to use
The Concept Of Responsive Web Design
Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it:
“Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”
Core Concepts in Responsive Web Designing
Three key technical features are the heart of responsive Web design:
1. Media queries and media query listeners
2. A flexible grid-based layout that uses relative sizing
3. Flexible images and media, through dynamic resizing or CSS
Truly responsive Web design requires all three features to be implemented. The key point is adapting to the user’s needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order. Don’t assume the user won’t need access to all the site information because she’s on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive web design. While mobile devices are changing the display landscape, with the appearance of more and more small screens, don’t forget what’s happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn’t stop designers from being innovative on either.
Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:
That was it! Luckily, the W3C improved media queriesin CSS3, moving them a big step forward. Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more. There are three ways to implement media queries:
- Use the @import rule to import style rules from other style sheets:
- Put media queries directly in the style sheet, as shown in Figure 1. This is the most common approach.
Figure 1 Implementing Media Queries Directly in a Style Sheet
- Include a query in a linked style sheet’s media attribute:
Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten. The following images present an example of a responsive Web design approach that uses media queries.Figure 2 and Figure 3 both show a desktop using Internet Explorer 9 in two different resolutions. Figure 4 shows the same responsive site on a Windows Phone, also with Internet Explorer 9. Figure 2 Navigation Appears on the Left Figure 3 In an 800×600 Resized Window, Navigation Switches to the Top
Figure 4 The Same Site on a Windows Phone
Media Query Listeners
Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered. Today, Firefox and the Internet Explorer 10 Platform Preview implement media query listeners; you can see the demo “CSS3 Media Queries & Media Query Listeners” on the IE Test Drive.
A Word about the Viewport
When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen. So do you think there isn’t a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:
Other viewport settings include maximum-zoom and initial-scale.
A flexible grid-based layout is one of the cornerstones of responsive design. The term “grid” is used rather freely and doesn’t imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various Web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive Web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing. By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:
target ÷ context = result
Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:
24 ÷ 16 = 1.5
This results in the following CSS style:
Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for “H1 a” is: 12 ÷ 24 = 0.5 And the CSS style is:
You can also use percentages. The calculation algorithm is the same; you just end up with percentages. Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System or Fluid 960 Grid System (a fluid version of 960 Grid System). Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.
CSS3 Grid Layout
The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an“Editor’s Draft.” It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content. Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications. How does the Grid work? You start by setting the display block to ‘grid’. (You need to use CSS vendor prefixes because this is not yet a CSS3 recommendation. Right now, only Internet Explorer 10 Platform Preview supports the spec, so you’ll see the CSS vendor prefix -ms- used here.) Let’s look at three examples of how you can set up different views depending on screen size. Media queries are used to apply different grid styles depending on the screen width. In the first example, the HTML for defining the content consists of one header and three different blocks of text (see Figure 6).
Figure 6 Defining Content for the Grid You start by laying out the blocks of content under each other so that the content fits smartphones (see Figure 7). You can add background colors as shown in Figure 8 to make it clearer that you’re working with grid items.
Figure 7 Laying Out Blocks of Content
Figure 8 Blocks of Content with Background Colors
In the second example, a media query applies styles defined for screen sizes greater than 481 pixels—anything wider than a typical smartphone. You can use the Grid to define two columns and move the blocks into desired positions (see Figure 9). The results are shown in Figure 10.
Figure 9 Defining a New Layout for a Larger Screen Figure 10 A New Layout with Two Adjacent Columns
The third grid sample displays on screen widths greater than 1220 pixels. You define a grid with a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10-pixel columns in between (see Figure 11). The results are shown in Figure 12.
Figure 11 Defining a Layout for Wider Screens Figure 12 Three Side-by-Side Columns with a Spanning Header
The Grid specification is a welcome addition for implementing responsive web designs. Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Web sites. Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change. The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.
Flexible Images and Media
The final aspect of responsive Web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property. Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.
What about older browsers that don’t support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.
Responsive Web Design Features
By essentially giving a custom solution for each mobile platform, responsive website design makes for a better user experience on a wider range of devices.
Responsive Web Design Testing Tool
This tool has been built to help with testing responsive websites while designing. Enter a website’s URL into the address bar at the top of the page in the following site to test a specific page.
Here’s a video on responsive web design
Sources and references;