UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 837 June 12, 2012

A Primer on Responsive Design

:
From Content to Development

The concept of responsive design—the practice of creating digital experiences that adapt to seamlessly deliver content suited to the device context of the user’s operating system, screen size, or orientation—has been around for quite some time. For a variety of reasons, more companies are now giving responsive design serious consideration. The implications of moving to a responsive approach of creating adaptable designs can seem overwhelming, but the benefits can be significant. For example, one Siteworx customer went from less than three percent mobile page views to over 10% by making their website more mobile-friendly (not even optimized).

When to Consider Responsive Design

It’s important to understand how consumption of online content is used and what’s really happening in a responsively designed site. Users are consuming more content on mobile devices than ever before, and that consumption will only continue to grow. According to IDC, mobile web browsing will soon eclipse desktop browsing in the U.S. and worldwide. This consumption of mobile content isn’t just happening on the go; 93% of people are now using their mobile devices to browse the Web from their homes, according to a study from Google.

Global Internet Device Sales

Designing for mobile devices isn’t a new concept either; brands have been investing in mobile applications for years. But native apps aren’t the only way to take advantage of native device features. Geo-location, notification (sound & vibration), accelerometer, and other app-like capabilities can be achieved through a mobile web interface. With a responsive design approach, web content can be adapted to any device thanks to CSS media queries and the fluid application of grids and images.

What Happens Behind the Scenes

The main development methodology behind responsive design is the use of media query functionality in CSS3. Media queries target not only certain device types (e.g., Android vs. iPhone), but actually inspect the physical characteristics of the device that renders the page. For example, the code below “asks” the device if its max horizontal resolution is equal to 480px:

 <link rel="stylesheet" type="text/css", media="screen and 
(max-device-width: 480px)", href="iphone.css" />

If it is 480px, the device will load iphone.css. If not, the link is ignored. You can also include media queries in CSS as part of an @media rule:

@media screen and (max-device-width: 480px) {
body {
background: red;
}
}

The above code will make the background red if the device has a maximum horizontal resolution equal to 480px.

Using these media queries, developers can enforce certain style rules based on pre-determined breakpoints (mobile/tablet/desktop screen sizes). Developers can also use non fixed-sized fonts like em measurements or percentages instead of using pixel sizes. This allows the fonts to be flexible and base their size on the screen resolution of the device.

What Does Responsive Design Mean for Your Content Strategy?

Responsive design may sound like a “nice-to-have,” but with mobile devices evolving almost on a daily basis (e.g., the new iPad’s improved screen resolution) creating custom designs for each device (the traditional approach to designing for mobile devices) could end up being more work and more expensive. As next-generation versions of each device emerge, you’re going to have to create new designs for those devices while maintaining support for the legacy versions. Otherwise your digital assets could quickly become obsolete.

A responsive website—one site, one content base, and one code-base—can adapt to new screen sizes or devices as new products come online.

It’s important to note that, contrary to popular belief, a responsive design approach does not involve putting all of your content in front of the reader. Responsive design is about putting the right content in users’ hands according to the context of their interaction. This requires a content strategy that guides how you will deliver only what is absolutely necessary (whether it’s content or functions) at the appropriate points in the user’s journey based on the device. This isn’t just a technology change; it’s also a change in the way you plan and design experiences. It flips the paradigm of traditional web design on its head: instead of building a web framework and fitting content to it, content comes first.

Five Tips for Adopting Responsive Design

Creating a responsive website isn’t about starting from scratch and rebuilding your digital presence. It’s a case of adhering to a streamlined effort, both in your content strategy and in how you deploy the content. At Siteworx, we often advise organizations to adopt a small-scale approach, prioritizing pages (sometimes starting with just the home page) and building out from there. Prioritizing the content on each page allows the organization to determine what content is essential for a given device context. For many websites, only about 10% of a page is essential content; putting that essential content onto mobile is key for mobile visitors.

