Web Design Weekly #11

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 #11, 9th day of September 2011

Welcome to issue 11 of Web Design Weekly. Absolutely “EPIC” week. As so much great content was released, it was really hard to decide what made the cut. Be warned, this weeks issue is a bit bigger then normal, I may have had an extra cup of coffee. Also, a huge welcome to all the new subscribers that have joined WDW during the past week. I hope you enjoy the party!

If you have any feedback about WDW please hit me up on twitter @jake_bresnehan.


Responsive Video Embeds with FitVids (fitvidsjs.com)
FitVids is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It currently supports the major video vendors: YouTube, Vimeo, Blip.tv, and a couple outliers.
For further reading see – Dave Rupert’s blog post.

Create Dynamic Form Labels with ARIA (yaccessibilityblog.com)
This post shows you how ARIA can make a dynamic form more responsive to a user. Imagine having a contact input form for the user to add an email address type and value. The Yahoo Accessibility Team explains how to use ARIA and JavaScript to give that text input a type-specific label by grabbing the information from the option previously selected. It’s actually quite simple and ingenious.

Why Separate Mobile & Desktop Web Pages? (lukew.com)
As use of mobile devices continues to skyrocket across the globe, we’re seeing more ways to tackle the challenge of creating great Web experiences across multiple devices. But which approach is right for any given project?

CSS Selectors parsed right to left. Why? (stackoverflow.com)
Curious to know why CSS Selectors are parsed by browser engines right to left?

W3C Launches New Web Application Security Working Group (w3.org)

The Evolution of the Web (Google Chrome Team) (appspot.com)


Mobile development with HTML5 (engineyard.com)
Although the new web standard does not do your laundry, it has features that enable the creation of powerful applications—using only HTML, CSS and JavaScript (a Rails back-end can bring additional firepower to the table). This post goes over some key concepts and features of HTML5.

HTML5 selectors API — It’s like a Swiss Army Knife for the DOM (webdirections.org)
John Allsopp looks at the Selectors API, how you use it, it’s browser support, and some other little things you might like to keep in mind while using it. Rest assured, it’s now widely supported, so in many cases, you can safely use it, potentially with a fallback for older browsers (IE7 and older specifically) via libraries like jQuery.

When perfect code gets FUBAR … and how to avoid it! (netmagazine.com)
You hand your beautifully crafted code to a client, colleague or even CMS, and the next time you check in, it’s all ruined. Front-end alchemist Scott Lenger explains how bad code happens to good people, why it matters, and the steps you can take to prevent it.

Block level links and accessibility (456bereastreet.com)
Roger Johansson explains why linking block level elements such as headings and paragraphs can be useful, but also discusses some things to be aware of in order to avoid reducing the usability and accessibility of such links to screen reader users.

Don’t Style Headings Using HTML5 Sections (stubbornella.org)
Nicole Sullivan goes into great detail on why the HTML5 section tag is weird and why it dramatically changes the way we use headings.

Help The Community: Report Browser Bugs (smashingmagazine.com)
Lea Verou give us a good run down on why and how to report browser bugs. Happy bug hunting!

CSS3 – Tools and Mobile Implementation (interview with Dan Rubin) (uie.com)

Designers vs Coding (frankchimero.com)

Tools / Resources

How to make time lapse screencaptures of your design work for free (mac) (laan.com)
The guys at Lann love time lapsing so much they decided to share the process of how to make them for free. You could use a screencapture tool like screenflow or snapz pro, but they tend to cost money, and you don’t get to write fun command line scripts.

Five Essential Resources for Coding HTML Email (emaildesignreview.com)
Coding for email can be, politely put, a somewhat specialist job. Email Design Review has compiled a nice list of some of their favourite resources to help us email coders get through the HTML build process as smoothly as possible.

Speed up CSS prototyping (css-101.org)
This is a simple trick to overlay a grid or a mock-up over a page you’re styling. It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text.

Automated installation of the Microsoft IE App Compat virtual machines (github.com)

Normalized hide address bar for iOS & Android by Scott Jehl (github.com)

LayerVault – Simple version control for designers. (layervault.com)

iPhone Safari Viewport Scaling Bug (webdesignerwall.com)

Shorter Media Queries (bricss.net)


Creative Places for Australian designers & developers (creativeplaces.com.au)
Creative Places is a new venture by the founder of Prevue (prevue.it), Pete Usborne. Creative Places organises after-hours spaces in Sydney (expanding soon no doubt) where freelance designers and developers can go and do their thing. It’s aim is to connect people together in an inspiring environment to produce amazing things.

Balllin’ is a slick iPhone Dribbble client. (kangarooband.it)
When you’re on the go, browsing shots from the best designers around the world has never been so elegant. The app packs a punch in a small package. Effortlessly view shot details, player profiles, comments, rebounds and tags in a native iPhone experience.

CSSOff (unmatchedstyle.com)
CSSOff is a competition for front-end developers to show off their skills in a no holds barred display of CSS and markup skills.

Yaron Schoen’s personal site redesigned. (yaronschoen.com)

The 10K Competition – The Submissions. (aneventapart.com)

Podcasts / Videos

Layer Style Jailbreak (methodandcraft.com)
Luke Holder shows us how to bust out many fantastic effects on layers in Photoshop to enable greater manipulation and creativity.

Ontwik – Videos For Real Developers & Designers (sitepoint.com)
A huge resource of videos!! Conferences, Screens-casts, Podcasts and more.

Last But Not Least…

CSS3-Rainbow-Dividers (youtube.com)
No longer must your rainbow dividers be images slowing down your computer! Make them hardware accelerated!

If PHP were British (addedbytes.com)