Is your responsive website up to speed?

If there was an award for the web design buzzword of the decade, then it certainly would go straight to responsive design. In our world of multi-screen connectivity and devices designed ubiquitous access to the internet, responsive design seems to becoming the design status-quo. However, one of the problems we face as designers is a slower performance due to larger file sizes.

 

Like many movements in web design, this has typically led to the mandatory cynics, declaring that responsive design is yet another fad that we are all getting excited about for no reason other than novelty. However, the problems that are fuelling these sort of comments can be overcome and you can crank your responsive design up to speed; with a few adjustments of course.

 

So why can responsive design perform slowly?

In a a responsive design, all of the same HTML elements are loaded all at the same time, including those that are intended for tablet and desktop delivery. So, regardless of what device a website is being viewed on, all of the content, including images and scripts, is delivered all at once. This can cause slower performance.

 

A study conducted last year by Guy’s Pod, showed that 86% of responsive sites currently deliver a page intended for use on a full desktop to mobile devices, and this is where the problem lies. To stop the slowness of responsive sites that is caused by bloated design, there is a design issue that really needs to be addressed.

 

In fact, if your website is responsively designed failure to address this issue could have serious implications for your company. According to Strangeloop, 57% of mobile users will leave a website if it fails to load within three seconds and you really can’t afford to lose your website users due to bloated page sizes.

 

How can you crank up the speed of your responsive design?

If you already have a responsive website, and your not happy with its performance, now is the time to optimise. There are many tools that you can use to measure the performance of your website. One that we like here at Kalexiko is Mobitest. This useful tool can be used to measure the performance of your responsive site, and any faults you find you can go back in and edit.

 

Though it must be said, it is much simpler to ensure that your responsive website performs well during the design stages as carrying out repairs post design can be tricky. It goes without saying that performance is a massive factor in the design of a responsive site and therefore it should be a consideration that is integrated into the design process, as opposed to being an afterthought.

 

In order to get the performance of your responsive site up to speed, you will need to reduce the size of a page with the resources that are loaded with it. There are various techniques that you can use to do this, and they won’t alter the look and feel of the site too seriously. What you need to consider first is how you can ensure that only the required resources are sent to the target device. You can do this by minimising the amount of HTTP requests, which means that the user will spend less time waiting for the DOM to load.

 

In turn, this can be done by compressing CSS and Javascript resources. Again, there are many tools that are great for doing this. An open source CSS network such as Compass can be used to do the job well. This will allow you to create cleaner markup and create sprites and extensions with little fuss. To compress your Javascript, UglifyJS is another great tool you should consider.

 

Conditional loading

Conditional loading is a very important technique when it comes to responsive design. Conditional loading can be used to make sure that smartphone and tablet users don’t download the aspects of the site that slow it down, or ones that they won’t use.

 

You can use conditional loading to stop all different kinds of content from loading; social widgets, maps, images and loads more. I should note here, it is crucial that you take the opportunity to thoroughly test the site at each stage of optimisation so that it’s easy to see which actions have made what difference as you are going along.

 

Images

In many of our articles on responsive design, we talk a lot about the heavy impact the use of images has on responsive sites, and this one is no exception. Images are responsible for taking up the largest amount of kilobytes on a web page, and as we all should know by now, images that are designed to be viewed in clarity on a desktop browser will certainly underperform when delivered on a mobile site.

 

Also, if your website contains a lot of legacy content (i.e: content that needs to go from one format to another) then the performance of your responsive site is going to be affected heavily by this, therefore you need to find a way to prevent this content from being loaded. This can be done using Adaptive Images. The way this works is that the software detects screen size and automatically creates, caches and delivered the correct scaled down embedded HTML images, without the need for you to change the markup.

 

Text

Like images, text is another factor that you need to think about. Text will naturally wrap when the browser size narrowed; which can cause display issues. A great tool that you can use to overcome any issues is FitText. FitText is a jQuery plugin which will auto-update the size of your font, with the option to set a minimum and maximum size.

 

However, while this is an ideal solution for headlines when it comes to your paragraph copy it work quite as well.

 

Choosing responsive design

Despite the jading it has received from cynics, at Kalexiko we still believe that responsive design is a great way to go when it comes to designing a site. Responsive design provides innovation that excels beyond just building a mobile website and in the web design industry, innovation and the ability to harness it is beyond value.

 

Responsive design benefits your company, not just in the visual and accessibility aspects of your site, but also in search rankings. Rather than having to crawl multiple URLs, with responsive design you only have one URL that web searchers need to crawl meaning that this places you in higher standing with search engines like Google.

 

As well as search rankings, responsive design also enhances the shareability of your site. In this age, where social sharing holds massive sway on your sites web presence, responsive design can be so beneficial. Responsive design breaks down the divide between desktop and mobile users, creating a universal experience that is accessible to all users; meaning that if a mobile sharer likes a site and shares it, everyone on every format will get the same experience: granted your responsive design is good of course.

 

Mobile and digital devices are fast becoming the normative mode for surfing the web. Tablet sales have soared to more than a double the amount sold last year. There is no doubt that responsive design has assisted in the increase of traffic on many websites; in fact, according to a research carried out byLUKEW, many of the world’s top brands have experienced a rise in traffic to their website due to responsive design.

 

This included an average increase of 23% by visitors on mobile devices, as well as a lowered bounce rate of 26%, with visitors spending around 7.5% more time on websites than before.

 

Take a look at the clothing brand O’Neill. Their conversion rate is reported as being 65.7% higher on iPads and iPhones as a result of employing a responsive website. Subsequently this accounted for a 101.2% growth on revenue on these devices alone.

 

When it came to Android devices, the rate of conversion was even greater; a huge 407.3%, accounting for an impressive 591,4% growth in revenue. What responsive design seems to be doing for companies demonstrates a repetition of the impact that social media had on digital marketing not too long back. Therefore, designing a responsive site for your company can lead to substantial increases in conversions.

 

Bearing in mind that, if the digital prophecies turn out true, it is predicted that mobile internet will overtake desktop by next year, and with figures showing that 67% of users stating that they have made a purchase from a mobile site, failure to adapt to the responsive trend in design could potentially thwart your business quite heavily in the not too near future.

 

Now is the time to get your responsive site up to speed

While responsive design has been around as a concept for quite a while now, it is still in its infancy in comparison to other design mediums. Though, judging from statistics it seems that more and more companies are beginning to see and experience the benefits that a responsive design can bring.

 

While at the moment it is impossible to declare with certainty that the future of design will be responsive, it seems that the market is demonstrating that it is certainly a beneficial asset and with developers ever working on new ways to make responsive sites perform better it seems that now is the time to ensure that your responsive site is performing up to speed and not leaving your company at the starting line.

 

SHARE: