Web Design Weekly #42


The Smashing Book #3

7 months of work. 44 people involved. As always, another top quality production by Smashing Magazine! If you haven’t grabbed yourself a copy, what are you waiting for? (smashingmagazing.com)

Cross-Browser Debugging CSS

Nicole Sullivan got a little excited sharing her cross-browser debugging tips with a co-worker it ended up being an awesome post that will no doubt help you in the future if you have to wrestle with Mr Internet Explorer. (stubbornella.org)


Griddle is a fluid and modular grid system for modern browsers — IE8+, Firefox, Safari, Opera, Chrome. It uses inline-block and box-sizing to provide features that float-based layouts cannot. At Griddle’s core is a set of Sass functions and mixins that automate the production of the grid’s CSS. Note: Very early version by Nicolas Gallagher. (github.com)

Application Cache is a Douchebag (alistapart.com)

Say Hello to Octicons (github.com)



Another well written and uniquely styled post by Trent Walton. This time he touches on the retina display and offers a few tips to help our work be as future proof as possible. (trentwalton.com)

HTML5 Audio — The State of Play

With many new advanced audio APIs being actively worked on and plenty of improvements to the existing native audio we all know and love, it’s certainly an exciting time to revisit the world of . (html5doctor.com)

Getting started with RESS

This tutorial will teach you the basics of RESS (Responsive Design + Server Side Components) and how you can build a responsive page that works well on small screens with the help of server side technologies. (netmagazine.com)

8 web standards myths debunked

Lea Verou takes a look at some of the misconceptions of web standards, what the W3C and its working groups actually do and how the standardisation process works. (netmagazine.com)

Front End Performance Case Study: GitHub (blog.jphpsf.com)

Phonegap Beliefs, Goals and Philosophy (phonegap.com)

Text masking — The standards way (lea.verou.me)

Help! My Stylesheets are a Mess! (speakerdeck.com)

7 Days with Sketch 2 (theindustry.cc)

Pixel Fitting (dcurt.is)

Tools / Resources

CSS Arrow Please

Generate the CSS for a tooltip arrow. Perfectly executed handy tool. (cssarrowplease.com)

Quick Timesheets

Quick Timesheets just released a free single user plan. It has a cool Google calendar-style time tracking interface. Nice to see an Australian based start-up doing some cool stuff. (quicktimesheets.com)

Speed Up Your Website

Some nice tips on this Web Designer Depot post about how to optimise your site. If you are keen to learn about site performance this is a good starting point. (webdesignerdepot.com)

Screenfull.js – Wrapper for cross-browser usage of the JavaScript Fullscreen API (github.com)

Guide Guide – Photoshop grids that don’t suck so hard (guideguide.me)

Chrome DevTools Timeline’s new Frame Mode (youtu.be)

The Web platform: Browser technologies (platform.html5.org)


Experimental Page Layout Inspired by Flipboard (tympanus.net)

100 Greatest Free Fonts Collection for 2012 (awwwards.com)

Inspiring custom lettering logo designs (blog.spoongraphics.co.uk)

On Building & Partnering (destroytoday.com)

Last But Not Least…

HTML9 Responsive Boilerstrap JS

It’s cross-universe compatible! How do I install this? Just attackclone the grit repo pushmerge, then rubygem the lymphnode js shawarma module – and presto! (html9responsiveboilerstrapjs.com)