Responsive Design Weekly #51

Welcome to week #51!

Pricing for Responsive Design

This weeks image came from a tonne of tweets that came through as a result of the talk from Mike Monteiro on What Clients Don’t Know at the A Event Apart in Seattle. Luke Wroblewski has done another fantastic job of wrapping up the whole conference.

This week I’ve been getting back into work and have been talking to lots of new clients. It still amazes me that during these chats a good portion of the discussions has uncovered that responsive design is still very much misunderstood. The next time you go to speak to one of your prospects/existing clients/manager about redesigning or retrofitting their site responsively a few moments to start at the beginning and explain exactly what RWD is and why it’s a good idea… even if you think it’s going back to basics.  The chances are they didn’t really understand it all at the beginning and they’ll now be onboard to start a new project with you… or at least if you don’t charge the cost breakdown shown in the picture.

Alright, responsive lecture over :) Lets hit the links.


Responsive Deliverables

Dave Rupert shares with us an approach to design deliverables, and one that the team at Paraval took when rebuilding the site.

How to structure a Sass project

Getting started with Sass can be a little daunting. You might not be sure if you want one .scss file or a series of them, when it’s better to @include or call a mixin. This article explains a great process of structuring your files.

Vote for Am I Responsive in the Net Awards

As you may know the Am I Responsive side project I made to help me with screenshots has made the shortlist for the Net Awards. I’m really humbled to be in the mix with some amazing other side projects including, the pastry box plus many more. They’re all great, but I’d love it if you voted for me (please).


Mastering Real-World Constraints (A Case Study)

I think this will be an article trend that will begin to appear. While not specifically about responsive design all of the references and ideas surround the idea of building your site across multiple screens. Look out, RWD is becoming the norm!!!

Toggling Bad Design

Stu Robson puts his two cents in about the show/hide responsive design button that we discussed last week. I’m with Stu!

Reflow New and Improved!

Adobe have released MACH2 of the Edge Reflow with updates from their beta release. I tried out 1.0 when it was first released and had a bit to say, I’m impressed to say that they’ve taken some of those suggestions in consideration. Yay Adobe

The Beauty of the Blank Slate

Opening up a photoshop file and starting from scratch can be exciting. This post looks at just that with an approach to a mobile first design.

Responsive Web Design is Not the Future

What first appeared to us as an April Fools joke was unfortunately uncovered as an actual ‘for real’ article. While I would love to argue each of their points, Brad Frost has already done that for me in the article below.

A Response to ‘Responsive Web Design is Not the Future’ 

“I fundamentally disagree with this entire article.” Totally agree with you there Brad. In this article Brad looks at each of the articles points and shows how they’ve somewhat missed the point.

8 Guidelines and 1 Rule for Responsive Images

Jason Grigs is on fire this week with another great post on responsive images. Some important guidelines to follow and remember that what ever you do it will be deprecated at some stage.

Responsive Day Out

An awesome overview of the responsive day out from Laura Kalbag. It’s a long post but more than worth the time to read through.

Media Queries in SVG images Cloud Four Blog

Expand your SVG’s by including media queries directly inside of them!

Responsive Retrofitting

A brilliant article from Ben Callahan about retrofitting existing designs with responsive design.

What’s Holding Back Responsive Web Design? Advertising

In this article we take a look into why advertising is still one of the strategic concerns for online businesses who rely on ad income.

Responsive Design for Apps — Part 2

Responsive Design for Apps — Part 3

Tools, Tutorials and Workshops


My Media Query Mixin

Stu Robson has written a pretty awesome SASS mixin and has done us the curtosy of explaining exactly what it does and why. More awesomeness Stu, thanks!

“Playing with LESS then Sass(SCSS) has made me create mixin upon mixin to help my front-end development workflow. I think I’ve finally settled on something (famous last words!) that works for me and want to share it. Because sharing is good, right?”


Cross-Browser, Event-based, Element Resize Detection

While this does add a lot of non-semantic code to your site this little trick allows you to detect when an element has resized on the page. I’m not sure if it’s something that we can’t already achieve with enquire.js, but it might open the implementation possibilities for your current project.

My Responsive Design Process (So Far)

If you like to stay in photoshop while design RWD sites maybe you’d expand across to indesign? This is a great article explaining just how you might do that


A great way to edit your responsive designs in the browser while using your fav editor.


Think Responsively

In this one-hour session, learn why Forbes Magazine says now is the time to prioritize responsive design and put your online presence in front of your readers and customers wherever they are.

That’s all we’ve got from this week. I’m putting together a couple of resources that will be available for download shortly. First one will be a collated downloadable version of the interview series with a special overview of the series up front, and secondly we’re putting together a few sketch sheets to help sketching out responsive ideas with clients. More about that next week.

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>