As more users turn to smartphones and tablets as their primary web browsing device, our industry needs to reevaluate many of our current web design best practices. There is an emerging methodology for web design, called responsive design, that provides an opportunity to create one site that will scale to the wide variety of devices that provide users with their window to the World Wide Web. This concept was popularized by Ethan Marcotte’s article “Responsive Web Design” on the website A List Apart. Responsive web design may not be suitable for every client, particularly for those who have a separate content strategy for their mobile audience, but it should be a factor in your client’s decision making process that you should be prepared to address.
Simply put, responsive design advocates creating a series of flexible designs that adapt to the target device screen rather than creating separate sites for mobile phones, tablets and traditional laptops and desktops. This eliminates a common scenario in which a user visits a website on their smartphone, but can’t find what they want on the mobile site. Some users will click the "Go to Full Site" button to look for it by pinching and zooming, but many users will just look elsewhere.
Developers can use a CSS "media query" element to determine the maximum screen size of the target device. We can make assumptions based on these values and create designs for specific ranges, such as smartphones, tablets and laptops/desktops. By using flexible layouts and image formats, you can create one scalable design designed to adapt to smartphone devices, another for tablets, and a third for laptops and desktops. Depending on your target audience, you can further refine your designs to offer separate portrait and landscape views for smartphones and for tablets. The end result is one unified site that renders the same content using a layout and navigation that meets the requirements of the user's device. Best of all, the site is designed to be "forward-compatible" so that is can adapt to future devices that weren't available when your site was initially created.
A great example of this concept can be found at About.com or by visiting my agency's own web site, VML.com. If you resize your browser to smaller and smaller widths, you'll see the design change as the browser width crosses the boundary between devices, which is known as the "break point."
Clients will also see lower ongoing maintenance costs. Many companies maintain separate technical platforms and development resources for their mobile, tablet and traditional web properties. Responsive design lets clients consolidate resources and eliminate redundant platforms (and licensing fees) while also providing a better overall user experience.
As mobile phones and tablets become increasingly more ubiquitous, responsive design becomes more a matter of "when" rather than a matter of "if." The question that every digital agency faces now is how to prepare for this significant change in how we think about designing and developing for the web.
If an agency wants to get ahead of the curve, here are a few recommendations that should help:
Make Responsive Design a decision point in every new web project.
While it may not fit every project, it should be discussed. Short-term campaign micro-sites without a big mobile audience aren't a good fit. However, a major site redesign with a life expectancy of 10 years is well suited for this approach.
Review your clients’ analytics data.
We often focus on traffic, but most analytics packages will show you the target browsers hitting your site. Look for trends over the past year to understand the mobile/tablet audience for your site. Growth in this area can help make the case for a responsive design strategy. A client whose audience consists of a large percentage of legacy browsers, such as Internet Explorer 6, should hold off on Responsive Design adoption. It's possible to write code that includes older browsers, but the level of effort can impact your budget and timeline.
Determine how well-suited your current technical vendors are for Responsive Design.
Content management systems offer different levels of support. Some don't provide a lot of control for your front-end architecture, making them challenging to adapt to responsive design. If your vendors don't have clear plans to support responsive design, it might be time to look for alternate vendors.
Give your developers time to get ahead of this issue.
If your technical leads haven't bought or downloaded Ethan Marcotte's book expanding on the topic , now would be a great time to get them a copy. There aren’t universal standards yet, so your development teams need to determine how they plan to support the first responsive project that you sell to a client. While it's difficult to commit resources to research and development, giving your technical leads the chance to build a responsive prototype can prevent a lot of problems on the launch date. You can also find out more about responsive design, breakpoints and the challenges we faced when launching our responsive website in my colleagues and I’s article “The Why and How of Responsive Design.”
Decide if your clients' strategic goals are a good fit for a responsive design strategy.
Some clients may not benefit from the unified content strategy provided by a responsive site. If a client plans to create a unique mobile content strategy, they should postpone plans to adopt responsive design.
Our industry lives in interesting times. HTML5 and responsive design will keep things from getting boring in the digital space in the next five to 10 years. However, change can also provide opportunities. The agencies that truly understand digital will be positioned to thrive in this new environment. Those that don’t, will face additional challenges in an already challenging market.
Image courtesy of Flickr user baldiri.
