Responsive Design Weekly #41


Welcome back to our usual program of weekly links covering what has been happening in the world of Responsive Design.

Recognise that motley crew in the picture above? They were the gracious folk that did my job over the past eight weeks in our special responsive interview series, and if you missed any of the interviews do yourself a favour and go back and read them, brilliant stuff.
I am happy to announce that due to the interviews roaring success they will continue on as a fortnightly basis as part of the regular newsletter.  HOORAH! If you know someone who has something to say on responsive design and would like to be apart of the series please reply to this email with your suggestion. If you have something to say yourself then please don’t be shy and wait for someone else to suggest you, tell me yourself.

Right then, lets see what’s been happening.


Carousels, image rotators, sliders, featured content modules, whatever the hell you want to call them — they’re everywhere on the web. Brad Frost explains why you probably don’t need them, and if you absolutely do then follow these guidelines.

Making Advertising Work In A Responsive World
One of the big hurdles for large companies who rely solely on online advertising as their revenue stream are finding it hard to come to grips with the complexity of advertising on responsive design websites.  This post takes a closer look at some of the issues and strategies to consider if you’re looking at taking up the challenge. Following up from this post back in November is one from last week on SpecBoy, Responsive Website Advertisements


Stu Robson has been keeping busy over the holiday period writing about responsiveIE fixes(with code pen example), lack of media queries and a few “don’t do this in rwd’s“.
David Bushell is another one of those really smart guys that knows tons of stuff about responsive design, so when he gives you some tips and warnings it pays to sit up and take note. He kicked the year off with 5 Tips for Responsive Builds and following up with Responsive Mistakes (a mini-series). All very worthwhile reads.

Responsive Design in IE10 on Windows Phone 8 – HTML5/CSS3 Experiment
Matt Stow came across a few issues with the Windows 8 phones and set about trying to find a solution.

Preparing Websites For The Unexpected
Another article from the folk at Smashing Magazine. This time it’s Ben Gremillion who is looking at the vast array of devices that we are dealing with these days and how our content needs to adapt across them all.

The Next Step in the Evolution of Responsive Web Design: Responsivity Analysis
Is there a new position about to creep in and take over UX? Unlikely, but an interesting read.

Testing One Thumb, One Eyeball Mobile Use
People use their smartphones anywhere and everywhere they can, which often means distracted situations that require one-handed use and short bits of partial concentration. Effective mobile designs not only account for these one thumb/one eyeball experiences but aim to optimize for them as well.

“The Post-PSD Era: A problem of expectations,” an article by Dan Mall
Dan Mall follows up an article by Brad Frost around setting up client expectations early to avoid issues in your design workflow

UI Design Guidelines for Responsive Design
Codrops usually come up with content for our tutorials area but this week they’ve turned their attention more towards strategy instead.

The top 25 responsive sites of 2012
.NET magazines expert jury selects the best uses of RWD they have seen this year… quite a few of them also appeared as part of our interview question as well (which makes sense seeing as some of the jury was interviewed)
Responsive web design Zen gardening
Rick Monro calls for a responsive design zen garden to help the change over towards a better way to build websites. In the 2000’s the Zen Garden did wonders to improve the uptake of CSS and show that presentation can be separated from content, can we do the same for RWD?

Should I charge more for responsive design?
A shameless plug of my own content after I had followed up from one of the forum posts on CSS-Tricks.

Tools, Tutorials, Performance & Presentations


Table: Reflow
Reflow table based content with jquery mobile in this quick demo

Profound Grid
Another grid system in the long list of grid systems, profound grind is a responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.

Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you.

grunticon is a Grunt.js task from the Filament Group that makes it easy to manage icons and background images for all devices, preferring HD (retina) SVG icons but also provides fallback support for standard definition browsers, and old browsers alike. From a CSS perspective, it’s easy to use, as it generates a class referencing each icon, and doesn’t use CSS sprites.

RoyalSlider is easy to use jQuery image gallery and content slider plugin with animated captions, responsive layout and touch support for mobile devices. As navigation you can use thumbnails, tabs or bullets. Use it as image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. Developed in best practises of HTML5, CSS3 transitions are used for all animations (with fallback)

SquenceJS is a new take on responsive sliders. You can use it out of the box or purchase one of the themes.

The conditional free legacy, retina, script and style loader

Implementing Off-Canvas Navigation For A Responsive Website
A step by step guide from David Bushell on how to implement an off canvas navigation pattern into your website. What is great about this article is that he starts off with the plain HTML and takes you through the full journey, including some of the mistakes that you’re likely to make. Dave also follows up with a great article on the performance battle between jquery animation and css. Make sure you read the comments as well, just as informative as the article itself with plenty of good links.

Responsive Web Design – An Advanced Guide to HTML & CSS
A very in-depth tutorial for anyone getting started with Responsive Design. This comes as part of a longer series as part of a guide to HTML & CSS.

Retina Ready Images and Responsive Web Design
A nice overview of what retina ready images are and some varied approaches.

Performance seemed to be a bit of a theme as something to concentrate on for 2013. These articles take a look at some things you can do.

Think Twice Before Using matchMedia to Conditionally Load Stylesheets
A great article from Andy Davis looking at the performance ramifications of approaching your implementation in this way.

Bandwidth Media Queries? We Don’t Need ’Em!
A look at why a bandwidth media query is so difficult to achieve, and even if we could why it’s not really required.


Clarissa is writing a book about responsive design for O’Riely so we wanted to give you some insight as to what to expect. These are two presentations she has recently given (within the last two months) on UX and Content Strategy.

New sites & Inspiration

Large Responsive Photo Backgrounds in Web Design
This is a great post if you want to see some examples of great work with responsive full screen image backgrounds, and once you’ve got your inspiration grabBackstretch and try implementing it yourself.

There have been a plethora of awesome sites released over the past eight weeks, as well as many great examples chosen by out interviewee’s. I want to share some of the unknown sites that have gone live recently, sites that you have coded up yourselves. Please either email or tweet a site you would like to see featured here.

Wrapping up…

That’s it for this week. Phew, I had forgot how long that takes.

I’ve been really keen to keep this newsletter advertising free however, due to it’s own popularity and increasing subscription base (a big thank you to you for that by the way!), the costs are increasing.  While I’m happy to donate time towards building the newsletter it’s the additional money I need to pay to maintain the subscription list with Mailchimp which will bring about the advertising. So while I work out suitable advertising rates to cover costs feel free to get in touch if you’re interested in becoming an early bird advertiser. Advertising will only be considered for related products or services, basically if I wouldn’t use it then it’s not going to make it in.

Thanks for subscribing and see you next 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>