Responsive Design 101

Topics: UX, Web Development

Now more than ever, users are expecting sites to deliver across the entire spectrum of experiences. Responsive design offers a way to meet this expectation. In other words, it gives us a way to design and develop experiences that match the ebb and flow of people in real life.

—Jacky Conrad, Creative Director, Axis41

According to Google, more than 90% of people move between devices to accomplish their goals—from laptop to mobile to tablet to desktop and back again. It’s not that surprising of a statistic, considering more than a billion people use mobile devices to access the web. And it’s only just begun. Mobile web adoption is growing eight times faster than web adoption in the 1990s and early 2000s.

So how can a site effectively address user needs across all those screen sizes, not to mention their myriad unique requirements? Increasingly, the answer has been responsive design. And not just because of its scalability. Its potential benefits are many—a consistent experience for users, a single code base for developers, and better ROI for businesses, to name a few.

But it’s certainly not a cure-all. Sometimes a standalone mobile site makes more sense, with everything from testing costs to IT considerations to page performance playing a role in that decision. Furthermore, there are occasions when moving beyond a static desktop site isn’t worth the extra time and money. But those occasions are increasingly rare. Even heavy-duty B2B sites are seeing double-digit increases in mobile visitors.

responsive101-example-one

Four Approaches to Creating a Multi-Screen Digital Experience

THE BASICS

S to XL: A breakpoint for every occasion.

How does responsive design deliver scalability? First off, it’s not merely design for different screen resolutions. There are far too many variables and inconsistencies for that. Instead, it relies on what are called “breakpoints.” These breakpoints are places on the continuum where, based on factors such as readability and usability, the experience shifts. This shift can include number of columns, content arrangement, hierarchy, and more.

responsive101-example-two

Fluid grids: column expansion and contraction.

However, responsive design is far more than replacing screen resolutions with breakpoints. It’s about elasticity to meet any size, device, or environment. “Medium,” for example, might mean a large smartphone in landscape, a tablet in portrait, or even desktop with a scaled-down browser window. That’s where fluid grids come in, with columns that expand and contract according to user requirements.

responsive101-example-three

Navigation: different tools for different sizes and needs.

Content needs and menu functionality changes across devices and sizes, making site navigation one of the toughest challenges for responsive design. It’s also where responsive designs can vary the most. Sometimes the navigation solution is a fairly simple menu resizing and repositioning, other times it can involve everything from content-rich desktop menus shifting to select boxes and hidden shelves for mobile devices.

responsive101-example-one

Desktop Phone

Interactivity: fat fingers, short attention spans, and high expectations.

Responsive design is about more than resizing designs and shifting content. Users interact with mobile devices differently than they do with desktops, and adapting the experience to meet those differences is a key element of responsive design. As much as feasible, responsive design should incorporate functionality to enhance the user experience across all devices, in a variety of scenarios—phone numbers that call with a touch, for example, or tie-ins with geolocation APIs for easy directions.

responsive101-example-one

Desktop Phone

E-mail: responsive design isn’t just for your site.

According to a recent report, 65% of marketing emails were opened on mobile devices. According to another study, 70% users immediately delete emails that don’t render well on a mobile device. From a business perspective, it’s essential that users who have invested in opening an email have an optimal experience—which responsive design helps ensure.

responsive101-example-five

THE PROCESS

Follow the three Ds.

At Axis41, we use a simple process we call the “smart content lifecycle” to create, manage, and deploy your brand story. This cycle certainly applies to responsive design projects. It helps to ensure the site meets well-defined business objectives and user needs, that its design meets those objectives and needs across environments, and that the site is deployed in a way that takes full advantage of responsive design capabilities and performs effectively on any device.

Define: After an in-depth discovery process, we can begin to define what’s absolutely critical for the responsive design project. With clearly defined business objectives, technical requirements, and, most importantly, user needs, we can then define the best approach—starting with deciding whether responsive design right or not (see figure 1.A above). From there, we can define goals and needs across the board—from what users will want across the entire experience to which metrics should be used to measure performance.

Design: This is where responsive design principles become real. It’s not a matter of designing to different pixel sizes, but instead to percentages. Even more broadly, it’s about creating consistent and powerful user experiences that perform everywhere and always. The only way to achieve this is by having a perfect marriage between design and technology. It requires a deep knowledge across the many components of responsive design—from server-side components to unobtrusive JavaScript, media queries to flexible imagery—and how all of these components contribute to the design.

Deploy: Now is time to make the most the responsive environment. It must perform to expectations, of course, with testing across all kinds of devices and situations. Then, with real user data in hand, it’s critical to refine and alter. To be truly effective over time, it needs to be responsive to evolving user needs every bit as much as to new screen sizes.

SOME READING PRINCIPLES

  • Always keep your user in mind. Responsive design means nothing if it isn’t responding to user needs. “User-centricity” might be a buzzword, but for a very sound reason.
  • Have a laser focus on your objectives. It’s easy to get distracted by shiny objects and cool features in responsive design. That’s why it’s critical to stick to predetermined objectives.
  • Develop with an “all-things first” mindset. It’s important to design and develop with an agnostic perspective, with an eye toward everything from undersized mobile devices to extra-large monitors. Sometimes there’s a focus on one aspect of the experience. But if that focus is to the exclusion of all others, responsive design is likely not the right approach.
  • Leverage what’s available to the fullest extent. Mobile, for example, is particularly good at GPS, while desktops offer visual detail. To make responsive design truly effective, take advantage of a particular environment’s strengths.
  • Don’t lose key functionality or access to content when moving to a smaller screen. If you were moving from a large house into a small apartment, you wouldn’t want to get rid of your dining table altogether. Instead, you use a dining table that’s more space efficient, maybe it has folding sides so you can make it bigger when you need it, but fold it when you don’t to maximize space. Same idea applies in responsive design.

Discover how Axis41 assists with responsive design and strategy today.