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.
Awesome
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).
Layout
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.
The BBC responsive mobile site gets a few layout tweaks.
Navigation
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.
Typography
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.
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.
Process
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.
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
Mat Marquis (@wilto) explains the current state of responsive images using a title that sounds like a miserable Lifetime movie.
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.
Bruce Lawson (@brucel) explains why we need to figure out adaptive images…fast.
Inspiration
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,”
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 launches a responsive site and joins the responsive alcoholic beverage site club. Drink responsively.
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.
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.
Testing
The Adobe team gives a great rundown of how to set up and use Adobe Shadow for cross-device 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).
Future-Friendly
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.
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.
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.
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.
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).
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.
Horoscopes
Aries
You will find yourself frustrated after reliazing that resizing your Photoshop window does not reflow your design. Tonight, go home early, you crazy person.
Taurus
Your lucky number: 43.32239857329%
Gemini
Be warned: this week you will mutter the joke "More like SASS-parilla!" at a gathering of nerds. No one will laugh.
Cancer
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.
Leo
Tonight, take a cold shower and think about what you've done.
Virgo
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.
Libra
IE7 usage on your client's website drops below 3%. Advance to Go and collect $200.
Scorpio
You're a reasonable, generous person. Share a resource with a friend in need and don't ask for a RT.
Sagittarius
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.
Capricorn
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.
Aquarius
Make time to take care of site maintenance. Look for an excuse to drop an HTTP request like you dropped your last significant other.
Pisces
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!
|
