Responsible Responsive Design. A book review
If performance of responsive websites is something that interests you, we have gotten a new holy bible. Responsible Responsive Design from A Book Apart covers just that, and everything else that you need to think of, when building websites for phones, tablets and desktop computers.
Responsible Responsive Design by Scott Jehl is a book I’ve really been waiting for durning the last months. When it finally was released this late november, it was an instant buy.
I’ve been a fan of Scott and Filament Group, the company he works on, quite a while now. Filament Group may be most known for their amazing work with the, at least for developers, world famous bostonglobe.com.
Scott himself might be most known as the creator of respond.js and the Picturefill polyfill. As you may know, I’ve made a WordPress plugin that wouldn’t exist without Picturefill.
What I’ve learnd
Okey, this isn’t really a book review. I haven’t done such a thing since school and won’t do it again…
Instead, this is a post where I list the three most important and interesting things I’ve learned from Responsible Responsive Design.
1. Progressive enhancement
HTML is the foundation of the web and it works everywhere. The CSS might not work in all browsers, but a raw HTML document will always work. That’s where we should start when building websites. CSS and Javascript can be added later when we know what the browser is capable of.
For example, we might have a very small stylesheet that applies typography and basic layout. This should also work in most browsers on the planet.
Then, we could have another stylesheet with more advanced layouts that only browsers that can handle it should load.
The same goes for Javascript. The site should work fine without scripts, but the experience can be made better for browsers that supports it.
Read the book if you wanna know how to achive this.
2. Megabytes isn’t everything
1.7 megabytes is the average weight of a website these days. That’s a lot of data to load for a phone on EDGE. But even though page weight are important to keep down, it’s not the only thing you need to worry about.
The site will feel fast if it renders quickly. That can be done even if the site is heavy in megabytes.
The key is to keep the number of render blocking things like link and script tags down to a minimum. When the browser starts to render a HTML document, it will pause and wait for the stylesheet och script to load before it continues the rendering. That’s why scripts should be loaded at the bottom of the page.
Images on the other hand are non-blocking, so text will be visible even if the image hasn’t loaded yet. This will make the site feel more fast and snappy, even if it containes heavy images.
TL;DR: stylesheets and scripts should be concatinated. Keep the number of HTTP requests down.
3. Load asynchronously
script tags belongs at the bottom of the page, but link tags should be in the <head> where it will block the rendering. But there’s a method that allows you to get around that.
CSS that are ”critical” and ”above the fold” should be placed inline in the <head>. The top, visible portion of the page will get the styles applied immediately. The full stylesheet could then be loaded asynchronously and won’t block the rendering of the page. script tags should also be loaded asynchronously.
We used this technique at Ord&Bild when we launched our new site a couple of months ago with good results.
For exact instructions on how to achive this, I once again refer to the excellent Responisble Responsive Design.