Using Responsive Design for a Seamless Mobile User Experience

By Denny Royal

December 15, 2015

The how and why of responsive design, in plain language.

As people access the Internet from a growing list of devices, variations in the way websites look and function are quickly increasing. It’s no surprise that responsive design, which allows you to create one website that works well on all screen sizes, is in high demand right now. A responsive site accommodates mobile screens, tablets, desktop computers and countless in-between devices that haven’t even been invented yet. Functionally, responsive sites use CSS3 @media queries and flexible grids that swap formats and styles to fit the screen’s context. The goal behind responsive web design is to future-proof for new devices and screen sizes that come to market.

While there are many benefits to going responsive, there are also limitations and costs to consider. The decision to make a responsive website will affect the entire process of a web design project, so it’s important to decide early on whether you want to go responsive. Having a good understanding of responsive design will help you determine if it’s the right approach for your website.

Responsive web design isn’t just a buzzword anymore. It’s been around for a few years and is officially endorsed by Google as the way to “Go Mobile.” With website access on mobile devices doubling each year, it’s important to consider your mobile experience for users and optimize for this type of use.

Why to go responsive

In addition to Google’s encouragement, there are plenty of reasons to go responsive. A single codebase makes maintenance easy and centralized so you don’t have to manage multiple sites and applications on different platforms. The consistency of content and code across a single site also improves search engine optimization (SEO) ranking and brings with it a single URL structure. The single URL boosts SEO and makes tracking web analytics easier. One of the biggest benefits of responsive design is simplified social sharing and a seamless experience across devices. If someone on a desktop shares a link to a mobile device, the site will instantly fit to that device without redirecting to a mobile application or home page.

Responsive web design may sound like the solution to everything, but it does have some limitations. The goal of responsive design is to create a seamless experience from mobile to desktop while optimizing the layout for the screen, but compromise is inevitable since users’ goals can vary widely in different contexts. The mobile user may have different goals than the desktop user, but responsive design will give them both a similar experience.

What to consider before going responsive

With the experience limitations come a few design limitations and a more rigorous planning process. The effort that goes into information architecture, wireframes and visual branding is increased when planning for multiple sizes and screens. It’s considered best practice to wireframe for three different levels of small, medium, and large screen sizes. In visual design this means creating all the components for large and small screen sizes as well as any one-off page layouts. Designers then work with developers to determine where screen sizes will break into different formats and plan for the in-between states. This equates to less time in Photoshop and more time in the browser designing in parallel with development. It’s important for designers now to have an understanding of how responsive design functions, especially since it’s continuously evolving. It’s best to involve a developer from the start of any project to prevent rework and show in-progress concepts as the design develops.

Responsive design is still developing and comes with its own rules and best practices to follow. As of now, testing across all common browsers and operating systems is far more involved for responsive design. Supporting older browsers like Internet Explorer can get tricky since advanced functionality will only display on browsers that are able to support it. This means that the same website will look drastically different in Internet Explorer 7 than it will in a modern version of the Safari browser. Older browsers don’t have the same capabilities of the newest browsers, and the experience will be adjusted to deliver the basic content without the advanced design and functionality when necessary. Of course, this will likely will continue to change and improve as the web advances.

Where to start

It’s best to plan for a responsive web design from the beginning of a project for content, design and function. This means that it’s generally not a good idea to retrofit an existing website with responsive design. Code refactoring usually runs into surprises—things may take longer than estimated and trade-offs will have to be made with functionality and existing layout. Since most sites that “only want to add responsive” will need to be rebuilt from the ground up due to code restructuring, it’s best to simply start from the beginning and consider it an opportunity to redesign.

A good rule of thumb is to plan for “Mobile First.” Thinking of the mobile experience first forces us to only keep what matters in websites. Starting small forces us to prioritize user tasks and content and allows for us to progressively enhance the experience as the screen size increases. Azul Seven’s consulting service typically recommends a site audit and code review to help determine what it might take to get your site ready for a responsive design. Starting with a solid content strategy, especially within the constraints of mobile, will set the stage for good design. The content of your website is, after all, why people are visiting.

Want to learn more about design for innovation or biomimicry?

Related Articles

Beginner’s Guide to Design Thinking Bootcamp: Four Surprising Takeaways from a Newbie

UX Design: What’s Empathy Got to Do With It?

Biomimicry 101: An Interview with Denny Royal, Principal and Head of Design and Biomimicry at Azul Seven

Want to get in touch?