All RWD, all the time. By @brad_frost

My name is Brad Frost and this is my first newsletter. Whew. I've been holding that in for years. I feel so…so…liberated.

So responsive web design, huh? That's what you're here for so let's just get into the good bits.



I honestly didn't know how to classify this, so I made a category called "Awesome" and slapped this at the very top. Scott Jehl (@scottjehl) of the Filament Group has been working on tools that will usher in the next generation of responsive designs. With a strong focus on performance, Scott is blazing trails with new techniques that can only be described as AGGRESSIVE ENHANCEMENT. The Ajax-include pattern is becoming especially important (in my eyes at least).


Off Canvas Multi-Device Layouts

Jason Weaver (@mrjasonweaver) and Luke Wroblewski (@lukew) show off some elegant solutions for dealing with auxiliary content and navigation for small screens. Check out all of the demos.

Responsive BBC Layout Updates

The BBC responsive mobile site gets a few layout tweaks.


Responsive Multi Level Navigation – Let’s Try.

Michael Scharnagl (@justmarkup) demonstrates the "priority +" pattern as a nice solution for obese navigation. See it in action and check out other responsive navigation patterns.


Fluid Type

Here's Trent Walton (@trentwalton) with a treasure trove of thoughts and techniques for conquering fluid type for multi-screen design. The "two asteriks" trick is awesome.

Widow Tamer

Nathan Ford (@nathan_ford) creates a script that automatically fixes typographic widows on window resize. I usually just say "screw widows!", which outside of a design conversation makes me sound like a terrible, terrible human being.

RWD Quicktip: Let the content, not device widths, determine breakpoints.


Design Process in the Responsive Age

My friend and colleague Pon Kattera (@pkattera) gives a doozy of a presentation about his team's responsive design process. Definitely check this one out, and also check out Pon's awesome UX Rave resource website.

BBC TV Channel Homepages: Responsive Design

Bam. The BBC television team explains why they went down the responsive road, how they implemented it, what lessons they learned and what their next steps are. This is a great read.

Images #hotdrama

Florian’s Compromise

Mat Marquis (@wilto) explains the current state of responsive images using a title that sounds like a miserable Lifetime movie.

Responsive images: what's the problem, and how do we fix it?

Matt Wilcox (@mattwilcox) does a bang-up job explaining why responsive images is so incredibly complicated. It's one of the best write-ups on the topic I've seen.

Why HTML5 urgently needs an HTML adaptive images mechanism

Bruce Lawson (@brucel) explains why we need to figure out adaptive images…fast.


The first fully-responsive US government website. Jeremy Vanderlan explains their need to move in a future-friendly direction:

“We knew that eventually we were going to have to build something that was more future-friendly and adaptable to this kind of coming complexity. There’s going to be another device somewhere down the road that we’re not going to be able to anticipate, and we wanted to do something that would make it easier to work with it once it’s out there,”

A Responsive Design Case Study

Dave Bushell (@dbushell) gives a great run-down of a recent project and explains a lot of the decision-making that went into the site.

Jack Daniels

Jack Daniels launches a responsive site and joins the responsive alcoholic beverage site club. Drink responsively.

Fashion Flipbook Created with Media Queries

Mike Soloman (@solomania) came up with a super creative use for media queries. Of course a media-query-only flipbook isn’t the most practical thing in the world, but the outside-the-box thinking is totally awesome.

Crush Path

Nice design that utilizes the footer anchor navigation pattern, but adds an animated scroll and super chunky footer links for maximum tappability. It also looks really nice on large screens.



Browser testing across devices with Adobe Shadow

The Adobe team gives a great rundown of how to set up and use Adobe Shadow for cross-device testing.

Tools for Responsive BBC Testing

The BBC responsive team gives a detailed rundown of the tools they used to test their responsive mobile site. There's plenty of practical tips and great explainations of underrated resources (like Ripple).


Moving towards more adaptive web experiences is a step in a future-friendly direction. That's why I'm going to cover #ffly related stuff here.

Future Friendly Website Updated

The Future Friendly thinking page now contains some great resources revolving around each core idea. There's also a new page called Come Aboard, which explains how you can get involved and why we need to put philosophy before specific techniques.

Come Aboard: Inspiring an Empathic Future-friendly Army

Lyza Danger Gardner (@lyzadanger) gives a wonderful overview of Mobilewood 2 and the evolution of Future Friendly thinking. We're all in this together, so don't get religious about the "one right way" to do things.

Mobilewood 2

Andrea Trasatti recaps the Mobilewood 2 experience, talks about where the web is going, and why future-friendly thinking will help us navigate a diverse world full of interacting devices.

Photos of a TON of devices

Here's a bunch of pictures of a ridiculous assortment of devices from myself, Luke and Lyza. Mine and Lyza's have Creative Commons licenses, so feel free to use them (with proper attribution of course).

The Mobile Frontier

Rachel Hinman (@hinman) gives us a glimpse into what's next next for mobile, and society in general. Here are my notes from this most excellent talk.



You will find yourself frustrated after reliazing that resizing your Photoshop window does not reflow your design. Tonight, go home early, you crazy person.


Your lucky number: 43.32239857329%


Be warned: this week you will mutter the joke "More like SASS-parilla!" at a gathering of nerds. No one will laugh.


Things are looking up. Your client finally understands that the design doesn't need to look exactly the same on every single device and browser. Reward yourself with a Big Slam of Code Red Mountain Dew.


Tonight, take a cold shower and think about what you've done.


You will spend way too long in Best Buy testing your new design on the display devices. The Geek Squad will become suspicious then awkwardly ask you to leave. Say "no". They will sheepishly retreat and leave you alone.


IE7 usage on your client's website drops below 3%. Advance to Go and collect $200.


You're a reasonable, generous person. Share a resource with a friend in need and don't ask for a RT.


The atmosphere of the day gives you the impression that there could be a lot of changes waiting to unfold in your personal life. Or it could be the fact that you've been staring at a computer screen for 12 hours.


The day belongs to you. Demand that breakpoints get set in proportional units and don't stop whining until it's implemented. Your team will hate you today, but will thank you later.


Make time to take care of site maintenance. Look for an excuse to drop an HTTP request like you dropped your last significant other.


Eat an entire strawberry pie by yourself. I dare you.

(special thanks to Francisco Inchauste @iamFinch for jokingly suggesting the inclusion of horoscopes.)

Until Next Time

Well, I guess this is it for now. We'll have to do this again sometime. Quick excuses: I didn't have time to design much of anything, so lay off me. If you have any suggestions, corrections, or whatever, let me know on Twitter. Thanks!

Follow @brad_frost on Twitter

Forward to an enemy
Copyright © 2012 Brad Frost Web, All rights reserved.

Email Marketing Powered by Mailchimp
unsubscribe from this list   update subscription preferences