All things responsive, all of the time. (View in browser.)
Those who Wander responsive website
Hello and welcome to edition #141 of Responsive Design Weekly.  This week we take a look at what I consider to be the most vital aspect of responsive web design.... heck the most vital for any kind of web design.

The argument is that content is king, but what good will your content do anyone if the visitor closes the browsers because the site took too long to render even the first part of your site? Here are a few tips for getting the basics right as well as going a the extra mile with some advanced tips.
You know how to code, but how are your design skills?

You know how to code, but how are your design skills?

Do you ever wish your websites & apps looked more "professional"? Take one of our online design courses with hands-on projects & 1-on-1 mentoring from expert designers — we guarantee you'll see an improvement in your work. Sign up today!


To get the fastest perceived performance on our pages we need all the HTML, CSS, and JS required to render the top part of our page within the first response from the server — that magic number is 14kb.

Patrick Hamann, Technical Front End lead at the Guardian, and team has managed to break the 1000ms barrier by introducing a mixture of front end and backend techniques. The Guardians approach is to ensure the content — the news article — is delivered to the user as quickly as possible and within the 14kb magic number.

Lets look at the process:

  1. User clicks on a link news story from Google.
  2. A single blocking request is sent to the database for the article (no related stories or comments are requested).
  3. The HTML is loaded containing Critical CSS in the <head>
  4. A “Cut the Mustard” process is undertaken and any conditional elements based upon the users device features are loaded.
  5. Any content related to or supporting the article itself (related article images, article comments etc) are lazy loaded into place.

By using the critical CSS approach means the <head> is 222 lines long however the critical content still comes within the 14kb initial payload when gzipped and it's this process that helps break that 1000ms barrier.

Conditional & Lazy loading

Conditional loading is improving the users experience based on their device features. Tools like Modernizr allow you to test for these features, but beware that just because a browser says it offers support that it doesn't always mean full support. Another approach might be to “Cut the Mustard”.

If the browser is deemed as enhanced after the check then you can provide them with a more immersive experience. To see a working example try disabling javascript on the and see the difference.

Another approach might be to hold off loading something until the users shows intent to use a feature. This would be considered conditional based upon the user context. You can hold off loading in social icons until the user hovers or touches the icons, or you could avoid loading an iframe google map on smaller viewports where the user is likely to prefer linking to a dedicated mapping application.

Lazy loading is defined as something that you always intend to load on the page — images that are a part of the article, comments, or other related articles — but that don't need to be there for the user to start consuming the content.

Back to Basics

Advanced Techniques

  • Set up Fastly or Cloudflare. CDN's deliver your static content to users faster then your own server.
  • Enable SPDY for http2 enabled browsers to take advantage of HTTP2 features like parallel http requests instead of synchronous. CloudFlare offer this for paid accounts.
  • Social Count allows for conditional loading of your Social Icons.
  • Brad Frost built out this example using the Static Maps Google API
  • Ajax Include Pattern that will load content snippets from either a data-before, data-after data-replace attribute.

Sponsor RWD Weekly and reach more than 27,993 responsive champions

That's all for this week. Next week I'll be focussing on getting the most out of Responsive Frameworks.

I'll see you next week!

Copyright © 2015 Simple Things, All rights reserved.

unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp