Should you go responsive?

Accessibility is central to the web. It’s not just less able visitors you should be considering, but the multitude of devices people access the internet on nowadays.

How easy will your website be to view on the small screen of an iPhone? How about a widescreen television? What about all the sizes in between?

The word responsive has two meanings where websites are concerned; the obvious one being when a site reacts nicely to your clicks and taps. But ever since Ethan Marcotte’s article for A List Apart back in 2010, responsive has taken on a whole new meaning…

What is a website?

I’m a great believer in content being central to any website. What’s the point in having a website unless you’ve got something to say?

That might be something as simple as a heading, quick paragraph, a picture and a few contact details, or it may be something a little or a lot more complex and involved.

Either way, your website’s content should be as easy to consume as possible.

Respond!

The collection of titles, text, pictures, videos, adverts, forms, etc. that make up your website is gathered together and then laid out nicely so that visitors to your website can access everything they need to.

But what happens if one visitor is using their smartphone and another uses their laptop?

On a simplistic level, this boils down to how wide someone’s screen is. If it’s tiny, like their smartphone, a single column layout with nice readable text is probably a better option than asking that they zoom in and scroll around in order to read what you have to say.

Unfortunately, this single column layout is unlikely to translate well onto a tablet, laptop or desktop screen so separate layout designs for these screen sizes will probably be appropriate.

You want your site to respond to the size of the visitor’s screen so that they read your content in the best possible way!

Mobile site?

“But wouldn’t it be better to just create a mobile specific website?” I hear you cry. Well, probably not. In some circumstances it might be the right thing to do but here are some good reasons why you should consider a responsive site instead:

• A mobile specific website is twice the effort – you have to maintain two websites!
• You can run into issues with search engines if it’s not handled correctly, and you could end up with penalties.
• Truly responsive websites serve up the optimal layout, regardless of the width of the the screen you’re looking at the site with. You’re going to have to draw a line somewhere with a mobile specific site and say “this is where the mobile ends and the desktop begins”. Who knows what the future of mobile is? That ‘break-point’ may have to change, which will potentially mean an entire redesign of your mobile and/or desktop website.

Everyone wants to see all of your content

But what about the content itself? Is it best to slim the content of your site down for the mobile? Only some of the information you’ve got on your main site is relevant to your mobile audience, after all…

Or is it?

That’s a pretty big assumption! Why would you discriminate against your mobile visitors? Surely your content should be made available to everyone.

I use an iPad for general web-browsing when I’m at home and there’s nothing more frustrating that arriving at a site that I regularly use on my desktop computer only to find that I can’t perform a certain task as I’m on a mobile-friendly version of the site.

The answer a lot of (although—annoyingly—not all) websites provide is a link to the ‘full website’. But that means you have to look for a link that may not be there, click through, wait for yet another page to load… A bit of a nightmare if you’re not on a wireless network! Plus you’re giving your visitors more hoops to jump through which ups the chances of them abandoning your site altogether.

If there’s some content you feel you can do without on your mobile site, have a think about whether it’s relevant at all! The best approach to deciding what content to use on a website is to whittle it down as far as possible to deliver the most focussed experience you can.

Softly softly

Responsive design is a pretty involved process, involving extra maths and sometimes multiple layout designs.

Between each layout design (or ‘breakpoint’ the webpage will stretch to fit the screen, meaning that no matter how wide the device your site is viewed on, it’ll always be the right size!

The extra time your web designer will be investing here is will add to the cost of the project, which might be a bit of a deterrent if you’re on a tight budget. This is where adaptive layouts come into play.

You can have your site developed for mobile and desktop/laptop, meaning the same content is displayed differently at two fixed widths. This means only two layout designs will have to be drawn up, and there’s no extra maths involved in making everything stretchy!

An adaptive approach means that your mobile visitors will see your content in one layout and all other visitors will see the desktop version.

Extra breakpoints

Of course, if you like, you can add extra breakpoints for tablet sized layouts, widescreen monitors, etc. (the latter will be more and more useful as more people use televisions and games consoles to access the web) – you’re not limited to mobile and non-mobile!

Do some digging

So whether you’ve already got a website or you’re looking to have your first website developed, a responsive layout is an important part of the plan.

If you already have a website your analytics will tell you how many of your visitors are using mobile devices, so you’ll be able to make an informed decision on the mobile front.

Your analytics will also tell you how many widescreen visitors you’re getting.

For those that are having a website developed from scratch you probably don’t have any analytics to base your decision on, but your relationship with your clients is still very valuable: how about sending them a survey asking how they access the internet? Or you could use the results of an online survey into general smartphone usage to base your decision on.

Responsivificate* me!

So responsive design is becoming more and more important as the small-screen market continues to explode. Smartphones are everywhere and tablet devices are becoming more and more of an alternative to laptops for a lot of people.

Whether that’s a fully responsive site or a step towards improving your visitors experience with an adaptive approach, catering for as wide an audience as possible makes great business sense!

Send me a message if you’d like to know more about how your website could be made responsive.

*I might have made that word up too :)