Getting started with responsive web design

If you enjoy complex problems, now is an excellent time to be a web developer or designer. One of the biggest challenges facing developers and designers alike is the proliferation of devices that can connect to websites. How do we make our sites look good on all these devices?

Just a few short years ago, users expected the full web experience on their desktops or laptops and a bare-bones experience on their mobile phones. Nowadays, they expect the full web experience on their phones as well as their tablets, mobile gaming devices, televisions, and an ever-growing array of Internet-connected devices.

The classic solution to this problem was to create a mobile version of your site, complete with its own design and layout specifically geared toward the smaller screens of devices such as iPhone and Android smartphones. This solution works well in a world where there are a limited number of device types with similar screen sizes and resolutions. However, that is not what the world is like today. Making your site work for even a few popular devices might require multiple mobile versions of your site. This can quickly become both a development and maintenance nightmare.

The concept of responsive web design (RWD) is intended to solve this problem with a single layout. In this article, I explain what responsive web design is and how a new tool from Adobe will make responsive sites easier to create.

The term responsive web design was originally coined only a couple of years ago by Ethan Marcotte in an article on A List Apart. Since then, the concept has gained so much popularity that there are weekly newsletters that gather content devoted just to RWD topics, and popular sites such as Mashable have declared 2013 the year of responsive web design.

In a world where even two screens of the same physical dimensions can have differing pixel densities, static measurements have become unreliable. Therefore, RWD uses a combination of fluid grids and CSS media queries to create designs that adjust to all the available screen sizes while still keeping the site both attractive and usable. This differs from the more traditional method of relying on fixed positions and static pixel-based or measurement-based element sizes. Fluid sizing of elements can only go so far, so media queries allow for dynamic placement of elements on the page. To illustrate these points, I have some examples.

I'll preface these examples by noting that I have kept them intentionally simple to illustrate some principles of RWD, but these changes alone will not make your design responsive.

As mentioned earlier, RWD relies on the concept of fluid elements that enable content to adjust according to screen size. For instance, your classic header div might have a CSS class like this:

If the user's screen only accommodates fewer than 960 pixels, the user would need to scroll sideways to view the entire content. For a design context that is 1,200 pixels wide, the RWD might have a header class that looks more like this:

For sites with RWD, the flexible sizes apply not only to layout elements like divs but also to things like images. In addition, font sizes can be flexible as well — you can use em units instead of fixed pixel sizes. As you may know, an em is a proportional-based unit that enables you to more easily scale the size of text on your page up and down depending on the user's screen size. For example, my classic header layout example might use an H1 tag that has a font size defined like this:

In the responsive design, assuming the layout has a base body font size of 12 pixels, I might change this class definition as follows:

This new definition gives me the freedom to easily adjust all my font sizes relatively when targeting different screen sizes. To target these different screen sizes, RWD relies on the CSS media query. Using the font size example, imagine that I want to target a base font size of 18 pixels on a screen size of 800 pixels wide or more:

I don't need to redefine the H1 class within the media query because it is proportional and will adjust accordingly. Also, a best practice is to set even your base font size in percentages, wherein 100% is equal to the browser's default font size.

Media queries do more than just define different font sizes. Often, you will actually move entire sections of the page depending on the available screen real estate. For example, using a three-column layout might look good on a laptop screen, but it won't work on a small device like a smartphone. In this case, you might want to move one or more columns or elements on the page to adjust to the available space, targeting either minimum or maximum widths using media queries. Some portions of the site might even be hidden on smaller screens, although this practice is the subject of some debate.

Other things to consider are the placement and size of navigation controls when targeting touch-based devices such as tablets and phones. For instance, you might want to enable swipe gestures on touch-enabled devices. Some pundits, such as Luke Wroblewski, have argued that perhaps even the placement of navigation on mobile versions needs to be reconsidered given how people tend to hold their devices.

As you can see, responsive web design can be complex, in large part because of the enormity of the problems it is attempting to solve. In response to this, an ever-growing list of responsive frameworks and starter templates are being created to help make the process a little easier.

Initializr is a good site for generating boilerplate starter templates when you begin working on new sites. It also offers a responsive template option that is designed to offer a few standard views that appropriately adjust the contents of the page to common screen widths. These templates are intended as a starting point for you to begin creating your own layout and adjusting the media queries appropriately based on your site's content requirements.

Responsive frameworks offer a more comprehensive solution than the boilerplate templates. One of the most popular frameworks that supports responsive design is Bootstrap. Bootstrap not only includes fluid layouts, predefined CSS media queries, and classes to support a wide range of screen sizes, but it also includes several utility classes that can hide and show elements on the page depending on the type of device.

Other popular frameworks include Foundation and Skeleton, and new frameworks seem to pop up every day. One useful resource to check out if you are researching responsive CSS frameworks is the Responsive CSS Framework Comparison by Vermillion Design. The chart breaks down features and characteristics of the frameworks I discuss in this article to help you choose the one that best suits the needs of your site.

Although frameworks can help ease the complexity of building responsive sites, designers and developers ultimately require tooling support to fit these techniques more easily into their workflow. Some support exists within tools like Adobe Dreamweaver and there are some web-based tools that support RWD as well. With 2013 being dubbed "The Year of Responsive Web Design," we can expect more tooling to become available. In fact, Adobe recently unveiled Edge Reflow, a tool for designing your responsive site using standards-based CSS.

Part of Adobe Edge Tools & Services, Edge Reflow will enable you to design responsive sites from the ground up. It supports fluid layouts based on a user-defined number of grid columns. It also makes it easy to visually create and modify your design based upon any arbitrary breakpoints, or media-queries defined within the CSS. In the article, Looking beyond common media query breakpoints, Drew Thomas recommends that you set your media-query breakpoints based on your content rather than predefined screen sizes.

To get a preview of Edge Reflow, check out the sneak peek video by Adobe Senior Product Manager Jacob Surber. If you would like to be notified when the Edge Reflow preview release becomes available, visit the Edge Reflow product page and click Notify Me.

Clearly, I've only just scratched the surface of getting started with responsive web design. If you'd like more information, I recommend checking out the following resources on Adobe.com:

• Techniques in responsive web design by Chris Converse
• Responsive web design and web analytics by Carl Sandquist
• Building fluid grid layouts in Dreamweaver CS6 by Tommi West
• Overview of Edge Tools & Services