Responsive Design: Crafting an Experience for Everyone

The phrase “responsive web design” is still somewhat of a buzzword when it comes to building web sites. However, responsive web design is not a feature that you add on to your web site to make it mobile-friendly. Responsive design is just how you build web sites in a multi-device world. The question of “should we go responsive” shouldn’t even be a question because the answer is always “yes,” and that’s why the new MVC version of the Multifront ecommerce platform includes an example storefront that was built from beginning to end using responsive techniques.

Responsive design is not a feature.

The obvious advantage to responsive web design its ability to display well on devices of varying size, from phones to tablet to desktops. Of course, there are thousands of different devices out there in the wild – even in your office – and it’s impossible to account for them all…and you’re not supposed to.

The big difference with responsive design over how sites have been designed in the past is that you cannot worry about tiny details. The term “pixel perfect” is no longer valid when it comes to web design. You’re shooting for “usable” when it comes to a responsively designed web site, but that doesn’t have to mean boring or generic. It just means that you can’t worry about the positioning of an element between two different Android phones. It’s not going to look the same and it’s not intended to. Ultimately the design needs to be usable and communicate clearly, so the extra whitespace that appears on the big phone and not the small phone is not a concern, bug or problem.

Separating your concerns

Depending on where you sit in the development chain, the fact that responsive design relies on a single code base could be a good thing or a bad. I favor the former because managing two separate code bases for the same product is just more trouble than it’s worth. Before too long you’ll find one version is way out of sync with the other, giving your customers a very inconsistent experience between devices. You may also find yourself with two different products going in opposite directions, and that’s not going to help anyone.

Using the same code base for every experience doesn’t mean you can’t selectively load data, it just means you handle it all up front rather than having the server sniff a browser and do a bunch of domain switching and project loading. And when we’re talking about an online store, there’s probably little reason to have different markup for different devices. When going responsive you design and build once, but that means you have to consider every part while you work.

A tailored experience

The one aspect of responsive design that makes a huge impact on the user experience is that it requires you to think about the design and usability of your site on many devices. But since you’re considering device sizes from the beginning, you can be confident that the content on your site will be treated properly regardless of screen size. You’ll find yourself with a much better web site in the end when you build this way, but there are some trade-offs.

The need to consider different sizes does require more design effort from your staff but it’s to the tune of weeks, not months or years. There is little-to-no extra overhead when building a responsive site compared to a non-responsive or separate code base sites. Plus, the work flow for responsive design is going to get better and more efficient as we all adopt it as the correct way to build a web site. Don’t avoid design discussions and decisions. Embrace them for what they are – a chance to make your web site and your product better for everyone.

Designing for performance

Last but not least, the one thing you can’t skimp on when talking about building responsively is site performance. It’s no secret that a web site needs to be as fast a possible, and responsive doesn’t change that. But going responsive does mean you have to consider the performance for every page, every view and every interaction because you don’t know if the customer is on their phone standing in line at the grocery store, or if they’re on their couch watching television.

Performance needs to be part of the design process, not an afterthought or optimization routine applied when you’re all done. Think about the size of files, images and consider every plug-in and add-on you’re thinking about using. The question should always be asking is, can we do without this?

If anything, building and designing responsively is about whittling away the things you don’t need until you get to the true needs of your customers. Once you get there you’ll find you have a great experience for everyone regardless what type of device they’re using.