Ten things you need to know about responsive design

Responsive design is all the rage these days. Almost everywhere you look someone is talking (or writing) about it.

So what makes a web design scheme responsive? Responsive design is an approach to web design that adjusts to the user, from varying browser sizes to changes in device. The concept has been around for a few years, but 2013 is the year responsive design is really expected to have a huge affect as it is implemented on an exponentially growing number of sites.

Responsive websites work by using media queries to detect the device or the resolution of the device being used to access them. Once this determination has been made, a combination of flexible images, type, and grids adjust to fit the screen on which the site is being viewed. If you want to see responsive design in action, adjust the size of your browser while viewing a site that has implemented responsive design. Mashable is a great example. The adjustments will enable you to see just what the designers had in mind when creating it and how different each stop can be.

Responsive design is popular now because of the number of tablets and smartphones in the market. The number of users accessing the Internet via a device other than a desktop computer is rapidly increasing, making it necessary for developers to think about all the different ways their information is being viewed.

So what do you need to know about responsive design?  This article covers ten important concepts.

Our collective use of a variety of devices is unlikely to change.

The variety of computer monitor shapes and sizes continues to expand.

These factors alone should be reason enough to understand why responsive design is important and likely to become the standard practice for developers. Every website needs to work well from device to device. More and more users have come to expect a consistent experience regardless of the device they use to access a website.  In fact, the number of sites using responsive techniques has grown steadily since 2010, when responsive design was really brought to the forefront by A List Apart.

Responsive techniques, while sometimes time-consuming in the planning phases, can help developers in the long run. With a responsive plan, there is no need for multiple websites and redirects to sites that are designed just for mobile or tablets. This can make updates much simpler, because one update will address all devices.

Responsive design also fosters consistency. Regardless of size, visuals are consistent. This branding bonus can help sites maintain a sense of identity.

While responsive design is a great technique for rendering content on mobile devices, it is not mobile design. Responsive design is "whole web design."


Yes, responsive techniques should work on mobile devices. It can even be argued that the design process may even start with mobile, but it is so much more than that. The best responsive sites can be viewed as intended on desktops at a variety of resolutions, from the common 1024x768 pixels to 800x600, 1366x768, and 1920x1080 displays. Those same sites also look amazing on tablets, with both standard and retina displays, and smartphones.

If a developer considers responsiveness only in relation to mobile, there is a whole web experience opportunity that has been missed. Mobile, though, is a good starting point for the whole responsive design conversation. It is a common practice to start with a mobile outline and grow the design to other sizes when planning a responsive site. Many designers and developers find it easier and less time-consuming to expand visuals than to shrink them.

Flexibility is the lynchpin of responsive design. The grid is flexible; the type is flexible; the photos are flexible. If you neglect any one of these factors, your site design is in trouble.

Moreover, when you think about flexibility, consider design flexibility. Sometimes the best options for different browser sizes include changes to, additions to, or subtractions from your original concept. Images and content may be hidden to create a better experience for smaller devices. Or you may opt for a simpler overall design scheme so that the site has a more uniform look across devices.

Remember to be just as flexible in your thinking during the development and design process as you expect the overall result to be.

Designing with a grid is not a new concept; it has been done since the advent of publishing. The concept of a fluid grid, though, is relatively new.

The best responsive projects include a fluid grid. The site can scale proportionately based on percentages or be built based on a number of grid stops. Grids that use these stops are the most common and work beautifully when planned well.

Consider the most common widths that users will use when viewing a site as a starting point. Most responsive grids include versions for at least three different browser widths–768 pixels or more, 480 to 768 pixels, and 320 to 480 pixels–as well as versions for tablets and mobile devices. Some developers opt to include additional browser widths for greater than 1000 pixels to explicitly support wide-screen monitors. While each of these stops will render a website at the best-possible resolution, a fluid background will fill any leftover space on the screen. 

Another option that is gaining popularity is the use of fluid breakpoints, which are dictated by the overall design rather than predetermined stops. This more fluid style can help keep up with the growing number of "common breakpoints" used to address the wide variety devices on the market.

There are more than a dozen options out there when it comes to great, user-friendly grid choices. Twitter's Bootstrap and ZURB's Foundation are two excellent responsive options that really showcase what a grid can do.

A poor image will not look good at any size. The quality of images is much more important than the number of images. Almost as important as image quality is load time. This is especially important when thinking about mobile users, who typically have more limited bandwidth.

Strike a balance between quality and load time. Make sure to optimize images for the web; avoid loading full size images and scaling them using CSS width and height properties. It is best to crop images before uploading and save every photo at the smallest possible size that maintains visual quality.

When it comes to using images in a responsive layout, there are several options: use a limited number of images, limit images in mobile-sized frameworks, use multiple versions and file sizes, or allow images to hide in mobile environments. Any of these options can work well, although some developers avoid hiding images since users must still load these images even though they are unseen.

Type is not one size fits all. That 24-point Helvetica that renders beautifully on a desktop may be impossible to read on a much slimmer mobile device. Typography should follow the same guidelines as the rest of your responsive design.

