Responsive Design Weekly #46

Welcome to another edition of responsive design weekly.

This week we take a look at the latest developments with responsive images, share a 20% discount for an upcoming conference, take a look into some responsive numbers and as usual cover everything else in the responsive world.

A big shout out to everyone attending the Responsive Day out in Brighton on Friday. I wasn’t able to get over in time but my tickets have gone to two hard working London folk thanks to @gringomoses. For those of you that are attending please tweet crazy so I can pretend I’m there.

For those of you who are like me and can’t physically make conferences we’ve got a special surprise for you today, check out our Sponsor! Woohoo!

Boxes and grids, oh my.
Noah stoked the fire (pardon the pun) this week by calling out RWD for sucking “the soul out of website design. Everything is boxes and grids. Where has the creativity gone?” What followed was this discussion on branch.

Chatting with LukeW on Mobile First and Foundation 4
Zurb Foundation are about to release version 4.0. As you know I’m a big fan of Foundation for prototyping ideas for clients and providing a simple framework to begin adding content into a CMS. I was super excited to hear what @LukeW had to say about the new release.

Our Sponsor


Responsive Design Summit

Environments for Humans brings together some of the Web’s most notable experts in and for an all-new, three-day online conference, the Responsive Web Design Summit 2013! Bring the experts to your desktop April 16-April 18, 2013 from 9AM to 4PM (CT).

Don’t miss this great event and purchase your tickets now!

And what is even better is using the code 20RDWEEKLY is good for 20% off any order. Thanks Environments for Humans.


Data Monday: Impact of Responsive Designs
The data is pretty clear, go responsive and see an increase in pages per visit, return visitors and increase in conversion rates. If you have data to share a before and after story on responsive design I’m sure @lukew would love to hear it (positive or negative).

Responsive Images goes to working draft 
The HTML Working Group has published two First Public Working Drafts today. Both documents were developed in collaboration with the Responsive Images Community Group.

Project insights
Neil does a great job looking at implementing a responsive site heavily laden with images and using SVG as a means of keeping the page weight down. Using a combination of Mixture, Grunticon, and SASS he delivers a pretty awesome front end project.

Search with Filters Responsive Design Pattern
I have to tip my hat to Chris this week, this pattern came at a time where I was working through the design of a new site search and BAM, design problem solved. Thanks Chris!

It Doesn’t Matter
Brad Frost explains why it doesn’t matter what vertical your website is targeting you’re still in the business of providing the best interface to use your product or read your content.

Responsive From the Top Down: “Mobile First” May be Wrong
Forget mobile, lets go Desktop First. In this interview with Amber Weinberg talks about her upcoming conference session at Future Insights in London.

RWD: just getting started
Responsive design is still in its infancy and, as Dennis Odell argues, technologies in the pipeline are set to open up a raft of game-changing possibilities

Bring Back the Sitemap?
An interesting approach by David Bushell – “I’m not abandoning my global menu just yet but I do like this alternate overview. It’s a curated sitemap. It doesn’t list every page, just the ones I’m keen to show off.”

Non responsive
James Young is a big fan of responsive design, but in his two current projects he has left it behind for a fixed width.

Building “Am I Responsive”
This is another one from me so I feel awkward including it. There has been a great response to the “Am I Responsive” tool so I wanted to share the process around building it.

A new responsive design process 
Steve Fisher and Alaine Mackenzie set out their vision for responsive web design as it approaches maturity


Prototyping Responsive Typography
A great article looking into the workflow for deciding on your typography. Note, this is the START of your design process, it shouldn’t happen at the end.

Font Hinting and the Future of Responsive Typography
A great post by Nick Sherman on responsive typography, only the first post in a series.
“hinting is to fonts what responsive layout is to websites. It allows a single font file to adapt to a variety of contexts, the same way CSS allows a single HTML file to adapt to a variety of contexts.”

Tools, Tutorials, Workshops


Typeplate is a “typographic starter kit”. They don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.

Style Docco
If you’re keen to build a style guide for your site this little tool might come in handy.


All browsers that support SVG background images also supports multiple background images
SVG’s are great for scalable graphics in sites. This little mixin is a great inclusion for your css preprocessor workflow.

Build responsive emails
With the roll out of the new design this week we had to feature something about building responsive emails right?

Redesigning A Responsive Youtube
Follow along in this tutorial as they take YouTube and make it responsive.


We’ve already mentioned the online responsive summit conference, but what we didn’t mention is that they’re giving away a 3 day pass to the event to one of our lucky subscribers.

Now don’t let that stop you from buying one if you’re keen to go because if you win they can either transfer your ticket to someone else or provide you with a refund. HOORAH!

Details on how to win will be in next weeks newsletter.

Feature Site/Inspiration

Future Insights
This weeks feature image is from our feature site of the week and it looks pretty awesome. We took a look at some of the front end techniques used by Neil in this project, an now you can hear from Mike Kus and his approach to the redesign.

If you have a site that is going live and you would like us to feature it in the weekly newsletter please let us know.

That’s all we’ve got for you this week.  You might have noticed that we’ve got a sponsor in this weeks newsletter (and a great one at that). If you would like to sponsor a weekly newsletter check out our advertising guidelines and get in touch.

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>