Web Design Weekly #5

p { padding: 0; margin: 0; }
h1, h2, h3, p, li { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
td { vertical-align:top;}
ul, ol { margin: 0; padding: 0;}
.heading {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-icab-border-radius: 3px;
@media only screen and (max-device-width: 480px) {
p {font-size: 18px !important;}

Issue #5, 29th day of July 2011

Welcome to Web Design Weekly number 5.

Another huge week in the the web design space, especially in the HTML5 area. With so many amazing articles, tools and inspiration being released it wasn’t so easy in deciding what should make the issue.

I hope you enjoy!


Getting sourcey with HTML5 audio and video
A great in-depth look into the HTML5 audio and video elements. The article looks into how to incorporate audio and video content into HTML5 documents, how to provide fallbacks for browsers which don’t support them, and the inevitable gotchas.

The 2011 .Net Awards
Now in their 13th year, the annual awards are organised by .net magazine – the world’s bestselling magazine for web designers. The awards are a celebration of the best in design and development, so go pay your respect.

World’s First True HTML5 Fullscreen Video
All the HTML5 enthusiasts out there: true HTML5 fullscreen video playback is now possible, and it’s built right into the player (Sublime).
Until now, the lack of true fullscreen playback has been the biggest limitation of HTML5 over Flash video.

CSS3 Bling In The Real World
The new breed of CSS3 shizzle even allows a self-confessed design amateur like myself to produce some fairly tasty looking designs. CSS3 is here, CSS3 is fun, and CSS3 allows us to evolve the look of the web as we go. At least, that’s the theory. But the reality is a bit different.

Exciting CSS drafts and proposals


Avoiding common HTML5 mistakes
Richard Clark from HTML5 Doctor explains some of the mistakes and poor markup practices he often sees in the wild and explains how they can be avoided.

Seamless Responsive Photo Grid
Chris Coyier explains how to create a seamless responsive photo grid that is edge-to-edge on the browser window with no gaps. He drops in some handy tips and links.

Choose a Developer, Not a CMS
A wonderful article by Christopher Butler that looks into a variety of aspects to consider when choosing a CMS. Rather than evaluating the various platforms technologically, Christopher evaluates three possible developer/CMS scenarios and hopefully provides you with some points to consider next time you’re making a decision.

Spot unsized images during development
A nice little CSS tip from the guys at 37signals that will hopefully help you avoid reflow issues.

Writing Maintainable WordPress Widgets

Making Desktop Webapps in Lion

New HTML5 ‘bdi’ element


jQuery Boilerplate – Jump-starting jQuery plugins development
The boilerplate contains lots of comments to help you get going easily. It is truly object-oriented, it implements public and private methods as well as public and private properties, making it the ideal candidate when building both simple and complex jQuery plugins.

A Lightweight HTML5 Game Engine
melonJS came from the feeling that no simple, free and stand alone library was available to develop games. Although still a big work in progress (and not yet bug free), melonJS already allows you to easily create some nice games.

A bunch of free top quality design resources from Premium Pixels

Your code snippets, in one pretty place with Kodery

50 cheat sheets for web designers and developers

Useful API’s for web designers and developers

Dynamic Dummy Image Generator


Slicehost—a scrappy web company bootstrapped with $20,000
They cashed out for big bucks in 2008. How did they do it? More importantly, was it worth it?

To hell with them! – A great site about low-contrast fonts and unreadable text

Amazing use of WebGL by the Google Experiment team

DUBloom is a HTML5 Canvas audio application

Last but not least

John Resig’s developing set up (the creator and lead developer of jQuery)

To be continued…

Thanks again for supporting!