Web Design Weekly #8

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,
a { color:#fd2323; font-weight: bold;text-decoration: none;}
.intro p {font-size: 11px; font-weight: bold; color: #8a8a8a; text-align: center;}

Issue #8, 19th day of August 2011

This week was huge! So many amazing articles produced. Adobe released Muse which caused a huge uproar on twitter. Darcy Clarke showed us how to skin the Chrome inspector. Matt Kersley released a cool jQuery plugin that converts menus into a select element for mobile devices and Joni Korpi topped it off with his responsive Golden Grid System. Enjoy.

If your finding WDW helpful then please share via twitter.


Golden Grid System – A folding grid for responsive design (goldengridsystem.com)
Joni Korpi has developed a fluid-width grid system composed out of 18 even columns, two of which are used as outer margins, leaving 16 columns for use in design, which in turn can be combined into 8 columns or 4 columns as needed.

WebGL Water (madebyevan.com)
Evan Wallace’s awesome experiment in realtime water rendering with WebGL. The focus is on the rendering aspect, not on the simulation. The water heightfield is simulated using a floating-point texture and the caustics are rendered using the GLSL derivative functions. CRAZY STUFF!!

Adobe Muse: a step in the wrong direction (elliotjaystocks.com)
Elliot Jay Stocks was quick to blog about this one. About an hour after Adobe released their new product, Elliot published his post. It currently has over 100 responses and is an entertaining rant.

Re-tabulate (adactio.com)
Jeremy Keith points out another way to re-order navigation with CSS using display:table. Complete with GitHub Gists and a JSbin demonstration from Remy Sharp.

Skin your Chrome Inspector (darcyclarke.me)

The Pixelator (thepixelator.com)


Getting Rusty – We need new best practices for a different development world (wait-till-i.com)
Christian Heilmann’s article gives some great tips into what we need to try to make new developers understand. It is about pride in delivering a clean job. Not about using the newest technology and chasing the shiny.

Improving HTML5 Canvas Performance (html5rocks.com)
There’s a lot of disconnected wisdom about optimising canvas performance. This article aims to consolidate some of this body into a more readily digestible resource for developers. This article includes fundamental optimisations that apply to all computer graphics environments as well as canvas-specific techniques that are subject to change as canvas implementations improve.

Behind the Scenes of Modern Web Browsers (html5rocks.com)
This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code.

CSS Best Practices (lukew.com)
Luke Wroblewski wraps up Nicole Sullivan’s talks from An Event Apart in Minneapolis. Nicole Sullivan walked through common CSS best practices that have outlived their usefulness and what we can do instead to improve CSS performance and maintenance long term.

The “inherit” Value for CSS Properties (impressivewebs.com)
A good post by Louis Lazaris. In CSS, there are some properties that are naturally inherited from parent to child. This is useful because it prevents needing to define that same property for all children.

Introduction To Web Storage (sixrevisions.com)
Web Storage is a new HTML5 API offering important benefits over traditional cookies. Although the specification is still in W3C draft status, all major browsers support it already.

10 Brilliant Newcomers (netmagazine.com)

Tools / Resources

Method and Craft (methodandcraft.com)
Great articles, great interviews, great videos and great notes. The articles focus on process and workflow. The interviews let designers discuss their approach & perspective in their own words. The videos show the designer at work, sharing application-specific techniques. The notes are short tips and resource links.

10 of the Best CSS3 Code Generators (sitepoint.com)
CSS3 changes everything. There are a huge amount of new properties with multiple vendor prefixes and different syntaxes. No one could expect you to memorise everything. Fortunately, there are a number of free online tools which will help you create modern CSS3 code to cut and paste into your stylesheets.

Responsive Menu (https://github.com)
A simple jQuery plugin to convert menus into a select element for mobile devices and low browser widths.

Responsive Design Testing in the Browser (mattkersley.com)
A great tool for testing your site at different viewport sizes.

45 Free Subtle Grunge Brushes (wefunction.com)

jQuery Chop Slider (idangero.us)


Inspirational Resources for better Web UX Design (creativesen.se)
Creative Sense is a collection of great design references for commonly used design elements in web UX design. It’s positioned to be a helpful resource centre for creative web and UX designers.

Colorrrs – Inspiration By Colour (10k.aneventapart.com)
It isolates Dribbble’s awesome Browse By Colour feature, makes it ajaxy and adds a “Random” button for good times.

Email-Gallery – a growing showcase of nice email newsletter designs (email-gallery.com)

Podcasts / Videos

Let’s Write Semantic Markup (css-tricks.com)
Chris Coyier’s 100th screen cast!! He spends an entire hour looking at a Photoshop design and writing HTML5 markup. He discusses the challenges of writing semantic markup and offers some great advice. Definitely worth watching.

Dorm Room Tycoon (dormroomtycoon.com)
Dorm Room Tycoon is a podcast show that interviews the most respected leaders in our community. They strip away all the waffle, they don’t care about life stories. They just give us the information we want to hear.

Creatiplicity – Intersection of simplicity and the creative process. (creatiplicity.com)

Trent Walton’s tip on Adding Texture In Photoshop (methodandcraft.com)

Last But Not Least…

Adobe Muse re-built to illustrate the poor markup of the original site (view source) (monash.edu)

Campaigning for the Web Design App We Need (projectmeteor.org)

Best comment in source code ever (stackoverflow.com)