You guys, Christmas in July is real! Why, you ask? Well some super cool people are playing Santa Claus and being ultra generous. First off, the great Christopher Schmitt (@teleject) is holding the first annual RWD Summit with a crazy good lineup, all beamed straight to your face from the internet. Here's the best part, use the code 'THISISRWD' to get 20%, that's right 20% off, the price of admission.
But wait, there's more!
Tim Kadlec (the man, the legend, the Wisconsinite) and the BDConf crew are gearing up for the next installment of Breaking Development Conference in Dallas, TX. You can see me and a ton of far more interesting speakers in September and get $100 off by using the code 'DALFROS' (which ironically enough is my new PA vanity license plate).
And last thing, the great people at MailChimp have been very generous by sponsoring this newsletter. Without them, this Mailchimp newsletter quite literally would not be possible.
Performance
Essential reading. Guy Podjarny (@guypod) lays out how essential performance is for responsive web design. The current landscape is depressing and Guy provides some great advice on how to make performance on responsive websites much better. Sidenote: This is an excerpt from Tim Kadlec's fantastic upcoming book, Implementing Responsive Design, which I contributed to and highly recommend.
C-C-C-C-C-Context Breaker
Stephen Hay (@stephenhay), aka Captain Flexbox, comes out of hibernation to deliver an amazing article regarding mobile context.
“Let me make a long story short: just make quality, relevant content with appropriate tasks, and offer all of these to all users, unless said content or functionality is dependent upon device capabilities (such as a camera). Then make it easy for the user to decide what it is they want to do.”
I agree wholeheartedly and chime in a few times in the comments to discuss the opportunities for content hierarchy and prioritization, and it appears Stephan and I are on the same page.
Karen McGrane (@karenmcgrane) does an amazing job explananing that mobile != "on the move".
"People use mobile devices in every location, in every context. Just because you know what type of device someone is using or where she is doesn’t tell you anything about her intention."
Sara Wachter-Boettcher (@sara_ann_marie) adds to Stephen and Karen's articles with a very quote-worthy article. I especially love her clothes/clutter analogy:
"After all, clutter is crap: the sweater your aunt gave you three Christmases ago that’s so terrible you wouldn’t even wear it to an ugly sweater party, not the raincoat you only use six times a year. Because those six times, that raincoat might be the most important item in your closet."
RWD Quicktip: Don't wait for the perfect moment to make your site, product or service mobile friendly. It will never come. Keep the big picture in mind, but look for low hanging fruit and other opportunities to slowly-but-surely create a great mobile experience.
Strategy
Google paints some very broad strokes here. While it would be wonderful for to distill mobile strategy into a nice little comparison chart, these things are far more nuanced and require a lot more consideration. Some of the points on the comparison chart seem rather arbitrary.
Process
Ross Popoff-Walker (@rosspw) gives a great overview of why the waterfall process simply doesn't work for living, breathing digital projects. In this responsive age, it's literally impossible to articulate on paper how things will look and function on every screen size in every environment. Get the project into its final environment as quickly as possible and be prepared to iterate and collaborate. To the future!
Viewport and Media Queries
That crazy guy Chris Coyier (@chriscoyier) gives a great look at what you can do with Sass 3.2 and media queries. This looks powerful and promising.
Andrea Bovens (@andreasbovens) creates a handy little cheat sheet of many of the viewport meta tag configurations.
This video shows that media queries were ahead of their time, sort of like the Flowbee.
Layout
Josh Clark (@globalmoxie) comes strong with a great read about grids and their importance, but reminds us that grids aren't the ends to a design, and that sometimes to do great things you need to step outside the rigid constraints grids provide.
Chris Coyier (@chriscoyier) demonstrates how to apply Dave Rupert's (@davatron5000 ol' padded box trick to embedded Google maps. For the record, I'm leery of incorporating embedded maps on small screens because of usability, scrolling, screen constraints, and the fact that much more robust map functionality is often just a tap away.
Testing
Davey Blooman (@davey_blooman) looks at some considerations about what mobile browsers to concentrate on. Remember that these types of considerations vary wildly from project to project. Also, remember there is a difference between support and optimization.
Inspiration/Demos
So I put my mobile first responsive design demo code that I used in my tutorial on Github. Feel free to do something with it. I'm not sure what you would do with it but hey.
Now here’s an interesting tool from Ben Callahan (@bencallahan) that allows people to take an existing fixed-width website (like Apple.com) and tack on a stylesheet that makes it responsive. While this isn’t exactly the best way to actually go about building a responsive site, it can serve as a fantastic educational tool.
Google launches a microsite for the Brazilian market. There’s some interesting design things going on there. via @diegotres
This design is just plain fun. Love the cartoon versions of the speakers and also enjoy swiping through on my phone. (Incorporating touch events are fantastic, but make sure alternate navigation exists for non-touch devices.)
You guys know there's another repsonsive web design newsletter, right? It's created by the wonderful Justin Avery (@justinavery) who does a fantastic job rounding up responsive resources. I feel bad that I didn't know this existed when I created this newsletter, and feel worse that I've failed to mention it until now. I highly recommend subscribing to it for a weekly dose of responsive design goodness.
Horoscopes
Aries
You accidentally use the word "stakeholder" as a verb in a meeting. Sprint out the door and into the bathroom, where you will wash your mouth out with soap until you've removed all remaining corporate-speak residue.
Taurus
3 called, it wants its IE jokes back.
Gemini
You will catch Fiddler on the Roof on late night TV and end up singing "matchMedia, matchMedia, media me a match" the next day at work. Tonight: go on brush your shoulders off.
Cancer
Convince your team that this particular carousel is just an excuse to stuff a bunch of extra crap onto the page. Talk them out of it, then use the saved time to eat an entire ice cream cake by yourself. Feels good, don't it?
Leo
Your manager will send you home early after hearing you scream "Siri, make me a peanut butter and banana sandwich, dammit!" into your phone. Take it easy this weekend.
Virgo
If code cleanliness were spring water, your code would be Aquafina. I'm not really sure what to make of that, either.
Libra
Spend a day in a browser maker's shoes. Then step out of those shoes as fast as humanly possible.
Scorpio
Nostalgia gets the best of you. Find Johnny Cage 20 years later, grab some coffee and relive the glory days.
Sagittarius
Your work music needs to change. Slayer's Raining Blood has you writing code in all caps again.
Capricorn
Buy your project manager a fruit cake. They deserve it.
Aquarius
Make it your personal goal to craft the most beautifully-commented code o're the land. Everyone will sing your praises and you will spark a fierce code-commenting competition.
Pisces
Do cartwheels inside a Kentucky Fried Chicken. (By the way, Pisces will never get even a remotely relevant horoscope. Don't like it? Think like a Libra.)
Until Next Time
Well that's all, folks. Next week I'll be coming at you from New York City, where I'll be for the R/GA mobile summit. R/GA's mobile superfriends will gather to discuss nothing but mobile for a few days. Needless to say, I'm super pumped. |
