Designing websites to be responsive probably shouldn’t be an “it depends” question any more.
I had grand plans for this post about my thoughts on using responsive web design techniques “as standard”, but I was pipped to publish button yesterday.
First off, I’d suggest spending a couple of minutes reading Paul Adam Davis’s post – Why I support responsive design or Andy Clarke’s I don’t care about responsive web design because frankly they say most of what I was planning on writing when I posted the following poll yesterday and I started seeing the results roll in but I’m going to push on anyway and try to add to the topic.
A redesign sparked all this?
Part of the reason for me diving headlong into trying to get some feedback on how fellow designers and developers work was the launch yesterday of the new site for one of the agencies who I’ve always admired and enjoyed their work – Kyan Media.
Their new site is a lovely demonstration of a number of great design techniques and the subtlety, use of space and their trademark illustration style adding little flourishes all made for a really nice relaunch. All things told, an immediate favourite for me this year.
But it’s not responsive ….
Twitter being the lovely tool that it is, we had a massive several minutes of discussion of how nice the site was until people start doing the defacto “responsive design test” – resizing the browser window. Oh dear. Fixed width, non-scaling, blocks of content don’t rearrange. This simply won’t do … outrage … rabble rabble rabble.
I looked at it on my phone first (I wasn’t rushing around, I just browse on my phone a lot), as I’m sure many would do (and more will in the future) and it was only because I already knew of them and was a fan that I saved the link and came back.
Commercial websites seldom have that luxury and have to work first time for *any* device otherwise most times, that visitor will go elsewhere.
Back to the poll above and I was honestly a little shocked by how many people actually said “no” or “it depends on the client” because as Paul points out in his post above, getting the basics in place to make a site responsive really don’t need to be that hard and the reward of making content more accessible to more people should hopefully make this – even as a quick win job – worth the effort.
There are some great tools out there to help
There are lots of great flexible grid systems out there, there are some amazing tools for minifying scripts and styles etc, you’ve got things like 320 and up (which you may gather I’m a big fan of) there’s Matt Wilcox’s great adaptive images (keep an eye on @offroadcode for a .net & Umbraco port of this script btw) all of which allow you to cover quite a lot of the fundamentals of building a responsive site with relatively little effort these days.
A working case in point here is Cutting Edge Knives – one of the sites Pete & I built at work for our business. When we built it back in June, it was very much intended to be a “desktop” experience thanks to the layout of the knife racks and our inexperience with screen design meant we intended to come back to that aspect later.
As it turns out (and I know it’s not a perfect experience) it literally took one media query, and afternoon of adding some “small screen styles” and the site was made usable on small screen devices.
We’ve since added in better caching, adaptive images etc but the basic transformation of what you see on a big monitor and a small screen device took about 3 hours. We covered the initial additional cost of setting that up by selling two knives.
Now I’m always keen to point out that there’s more to this than simply lobbing a few scripts at something and pasting a media query or two at a page but the point we’re trying to get across here is that in the case of the Kyan site, it’s specifically fixed. It’s restricted and limited.
Responsive web design … “It depends”
As I said, there were a lot more people answering “it depends” when it comes to the question of whether new sites should be responsive across devices than I’d anticipated. Most of them were roughly the same and fell into a couple of neat categories.
- It depends on the client budget
- It depends on the site audience/stats
I’m not going to tell you how to quote for a website other than point you in the direction of a great post @peteduncanson wrote on our work blog about how we use feature based development to give better quotes. It’s a long read but it works for us and if you’ve not tried this approach, maybe consider it for your next project quote.
If not, no worries. Keep going.
Making content easily available should be in any budget
I’m not convinced about the budget issue simply because as I mentioned above, there are lots of frameworks, tools and resources to help take the legwork out getting started and these really don’t take much time to learn and implement. Also, at what point in the process does it crop up that you would put making a site easy to read and use for as many people as possible over another feature.
I’d say in the priority listing, making content as accessible and readable as possible is one of the more important elements to look at when building a site.
Budget is always a tough one to deal with and while there are a lot of tools available to help get started with responsive layouts etc, there’s no denying the production time is longer because we’re dealing with a flexible beast and not a fixed entity.
However, from my experience this does balance out a little because where up front planning and front end development time have increased, it’s allowed me to streamline and modify our design process at work making some big savings by prototyping in browser and making more use of wireframing than before.
Of course as with everything there is fine tuning, optimising etc – that final 10% that takes 50% of the effort but as I said, we’re looking for some quick wins to make a site responsive and a little more device agnostic so content can be better viewed on any device.
The site audience – Past, present or future though?
This is the other big one when it comes to “justification” for not implementing a responsive site. I’ve heard it from several colleagues and it’s reasonable to say there may be cases like Bagcheck where Luke Wroblewski has written about why they have a separate site for mobile I think for most people and clients we can look at a slightly smaller scale and consider a single responsive site is a good basis to work from.
I’m constantly being told we should consult analytics to make a decision on whether we should make a site responsive. I consult analytics for our main work client Olympic Holidays on a daily basis, I monitor all sorts of traffic, user journeys and ecommerce metrics. It’s a huge site and I’m lucky to be involved with it on a daily basis.
However, I’m currently planning and developing for the future. The current site has served them well for years but it’s fixed, contains a massive amount of information and functionality and isn’t particularly usable on small screen devices such as mobiles and tablets.
Analytics tells me what people have done in the past and gives indications of trends developing (screensize, browser/OS use etc) and vitally “mobile” use. However, what it doesn’t do is show me a handy graph of what the audience is going to be in even 6 months time let alone 12, 18, 24 months.
I can consult analytics to make a decision on whether to make a site responsive but I’d be taking an educated guess as would anyone else.
That’s the whole point though. I don’t know for sure what the audience will be so I need to make sure content is not restricted by things like fixed pixel width layouts and I don’t need to.
A few caveats
Obviously this post is just my humble opinion and it’s based upon a lot of reading, experimenting, hackery and working on client sites along with tweaking this site to see how stuff works. I don’t intend to force my opinion on you if you don’t agree with working responsively “by default” – it’s entirely your choice.
What I wanted to do was to try and get a bit of a feel for what the folks I talk to on Twitter are up to and hopefully provide a few links and ideas to things that I’ve found have completely changed the way I approach designing and developing sites over the last few months.
I’ve also just focused on new builds rather than talking about making older, fixed width sites flexible and responsive although as I mentioned with Cutting Edge Knives above, it’s perfectly doable if you want to.
I’m also happy to accept we’re working in an exciting time where there appear to be as many unknown variables as known when it comes to how users digest content and I’ve written about that here and here if you’re still hankering for something else to read.
If you’ve not voted in the poll above, please add your thoughts and if you’ve got something to add to the discussion, I’ve spent the best part of two hours putting this post together, I’d love for you to do the same and jot down a post on the topic and I’d be more than happy to link discussion.