Thoughts on Building Responsive Websites

Posted: April 27, 2014 under Web Design

What follows are a few observations and suggestions that are distilled from my experience of having worked on dozens of web projects involving responsive web design (RWD).

Late Adopters, It's Time to Get with the Program

First of all, I'd like to say to those of you not yet using responsive design in your work, the time has come. It's not a bandwagon, it's not a fad. In 2014, web design = responsive web design. More or less, anyway - the separate mobile site can sometimes be great for those with large budgets, but for the vast majority of sites, it's RWD or bust.

I know that occasionally a client comes along that isn't interested, but it's our job to get them onboard. I don't say this out of some kind of religious devotion to responsive web design. I'm motivated by the data that shows, unequivocally, that failing to optimize a website for users on mobile and tablet devices hurts the success of that site.

It decreases user engagement, lowers the conversion rate and ultimately results in lower sales, sign-ups or whatever success marker a site is using. Users leave because the site is a pain to use on their device. See here and here and here for some research/stats backing this up.

Not having a mobile-friendly site can also hurt search rankings, which is also pretty detrimental to the success of your site. See this post for some information on how Google favors mobile-friendly sites. But it makes sense doesn't it? Why would Google show a preference for sites that are going to give mobile users a bad experience?

So, going forward, please don't make sites that ignore mobile users. A separate mobile site, if you have the resources to do it well, is A-OK. Doing nothing is shooting yourself - or your client - in the foot.

If you choose to skip building a mobile-friendly site, be sure you can defend your decision with data. The links above (along with loads of others that you can easily track down via Google) make the case that RWD pays dividends. If you're going to go a different direction, have data - not hunches or opinions - backing you up.

Photoshop Is not Very Useful for Responsive Web Design Projects

Of course I'm talking about the old practice of using a Photoshop comp - basically a picture of the proposed site - as a guide for building the website. The days of whipping up a JPG and handing it over to a front-end dev to make it into a real thing have past.

As Chris Cashdollar writes on the Happy Cog blog,

Static JPGs aren’t responsive. Clients inevitably ask, “What does it look like on mobile?” MOAR PHOTOSHOP isn’t a viable strategy. We can’t “comp” our way to a true solution. Instead, we needed to cash in all those hours spent perfecting pixels on a process with a higher return on investment.

I've seen products intended to replace Photoshop that are something of a half measure - basically interactive images. These aren't that great either. With RWD these sorts of tools just end up confusing things. Clients often make incorrect assumptions when using these comps as a guide, leading to hard feelings or a lengthy explanation about why things don't look like the picture you showed them when they later view the site on their kid's Kindle Fire.

Designer's also make mistakes when they use these tools - particularly if they don't know HTML and CSS. I really don't believe web designers can be successful at this point without knowing these two languages. You have to understand the product in order to design it, right? Designers who know how to write HTML and CSS produce much more realistic designs - and don't give front-end developers fits.

A couple of useful quotes on the subject...the first from the Hanno blog:

Creating a design from the ground up requires a significant amount of time. You have to define colours, typography, form elements, different assets, etc. And if you’re designing a single page of a mockup, it’s almost impossible for you to consider the wider context that these elements will be used in - you’re just moving pixels around the canvas, rather than considering the UX of the product as a whole.

This is a great quote - good web design is mostly about user experience. Beauty is desirable. Working well is essential. You can't gather anything about user experience from a Photoshop comp.

Here's another good comment on the subject from an article on UX Mag by Jared Rogers:

Generally speaking, a comp is a comprehensive, high fidelity, Photoshopped layout of a website—or rather, what appears to be a website. It is just an image after all, an image of what your website would look like under perfect weather conditions. This delusion of grandeur, when used as a deliverable or finished product, often misleads the client into a false sense of usability.

Making a Site Responsive Should Be Approached as a Redesign

It's quite common for folks who are inexperienced with RWD to try to make an existing site responsive by slapping a few media queries together and calling it a day. If the site is very simple, this might work. But think about it for a that a good approach? Isn't responsive design really about optimizing a site for a wide range of devices? Does this approach feel optimal even in the slightest?

It's fine preserving the aesthetics of a non-responsive design, but the project should be treated as a redesign from the ground up because there is a lot more to RWD than rearranging the regions on the page.

The content will need to be evaluated. Many non-responsive sites use things like sliders or images that will possibly need to be removed, replaced or optimized. What about video? What about site performance on mobile? That last one is huge.

The philosophy we should bring to these projects is one of looking at the site from a 'mobile first' perspective (nice companion video here) . Taking that approach to the design process can be tough the first time out. It can feel like a radical change. The payoff, however, can be tremendous. Resist the urge to begin with the desktop in mind!

Some Things that Work for Responsive Design

Below are a few things that you can do to make RWD work better on your projects.

  1. Instead of Photoshop comps, use Style Tiles and then build a prototype using HTML and CSS, iterating with the client as you go. The client gets to play with the site early and often and can better understand any problems that may pop up.

  2. If possible, don't add the things to the site that are on the Style Tile until near the end of the project. Try to focus instead on user experience, user flows and performance. When you add the aesthetic elements early, everyone involved can start to lose focus on the fundamentals of the design.

  3. Think over the choice of using a CSS framework very carefully. Many teams will use a framework like Foundation or Bootstrap to make the prototype I mentioned in #1 and then use custom code on the actual site.

  4. If using a content management system, take a close look at the default markup the system provides. If it's bloated, override it if you can.

  5. Make performance a priority. If you go with a 'mobile first' approach, you'll have an easier time with this in the long run. There are some great tips in this post from Google on getting your site whipped into shape. Performance may be the most important factor in making your site a good experience for mobile users.

  6. If you're a designer, learn HTML and CSS. It is essential to you being able to make good decisions when designing responsive websites. I would also advise against using generators or tools to create responsive mockups. They keep you from truly understanding the medium in which you are working.

In closing I'd like to briefly address a point that I imagine some of you may have regarding the feasibility of this approach with small clients. You may be thinking that on a tight budget with an unsophisticated client (as far as websites are concerned), this approach won't work.

If this is what you are thinking, then I agree with you. I don't think designers and developers should try to market themselves with this sort of client in mind. There isn't a future in it. This sort of client doesn't need bespoke design, development, conversion optimization or any of the other stuff that comes with a custom built site.

I think smaller projects - the local restaurant, hair salon etc. - should be ceded to Squarespace and Hone your craft for those sites that can afford and get value from your skills. Perhaps this is a topic for another post entirely, but I wanted to mention it because using good RWD practices with small budgets can be tough.

If you have any comments, you may politely leave them below.

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.