Web Design Weekly #79


W3Conf Talks

W3Conf is W3C’s an­nual confer­ence for web pro­fes­sion­als was held last week in San Francisco. For those of us who were not fortunate enough to make it can now experience all 15 amazing talks. Inspiring stuff! (youtube.com)

Boxes and grids, oh my (branch.com)

Chrome 26 Beta (blog.chromium.org)

Support this newsletter by becoming a member for the price of a coffee →


Prototyping Responsive Typography

A typography prototype is a single web page that consists of the project’s actual content. It’s designed in the browser using real web fonts and tools like Typecast. A typography prototype includes font choices, styles for the basic text content and a typographic scale, but nothing else. (viljamis.com)

Learning Rails made me a better designer

An interface isn’t just a series of static screens pasted together. It’s a flow, with inputs and outputs. You can’t truly evaluate an interface until you can use it and you can’t use it until you build it. Anything less than the real thing is a fuzzy approximation. (37signals.com)

Designing with context

Context is a slippery topic that evades attempts to define it too tightly. Some definitions cover just the immediate surroundings of an interaction. But in the interwoven space-time of the web, context is no longer just about the here and now. Instead, context refers to the physical, digital, and social structures that surround the point of use. (cennydd.co.uk)

Font Hinting and the Future of Responsive Typography

Font hinting has been the source of countless headaches for type designers and users. Meanwhile, some of the most fundamental and important elements of typography still can’t be addressed with the web of today. (alistapart.com)

Using WAI-ARIA Landmarks (paciellogroup.com)

HTML’s new <template> tag (html5rocks.com)

Impact of Responsive Designs (lukew.com)

Two years freelancing (cole007.net)

Tools / Resources


Typeplate is a “typographic starter kit”. A free-range and open-source typographic starter kit that will hopefully help you build beautiful, text-rich websites. (typeplate.com)

Transitions & Animations

One evolution with CSS3 was the ability to write behaviours for transitions and animations. Front-end developers have been asking for the ability to design these interactions within HTML and CSS, without the use of JavaScript or Flash, for years. Now our wish has come true. (learn.shayhowe.com)

Spoiler Alert

A small jQuery plugin to hide spoilers on your site. (github.com)

Protip: All browsers that support SVG background images also supports multiple background images. (germanforblack.com)

Fancy Input – CSS3 text typing effects for input fields (dropthebit.com)

Debuggex – A visual regular expression debugger (debuggex.com)

Codepen’s “real” Terms of Service (codepen.io)

Grunt Dev Tools (github.com)


Play by your own rules

Josh Williams, now a product manager at Facebook shares his awesome story about the Gowalla that once was. (medium.com)

A good collection of simple user styles

Early this week Connor Sears released his collection of user styles that simplify UI and give focus to the content on some of his favourite websites. (connors.github.com)

Niice – Inspiration search engine

Search across multiple hand-picked sources. (niice.co)

Why I don’t wireframe much (cennydd.co.uk)

Loading (codepen.io)


Front-End Engineer – Data Visualisation

The Global Mail is looking for a Front-End Engineer to help create world-class data driven journalism – join our team! (theglobalmail.org)

Place a job in next weeks WDW

Last But Not Least…

Sun – Simple HTML5 Weather App

An awesome HTML5 iPhone weather app. Just visit the site from your iPhone and then save it to your home screen. Seems to be a little sluggish but don’t let this put you off. Beautifully executed. (pattern.dk)


Jonathan Neal (co-creator of Normalize.css) put the source in the source so you can view the source while you view source. (viewsource.in)