Wednesday, May 28, 2014

Style Guides and Guardian Local Storage - CSSConf 2014 Part One

CSSConf 2014 had very good presentations. The presenters were international which emphasized the requirement to design for the world, not just North America. This post looks at two of the eleven presentations.

Patrick Hamonn (@patrickhamann) of the Guardian showed the need to have a news article display within one second. Because of network latency there is only 400 milliseconds for the browser for rendering. For reasons explained in his slides (CSS and the Critical Path) this means every critical piece must be sent on the first request. The result is an HTML file with inline minimal CSS. Everything else is deferred. He makes an excellent case. In a later post I'll compare this to USA Today's redesign presentation at a Modev meetup.

The Guardian also makes use of local storage, but I think this is controversial. There is a growing movement for "offline first" development which uses local storage and other resources for offline content. The Guardian uses local storage for CSS and other page needs instead of content. USA Today does not use local storage for content. The new mobile site for The Washington Post no longer uses local storage for content. This will be an interesting area to watch.

Nicole Sullivan (@stubbornella) argued convincingly for Style Guide Driven Development. She cited an example where a relatively simple media block component reduced HTML size by 50% as well as reducing CSS file size. A Style Guide can also reduce technical debt and make a site less fragile. It just makes business sense to implement and maintain one. She recommended Trulia's open source Hologram for creating a style guide. This reminded me that she also talked last year at JSConf on Ceating Living Style Guide that becomes part of every project deployment. There is more and more evidence that a living style guide is a best practice for any non-hobby site.

Look for more about CSSConf presentations in future posts. I'll also update this post with links to the videos when they are available.