Why I Value Truly Responsive Web Design

In my post about values, I mentioned how determining your values can help you evaluate how you work with companies, teams, and people.

The first on my list of values was that I value a truly responsive web design. But why?

Nate Abele alluded to a bunch of them in his comment on the original post.

What do I mean by truly responsive?

By truly responsive, I mean that the design is fluid at all resolutions and that breakpoints are used to manage the points in which a design breaks.

By truly responsive, I mean that a similar experience is provided for on all devices.

By truly responsive, I mean that similar content and functionality is provided for on all devices.

I believe that a truly responsive experience can be achieved for web sites and for web applications.

This can be hard work because it requires a lot of consideration and testing to get it right. One of the pitfalls of most design processes is that little consideration goes into all the conditions in which content can live.

For example, at Xero, we’re going through the process of figuring out how to make the app responsive and evaluating each of the components. The design work before now had compositions in Sketch for two viewports: desktop in landscape mode and phone in portrait mode. We’re just now looking at what it looks like on a phone in landscape. But also looking at all the different resolutions of phones, phablets, tablets, and desktops.

So, why do I believe in a truly responsive approach? There are certainly reasons why you might not want to. Here are a few that I’ve heard:

  1. Designing for iPhone, iPad, and Desktop covers most use cases and the site or application will likely still be usable on everything in between.
  2. People don’t use the site or application on the phone. Or, similar to that argument, it doesn’t make sense for users to use the application on the phone.
  3. The users would be better off if we created a tailored experience for each device.

Of course, the flip side to those:

  1. Things will fall through the cracks. We make assumptions in our work—which is a perfectly natural things to do—that can fail under conditions we didn’t consider. This is why cross device testing is important.
  2. A conference organizer recently told me of someone buying a ticket on a Playstation. Why? No idea. Users will use what they have available to them. I love that we made the push at Shopify to go truly responsive because I use the mobile site now more than I use the native app. Feature parity becomes a given. The work doesn’t need to be duplicated or triplicated for every platform. Which leads to…
  3. Creating a splintered experience creates disparity between cross device experiences because they’ll naturally be out of sync. Things worsen when one experience no longer gets the resources within an organization to maintain that experience.

Also, as Nate mentions, I believe the user ultimately benefits from this. They receive a better experience; a consistent mental model of the application, no matter what device they’re on; and feature parity.

Does it result in less redundant work? Possibly. There’s certainly more work in the beginning than creating a single experience for a single device. But I believe that a modular approach with responsive container queries can reduce the burden of work in developing a multi-page, complex application.

And that’s why I believe in building a truly responsive site or application.

Published March 18, 2016
Categorized as Opinion
Short URL: https://snook.ca/s/1075

Conversation

4 Comments · RSS feed
Jonathan Snook said on March 18, 2016

btw: I recognize the irony that my own site isn't responsive. Nor is SMACSS.com. But move along. Don't mind the man behind the curtain.

Tanny O'Haley said on March 18, 2016

It is ironic that this site isn't responsive, but it is easy to read on a traditional tablet. It's hard do see that I wrote "traditional" for a tablet. I've been a big proponent of responsive design, but not just for phone, tablet, desktop, or wide screen. I've been a proponent of responsive design for whatever device the user is using.

I think you'd be surprised by the number of shops that aren't interested in responsive design or are only interested in phone and desktop. I've found this over the last 14 months looking for work. I believe because of my age they say I won't fit in their culture. Well it doesn't matter what my age is, I can still recognize poorly designed and conceived websites.

Whatever device the user is using should be supported within reason with responsive design. I still wonder why so many people want an app when their website is just as good and sometimes better.

Jonathan Snook said on March 18, 2016

Snook.ca is now responsive. :)

John F Croston III said on March 19, 2016

Looking much better sir.

I did notice on my iPhone 4s you are missing the last character on the right all away down for each line of text. Figured by adding a little bit of right padding or margin will give you the last character and a bit of space. If need be I could take a screenshot for you. Plus, the comment box I have to scroll side to side to read.

I know how retro fitting a fixed width website to response can be.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.