Why ensuring your website has a responsive design should be one of your business priorities for 2014.
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).
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]
