Web Design Weekly #14

p { padding: 0; margin: 0; }
h1, h2, h3, p, li { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
td { vertical-align:top;}
ul, ol { margin: 0; padding: 0;}
.heading {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-icab-border-radius: 3px;
.content-items h2{ margin: 0; padding: 5px; font-size: 16px; font-weight: bold; color: #ffffff !important; text-align: left; background: #F14C2A; }
.content-items p { margin: 0 0 15px; padding: 0; font-size: 13px; font-weight: normal; color: #535353; line-height: 22px; text-align: justify;}
.content-items a,
a { color:#fd2323; font-weight: bold;text-decoration: none;}
.intro p {font-size: 11px; font-weight: bold; color: #8a8a8a; text-align: center;}

Issue #14, 30th day of September 2011

Welcome to issue 14 of Web Design Weekly. What a mega week! Jonathan Snook “smacks” us in the face with his style guide, Paul Irish warns us about the possibilities of more Internet Explore nightmares, Mathias Bynens keeps reeling out killer tweets and Web Design Weekly toppled over 2000 subscribers. Enjoy!

A re-skin on the newsletter will probably be landing in your inbox’s next week. I hope you like it.

If you have any feedback please hit me up on twitter @jake_bresnehan.


Scalable and Modular Architecture for CSS (smacss.com)
Jonathan Snook, currently Lead Prototyper at Yahoo, finally released his highly talked about SMACSS. SMACSS (pronounced “smacks”) is more of a style guide than rigid framework. SMACSS is a way to examine your design process and a way to fit those rigid frameworks into a flexible thought process.

Browser Market Pollution: IE[x] is the new IE6 (paulirish.com)
You might need a beer to handle this post by Paul Irish! Paul goes into great depth about the hugely important half-life of Internet Explore. We thought supporting IE6, IE7, IE8 were bad enough. How about 72 different version of IE….

HTML5 Mobile Boilerplate 2.0 is ready! (html5boilerplate.com)
More solid, many improvements, nicely optimised. BOOM!

Firefox 7 (mozilla.org)


Responsive Images — Part 1 (cloudfour.com)
Jason Grigsby from Cloud Four goes in to great detail about responsive images and what we should be thinking about when developing, even though he is only setting the scene for part 2. In part 2, he will be taking a closer look at the current alternatives for responsive images and which ones hold the most promise.

Emotion in design (netmagazine.com)
Our creations need to be more human, says Aarron Walter, lead user experience designer at MailChimp. He argues that the task of designing a pleasurable experience is made easier when we create a distinct personality for our interface.

Web Technologies Need an Owner (joehewitt.com)
Many people seem to assume that the Web will one day become the one and only client computing platform on Earth, therefore it must not be controlled by anyone. Joe Hewitt expresses his thoughts in an interesting post.

What the Web is and is not (joehewitt.com)
Joe Hewitt’s second blog post for the week is also a great read. He points out some good concerns for the quickly approaching future.

Screen readers, list items and list-style:none (456bereastreet.com)

Tools / Resources

Tinkerbin (tinkerbin.com)
Tinkerbin lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers. It also supports CoffeeScript, Sass (with Compass), Less, HAML and more.

Create a zoomable user interface with CSS3 (netmagazine.com)
David DeSandro reveals how to use CSS transforms to create a zoomable user interface similar to that of 2011.beercamp.com. In this tutorial, you’ll also learn how to use JavaScript to hijack scrolling to manipulate the zoom.

Gauges – The designers analytics. (gaug.es)
Gauges analyses your web traffic for your sites in real-time, incased in a beautiful thoughtful interface.

Speaker Deck – Share Presentations without the Mess

Backing Up WordPress With Dropbox (tutsplus.com)

Freelance Jobs now on Dribbble

Podcasts / Videos

5 recent DOM APIs from a bean bag! (youtube.com)
Paul Irish gives you a heads up on 5 recent DOM APIs whilst chilling in his bean bag. HTML5 classList, dataset, matchMedia(), textContent, and matchesSelector().

Ethan Marcotte on Responsive Web (5by5.tv)
Ethan Marcotte joins Jen Simmons for a conversation about responsive web design, tools, the process of designing a website, mobile first, what the future may hold and more.

JQuery Performance Tips And Tricks (ontwik.com)
In Addy Osmani’s talk, he takes a look at some of the best practices, tips and tricks for improving the performance of your jQuery code in 2011, with some quick wins and a few new surprises along the way.

Last But Not Least…

Mathias Bynens (twitter.com)
Mathias is a freelance front-end web developer from Belgium. He helps out with the HTML5 Boilerplate project and lots of other open-source projects. Everyday I am blown away with the knowledge and passion he shares and is definitely worth following on twitter!