Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› A Primer on Responsive Design

A Primer on Responsive Design

by Matt Holland, Kevin Stakem, Lindy Roux
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Understanding how responsive design works and when to use it is the first step in getting the right content to users and reducing long-term site maintenance costs.

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.

post authorMatt Holland

Matt Holland,

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.

post authorKevin Stakem

Kevin Stakem, 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. Kevin also excels at recruiting and retaining talent, as demonstrated by the successful teams of forward-thinking development staff he has assembled. In his current role as Technical Director, Kevin manages teams of development resources with expertise across a multitude of web-centric technologies. The primary focus of Kevin's group is on content management solutions and technology integration. He is continually expanding these areas of expertise to offer a broad range of strategy, consulting, development, and integration services. Kevin also brings a wealth of hands-on experience in designing, developing, and integrating technology solutions, and is instrumental in navigating technical hurdles, communicating technical expectations, and managing client communications on every project he is involved in. His abilities to understand a client’s business goals and help map those into technical solutions are keys to his project successes.

post authorLindy Roux

Lindy Roux,     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.   When not busy facilitating strategy or brainstorming sessions, Lindy can be found evangelizing content strategy and talking about our content-centric approach to user experience. Recent speaking engagements include a workshop on Responsive Design at User Focus 2012; a panel on mobile content strategy at Content Strategy Applied 2012; and a workshop on multi-channel content strategy at a Content Mavens Meetup.  

Tweet
Share
Post
Share
Email
Print

Related Articles

Designers should not be mere decorators, but understand language and microcopy, which is a crucial design skill, now more than ever.

Article by David Hall
The Essential Guide to Microcopy and Becoming a More Literate Designer
  • The article emphasizes the importance of microcopy in design, highlighting its role in enhancing user experiences and providing guidelines for crafting effective microcopy throughout the design process.
Share:The Essential Guide to Microcopy and Becoming a More Literate Designer
10 min read

Out-of-the-box design process by Gett mobile team.

Article by Moishy Neulander
How Insight from Netflix Profiles Doubled Our Conversions
  • The article discusses how Gett, a taxi booking platform, leveraged insights from Netflix to implement a profile selection feature, significantly improving user experience and doubling business conversions.
Share:How Insight from Netflix Profiles Doubled Our Conversions
5 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and