If you’ve looked into designing or redesigning a website recently you’ve likely heard the phrase responsive web design, or RWD for short, thrown about. Responsive has been receiving quite a bit of buzz these days and for very good reason. But do you really know what’s involved, how it can help you or why it’s such a hot topic? If not, you’re not alone.
Much has been written on the subject by experts and amateurs alike. Unfortunately many of the experts tend to focus on how to build a responsive site and the articles are heavy on techno-jargon. The amateurs who often try to explain RWD in layman’s terms mean well but often lack the deep understanding to properly communicate important details of the subject leading to confusion about how and when to use it. My goal here is to clear things up and arm you with the information you need to decide if responsive is your best option and how to find the right person or company to help you with it.
Techno-Jargon Free Responsive Web Design
Responsive web design aims to solve the problem of sending a single source of content to the vast array of internet connect devices without creating separate designs or content for each one. Why is this important? In short, it’s not feasible to generate separate designs when you consider there’s literally thousands of different devices with different sized screens and capabilities and new ones are arriving every day. It is also easier to maintain one source of content rather then multiple, not to mention Google prefers responsive sites for this same reason.
So, how does responsive web design work? Simply speaking, RWD resizes and rearranges the elements on your web page to best fit the available space of the screen. Imagine you get a promotion and the promotion comes with a nice large corner office. Your existing office furnishings likely won’t fill the new space very well. Let’s not overlook the guy that just lost this large office that’s now headed down to your old much smaller office. That large executive desk he loved so much won’t fit in that smaller office either. If the office furniture were built to be responsive it would be able to grow or shrink and rearrange itself in the new space to achieve a pleasing feng shui.
If you want to see some examples of responsive in action visit: http://mediaqueri.es/. Be sure to re-size your browser window to get the full effect.
The goal of responsive is a lofty one and it does a good job but we need be get clear on the limits of what it can do. On its own responsive won’t optimize the content you send to visitors. In other words it could send the same high resolution image you have for your desktop design to the small mobile screen which is less then ideal. This is just one example. Worse case sceanrio, if it’s not implemented correctly, responsive can do more harm then good to your online presence.
Responsive is not a magic bullet and it requires a well formed strategy to be successful. Responsive takes far more planning then the way we have been doing web design. I’m not going to candy coat this – responsive is hard for all involved, but don’t let that stop you.
Responding to Responsive
When approaching a responsive project many of our tried and true methods of yesterday need to be rethought. Nearly every aspect of designing and developing a responsive site requires a new way of doing things to be done well. Be prepared to step outside your comfort zone.
Let’s start by acknowledging and accepting the fact that our site will not look exactly the same across devices, nor should it. This is the way of web. Responsive is actually more in line with the vision of the web as Tim Bernes-Lee (the guy that invented the internet) saw it. He envisioned a universal platform to share information regardless of device, screen size, network speed or any other impediment you might think of. The phrase “One Web” coveys this grand vision of radical inclusion and responsive is a step in that direction.
Another idea to toss out is that of “The Fold.” It doesn’t exist, not in any practical manner, and it never really did. This is one of those security blankets we carried over from the print world along with our misguided notion to strive for pixel perfection on the web. It’s time to start thinking of good web design in terms of delivering the most appropriate experience given a users current context. This does not mean we don’t design every aspect of the experience it means redefine what good design means.
We also need to consider new processes when dealing with responsive. Until now we’ve relied on static wireframes and Photoshop mockups for our approval process before coding the final pages. That just doesn’t work with responsive. These kinds of deliverables are mere snapshots of 2 or 3 possible ways the final site might look and they reinforce a waterfall process method. Using interactive prototypes and style tiles (think mood board like an interior designer would use) do a much better job of conveying the intent of a design and promote a more agile and collaborative process. It’s about designing, testing, iterating and testing some more. The process should never truly be thought of as complete.
Maybe the most important change to come to terms with is – you’re now in the publishing business. From this moment on, responsive or not, when your site goes live you officially become a publisher. What does this mean for you? It means like any other publication you’ll lose visitors if you don’t take time to keep your content fresh. Consider developing a content strategy that includes an editorial calendar. Content is now your product.
The bottom line here is that everything changes and as it does we need to change with it.
What to Look for in a Responsive Web Design Partner
Since responsive is in such high demand these days designers and agencies are quick to tell you that they “do” responsive. How can you really know if the one you’re talking to really knows the best way to approach and implement responsive on your project? Here are some questions to ask and some answers to listen for based on what I believe are currently our best practices.
Q: What’s your design and development process? In other words how do approach RWD?
A: I like to work content out, mobile first and use progressive enhancement.
Why this is a good answer – a good designer knows that your content is why people come to your site. If they’re really good they’ll push you for content to the point of annoying you, but go with it, they have your best interest at heart. What you say to your visitors is what will leave the most lasting impression. Be authentic in your content and know that people don’t buy what you do, they buy why you do it. Keep in mind that content is, was and always will be king.
Mobile first means to design from the smallest device upward to desktop and beyond. There are a multitude of reasons this is good approach but I’ll only cover two here. The first is when you’re forced to consider the small screen real estate of a smartphone, business requirements become crystal clear. Think of mobile first as the minimal viable product (MVP). There’s only so much you can fit so you better know what is truly important to both you and your audience.
Second, the constraints of mobile force the designers and developers to consider every little added feature. Each one adds potential performance problems of the site and poor performance is a conversion killer. Along this line, this approach keeps you aware that you are now dealing with a touch screen device in many cases and not one with a mouse or pointer device. Hover states and mouse over events that we counted on to interact with our visitors are not an option on mobile. These can pose serious usability issues if overlooked.
Progressive enhancement is about layering on enhancements to the experience as capabilities increase. Think about buying a car. The base model has everything you need for a perfectly fine driving experience. Leather seats, alloy wheels, GPS and satellite radio are all progressive enhancements that further enrich the experience. In this case your ability to pay more is the increased capability. RWD is a progressive enhancement.
This is by no means the only way to approach responsive but no matter how I look at it I haven’t seen a more effective way yet. I’m sure there will be some debate in the comments, if there is be sure to read and consider the counterpoints. As time passes techniques and technology change and the way we approach web design tomorrow may render all this mute.
Q: Do I really need a responsive web site?
A: Have you done any research into how and why your audience is visiting your current site?
Why this is a good answer – RWD won’t always be the best solution. The right solution should deliver on user expectations and needs. One scenario often cited to illustrate this is an airline site. The assumption being the when a user is actually traveling their needs are different then when they’re planning to travel. When they’re travelling they want quick access to flight times, check-ins and reservations and not information about current travel deals.
This brings up a very important point that can not be emphasized strongly enough. Never assume your audiences intentions or context. Your decisions should always be based on solid user research. Nothing leads to failure faster then incorrect assumptions about user expectations and needs. An optimal user experience is your goal and only user research can put on the right path to deliver.
Q: What’s the difference between responsive and adaptive design?
A: They really are complimentary techniques and we may need to consider using both.
Why this is a good answer – RWD is not a complete solution on its own. Adaptive design is a kissing cousin to responsive. Remember, I said responsive resizes and rearranges elements to fit, well adaptive can actually help optimize what we send to the users device. Looking back the promotion scenario from earlier, adaptive would know it doesn’t make sense to send the big desk down to the small and make it smaller. It would only send the right size desk that best fit each office.
The real point here is that responsive works best when used in conjunction with other tools and techniques. I’m not going to get into the technical aspects here but here some keywords to listen for: CSS pre-processors (likely LESS or Sass), responsive frameworks (Bootstrap and Foundation are couple of biggies), jQuery and jQuery plug-ins to name just a few. All of these offer the potential benefit of improving performance, usability, productivity and maintainability. Don’t worry if they don’t mean anything to you right now. The purpose is to see if the candidates knowledge goes deeper then just the basics.
Q: What do you feel is the most important technical aspect of responsive?
Why this is a good answer – like I said before, poor performance (slow load time) is conversion killer. As page load time goes up readers drop off, upwards of 75% for pages taking 10 sec. or longer. When done correctly a responsive site should send less data to a mobile device then it does to a desktop. You should ask the candidate if they have any active examples that show this. It doesn’t matter how nice your design is, if the users don’t wait for it to load it’s not doing either of you any good.
An equally acceptable answer would be testing across devices. Testing a responsive site on a variety of devices to confirm the design displays as expected is important. It will also shine a light on any performance problems if they exists. You might follow up this answer with “Do you have a device lab for testing?” Most individuals won’t but a large agency might.
Can you guess what a bad answer would be. “I like to make sure everything looks the same across devices.” Run if you hear this or something like it from your candidate.
Let’s be Clear
As I said at the start of this article, there’s been plenty written on responsive. Some good, some not so much. Let me take a moment to address some of the more frequently expressed concerns about responsive.
Concern: Responsive takes longer and cost more.
This can be true on both counts right now, but over time we should see this change as responsive becomes the norm. As developers become more proficient at responsive it will take less time to build these sites. At the same time we will likely see the all too common practice of designers and developers cutting their prices to gain business. I hope that you’ll be wary of these types and pursue the most qualified candidate over the cheapest.
Concern: Responsive sites are slow.
If they are it is a result of poor execution not the technique itself. Building mobile first with progressive enhancement can help address many of the pitfalls that lead to slow load times. It is poor musician that blames their instrument. Same goes here.
Concern: Responsive is a fad and won’t last long.
Responsive is no more a fad then the internet itself. Responsive is the here and now. While it may not be the right option in every situation it is currently our best option (IMHO) when it is implemented correctly and for the right reasons. Responsive as we know it today will be around until we find the next better technique which will likely build upon it.
While we’re at it, responsive not just the latest buzzword.
Concern: Old versions of Internet Explorer don’t understand responsive.
This is true but ultimately irrelevant. On their own they don’t know how to handle responsive, however there are several techniques that can help them handle it. More importantly IE6 is all but extinct and IE7 is on the endangered species list, leaving IE 8 which through some scripting can handle responsive fairly well. As an aside, when developed in a progressively enhanced manner this all becomes mute because less capable browsers will served an appropriate and fully useable version.
Concern: Mobile users are always in a rush.
Never assume the users context. More studies are coming out every day on how, what where and why users are using there mobile devices. The mythical user that has one eye and one thumb working the device while the rest of him is occupied by other daily distractions is not a given. It’s just as likely they’re leisurely surfing from the comfort of their couch. Do your research or at least budget for someone to do the it for you. Make user research part of your responsive project budget.
Concern: Users want different functions or features.
Again, user research will tell you if this is in fact true. If it is, then serious consideration should be given to either separate experiences for mobile and desktop or even a mobile app. Going back to the airline scenario, if user research confirms that users while traveling have different needs then those planning a trip a mobile app might be a good idea. Always start with research.
Concern: Responsive is best for content sites.
What this usually refers to is the difference between e-commerce sites and blogs or text heavy sites. What they’re really saying is responsive is easier to implement on content sites. Responsive works equally well when it’s applied correctly regardless of the content on a site. Like I said before, responsive is hard.
As I hear more of these types of statements I’ll be sure to add them to list here.
- Responsive is just one way to deliver content to your audience that may or may not be the best way depending on your audience’s needs and expectations.
- Responsive is most appropriate when the only thing changing in the users’ context is their device.
- Start by researching your end user’s needs and expectations and develop a solution that will help them reach their goals.
- Responsive is best implemented content out, mobile first using progressive enhancements and complimentary tools and techniques.
- Accept that the site will not look identical across devices or browsers and forget “The Fold.”
- Make sure to consider performance a measure of success for you new responsive design.
- Pursue the best candidate over the cheapest.
- The resulting site will only be as good as the skill of the person or agency that built it.
- Responsive Web Design – Ethan Marcotte
- Content Strategy for the Web – Cristina Halvorson
- The Elements of Content Strategy – Erin Kissane
- Content Strategy for Mobile – Karen McGrane
- Mobile First – Luke Wroblowski
- Designing with Progressive Enhancement – Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland
- Adaptive Web Design – Aaron Gustafson
- Designing for Emotions – Aaron Walters