Responsive Design and WordPress

Responsive Design and WordPress
There’s no doubt about it, responsive web design is the darling of developers right now and there’s no shortage of opinion on whether it’s a good or bad thing. Whilst for the most part designers agree that it’s the way forward, some have questioned how sustainable responsive is due to the large files it delivers.
This is because unless a responsive site is optimised, it delivers the same files to every device, meaning that mobile gets an awful lot of content it might not display, but still has to load. According to one study, 86% of responsive sites that are currently online deliver the full desktop HTML element to every visiting device.
If the web is not to become bloated with large web pages, then this trend clearly needs addressing, especially when it comes to load times as 57% of mobile users will just leave if a site doesn’t load within 3 seconds.

 

What can be done to improve performance?

To begin with, choosing a lightweight, clean and professional responsive WordPress theme would be a good start. Whilst last year there wasn’t much in the way of choice out there for responsive, this is no longer the case and there are some gorgeous themes to choose from.
Once the site is up and running, or on your existing site, it’s wise to test performance using Mobitest or the responsive tool at Design Modo to see how the site displays and measure load times.
Once this has been done, it’s then a case of ensuring that only the necessary resources are loaded on the target device. This can be carried out by stripping back the amount of HTTP requests, so that the user spends less time waiting for the page to load.
To do this, JavaScript and CSS resources must be compressed and again, there are tools out there to help with this, such as Compass, which allows developers to create cleaner markup, sprites and extensions without too much trouble.
For JavaScript, UglifyJS can be used to compress the code as it allows for automated working with JavaScript.
You can also use conditional loading, which prevents all kinds of content from being loaded.

Images

Images are often the culprits when it comes to larger file sizes, so it makes sense to optimise those too, if you haven’t already. If there are plenty of images on an existing site, then a good clean up is in order before using software such as Adaptive Images. This detects screen sizes and alters the images to suit, scaled down for smaller screens as embedded HTML images. Used in conjunction with Fluid Image techniques, Adaptive Images will save an awful lot of time if you have a lot of legacy content.

Why bother with responsive?

Apart from the fact that a mobile or tablet design that doesn’t scale will have the user bolting to the competition, the guys at Google agree that responsive is the best design to use.
Whilst of course Google do have their own agenda, as they only have to crawl one URL, it’s worth taking their advice. In this age of connected devices, it makes sense to ensure that the user gets a uniform experience, whichever device they are using.
Aside from load times and aesthetics, this means that branding will be more effective too, if the site looks much the same on every mobile, tablet and desktop. Branding in the social age is more important than ever, so consistency is a must for those looking to build a brand across platforms.
Add to all of this that some of the world’s leading brands have reported improved traffic following changing to a responsive design, and it would be foolish not to consider it. Whilst some may be comparing responsive to the early days of Flash due to large file sizes, it’s much more workable with and is still in its infancy.
There’s a very good chance that given its rise in popularity, responsive web design will need to grow up quickly.
The featured image for this post was taken from Elegant Themes, a provider of responsive WordPress themes
Share on Google Plus

About Md.Jubayer