Responsive Design Weekly #47

CERN - Inspirational Site

Welcome to the 47th edition of responsive design weekly.

This week I have to apologise for the newsletter arriving later and a little more light on than normal. My UK Visa came through a few days ago and since then it’s been a whirlwind trip of planes, trains and automobiles with a big dash of jet lag thrown into the mix.

Last week I also tested a new design through Mailchimp but sent a non-responsive version (silly mistake). This I’ve reverted back to the old design while I put the final touches on the new responsive email template.

This week we are kicking off the “Win a ticket to the Responsive Summit” competition. The Responsive Summit is a three day online conference which means you can attend from anywhere in the world as long as you have a computer and an internet connection. The three day conference has been broken into three tracks: Performance (day 1), Strategy (day 2) and Technical (day 3).

To win a ticket to attend all three days you simply have tweet @reswebdes with the hash tag #rwdsummit and tell us which speaker/session you’re most looking forward to and why.

The winner will be picked on the 14th March so you only have a few days to enter, tweet now. Remember that you can register now with 20RDWEEKLY and save 20% off the ticket price, if you win the prize you can gift your ticket or get a refund.


Mixing Responsive Design and Mobile Templates
You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies. In this post Chris Coyier takes us through the approach he took to Code Pen.

Vote for Am I Responsive at the .net Awards!
Am I Responsive, a small side project of mine, has been nominated for a .net award in the “best side project” category! If you like it I would be very grateful if you could take the time to vote!


Responsive web design: the war has not yet been won
A great blog post from Elliot Jay Stocks based around his talk at the 2013 Responsive Day out in Brighton.

For discussion: viewport and font-size data in client hints
A really great idea for the browser, Client Hints. Scott Jehl has led the first round of queries asking for Screen pixel density, Viewport Dimensions, and Default Font Size with a really good conversation in the comments.
Using SVG
SVG can be a great technique for responsive logos and icons because as a vector the same image can be resized without degradation. Chris Coyier takes you through a vast range of approaches with SVG.

Told you so
After 10 years Jeremy Keith could hold it in no more and just had to say “I told you so”.

Responding to Language by Jordan Moore
Jordan Moore takes a look at using the lang attribute within the HTML tag as the trigger to update the line lengths, a really great follow up to Logical Breakpoints.

Logical Breakpoints For Your Responsive Design
A great look at the readability of responsive design and an examination into how you might go about determining when a particular viewport is “broken”. Word lengths are different for different languages so a wider column may be required to maintain a good measure.

Building A Better Responsive Website
Jeremy Girard takes us through the journey he recently took with taking his companies site responsive. In this article, he details the process they took, including some of the changes made along the way.

Prioritizing Performance in Responsive Design
Brad Frost takes a look at performance and reviews some options you have. These shouldn’t be considered retrofit options at the end of the project, you need to bake these into your process from the beginning.

An Interview With Boston’s Ethan Marcotte
Ethan Marcotte shares an insight into what he’s doing these day with this interview.

#Protip for Startups
Dave Rupert has a great tip for startups…. don’t let your website suck on mobile devices.


Responsive audio out
Thanks to Drew’s tireless work over the weekend, all the audio from the Responsive Day Out is available for your aural pleasure.
Subscribe to the RSS feed in the podcast-listening application of your choice.

Big Web Show 83: Scott Jehl of Filament Group
Scott Jehl is a super smart guy who works with super smart people at the Filament Group. These are the guys that worked on the Boston Globe project and have given tonnes of awesome resources back to the community. A great podcast listen (and you can see him on stage in this video)

Jason Cranford Teague – Prototyping a Responsive Design
Jason Cranford goes into detail about his journey from the humble wireframe to changing his workflow to use HTML & CSS to wireframe directly within the browser. This contains both the podcast and transcript.

Tools & Tutorials


Gumby – A Flexible, Responsive CSS Framework – Powered by SASS
Gumby has reached Mach 2. This framework is great for those that want something to build upon without the extra stuff that boilerplates add on.

Zepto 1.0
The lightweight javascript framework has turned 1.0. Zepto is a great alternative to jQuery when you can use it allowing for faster load times.


Providing responsive images with Drupal
In this tutorial they look into 4 different approaches with Drupal. The adaptive image module, the adaptive image styles module, the client-side adaptive image module and, finally, the responsive images and styles module.

New sites & Inspiration

This weeks feature site is the birthplace of the Internet.  The team at Mark Boulton Design have done a wonderful job with the new look CERN website that has recently moved out of beta.

If you have just finished a site, or are part the way through and want to share and ask some advice then please either email or tweet us.

Wrapping up…

That’s it for this week, thanks for reading all the way to the end. Just incase you’ve forgotten here’s your homework for this week

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>