Web Design Weekly #6

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;
.content-items h2{ margin: 0; padding: 5px; font-size: 16px; font-weight: bold; color: #ffffff !important; text-align: left; background: #F14C2A; }
.content-items p { margin: 0 0 15px; padding: 0; font-size: 13px; font-weight: normal; color: #535353; line-height: 22px; text-align: justify;}
.content-items a,

.intro p {font-size: 11px; font-weight: bold; color: #8a8a8a; text-align: center;}

Issue #6, 5th day of August 2011

Welcome to issue number 6 of Web Design Weekly. Another huge week in the web design world. Adobe released two big products and the hilarious yayQuery team produced an awesome episode.

Thanks again for supporting Web Design Weekly. If you have any feedback don't hesitate to contact me via Twitter.


Living on the Edge – new Adobe animation tool sparks necessary conversations
Chris Heilmann (Principal Evangelist at Mozilla for HTML5 and open web) expresses his thoughts about Adobe Edge. Adobe made quite some splash in the last few days by releasing Edge, a Flash-like tool to create HTML5/CSS3/JS driven animations. If you want to read more, Devs respond to Adobe Edge is a nice read on .net mag.

html2canvas – Screenshots with JavaScript
This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

The Expressive Web by Adobe
Another Adobe creation. This is a project they put together with the help of Big Spaceship. The goal being to create both a resource and showcase that highlights some of the most creative and expressive features being added to the web today.

Chrome now supports the HTML spec's new download attribute to 'a' elements

Inspire The Web With Just 10k



The future of CSS layouts
CSS does a surprisingly poor job of the fundamentals of page layout. But options for richer, more dynamic pages are on their way, as Peter Gasston explains. After years of promise, CSS3 has finally arrived in style. It's added a whole new array of tools to our front-end toolbox, giving us rounded corners, gradients, opacity, transformations, transitions, animations and much more. But now that we have the fun stuff, the eye candy, what's next?

Apps vs the Web
Matt GemmellI expresses his thoughts on the relative advantages of both approaches (native app vs web app). He covers the distinction between native and web apps from the user’s perspective. The article isn’t about web technologies themselves (HTML5, CSS, JavaScript). Instead, this is about mobile devices and our relationship with them.

Top 10 Young Developers
A good profile of the nominated young developers in the the running for the .net awards. Definitely worth a read and some investigating into what they have developed. The talent is inspiring.

The UI Buttons Guide
Every designer has a right to know what many of the top designers have learned. This tutorial by Tyler Galpin explains some great insights into the understanding of some design fundamentals and what to give careful consideration to.

Behind the scenes of 37 signals A/B testing (part 2)
For further reading see – Part -1.

CSS3 Transitions Without Using :hover

30 Excellent CSS3 Tutorials

Let the Web move you-​​CSS3 Animations and Transitions – Late addition –


Remmey Sharp has developed another great tool. ResponsivePX enables you to enter the URL to your site (local or online) and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then you can use that information in your media queries to create a responsive design.

JavaScript Garden
A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes, subtle bugs, as well as performance issues and bad practices that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

Google Page Speed Service
Page Speed Service is an online service to automatically speed up loading of your web pages. It fetches content from your servers, rewrites your pages by applying web performance best practices and serves them to end users via Google's servers across the globe.

More Awesome HTML5 Libraries/Polyfills

50 PSD UI Web Design Elements

Top 10 Open Source Web Fonts

What’s New in Firebug 1.8


10 beautiful iPhone app user interfaces

40 Vintage Advertisements for Design Inspiration

Podcasts / Videos

When Things Are Things – yayQuery podcast episode 23
The yayQuerians have returned from the shadows of the unknownternet to cool you down with your regularly erratically scheduled dose of frontend development developments. The teams talks about PDFs getting a whole lot more P, the battle over lint spreading from the laundry room, and much more!

Foundation Number 8 with Phillip Rosedale
Kevin Rose talks to Phillip Rosedale (founder of Second Life) about his new start-up, Coffee & Power.

Texas JavaScript Conference Videos (vimeo channel)

Last But Not Least…

Best 404 page. Ever!