Welcome to responsive design weekly issue #12.
Responsive Design Weekly #12
Responsive Design Venn Diagram

Welcome to week #12

Our image this week is something I scratched together on the iPad using the Paper App. Theme Brain pointed out that the original image was missing any reference to content, and based on that suggestions I added in a content element. Stu Robson asked the question "is it creative commons?" so I've uploaded it to S3 so you can freely download it and reuse it as you see fit (but if you're feeling generous you should totally tell all your friends where you got it :)

This week I thought we would take a closer look at how you might deal with advertising when embarking on a responsive design. RWD favours retail based websites because it allows for a single souce of products that you can pimp out across any number of devices. As a publisher things are more difficult as the advertising revenue is based on the ads appearing in certain ad blocks on the page, so what happens when those spaces resize and reorder (or even worse... disappear)?
If you want to skip straight to anything in particular here are this weeks headings, but we suggest taking a look at everything because it's AWESOME.


Say hello to the new ISO | Stuff & Nonsense

Andy Clarke needs no introduction. Last year he spent four weeks working on the ISO redesign, and he has provided us (the web) with links to his online reference designs and a zip file of the entire project. A HUGE thanks to ISO for allowing Andy to share, and even bigger thanks to Andy for sharing.

Mozilla Gains Global Support For a Firefox Mobile OS

Industry support is growing behind Mozilla’s plans to launch a new fully open mobile ecosystem based on HTML5. The operating system, which Mozilla today confirmed will use its Firefox brand, will power the launch of smartphones built entirely to open Web standards, where all of the device’s capabilities can be developed as HTML5 applications. What does this mean for us? Well it seems like the days of one browser per device type will never return. Next week we'll give you a list of all the browsers you need to be testing on each of your devices.

Responsive Images with Mat Marquis

Matt joins Jen Simmons from The Web Ahead in this podcast that looks at responsive images. From the description....What's the best way to handle responsive images? There's been a lot of discussion flying around over the last many months, big debates and fast changes… where have we landed? What's coming in the future? The show notes on their own are worth checking this one out.

Responsive Advertising

When it comes to advertising on web pages that have adopted responsive design we have two clear paths. The first is to switch out larger ads for smaller versions of the ad based on the view port, while the second would be to include ads that actually respond themselves in the same way that the site does.
Option one is easy to implement immediately. There are already standard ad sizes that are used across BSA, Google, Double Click etc, and websites that rely on advertising income simply need to adapt their responsive design to allow for the fixed ads to appear at each breakpoint. Boston Globe actually end up cutting off the advertising on their home page just before the design responds to the tablet layout. This option is quite simple from a logistic point of view but slightly harder from a technical basis. The advertisers can reuse all of the same ads they have, however they will have the difficult task of building an advertising platform that swaps out ads based on the viewport (although they are being developed already).

The second option while tecnically is much easier to achieve presents a much larger logistical problem. There are already a couple of examples from web designers creating their own responsive ads using html5 and css3, and of course Coke came close but it wasn't all a single ad. The fact is, to change/update every ad (Flash/Gif/jpg) currently running online to incorporate this approach is a monumental task. Where the Googles and BSA's have the advantage is they could sit back and say "fix your ad or don't get shown/paid" approach. Updating the ads to be served as html5/css3 also has the added bonus of being more in the spirit of RWD, where the ads are just as responsive as the site.

It's great to see a lot of people paying attention to this and working on a strategy as for many of us the web is our living and a lot of that money comes through assistance of advertising (whether we like it or not). I encourage you to read up a little more on the issues and possible solutions and play around with a few ideas yourself, we'd love to hear what you come up with.


Does your newsroom have a smart-refrigerator strategy? » Nieman Journalism Lab
Look past iPads and Android phones: There’s another generation of Internet-enabled devices coming, and news companies face more competition for users’ attention. I love any article that manages to work in the Jetsons (I'll be 82 when I'm living in their time, can't believe sprockets will still be big, cars can fly and yet everything is sent through vacuum tubes)
Some really good points here from David Blooman... I didn't even know about number #6.

Jordon has written an interesting and thought provoking article on reinventing design patterns for RWD. It's new, ti's exiciting, so lets throw off the shackles and not be driven by the past.
Not since Coke vs. Pepsi has there been such widespread debate and intense controversy on a singular topic. Technology and design blogs across web are engaging in hot debates about responsive design vs. mobile sites, arguing over which solution best delivers the mobile experience.
Quirks blog has followed up their post from last week with an even closer look at devicePixelRatio and in particular the expected vs the actual story with iOS, Android and the Retina MacBook.
If you surf the web on an Android device, there's some good news this month - Firefox Beta for Android has reached version 14. And with Flash video support, improved loading times and the ability to sync with your desktop experience, Firefox is starting to look like a convincing option. Another example of more browsers to test across more devices

Tools, Resources & Tutorials

For those of you that are trying to tackle responsive design and are twiddling your thumbs at the wireframing stage (don't stress, I've been there too) here is a little tutorial from the Balsamiq support team. You don't have to be using balsamiq to get benefit from this, I use Omnigraffle or a pencil and took away a lot.

Responsive 3D Panel Layout
Codrops have come out with another great little tutorial. It gets a bit squishy on the smaller viewports but a great start with an interesting look.

I've been using the Spark Box media query bookmarklet for quite a while now. I find it easy to test my own breakpoints, or to know when to add a new one in (when the design looks shit). They released a new version of the bookmarlet, so update your bookmarks!

New sites & Inspiration

Red Bull follow up from Microsoft with a responsive test. I like the use of icons in the touch menu on the smaller view ports and only labeling the current/active tab.

CERN Higgs Boson Found
While this site won't win many design awards for outstanding brilliance (although I do love the layout and two column text) you can bet this discovery will. Thank you to Mark Boulton Design for making this a responsive site so I could sneak it into the newsletter.  Goooooooo god particle!

Wrapping up...

This week we pushed past 400 Facebook Page Likes and the same number of newsletter subscibers. We post almost daily on twitter & Facebook & Google Plus so follow us what ever your poison. If you're a bit of a dribbler I've started a bucket of responsive wireframes that you might like (and if you're wondering about the wedding buckets it's cause we're planning a wedding, woot!)

Until next week, you stay responsive San Diego.
Follow on Twitter   Friend on Facebook   Forward to Friend 
Copyright © 2012 Simple Things, All rights reserved.

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