Headlines

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)

Articles

* { 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 br apps (github.com)

Responsive Design Test Bookmarklet (benjaminkeen.com)

Inspiration

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)

Headlines

Nerdi Nerdi is an attempt to organise and make useful the tons of great web design and development utilities that are out there on the web. It is continually maintained and frequently updated with new features that aim to allow users to quickly and easily find just the right tool for them. (nerdi.net)

HTML5 Please Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. (html5please.us)

The top 20 HTML5 games (netmagazine.com)

Server-Sent Events (html5doctor.com)

Articles

What We Can Learn From Google’s New UI

One of the most notable changes to the web in 2011 was the roll out of Google’s new UI across a range of its products. In this article Aaron Lumsden looks at the thought process behind Google’s UI decisions and determine what we can learn from their methods and principles. (webdesign.tutsplus.com)

Dieter Rams’ 10 principles of good web design

Dieter Rams is one of the most important designers of the 20th century but his famous 10 principles for good design focused on industrial design. In this article Lisbon-based designer Nuno Loureiro applies them to web design. (netmagazine.com)

What Successful Products Teach Us About Web Design

Web design is a craft that is constantly evolving and yet also sometimes sabotaged. The moment a design is released, a new version is born. In the beginning, like a baby, it seems vulnerable and weak, but in time it grows up and becomes self-sufficient. Redesigning a website for its own sake doesn’t prove anything; quite the contrary, it reveals a lack of effectiveness on the part of the designer. (smashingmagazine.com)

Device Experiences & Responsive Design

While the task of designing Web applications and sites for multiple devices can be daunting, two techniques can make the process more manageable: classifying device experiences and designing/building responsively. (developers.facebook.com)

The client-side templating throwdown: mustache, handlebars, dust.js, and more (engineering.linkedin.com)

From jQuery to JavaScript: A Reference (net.tutsplus.com)

Chrome DevTools new stuff! (plus.google.com)

Tools / Resources

Pictos Server

Build Your Own Fonts. That’s right. For the first time ever you can now build your own icon fonts with the Pictos Server! It’s easy: choose any icon in the Pictos Library and assign a keyboard key that will correspond with that icon. Use as many or as few icons as you’d like, even change them on the fly! (pictos.cc)

Responsive Design Sketchbook (appsketchbook.com)

Coding efficiency for beginners: write reusable code (netmagazine.com)

H5BP + Twitter Bootstrap integration (github.com)

Scrollorama (github.com)

HTML5 Video – Vidoe.js (videojs.com)

Responsive Control Panel – Expression Engine (putyourlightson.net)

Inspiration

The first thing you do when you sit down at the computer

Let me guess: check the incoming. Check email or traffic stats or messages from your boss. Check the tweets you follow or the FB status of friends. (sethgodin.typepad.com)

Every second one hour of video is uploaded to youtube (onehourpersecond.com)

HTML5 photo booth demo by Mike Taylor (miketaylr.com)

Last But Not Least…

Color by Method of Action = AWESOME!! (color.method.ac)

Headlines

Making Love To WebKit If the world is going to end in 2012, Acko.net will at least go out in style! Steven Wittens redesign is off the hook! View in a WebKit-browser like Chrome, Safari or even an iPad and you will not be disappointed. (acko.net)

Paul Irish talks Pokémon The boys (Chris Coyier and Dave Rupert) busted out a big guest for the 2nd week of ShopTalk. Mr Irish answers a lot of great questions sent in by the listeners. Enjoy! (shoptalkshow.com)

Tait Brown pushed some major changes to his front end development guidelines. (taitems.tumblr.com)

Resolution Independence With SVG (smashingmagazine.com)

Code Racer (coderace.me)

Articles

A Pixel Identity Crisis

The pixel has always been the smallest unit in screen-based design. Because it’s been indivisible, it is the concrete unit of measurement among screen-based designers. Now that hardware is changing and pixel densities are growing, pixels are struggling to find relevance as the stable unit they once were. Scott Kellum explains the crisis. (alistapart.com)

Five skills you need to make AB testing work

Multivariate and split testing can be crucial for sales conversions but how do you get the most out of it? Matthew Bird, the marketing man at Stinkyink, looks at five steps every designer need to go through. (netmagazine.com)

An Object is not a Hash

Write JavaScript? Store things in hashes with user-defined keys? You need to read this. (devthought.com)

The developer’s guide to the HTML5 APIs

Rich Clark, one of the HTML5 Doctors, gets under the hood of the APIs that form the bulk of the HTML5 spec and tells us about their purpose and progress. (netmagazine.com)

Overwriting CSS properties doesn’t result in compounding or unnecessary load times. (aaronmentele.com)

Advertising on a Responsive Web (muledesign.com)

Forest, Trees and ACKO.NET (jeffcroft.com)

Working in web design: 10 things I have learnt in 10 years of business (boagworld.com)

Develop for as many users as possible (netmagazine.com)

Arithmetic calculator with purely CSS3 (plus.google.com)

Tools / Resources

Gridpak – The Responsive Grid Generator

Looks like a good resource to bust out a responsive grid. Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript. (gridpak.com)

Android Design – Your place for learning how to design exceptional Android apps. (developer.android.com)

Hopscotch – Brilliant into to basic programming concepts. Draw a puppy! (hopscotchkits.com)

CSS3 Click Chart – Louis Lazaris has redesigned and revamp his nice little product. (css3clickchart.com)

Awesome Job’s – Dribbble Job Board (dribbble.com)

JavaScript Pattern Collection (shichuan.github.com)

Handling CSS Transitions (snook.ca)

IOS Icon Gallery (iosicongallery.com)

Design Seeds – A nice little blog about colour palettes (design-seeds.com)

Inspiration

Freelance Week 02

Kyle Steed has taken up full time freelancing and is documenting his experiences on a weekly basis. He has already dropped some really great freelance advice and I am sure there is lots more to come. (blog.kylesteed.com)

Mac OS X Lion with CSS3 (alessioatzeni.com)