Does Responsive Web Design Slow Down the Mobile Experience?

I am often asked whether or not responsive web design can slow down or sometimes simply degrade the user experience on mobile devices due to image file sizes and other technical challenges. The short answer is no, at least not if the website was built correctly. Let me explain…

For RWD Optimization we employ a “Progressive Enhancement” technique. Most companies that are not familiar with the inner workings of RWD tend to think that it’s a one size fits all approach. What we do is focus on enhancing the experience based on the capabilities of the browser/device. For example a small device would have a smaller/more optimized image presented vs a larger version that a desktop user will see. The way other companies do this is they will serve up the same image for desktop that they do on mobile. This kills both bandwidth and performance. To them Responsive is just about scaling content down. To us its about optimizing the experience for all users.

In general responsive web design, if applied correctly, can actually reduce load times.

Here are some optimization rules we may apply:

1. Images Optimization
The final aspect of Responsive Web Design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow properties. Scaling in CSS is pretty simple to implement for both images and video.

2. Media queries
Media queries are one of the cornerstones of Responsive Web Design. By adding some filter criteria around CSS definitions, we can control under which conditions those rules are applied to web pages. There are two places to define these criteria: using the media attribute of a link tag that references a CSS file or inline on a CSS file.

3. RWD Framework
We may use top RWD frameworks like Bootstrap, Foundation, Gumby Framework or HTML KickStart to organize the page structure.

4. Grid-Based Layouts
The grid layout helps define the size of content on any screen and can be used to define layout on different screen sizes. The Bootstrap, Foundation, Telerik Page Layout and other frameworks provide various sizes for their grid columns based on the size of the browser.

5. Minimizing HTTP requests
HTTP requests are sent to every device unless you tell it not to. JavaScript and CSS resources can help with this, such as Compass.
This is an open source CSS authoring framework that allows developers to create clean markup and create sprites and extensions simply and easily.

4 Enable Compression
We may apply JavaScript and CSS as compressed formats to speed up the loading.

5. Showing and Hiding Content / Conditional loading:
Not all content is intended for all browsers. In Responsive Web Design, this is the least technical design decision. What elements should appear on each of the page sizes? Not all devices need to display the entire website, nor should they. So we may apply some areas to hide on mobile devices that are not of significance to the mobile user.

 

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website