The key concept when it comes to responsive typography is line length. The eye can only handle so many letters and breaks with ease. To maintain readability, type should be optimized based on screen width. For websites, 50 to 75 characters per line are considered ideal, but that drops to 35 to 50 characters per line on mobile devices. Select a point size for type based on this guideline to ensure optimum readability.

Consider the fact that blocks of type need to be easy to read vertically as well, sometimes for many scrolls. The space between lines can affect how long a user can read without tiring. Many websites use a line space that is 140 percent of the point size for large blocks of text. For smaller screens, consider adding extra space to aid readability.

Finally, think about the kind of typeface used. Novelty typefaces, dramatic lettering, and letterforms with extravagant serifs can look great on large screens but are difficult to read at smaller sizes. Give these kinds of typefaces plenty of room to breathe, use them as art-style elements, or consider switching to a different typeface. At small sizes the easiest typefaces to read tend to be regular sans serif styles with fairly even strokes.

Responsive design improves search engine optimization. For anyone building a website with branding, sales, or visibility in mind, this benefit alone is enough reason to consider using a responsive design scheme.

Because a responsive web design all lives in one place with one URL, as opposed to multiple pages targeting mobile formats, linking remains simple. Redirects don't take away from the main site and advertising campaigns (such as those using Google AdWords) all point to one location.

Having a single website destination with a standard set of language, metadata, and keywords is also important. There is no worry that updates have been made in one place but not another or that links redirect improperly.

Another advantage is that for analytics and data collection, you do not need to track multiple URLs and redirects in addition to the main site or URL. The single responsive page can collect analytics regardless of the user’s device.

For some, the most intimidating part of responsive design is media queries. There is no need to be intimidated by media queries.

Media queries can help determine the capabilities of different devices and deliver different styles to them via CSS. Media queries expand the role of media attributes and enable site designers to use the same HTML to support multiple layouts based on information collected about the display settings of the user. You can apply the correct styles after determining the screen size or any of a variety of other media features.

When working with media queries and defined breakpoints, consider building targets based on specific pixel-width stops as you might when using a grid. A few common targets include 320, 480, 600, 768, 900, and 1200 pixels.

Another advantage of using media queries (typically based in percentages to make size adjustments) is that they can create an extra level of flexibility, making them more user-friendly on a variety of sizes and devices.

The era of the dropdown menu may be over. Simple navigation is a key feature of many responsively designed websites.

Dropdown menus don't work very well with touch. Navigation must work for users who click or tap. Larger navigation elements are also becoming more popular. Again, touch devices are driving this trend because a minimum size of 44x44 pixels is most comfortable for users when tapping user interface elements on mobile devices.

When designing and thinking about navigation, it helps to think about the smallest sizes first. Design navigational elements to work at the smallest sizes and work up to the largest sizes, remembering that elements for additional navigation can be added for larger sizes.

Hidden swing-style navigation is gaining popularity as well. A full menu opens by clicking or tapping an icon that is usually located at the top of the screen. This option can be great for more expansive navigation menus. For a great example, see Chris Coyier’s CSS-Tricks article titled Convert a Menu to a Dropdown for Small Screens.

The key is to keep the design simple and easy to understand at any size. Users must be able to quickly understand how to use a site for it to be effective.

Responsive design as it exists now is not a perfect solution; it is just part of an evolving process. As technology and user habits change and new devices hit the market, practices for how the web is used and developed will adjust.

Web users are already using a variety of devices to view most websites. Right now there are just too many devices and too many options to create a site that is perfect on every one. Not considering browser sizes, eight of the most popular devices have six different horizontal widths:

• iPhone 4S and iPhone 5 – 640 pixels
• iPad first and second generation – 1024 pixels
• iPad3 – 2048 pixels
• Samsung Galaxy Note – 1280 pixels
• Microsoft Surface – 1366 pixels
• Google Nexus 7 – 2560 pixels

When you make your site responsive, it will be even more intuitive and it will provide a consistent experience regardless of the device, even as new devices are released.

Different devices can still provide very different experiences even without responsive design (clicking versus tapping or zooming versus scaling, for instance).  Even the amount of time spent on a site or the reason for visiting may differ depending on what type of device the user has. Consider how users will actually use a site on varying devices. While it is not a perfect solution yet, responsive design will continue to develop and enable you to move in this direction.

Despite any current limitations in responsive design, it is important to start now. The data indicates that the numbers of users accessing the web on something other than a desktop computer will continue to grow. By implementing a responsive design now, you can position your site to be usable in any environment.

Now it’s time to put it all together and build a responsive website.

Check out the Beginner’s Guide to Responsive Web Design from the Treehouse blog to get a better understanding of why responsive design is important and how it will continue to influence web design more broadly.

Ethan Marcotte first got designers excited about responsive design in 2010. Read his breakthrough article from A List Apart.

If you still need convincing that responsive design is the way to go, see How to Design a Mobile Responsive Website from UX Booth and Getting started with responsive web design from Adobe Inspire Magazine.

UI Design guidelines for Responsive Design by Codrops is an excellent grouping of factors to consider for multiple devices when working in a responsive design framework.