Web Design Weekly #109


Google Web Designer

Currently in beta but the product has had mixed reactions so far, probably best you make up your own mind… The app is intended to help create HTML5-based designs and motion graphics. (google.com)

Performance Tooling

Paul Irish shares lots of awesome performance tips. (youtube.com)

The Mobile Web at Etsy (laraswanson.com)

Support this newsletter by getting your hands onsome WDW swag →


Introducing CSS Regions

If you haven’t looked into CSS Regions before this is a nice quick overview. (webdesignerdepot.com)

Designing iOS7 style icons

The Creative Director from Campaign Monitor Buzz shares his icon design process. (campaignmonitor.com)

Why Cards are the Future of the Web

We are currently witnessing a re-architecture of the web, away from pages and destinations, towards completely personalised experiences built on an aggregation of many individual pieces of content. Content being broken down into individual components and re-aggregated is the result of the rise of mobile technologies. (insideintercom.io)

Powerful Workflow Tips, Tools And Tricks For Web Designers

This article by Melanie Lang is a collection of tools, tips and tricks that will make your standard workflow as fast and practical as possible, so that you have more time for the exciting parts of the project. (smashingmagazine.com)

Javascript Modules, AMD, and the road ahead. (yahooeng.tumblr.com)

Tools / Resources

Tools for image optimization

With the average weight of a web page now being almost 1.5MB Addy Osmani dives in and looks at the options to help keep things lean. (addyosmani.com)

Start Bootstrap

Free HTML Starter Templates for Bootstrap. Built to help you get started on your next Bootstrap project. (startbootstrap.com)

Web Tools Newsletter by Louis Lazaris

A newish weekly newsletter, Web Tools Weekly curated by Louis Lazaris is worth subscribing to if you have room in your inbox. The newsletter has a special focus on tools. (webtoolsweekly.com)

Bento – Learn how to code

Everything you need to know about web development. Neatly packaged. (bentobox.io)


A Javascript library which enables Photoshop-like rulers and guides interface on a web page. (github.io)


Easily extract CSS and HTML from selected elements then send it to CodePen, jsFiddle or JS Bin with one click. (chrome.google.com)

Node, Bower, Grunt Cheat Sheet (jessewarden.com)

Getting started with Yeoman (youtube.com)

What font is that? (html5rocks.com)


On Writing Interfaces Well

Aesthetics are debatable, but writing is essential. Peel away the layers of styling and you’ll be left with words. Writing is the meat of a design, and it’s one of the hardest things to get right. (37signals.com)

Emmet is Awesome (css-tricks.com)

Last But Not Least…

Responsive Design E-Book

Justin Avery runs a very tight ship with Responsive Design Weekly. Last week he released a collection of short interviews bundled up in a nice e-book. If you want to learn more about responsive design from the leading experts head over and support Justin. (responsivedesignweekly.com)

Macaw: The Code-Savvy Web Design Tool on Kickstarter

This tool was featured a couple of months ago in a previous newsletter. Looks like the guys behind it have decided to put it on Kick Starter. (kickstarter.com)

Debugging :before/:after in Chrome is about to get a hell of a lot easier (youtube.com)