Web Design Weekly #12

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 #12, 16th day of September 2011

Welcome to issue 12 of Web Design Weekly. It’s been a “responsive” week to say the least! Huge congratulations to everyone involved in the re-development of the Boston Globe. Without further ado, lets get into it.

What’s your favourite WDW link? Hit me up on twitter @jake_bresnehan.


The new responsive-designed Boston Globe (filamentgroup.com)
A nice wrap up by the Filament Group about it’s involvement in the Boston Globe. They flipped the switch on Monday on its accessible, progressive enhancement and responsive-design based subscription news site. Also check out the – features or the site.

Ripple – A multi-platform mobile environment emulator that runs in a web browser (tinyhippos.com)
Test and debug your HTML5 mobile applications for multiple platforms. All from within your browser and in a fraction of the time.

Sudoku Solver in just CSS (hertzen.com)


Mobile development with HTML5 (lukesbeard.com)
Luke Beard explains how much design & front-end work he has done over the past seven months since he joined the Zerply team.

Upcoming Web Design and Development Conferences in 2011-12 (smashingmagazine.com)
It’s that time of year again when the Web design conference schedule really heats up. Smashing Magazine present a chronological list of all the upcoming events and conferences. A great wrap up.

The Scoped Attribute (html5doctor.com)
The scoped attribute for the style element allows you to include styles mid-document that target specific elements. Depending upon how you look at this, it’ll either be a godsend or a curse. After this article, you can form your own opinion.

An Introduction To LESS, And Comparison To Sass (smashingmagazine.com)
These two libraries share a lot of basics. Both of them are fantastic tools for designers who code, and they can also help developers work more efficiently and quickly.

Tools / Resources

Making sure pages still look good when Facebook (inevitably) goes down. (bazaarvoice.com)
Alex Sexton explains how to stop the Like button from ever appearing if the Facebook servers are down. It’s a nice solution for a problem that rarely happens, but is important to handle well when it does.

An offline-capable, HTML5 currency converter app for the iPhone. (currency.io)
It’s an open-source example of an ‘Add to Home Screen’ app built using web standards.

Eric Haidara’s “mobile first” tools (bagcheck.com)
A fine collection of articles, frameworks, and other tools for a “mobile first” approach to (mainly responsive) web design.

JSlim – It’s your favourite JavaScript library, only faster. (github.com)

HTML5 compatibility on mobile and tablet browsers. (mobilehtml5.org)

Elastislide – A Responsive jQuery Carousel Plugin. (tympanus.net)

FontFonter – Try Web FontFonts on any website. (fontfonter.com)

Web Font Plug-in for Photoshop. (extensis.com)


24 Excellent Examples of Responsive Web Design (webdesignledger.com)

SCROLL DOWN! (super cool scrolling experience) (artofflightmovie.com)

Podcasts / Videos

The Big Web Show – Episode #56 (5by5.tv)
Faruk Ates joins Jeffrey Zeldman and Dan Benjamin to discuss Modernizr, web and mobile design, Apple, and more.

Fireside chat with Kevin Rose, Milk (techcrunch.com)

Last But Not Least…

Tweet of the week (twitter.com)