Responsive Website Design and Possible Performance Issues

Many web designers and agencies advertise responsive website design. This responsive design allows a web page to look great no matter which browser is viewing it, whether it’s on a desktop, tablet or smartphone device. How the designer implements the responsive design makes a huge difference in the way pages load when it comes to speed.

Usually, the fastest way to implement a responsive design is by involving “media queries”, special directives that tell the browser how to display the page elements depending on the screen size. A site can have a ‘fluid’ or ‘responsive’ appearance where resizing a desktop browser will display the content and magically move about to fit the new width. Fluid layouts (using just ‘media queries’) allow a web page look great on a desktop computer, a tablet device or a smartphone.

Basic responsive designs (such as those in a standard wordpress theme) can be too slow for mobile devices. If you want to do business online, site speed matters. It is NOT a nice to have – performance is a MUST! Did you know:

• Page load speed impacts SEO, CPC rates in AdWords and conversion rates.
• Various research shows that 3 out of 4 mobile users will leave the site if it takes more than 5 seconds to fully load and be usable.
• Google recently stated that the average for mobile page load times is 10 seconds! This means there are many mobile sites that could dramatically improve their conversion by improving performance.

What makes basic responsive sites slow? Let’s see:

1. The copy is not always suitable for mobile, the volume of text or complex diagrams may need to be reconsidered. With ‘media queries’ designers can either load both versions of the content or just hide/show the content that is not-suitable-for-mobile based on the screen width. That’s an expensive feature.
2. Images are usually downloaded and then resized to fit the screen in the browser. This results in a slow download of the larger image (larger image = larger file size), this is inefficient because the image will not show at actual dimensions, and it will be resized once downloaded. Even worse, in some cases the image is downloaded and the ‘media query’ then hides it because the mobile user doesn’t need to see it – this is very wasteful.
3. Page Layout Trends. It’s currently fashionable/cool to design web pages that show long scrolling pages on the desktop, with navigation to jump ahead and cool markers, but on mobile devices, these long pages squish up to be narrower and become even longer. In order to fix this it is better for those different sections to become separate pages. Splitting the content into different pages reduces the size of each page. It loads faster and only loads the content the user has requested. I personally like to display less and if needed/requested when it comes to limited traffic possibilities.
4. Large CSS Files. Using media queries to do the hiding and showing content can be quite complex and result in large ‘CSS’ files. Most of the time that works fine, but when using these files for a web page that is meant to be displayed on a smartphone  it takes time for the browser to download, read and understand them. This ‘parsing’ process increases memory and CPU usage which increases the time it takes for smartphones and tablets to draw the page to the screen. I am more concerned by the size of the CSS file which usually becomes quite big, especially if the WordPress theme is a “one-size-fits-all” type of theme. That’s why I focus on building custom themes for my clients; they have exactly what they need to get the content look as expected.
5. JavaScript Design Elements. Desktop and laptop computers have fast CPUs and lots of memory (RAM) when compared to smartphones and tablets. Various design elements like a photo gallery, animation and other UI interaction often use significant amount of JavaScript. The JavaScript is rarely optimized for use on mobile, making it slow or even crashing the web browser on a smartphone or tablet. Older devices really struggle to process this complex JavaScript. In addition to this, a gallery can just become a set of images displayed one after another on mobile pages.
6. Type of Device. Different devices support CSS/HTML5 in different manners. What looks good on an iPhone may look completely different on an Android or Windows device. Less JavaScript for mobile can help a lot.
7. Animation. It’s cool to display all kinds of animations on a page running in a desktop browser, but phone users are usually in a hurry when the decide to access mobile versions of web pages and they just want to get to the information they need, this extra animation not only slows the loading of the mobile site, it slows your customer from getting what they are looking for.

It is great that responsive web design has gathered momentum and many sites are changing to this technique. That being said, without other mobile optimization tools, the ‘media query’ is not enough and now is the time to consider adaptive technology.

• Adaptive design more commonly refers to a site where features change or enhance based on the capabilities of the device. This can be used to solve the above issues.
• Adaptive does not have to be instead of responsive, you can do both at the same time.
• Adaptive adds more tools to optimize the viewers experience.
• Adaptive takes care of one major issue: SPEED.

In the case of WordPress themes, most of them achieve “responsive” by employing media queries.

At WebFix, we use both techniques in our responsive website design, depending on the customer’s approach. Our adaptive design will involve creating multiple themes for a site, each targeting different devices. The first will be tweaking the desktop version to work on tablets with media queries that will JUST reformat some elements such menu items, sidebars, footer widgets. It will have the same look and feel as the desktop version. Then we recommend designing a separate theme for mobile devices that will optimize speed and performance based on the above factors.

A great example is our own website. Take a minute to visit webfixtudio.com from both your mobile device and your desktop. You’ll see the differences between the sites.

If you have any questions, please use the form below to contact us. I’ll be glad to help you make the right choices.

(On a side note, it is important that when working with a designer or agency on your mobile ready site that they explain to you how they take care of the above issues, if they can’t speak to these issues at the time of the design it may cost you a lot of time and $ to fix down the road.)

[contact-form-7 id=”1017″ title=”Contact Form – Contact”]