Responsive Design Weekly #53

Hey everyone, welcome to edition 53 of Responsive Design Weekly.

This week we have a few new announcements before we get into this weeks responsive links.  Firstly I’m very happy to announce our new sponsor!!! BD Conferences are running a conference around moving beyond the desktop and towards mobile.

Secondly I wanted to let all of our London, or near abouts, readers know that State of the Browser is on this Saturday thanks to London Web Standards. LWS have all browser vendors presenting so it’s the perfect chance to see where the future of browsing is heading and get your feature requests in (element queries anyone?).

Finally I wanted to share a conversation I had with an internet friend of mine. Sam was looking to come up with some feedback to work into a guideline document for a particular projects approach to responsive design for a client.  The final results of that will hopefully come out in an interview with Sam, however I though it might be worthwhile to include the a part of the soap boxed reply I sent to him over email.

Personally I think going desktop first is a lot more difficult, but it depends on where your designer feels most comfortable coming up with their best designs.

The issue I found when approaching it that way with Kate was that there was no thought given to how things will be consumed on the smaller devices.  Simply stacking content elements isn’t always the best answer. For example stacking the elements on a page when viewed on mobile works but it might be better to drop the explanation and only show the headings with an expand option to read more information.

I think the important thing is that although you can come up with principals upfront you should be aware they might need to be changed when running through the actual build… responsive is all about an agile approach.  By all means design in photoshop but try and build out the design with real content in the browser as quickly as possible to see how the designs work in real situations before every comp has been completed. ( <- this is helpful)

With the breakpoints the client will want mobile, tablet and desktop. They could be 320, 480, 768, 1024, 1600 but that’s following the “i” suite of products really.  Ideally the approach is to have 4 break points (drop one of these), really small, small, medium, large, really large and come up with the ideal layouts.  Then you’ll find that in between each of these breakpoints there will be times where the layout just sucks, and that’s when you add another breakpoint to tweak that in between point.  In theory because you work with fluid designs you think that it would be rare that these in-between points are a sticking point, but they happen, and usually when you add real content into the mix. Understanding the content on the pages and the content elements would be a prerequisite for writing any principals around this specific design project.

But seriously, try and go mobile first.  It forces you to prioritise the content as well.  You can’t just say “stick it in the side bar, but at the top of the page” when there is no sidebar.

Hopefully there’s a few points there that help you with your approach to responsive projects. Now lets check out this weeks links.


This week saw the return of the Environment for Humans Responsive Design Summit.  This is the second year the summit has run and by all accounts it has been a roaring success.  One of our readers, Nathiel Deal, won a three day pass and has done us proud by blogging about everything that he learned over the few days.  I’m sorry to say that I was unfortunately pulled from the office (in the best interest of clients though) so I missed all but two presentations over the three days.  I’m really looking forward to playing catch up on the recorded sessions.

For those of you that did not sign up to the summit initially but would like to get access to the recordings should get in touch with Christopher Schmitt for further details.

Element Queries

In response to the increasing push for responsive element queries Tab Atkins is setting the story straight by explaining why it’s so difficult to include this.

Our Sponsor

It’s Time To Move Beyond The Desktop — Save $100, Register Now!

Join 200 other mobile website designers and developers at BDConf in San Diego for two days of mobile inspiration and a day of optional workshops. Speakers include Luke Wroblewski, Ilya Grigorik, Divya Manian, Jason Grigsby, Eric Bidelman & more!

Use discount code SD13RDW & save $100Register today!


7 Responsive Design Tips to Revamp Your Workflow

Who would have thought it but Mashable have come up with a great set of  tips to help your responsive workflow

A dao revisited

For the first time in too long I’m pleased to see John Allsopp’s article, written in 2000 mind you, be quoted once again. I think it is perfect that Jeremy compares that timeless classic to Ethan’s RWD article for the same site some ten years later. John, that article was well ahead of its time.

Responsive Images: Clown Car Technique

I really interesting technique of nesting <img> tags within an SVG to get around the responsive images approach. Very interesting approach, although I do wonder about it’s long term practicality if we can not find a way to automate the SVG file.

Content Parity on the Web

A great article that looks at whether we need two versions of content for our websites these days. Looks like more and more people are coming across to the NO camp.

Responsive design vs. Separate mobile sites

A follow up to the article on content parity

Responsibly Responsive

A website is a black hole without content. Hell, a web design process is a lie without thinking early and often about the content, the message, the reason people are visiting the site.

An Event Apart: The Map Is Not The Territory 

We’re back with maps again but this time with grandfather of responsive design, Ethan Marcotte.

On Responsive Layout and Grids

Dave often gets asked which responsive grid system he uses. This is a very frustrating question because it implies a requirement where he has none. In this article he takes you through his approach to responsive grids.

Githubs, Workshops, and Tutorials


Proportional CSS3 Media Queries

Proportional Media Queries are based upon the idea that Responsive Web Design is supposed to be fluid using relative measurements.

Responsive Images WebKit fork

This repository contains experiments in adding the <picture> element to WebKit’s WebCore library.


State of the Browser 2013

If you find yourself wondering what the Browser vendors are doing next then this is for you. State of the Browser will be running live streamed around the world with all the major players coming to show off what they can do and what they’re working on. If you’re based in the UK you might even be able to get along there to see it in person.

Responsive workshopping

From Jeremy: “I learned my lesson: show, don’t tell. I’ll be doing a full day responsive workshop at Ampersand in June. I plan to make sure that there’s less of me talking and more making and collaborating. Also, because it’s a full day, I’ll be able to get down to the nitty-gritty of markup and style sheets.”


Docking inspector for responsive design testing

I think I featured the same thing after Stu Robson posted it but it’s worthy of another post.

…and Finally

Thanks everyone for reading this weeks newsletter.  I hope edition #1 of year 2 was twice as informative as our first newsletter.

Before I go I want to say a big thanks to all of our previous interviewee’s because not only did you help me out a lot over a busy period, you have allowed Paul Routledge who is writing a dissertation on Responsive Web Design to use all of your wise knowledge towards his project.

Kudos to the web community, and anyone else that has advice or insight to offer Paul please feel free to help.

As always, if you have any articles that you think should be included make sure you reply to this email or shoot me a tweet and let me know.
Thanks for subscribing and making it all the way to the end!

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>