There’s a lot of information floating around about making your website “responsive,” much of it targeted at designers & developers. I haven’t seen quite as much written for small businesses nor for bloggers, so I thought it might be helpful to outline some of the concepts behind responsive design and some of the things you should consider as you embark on a site update to help you decide whether responsive design is right for your website.
Goals & Strategy, Generally Speaking
I am of the opinion that any decision you make about your business should be rooted in a solid understanding of both your goals and your overall business strategy, and decisions about your website are absolutely not an exception (see my thoughts on planning and tweaking your site).
Don’t default to responsive just because it’s the new big thing.
The only people who should be updating their website with the latest technology just to have the latest technology are companies that have their actual business based in that technology.
I made my updated website responsive because I code modern websites for a living, and it was important to me to show that I can work in that particular context. If you’re not a developer and/or you’re not interested in working on responsive design projects, you shouldn’t adopt it as a default just because it’s the new big thing in websites.
What does responsive actually mean?
Now that I’ve got my initial standpoint out there, let’s back up a little and make sure we’re on the same page as far as what “responsive” means – I get a lot of requests mentioning it in contexts where it’s clear people really aren’t sure.
Responsive design is designing and coding a site such that it responds to the parameters of the device being used to view it. At it’s most basic, this typically means the width of the content adjusts to always fit neatly within the frame of the browser across various screen and browser sizes. This often requires a combination of fluid/ flexible column and content widths, as well as “breakpoints” at which layouts change to better fit the new width.
One very good reason to go with a responsive site is if you’ve got a text-heavy site and you think people are likely to be trying to read it on a device other than a desktop or laptop computer. It can be challenging to read on tablets and phones when websites aren’t optimized for them, but a responsive design will both adjust the content column to fit the device and will usually adapt font sizes and spacing for maximum readability.
It’s probably obvious, but site owners for whom readability will be important are often bloggers or editors of writing-focused sites. However, while readability is certainly a compelling reason to consider a responsive site, it doesn’t necessarily follow that if you’ve got a lot of text you have to go responsive – your analytics and user base should also inform the final decision (more on that below). Especially for bloggers, you may find that most of your readers are actually getting your content via RSS or email, in which case they won’t even be seeing your responsive site.
Access on the Go
The other really great reason to go responsive is that your site content is highly likely to be accessed by visitors who are on the go, and therefor are likely using a smart phone or tablet.
One example of this is restaurant sites, or sites for other location-based businesses, where visitors may be coming to your site while actually out and about in the neighborhood. If you slow them down (or worse, block them entirely) by using technology that is unsuitable for a mobile device, you may actually lose business.
Or, if you’re in a field where you often need to display your content while away from a computer – for example, showing a portfolio or work samples during business meetings away from your office – you probably want to make sure your site is optimized for whatever device you’re using (iPads seem to be getting really popular for this sort of thing).
A Basis in Analytics
Beyond your goals for your site, and the above two examples of compelling reasons for responsive design, decision-making should also be based in data where possible (e.g. for an existing site undergoing a redesign).
To be perfectly honest, when I used Google Analytics for data I never looked at it. Now I use Gaug.es and it is worth every penny – if you follow me on Twitter you may have seen one of my occasional bursts of love for them where I post random data screenshots and gush an embarrassing amount. No, they don’t sponsor me. I just love their service, and here’s why:
This graphic shows my actual browser width data from April 2013. A full 88% of my visitors are viewing my site in a browser at least 1440px wide. That is pretty wide, my friends, and probably not what I’d expect if I were just guessing based on all the hype about mobile internet users, etc., etc.
There’s more! This second chart shows the stats on platforms used to access my site. Even if you’ve decided “yes” on responsive in general, there are decisions to be made about breakpoints and testing on devices and optimizing for devices, and this sort of data makes those decisions so much easier. (That tiny percentage of Android visitors? Kind of fascinating given recent generalized data in the news.)
What Does it Cost?
Goals + Site Purpose + Data + Budget = Responsive (or Not)
Sorry but there’s no good answer other than the perennial developer favorite “It depends.” I know, not that satisfying.
The thing is, it really does depend on a variety of factors from the design, layout, structure, and content strategy of the site to the technical specifics of breakpoints to the data on which sizes it makes sense to spend the most time on.
Very very roughly, I’d say it’s safe to expect responsive design and development to add anywhere from 30% to 70% to the cost of your project. Also, please assume quotes you get from designers and developers do NOT include responsive design and coding unless otherwise specified. It’s still the sort of thing that should and will be specified (and thoroughly discussed) if it’s on the table.
Of course, that cost should be another factor that goes into your overall decision-making process. While I do (obviously) think it’s worth spending money on a great website, it’s one part of your overall marketing/ communications strategy and responsive is only one part of an overall website strategy. Budget accordingly.
End Game: Is it Worth It?
Sorry, I don’t have a final answer for you (are you feeling let down?) but I can say that in many cases a responsive site is probably NOT your top priority for building your blog and business. All the data points I’ve discussed will hopefully help you decide if it’s a good choice given your particular set of circumstances.
- An interesting article from Elliot Jay Stocks about how to think about what RWD (responsive web design) really is/ means. I don’t agree with all his points (especially about cost), but it’s a great read.
- MediaQueri.es is one of my favorite resources to share with people just wrapping their head around RWD – lots of great examples in a nice clear gallery format.
- There are tons of grid systems out there to act as starting points for RWD – the Golden Grid System is just one. I like the typography ideas in this one, in particular.
- Getting into the details of RWD uncovers all kinds of complex issues and problems, such as how to handle images. This article from CSS Tricks is a great overview of the image-related issues and possible solutions.
- Type is another issue with responsive, and this is a great article to start to understand why.
- Of course, I always recommend everything from A List Apart, including their book on RWD.
- Also, I just found the mother of all lists of RWD resources & tools which probably includes most of the above and then has about a million times more.