Web Design Weekly #29



Twitter’s Bootstrap toolkit hits 2.0

Bootstrap 2 brings a plethora of changes and new features to the toolkit. Much of their work was guided by the experiences while working on Twitter.com’s latest redesign. Mark Otto and Jacob Thornton have added more features, better documentation, smarter default styling, and more. (twitter.github.com)


Designing for touch

Fingers and thumbs turn desktop conventions on their head. Interaction designer Josh Clark explains what you need to keep in mind when designing for mobile touch screens and compares finger-friendly touch interfaces for iPhone, iPad and Android. (netmagazine.com)

Dream Job at Google (Chrome Developer Relations Team) (plus.google.com)

Firefox Adds Powerful New Developer Tools (blog.mozilla.com)

Craftsmanship (davegamache.com)


* { box-sizing: border-box } FTW

Mr Irish suggests the universal selector (*) to apply border-box box-sizing to every element. Be sure to read all the thoughtful comments and sneak it into your next project! (paulirish.com)

How to Approach a Responsive Design

Tito Bottitta from Upstatement explains how they experimented to solve design and layout problems within a responsive framework while designing the new Boston Globe site. They learnt a huge amount as they went along and this article is a great insight into the processes they took. (upstatement.com)

Sass & Compass: Why You Hatin’?

Ever since CSS was officially introduced in the mid 1990s the way we write it has essentially remained unchanged. Yes, we’ve seen the occasional addition of new styling options and, sure, we’ve learned new ways to organize our code. But despite all the advances in web technologies over the years the limitations of CSS have always been with us. (atomeye.com)

First, Understand Your Screen

As web developers, we often need to know the screen size of the device we are displaying content on. Perhaps on the server, perhaps on the client, perhaps to be used as a clause in a media query. James Pearce – Head of Mobile Developer Relations at Facebook dives DEEP into the screen. Epic article! (tripleodeon.com)

Twittering with D3 by Divya Manian (nimbupani.com)

Height matters! (amobil.se)

Implement Google Custom Search into WordPress (netmagazine.com)

Tools / Resources

Real World CSS3

Below is a carefully-curated list of real-world examples and snippets of CSS3 that can be safely used to enhance any piece of work you create. (visualidiot.com)

WordPress Snippets (redesigned) (wp-snippets.com)

Red Team Design – Some nice CSS3 posts. (red-team-design.com)

A nicer way to learn about HTML & CSS (htmlandcssbook.com)

182 vector icons drawn with Raphaël (raphaeljs.com)

7 WordPress code snippets you should use on every site (wp-snippets.com)

Fbootstrapp – Toolkit for development of Facebook iframe apps (github.com)

Responsive Design Test Bookmarklet (benjaminkeen.com)


Beautiful Web Type

A showcase of the best typefaces from the Google web fonts directory. There are currently 404 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. This site aims to show off the good ones. (hellohappy.org)

365 Awesome Designers (365awesomedesigners.com)

Foundation interview w/the CEO of Instagram – Kevin Systrom (foundation.kr)

Awesome Slider (via @robert_tilt) (maisengasse.at)

Last But Not Least…

Websites From Hell (websitesfromhell.net)