Web Design Weekly #54


People Magazine’s Responsive Mobile Website

Last week the People Magazine launched its mobile site. Some of the best responsive design gurus on the planet helped and it shows! This post has the low down and goes into good detail about responsive advertisements. Top work by all involved. (globalmoxie.com)

Responsive Email Design

A great guide on ‘Responsive Email Design’. It’s chock-full of solid tips and responsive tricks for making your HTML email newsletters mobile-friendly. (campaignmonitor.com)

HTML5Rocks now on Github (github.com)

Lea Verou joins the W3C (lea.verou.me)


Journey Through The JavaScript MVC Jungle

Addy Osmani explains why we should be using modern JavaScript frameworks when writing web applications. Not only will it help give them more structure, it will also help with the organisation of the code. (smashingmagazine.com)

All About Chrome Flags

Christian Cantrell has been mentioning Chrome flags frequently in his articles, blog posts, and presentations, so he has decided to put together a video and detailed description as a central reference. Everything you need to know about Chrome flags. (blogs.adobe.com)

Multimedia Troubleshooting

Ian Devlin has put together a list of the most common problems and their solutions. (html5doctor.com)

Re-Introducing Canvas

Christian Heilmann explains some of the canvas element’s lesser-known properties and its potential for creating web tools and animations. (developers.facebook.com)

How do I convince…?

Jeremy Keith gives some great advice on how you can use the latest techniques within you workplace. (adactio.com)

The Responsive Dip

Nice to read about Responsive Web Design from a different angle. (seesparkbox.com)

Interview with Jason Beaird – User Experience designer at MailChimp (formandfuture.com)

An Introduction to HTML5 Application Building Features (inserthtml.com)

Why HTML5 will revolutionize web-applications (amix.dk)

Responsive Design’s Dirty Little Secret (palantir.net)

Creeps and Weirdos in the CSS Spec (impressivewebs.com)

Tools / Resources

Web Tools and Browser Testing

In this video Rey Bango and Christian Heilmann discuss how to create great cross-browser experiences and some of the testing tools that can help make that simpler. (channel9.msdn.com)


An awesome new code syntax highlighter by Lea Verou. It’s only 1.5KB minified, it’s very easy to extend without modifying the code due to Prism’s plugin architecture and loads more. (prismjs.com)


Symbolsets are semantic symbol fonts. They work in modern browsers and anywhere OpenType features are supported. (symbolset.com)

forkit.js An experimental animated ribbon which reveals a curtain of additional content (lab.hakim.se)

Introducing metaQuery — A declarative responsive breakpoint syntax. Defined in <meta> (github.com)

Results – Essential Tools, Libs and Frameworks form a Front-End Development Survey (blog.reybango.com)

Frank DeLoupe – color picker menu bar app that connects to Photoshop (jumpzero.com)

Post Launch Checklist: 10 Tasks You Should Complete (distributionhacks.com)


Breaking Good Habits

Harry Roberts talk from Front-Trends from early in the year. (vimeo.com)

BrandColors – A collection of major brand color codes (galengidman.com)

The Air New Zealand Logotype Design Process (klim.co.nz)

Social switchbook in CSS by Hugo Giraudel (codepen.io)

New WordPress media wireframes (wordpress.org)

Welcome to Digg v1 (digg.com)

Last But Not Least…

PacMan in CSS

Joshua Hibbert went a little crazy with this one. Awesome stuff! (codepen.io)

How would you like $ in your browser’s console to be querySelector instead of getElementByID? (docs.google.com)