Web Design Weekly #59


CSS Shaders Now an Official W3C Editor’s Draft

Adobe’s CSS Shaders proposal, which will bring high-quality cinematic effects to the web through some new CSS tools, has been accepted by the W3C. (webmonkey.com)

CSS-Tricks – V10

Huge congratulations to Chirs Coyier with the redesign and the roll out of ‘The Lodge’. If you didn’t get behind his Kick Starter project, head over and signup now! (css-tricks.com)


Are you curious to find out more about CSS4? Tab Atkins give you the low down. (xanthir.com)

Issue 3 – Offscreen Magazine (offscreenmag.com)

WordPress goes Retina (blog.wordpress.com)


Five steps to gettin’ flexy in responsive web design

Dave Rupert, lead developer at Paravel, gives essential tips and tricks on becoming flexible in responsive web design. (netmagazine.com)

A comprehensive guide CSS3 transitions

This article by Louis Lazaris covers CSS3 transitions in-depth. After reading this article you should come away with a more rounded understanding of CSS3 transitions, along with a few practical tips and techniques to help you implement transitions into your next project. (adobe.com)

Make your site faster for mobile users

Joshua Bixby explains that there are a number of fundamental and advanced tactics that you can use to increase the performance of your mobile sites. (speedawarenessmonth.com)

Do you really need a Style Guide?

What is a style guide and when should you use one? Patrick Cox summarise the main properties of a style guide, what it should contain and how you can determine if you should invest the time in creating one for your brand/website. (tympanus.net)

How GitHub Keep It Fast (github.com)

Toggling State in CSS (xanthir.com)

The Flowing Standard (w3.org)

Tools / Resources


The Filament Group have done it once again. This time releasing a Grunt.js task that efficiently manages icons and background images for delivery to a variety of browsers and devices. It takes a folder of SVG files, and outputs them to 3 CSS files containing CSS for the icons with class names that match the file that generated them. (filamentgroup.com)


A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. (noeltock.com)


A lightweight JavaScript library for handling CSS media queries. (github.com)

10 tips for getting that native iOS feel with PhoneGap (mikedellanoce.com)

A Flexible Approach to Responsive Navigation (webdesign.tutsplus.com)

Retina size screen grabs without a retina Mac (stuffandnonsense.co.uk)

Convert Fonts for the Web (fontprep.com)

GitHub Résumé Generator (github.com)


A Look Inside Smashing Magazine

This week Smashing Magazine are celebrating their six-year anniversary! This article by Vitaly Friedman goes behind the scenes and explains how they manage to be the leader of the pack. Congratulations to all involved! (smashingmagazine.com)

Designing All The Things

Josh Brewer, Principal designer at Twitter, talks about Designing All The Things. Josh talks about the evolution of design since 2007 — moving from web sites to web apps to today’s world where a designer’s job feels like fighting a multi-headed monster. Awesome talk! (sneakerheadvc.com)

Depth of field effect with SVG filters in CSS3 //currently only works in Chrome (codepen.io)

Showcase of 40 Insanely Detailed iOS Icon Designs (line25.com)

Nimbletank – Impressive mobile site (nimbletank.com)

CSS Shaky Animation (lab.tylergaw.com)


Theme Wrangler at Automattic

You live and breathe WordPress themes. You are equally at home in Photoshop/Gimp, PHP, CSS, or the terminal. You’ve built numerous WordPress-as-CMS sites from scratch. Everything you’ve touched is GPL. You’ve probably written a theme framework. Come help us wrangle the wild and woolly world of themes. (automattic.com)

Last But Not Least…

Front End Engineer’s Manifesto (f2em.com)

Responsive Roulette (jordanm.co.uk)