Web Design Weekly #32


The Industry

This new blog brings a new voice to tech media. Highlighting design focused startups and people. They are an independent news entity and strive to be a positive force in our community. Founded in November of 2011, with the main goal is to shed light on those overlooked by the mainstream media. (theindustry.cc)

Responsive Images Community Group

If you think Responsive Web Design needs responsive images in HTML, a new w3 ccommunity group has just started. (w3.org)

Starbucks get’s a makeover: Responsive + Modernizr + H5BP (starbucks.com)

HTML5 adds new translate attribute (rishida.net)

I can’t design in the browser (www.sazzy.co.uk)


Valid JavaScript variable names ಠ_ಠ

Mathias Bynens found out that var π = Math.PI; is syntactically valid JavaScript. So he decided to look into which Unicode glyphs are allowed in JavaScript variable names, or identifiers as the ECMAScript specification calls them. (mathiasbynens.be)

Web-Drawing Throwdown

Paper.js, Processing.js and Raphaël are the leading libraries for drawing on the Web right now. A couple of others are up and coming, and you can always use Flash, but these three work well with HTML5 and have the widest support among browser vendors. (smashingmagazine.com)

The ol Element and Related Attributes

The ‘ol’ element has a new attribute reversed in HTML5. In addition, a couple of related attributes purged in HTML 4 have made a return, namely start and type for ‘ol’, and value for ‘li’. Making things more interesting, the returning attributes were removed from HTML 4 for being presentational. So why are they back? (html5doctor.com)

Building responsive WordPress sites

Web developer Jesse Friedman explains how you can integrate responsive web design with WordPress and goes over both the advantages and challenges of responsive theming. (netmagazine.com)

Webstock: best conference ever (a.wholelottanothing.org)

HTML5 App Themes Are Coming (softwareas.com)

Google’s new “batshit crazy” UX (dcurt.is)

Tools / Resources

Filament Group’s Open Source Code

As enthusiastic supporters of standards, progressive enhancement, and responsive techniques, the Filament Group frequently release open-source code. They have decided to move all their open source projects to Git to make sharing, bug tracking and updates easier. (filamentgroup.com)


Paul Irish put the call out on twitter that it was about time that this got developed. Within 24 hours ‘mothereffinganimatedgif’ was born. I monitored the development in the IRC room and was truly blown away seeing how fast they worked. Good job team! (mothereffinganimatedgif.com)


ImageAlpha converts 24-bit PNG to paletted 8-bit with full alpha channel. This greately reduces file sizes with only minor loss of quality. Such images are compatible with all browsers, and even degrade well in IE6. (pngmini.com)

Responsive Layouts, Responsively Wireframed

Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context. (thismanslife.co.uk)

Chris Coyier’s InControl 2012 slide deck (css-tricks.com)

SASS and Compass for Web Designers (tutsplus.com)

Useful Git Commands (davidwalsh.name)

Backbone patterns (ricostacruz.com)


Visual Heap

A visual aggregator for designers. It users Dribbble, Creattica, CSSMania, Designmoo, Premium Pixels and 365psd. The latest from each site is compiled into one site, giving you and quick visual reference of some amazing work. (visualheap.com)

Wow! An HTML version of @UseClear: (View on iPhone). (youyuxi.com)

50 Examples of Responsive Web Design (awwwards.com)

Lesson Learned (buzzusborne.com)

Last But Not Least…

Submit Your Link Yo!

The Web Design Weekly website now has a link submission page. If you have news, a killa article, a new site or some radtastic code. You should head over the the website, fill out the form and I will do my best to include it in the next issue. (web-design-weekly.com)

Fluid & fixed columns playing together nicely thanks to display: table (moople.co.uk)