Building a responsive website involves all levels of digital design, from the front end to the back end. Ultimately, responsive design is driven by content and the imperative of creating a better experience for users. As a team prepares to build and execute a responsive website, here are some tips to remember:

  1. Plan for a change management phase and gain stakeholder buy-in. Responsive design is a little different from the way people are used to approaching digital projects. It’s important to plan for responsive design at the very beginning of the design process, not just at the implementation phase. By socializing this new paradigm in advance, you’ll more easily open doors to operational and cultural buy-in, while establishing a framework for managing change.
  2. Start with the smallest device, since this represents the smallest environment that you’ll design for. As your content strategy evolves, you can creatively scale your efforts.
  3. Focus on key-content. Use metrics to help understand how content is being consumed, by whom, and why, as well as what content is missing. For example, if users are coming to your e-commerce website on their mobile devices to access order histories or track shipments, can you provide that content in a way that is readable? Even simple log-in screens can be hard to navigate on websites that haven’t been optimized for any mobile device.
  4. Communication between front-end and back-end development. Responsive design deployments often center on front-end development and tools such as CSS, HTML5, and JavaScript. However, responsive design is a large undertaking and it’s critical to understand how the back end will behave as the presentation layer is manipulated. For example, what happens when you have media queries for larger viewports or multi-column views? Siteworx is currently exploring the use of client-side tools, such as Ajax, to inject content depending on the viewports required.
  5. Work in an agile environment where you are able to prototype and test. Agile includes everyone on your team. For example, at Siteworx our responsive design team includes content strategists, visual designers, UX designers, and front-end developers who work collaboratively throughout the design process.

The Bottom Line

Responsive design introduces complexity and can therefore take longer than traditional design. But with a content-centric approach, proper planning, and the ability to test and measure, a responsive approach can help brands significantly reduce their costs and future-proof their digital investments.

ABOUT THE AUTHOR(S)

User Profile

Kevin Stakem is an accomplished software systems architect and development manager of projects ranging from custom applications to Enterprise Web Content Management systems. His experience spans 17 years of application and website development which has centered on Internet and World Wide Web products and websites. Kevin’s diverse technical background ranges from Commercial Off-The-Shelf ("COTS") software products to Enterprise E-Commerce solutions and Enterprise Content Management systems.

User Profile

 

As the Principal Content Strategist at Siteworx, Lindy is responsible for articulating, guiding, and overseeing the various content services that we deliver, including content audits and strategy sessions, migration planning, taxonomy development, content definition, modeling, and creation. She has over 15 years of experience defining, creating, and managing engaging digital experiences that resonate with required audiences and drive conversion, helping to meet business and user goals. Lindy has worked on a broad range of projects including enterprise-level websites, intranets, e-commerce sites, experiential microsites, online communities, mobile sites and applications, and email and social media campaigns, across a number of verticals, including retail, telecommunications,  consulting, healthcare, banking, insurance, pharma, and food.

 

User Profile

Matt Holland is an adept Web developer with experience across a wide range of software, operating systems and development languages. He is especially well suited for fast-paced environments that require the ability to effectively interface with multiple departments and stakeholders. Matt is currently the lead front-end developer for Siteworx and manages front-end code and quality for large, scalable CMS driven websites.

Add new comment

Comments

49
50

Hi,

Sorry for the pedantry but it's been a rallying call for years that web site structure should be designed around content not the other way around. Which kinda shoots down this idea that..."It flips the paradigm of traditional web design on its head: instead of building a web framework and fitting content to it, content comes first" It's actually a natural consequence of business leaders finally getting what we've been telling them for a very long time.

Good article for those that still haven't got it yet though! :-)

54
53

LOL thanks Ted for ending the suspense for me... I knew that comment was going to come eventually ;-) We would love to have a responsive site, and we are certainly aware that we violate many of the UX principles discussed in our articles, this one particularly. But as is so often the case in the real world, our best intentions are often undermined by the business reality of simply having no money. Being able to redesign the site from the ground up to be responsive and using a mobile-first approach is a luxury we can't afford. We put almost all of our attention and money into providing good articles and resources, and hopefully we'll find ways to stop losing money and possibly begin to make this site a monument to good UX. In the meantime, thanks for your patience and your support!

50
52

I'll be the first jackass to point out that neither your site nor your article are Responsive. Practice what you preach.

Aside from that, great article! Very helpful.

48
56

Nice round up on the entire process guys (and gal). I'll be putting this into this weeks responsivedesignweekly.com