Responsive Design in the Real World (Part 1)

This is part 1 of a 2-part series, and it addresses clients who hire firms for responsive design. Part 2 will address designers and coders who are building responsive websites for clients.

You’ve heard about responsive design, right? It appears, though, that even with its growing popularity, responsive design is notably absent from almost any corporate website (with at least one exception). Like a lot of design trends, responsive design is extremely popular in design portfolio websites and web/techy blogs. The benefits of this technique (one build, all platforms) could seriously help businesses from a financial standpoint, but I’m not seeing the wide adoption that I’d expect from something so great. Maybe I just need to be patient. After all, it takes longer to roll out a new corporate web presence than a freelance portfolio website, and responsive design is a fairly new practice. Or maybe the lack of corporate responsive design stems from the inflexibility that companies show when it comes to their design ideals and how they translate to the Internet. I’ve been seeing this exact thing happen with our clients, which is what drove me to write this article. Company decision-makers: Please give this a read. You will benefit greatly. Take proactive steps towards a smart and functional website that will delight, not frustrate, your users. (And that seems to be a rarity on the web.)

My company’s been building solely responsive websites for a number of months now, and as the first batch of projects is going live, I can look back on the process with a great feel for where our clients are struggling with it. For us, it’s been positive overall, but there are a few sticky points that are worth noting for real world responsive design.

The In-Between Browser Sizes
Probably the hardest thing to explain (and to fix) with responsive design is the “in-between” sizes. Media queries and percentage-based design can fully cover a desktop-, tablet- and mobile-sized layout, but there are instances where an in-between size, like a smaller laptop, will show broken lines of text or bad margins, for instance. These problems are definitely fixable and should not derail a project. It can be really frustrating from a client’s end to keep pointing out these little bugs, but it’s almost impossible for the designer to replicate every screen situation, so it’s a necessary part of testing responsive design. Oh, and by the way, responsive requires a lot of testing.

Internet Explorer
The second challenge with “real world” responsive design is a browser called Internet Explorer. I don’t like to bash IE like a lot of designers and coders do, but I can’t ignore its shortcomings either, especially in older versions. Example: older versions of IE don’t even respond to media queries (a staple of responsive design) without a jQuery plugin, and once you get below IE8, things like inline-block elements aren’t even recognized! These details are essential for a successful responsive website, but they’re not easily explained to non-coders. Because of IE’s shoddiness, and since a majority of corporate-types still use Internet Explorer, it’s really important to make sure everything works in IE before the client sees it. As a “website tester,” it’s good to have an open mind about IE bugs, because they can usually get fixed or finessed. (As a designer, if you don’t go above and beyond with responsive design IE testing, you’re asking for trouble. Trust me.)

But the IE issue goes a bit further than testing a site before showing it off. A fundamental part of responsive is that websites look a little bit different on every different screen. Designers can’t have pixel by pixel control like they may be used to. This concept is really important to keep in mind, not just for IE, but for all different browser and computer situations. Just because a site looks different from one screen to another (or one browser to another, or one device to another), doesn’t mean the site is “wrong.” Coding many versions of the same site to try to make every browser the same is a waste of time and money, and it goes against the philosophical concept of responsive design.

On a positive note, though, IE9 (the latest version) is looking good. I’m very hopeful, although its mere existence doesn’t mean that everyone will upgrade.

Complexity
A third reason that some companies don’t make the responsive jump is that there are other popular web design styles that make responsive harder than it already is. Imagine the popular parallax scrolling technique and how hard it must be to make sure it works on the phone as well as the computer… with the same code. Although at times it’s hard, complex and responsive design is 100% possible. In fact, in 2012, with skilled programming, almost anything is possible.

But Don’t Be Scared
So maybe responsive design is harder in the real world than it seemed at first. It started showing up on simple, designer-driven websites, but what does that mean for real world practicality? When my company first started believing in responsive, we used to tell clients how it’s actually not a new skill, but a new way of thinking. So simple! Well, looking back, it’s not very simple at all. But difficulty is no reason to shy away. Find a skilled programmer (or company or team of programmers) and make sure they know a lot about standards-based coding, old web browsers and new tablets. Make sure they know where to make the right sacrifices and then trust their decisions! The payoff is worth it. As a company, you can stay agile, stylish, uber-functional and maybe even below budget. It can be done. But it can’t be done without sacrifices, even small ones.

I have a lot of experience being the voice and conveying the brand of companies online, and the most important thing I can tell you about the websites in 2012 is that it’s time to start trusting the web experts. Years ago, there weren’t enough web experts, and we looked to print designers to shape our web experience. Today, it takes a lot of specialty to launch and run a successful web presence. Instead of fighting the unknown, embrace it (with the help of an expert).