Responsive Design Weekly #209

Welcome to edition #209

Welcome to another week of responsive goodness!

The best thing about having a two year old is that once one form of illness goes it gets backed up with a new unrelated one the next week :|

Baby update: still no baby yet, but gaining a more frustrated wife.

Oh and before we get started I highly recommend you head over to contribute to the voting of the CSS Dev Conference sessions. Community voting for CSS Dev Conf is one of the parts that I love to see — the community gets to hear and see so many fresh voices based on the results from the double-blind voting, but it comes down to your contributions so please vote now.


Unfolding Critical CSS

CriticalCSS is something that I’ve been HUGELY in favour of since it wasfirst suggested through the Filament Group (citation needed). Since then I’ve showed clients many times how much faster we can make their website appear by loading the Critical CSS in the head…. although I leave off the how and just show them the results. This article notes that on a site with multiple page views perhaps it’s not necessarily the first page render you need to focus on, but the entire journey itself… I had to comment of course.

Our Sponsor

Try to convert existing websites to native Android & iOS!

Try to convert existing websites to native Android & iOS!

GoNative offers a different approach to hybrid app development. With GoNative, you can convert your existing website to native Android & iOS apps, no changes required! Tons of examples in the app stores. Automated conversion, with native plugins for push, animations, deep links, and more.

Sponsor RWD Weekly and reach more than 28,113 responsive champions


Publishing Your Content Online and Syndicating it Elsewhere

Own your own words. Publish your own content on your own little place on the web, and then syndicate to every popular platform going around. If anyone thinks this is too hard or complicated let me know and I’ll give you a hand to get off the ground and started.

Instant Apps and the web

Google seem to have developed something new for Google I/O, Apps that aren’t like apps and allow you to get at stuff like content and video without having to download the app….. or as we’ve been calling it for a while “web pages”. I poke fun, but I’m sure there’s more to this capability then was initially covered as it does seem a bit wasted at the outset. Anyone have an explanation about the benefits?

Not OK, Computer

A look at Radioheads recently updated site and why URLs should be made to last.

All or Nothing

TL;DR. the All CSS property is useless and probably should be avoided.

Our best practices are killing mobile web performance

Web performance rules invented for desktop web access need be revised for the mobile era.

Wikipedia Dominates Among Smartphone Users Looking For News and Information

The usage of the responsive wikipedia site on mobile towers far and above other news sites. It you need to show how mobile usage has increased then this is certainly something you could use.

A Form Was Never Just a Sheet of Paper

I love the idea that crappy forms are being brought online and customised to be mobile first.

Styleguides, Pattern Libraries and Design Languages

While we’re naming things… Stu Robson takes on the same challenge and clears up a few terms in his own way looking at Pattern Libraries, Styleguides, and Design Language.

Clarifying our “Style Guide” Nomenclature

Would a rose not still smell as sweet it it were known by a different name? In this case the terms we throw around to name style guides or their derivatives do indeed “smell” different. This article aims to better define things like interface inventory, style tiles, element collages, pattern library and more.

The picture element: saving bandwidth, data and possibly the world

Now that Safari has signed up with RWD images Bruce Lawson looks back over how it all came to be.

Cool URIs don’t change.

URIs don’t change: people change them.

When to use Flexbox

By understanding the intricacies of flexbox you will have a better understanding about when it’s not practical to be used.


Web Image Effects Performance Showdown

If you’re applying front end updates to your images for creative direction (like making them blurred, black and white, or “sepia tone lovin’“) then there are some performance considerations to make. You can use CSS, Canvas, SVG but which is the best option? (Pssst, it’s not canvas).

Using imgix with lazysizes

See how you can lazy load your images and still use the responsive images solution. Note lazysizes and imgix.js are not compatible. If you’re already using imgix.js, you can use its lazyloading capabilities instead. lazysizes does work well with our other client libraries.

Tools & Resources

Postlight Mercury

With one line of code, Postlight Mercury readies your publication for Google AMP.

eBay MIND Patterns

This site contains all working examples for the book eBay MIND Patterns – Accessibility Patterns for the Web. Each example demonstrates the correct semantic HTML markup, keyboard interaction design, and ARIA attributes for assistive technology.

Responsive Tables

Dave Rupert shows how we can execute a responsive comparison table with CSS alone and keep it accessible.


RespImageLint is a bookmarklet that checks images of a webpage against a list of common mistakes and best practises.

Your Hero Images Need You! Save the Day with HTTP2 Image Loading

HTTP2 can greatly help the overall performance of sites with lots of images… but that doesn’t necessarily fix the overall page weight (as we read about in Una Kravets tutorial ;)


Thanks for subscribing and I hope you managed to pick up a few new ideas and learned something new this week. If you’ve come across something of interest please share it with me by hitting reply and I’ll check it out for next week.

See you next Friday!



Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>