Responsive Design: Why Your Website Needs It

Why ensuring your website has a responsive design should be one of your business priorities for 2014.

responsive

A quick look at my stats shows me that 44 different mobile devices were used to access this site very site in July, in what accounted for just under 20% of my total traffic.

Looking at one of the ecommerce sites I undertake web development/SEO work for, the figure is actually above 50%, accounting for over 11,000 visits (screen shot from google analytics showing the top 10 devices below).

mobile

The number of people accessing your site from mobile devices is going to continue to grow as mobile technology improves and connections get faster with the roll out of 4G in the UK and more and more wifi hotspots.

It is clear that mobile can’t be ignored, so, what sort of experience is your blog/site giving to your mobile visitors? You have 3 options: –

Static design

Mobile visitors see exactly the same layout as desktop/laptop visitors. The result: lots of small, unreadable text and navigation links that are difficult to click. Unhappy visitors.

Mobile version of site

A dedicated mobile site with a completely separate html template. The result: Can give a good experience for some mobile devices, but what about iPad, large screen displays etc? Also difficult to maintain 2 versions of your site.

Responsive design

A responsive design uses one template and css rules to adapt to different devices and resolutions. The result: Good user experience, single version of site and easy to maintain. Responsive wins hands down!

How Do I Know If My Design Is Already Responsive?

You can either view your site on different devices (iPhone, laptop etc), or if you are on desktop or laptop then open a browser window and resize it. The layout should adjust automatically if you have a responsive design.

Implementing A Responsive Design For Your Site

It can be a little daunting at first if you haven’t dabbled with responsive layouts before. Basically responsive layouts work by using css rules and media queries to detect the device/resolution of the browser in which your visitor is viewing your site.

I won’t go too much into the technical side just now (although I may in a future article), but briefly a media query looks like this: –

@media only screen and (min-width: 768px) {

/* specific css for minimum width of 768px

}

The css rules included under the media query above would only be applied for resolutions >= 768px. For example, we might decide that we don’t want to show the right hand navigation at screen resolutions below 1024px, so we might add the following css rule: –

@media only screen and (min-width: 768px) {

/* specific css for minimum width of 768px (with next query at 1024px)

#right_menu {
   display:none;
}
}

Help!

If all this seems a little hard to get your head round, then fortunately (depending on what your site runs on) you can find some great responsive templates that will give you a starting point and you can then tweak to your own requirements. There are some great templates for wordpress and magento at themeforest.

Responsive Frameworks

Another good way to get into responsive design (and in fact speed up your front end development) is to use a front end framework. I highly recommend twitter bootstrap and have used it on several projects.

Twitter bootstrap has options for responsive layouts built in + a whole host of other useful features, such as javascript libraries, animations, easy to use cookies, button designs etc.

Don’t Ignore It!

As I said above, mobile is not going to go away so make converting your site into a responsive layout your number 1 priority. It may cost a little (in time or money), but you’ll soon recoup that cost through happier visitors and increased sales!

So, that’s why your website needs a responsive design. If you any questions, or would like to add further points then please leave a comment below!

[bigsignup]

About the Author

I'm a web developer, programmer, blogger and SEO expert from Glasgow, Scotland, with over 15 years experience in the industry. When I'm not writing about marketing and SEO you'll find me strumming the guitar in my band or listening to Revolver on repeat. Follow me on twitter, connect with me on google+ and add us on facebook to keep up with all the latest trends in SEO and online marketing.

Leave a Reply 3 comments

Mohammad Reaz - August 3, 2013 Reply

Nice article about responsive design. In this post I like how do we know our site is responsive or not & Implementing A Responsive Design For Your Site. And the whole article I liked to read it. Thank you ..

    David McSweeney - August 7, 2013 Reply

    Thanks Mohammad, glad you enjoyed it!

Cole Wiebe - September 9, 2013 Reply

I have mixed feelings about responsive design. I come from a print design background, where we had control down to the 1200dpi pixel, and hate some of the layout comprimises we have had to accept in order to make designs responsive.

Our previous site design was responsive, adding multiple columns on the desktop, dropping to three on the iPad and displaying only one with a floating menu on an iPhone. It allowed clients to see exactly what I was talking about when I proposed a responsive design. We toyed with a responsive version in March when the current site redesign was completed and just weren’t happy it. Maybe next year we’ll give it another go.

Leave a Reply: