Web Design Weekly #33


Responsive Touch Interfaces

Matrix Transforms WOW! Plus a load of other great tips. Awesome video by Flickr Frontend Engineer Stephen Woods. He shares his hard-won advice for building responsive touch-based interfaces using HTML5, CSS, and JavaScript. Make time for it. (yuiblog.com)


A curated showcase of shit-hot web design with a less-is-more bent. Its aim is to showcase excellent use of HTML & CSS — and favour progressive enhancement and mobile adaptive layouts — but the currators apologise in advance for including poorly coded stuff if it just looks so damn good. (httpster.net)

About normalize.css

Nicolas Gallagher give a clear and detailed post on why you should use normalize.css. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. (website.com)

We need to kill off the Local Storage API (paul.kinlan.me)

Shiny Demos (shinydemos.com)


Responsive Design, Device Experiences, or RESS?

As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up. Responsive Web design, separate sites, or something in between? Here Luke Wroblewski tries to simplify the decision. (lukew.com)

Responsive Navigation Patterns

As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Brad Frost (Mr Mobile Man!) gives a great overview of some of the more popular techniques for handling navigation in responsive designs. (website.com)

Capturing Audio & Video in HTML5

Audio/Video capture has been the “Holy Grail” of web development for a long time. For many years we’ve had to rely on browser plugins (Flash or Silverlight) to get the job done. Come on! HTML5 to the rescue. (html5rocks.com)

Responsive Summit – London

Elliot Jay Stocks does a great wrap up of the London Responsive Summit. He met with a small group of people to chat about the various tools, techniques, problems, and solutions surrounding the subject of responsive web design.(elliotjaystocks.com)

Addy Osmani’s tools he regularly find helpful (plus.google.com)

A Responsive Design Approach for Navigation. Part – 1 (filamentgroup.com)

Tools / Resources

Codiqa – Rapid Prototyping with jQuery Mobile

Build with 100% jQuery Mobile components. Take your idea, prototype your app, and output a high-quality, fully functional and standards-compliant jQuery Mobile website. No black-box code. No external libraries. No hassle. (codiqa.com)

Pull Down for Navigation

Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so Tom Kenny decided to have a look and see what he could come up with using some nifty CSS and a touch of jQuery. (website.com)


Comprehensive array of LESS mixins that allow you to use CSS3 features without having to worry about vendor prefixes. Awesome. (github.com)

Chaplin – an Application Architecture based on Backbone.js (github.com)

Breaking down onload event performance bookmarklet (6.7percentangel.com)

Essential Sublime Text 2 Plugins and Extensions (net.tutsplus.com)

A whole podcast full of Chrome DevTools news (javascriptjabber.com)

ChromeVox is a new screen reader for Chrome (chromevox.com)

Open source iconic fonts composer(nodeca.github.com)

Better Sass Docs (kaelig.fr)


Kickstarter projects that kick ass!

With projects on the innovative funding site breaking the $1million barrier, .net magazine select their favourite design-related projects to inspire your own efforts (netmagazine.com)

Chase Happiness (davegamache.com)

CSS3 Font Bird (martingauer.de)

Last But Not Least…

Vote for some #RWD threads!

Dress Responsively! What standards-loving, responsively-building, media-querying web citizens wouldn’t love some apparel which flies the flag of the future of the web? Get voting! (dressresponsively.com)