Web Design Weekly #62


IE10 Snap Mode and Responsive Design

A great post by Tim Kadlec which explains how and why we need to start adding the @-ms-viewport rule to our CSS now to ensure our sites look good on Windows 8. (timkadlec.com)

The Infinite Grid

Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today, we’re designing for a medium that has no fixed dimensions; a medium that can and will shape-shift to better suit its environment; a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between. (alistapart.com)

The State of the Picture Specification (w3.org)


Native Client Side Validation for Web Forms

HTML5 introduced a concept known as constraint validation – a native means of implementing client side validation on web forms. Yet, despite being available in the latest version of all major browsers, constraint validation is a topic largely relegated to presentations and demos. This post by TJ VanToll sheds some light on the new APIs to help developers make better web forms for everyone. (html5rocks.com)

OOCSS + Sass = The best way to CSS

Object-oriented CSS is awesome. But littering your markup with non-semantic classes is not awesome. Those classes sprinkled all over your HTML are going to change, and that’s not gonna be fun. But if you combine OOCSS and Sass you get the best of both worlds: modular CSS without bloated, hard-to-maintain HTML. (ianstormtaylor.com)

Designing the new TweetDeck

This new version brings TweetDeck’s visual design up to date, improving legibility, introducing better customisation options, and helping the content to shine through. Cennydd Bowles from the TweetDeck design team highlights some of the design improvements they made. (tweetdeck.posterous.com)

Internet Explorer on Xbox 360

A nice early review of the Xbox 360 software update which includes an Internet Explorer app. This review by Peter Gasston, who was part of the Beta test programme, has been using Xbox IE for a few months so it is actually very detailed. (broken-links.com)

Q&A no.4 with Chris Coyier

Chris goes into details about when to use OOCSS, fallbacks for SVG, maintaining vertical rhythm, CSS project structure and more. (smashingmagazine.com)

How does the Chrome team ensure the stability of the canary channel? (quora.com)

A simple, step-by-step presentation on CSS line-height (slideshare.net)

Using Sass source maps in WebKit Inspector (bricss.net)

Understanding JavaScript OOP (killdream.github.com)

Does JavaScript need classes? (nczonline.net)

Tools / Resources

Easy retina-ready images using SCSS

If you’re interested in adding retina image support to your website or app and you happen to be using SCSS, here’s a handy shortcut that makes it dead simple. (37signals.com)

Mustache.JS + jQuery

Some quick pointers on getting the Mustache template system running with jQuery quickly. (mediahack.com)

Contrast Ratio

A unique tool for calculating color contrast ratios by Lea Verou. (leaverou.github.com)

CSS Flexbox Please! Interactive demo of the new flexbox spec (agektmr.com)

Paul Irish’s slides on improved webapp dev workflow & Yeoman (dl.dropbox.com)

Skinning the Chrome Developer Tools Revisited (plus.google.com)

HTML5 Element Flowchart (html5doctor.com)

The Sass Playground! (sassmeister.com)


All the Valio Con videos

So many hours of top quality talks from the awesome looking Valio Con conference. Highlight for me was the talk by Kyle Neath from GitHub about Hubot (the GitHub robot). (valiocon.com)

How do you choose your clients? (whitneyhess.com)


Grooveshark – UI/UX Designer

Grooveshark’s HQ is looking for a wicked UI/UX designer to join to the UI Design and User Experience team. This maestro will contribute to the entire product design process diving into user behaviour research, prototyping and visual design. (grooveshark.com)

Last But Not Least…

What Pop-Ups Really Say (bradcolbow.com)