Think Quarterly nails multi-screen content delivery

Google's new online magazine, Think Quarterly has done a really nice job delivering a reading experience tailored to personal preferences and readable on a variety of screens.

Each story is accessible in three layouts: faux print magazine, large screen web and small screen web. I personally am not a fan of the magazine approach. For me, it comes across as a gimmick and while I like what they are doing with information visualization and layout, I wish they would have just invested that time into their web page layouts and graphics. Luckily, aside from the opening image of florescent neurons and the sudoku puzzel, all content is available in the other layouts.

Those other layouts are well done and are a good example of the One Web concept at play -- each story and URL is rendered in a layout optimized for the device you are using, regardless of how you might find the URL. Technically speaking, the servers are redirecting between different URLs based on browser agents. Google is notoriously obsessed with speed and efficiency so it makes sense that they would accept the risks and additional upkeep that come with browser detection in exchange for the leanest possible files.

Following are some galleries of screen shots taken on my laptop, iPad and iPhone. In each I show the table of contents and a story page from the site. 

(download)
magazine layout (laptop)

(download)
large screen web layout (laptop)

(download)
large screen web layout (iPad)

(download)

small screen web layout (iPhone)

Photo_3
and finally, bonus points awarded for providing a desktop icon!

Good Linking

Air 2.6 is live. Read about all the new features and then look and then check the demo of Flex Hero and see the Comb Over Charlie game running on multiple devices. 

Adidas Megalizer – Behind the scenes. Didier Brun provides detailed information about building electronics for the Megalizer (touch pads in shoes controlling beats).

How glow.mozilla.org gets its data. Details on the architecture that provides real time download information for Firefox 4.

Hyundai i40 Reveal. Another peak behind the scenes. This one looks at controlling a scene's lighting via the internet and streaming the results back using video.

Data Science Toolkit. Open-source server providing APIs for data mining, geolocation and more.

Think Quarterly. Google knocks it out of the park delivering their online magazine to both desktop and mobile browser. 

Katamari Hack. The great online roll-ups begin.

Good Linking

Here are some interesting links I've clicked on recently:

SXSW 2011: Novelty of iPad news apps fades fast among digital delegates: Some good thoughts on the future of news apps. I personally am pulling for open ecosystems rather than isolation.

ifttt the beginning…: I recently started using this very interesting project and not only is the idea nice, it is executed really well. I setup a couple really handy tasks right away and I'm sure that with a little time to think about how to connect my various accounts, I'll be doing a lot less copy-pasting.

Updated: The South By Southwest Panels, Illustrated [With 20 New Pics]: Brilliant recaps, way more usefull than slides posted without commentary.

Chicago Tribune Election Center: The Chicago Tribune is trying out media queries to adjust page layout based on screen size. They handle phone resolutions in both portrait and landscape mode, which I'm a big fan of and don't see often enough. 

Report Finds Performance of Web Apps Throttled on iOS Devices: If this is not a shortterm thing, it is going to be a big deal for those of us who want to build apps for multiple browsers using Web Standards. John Gruber points out that nothing is actually slower, Safari just got faster and homescreen or native apps using HTML did not get the upgrade. Potato, Potato. If he is right about why things are slow (security), I hope Apple finds a way around it soon.

Complex 3d projections are becoming more common. I really hope this is not a passing fad. Here's one from Adidas' all in campaign and if you are going to be in Sydey this Sunday, I'm sure this one will be absolutely epic.

Building IWC.com: Our Approach to Video

IWC.com features a great deal of content which includes some amazing videos. Two great examples of these videos can be found on the Aquatimer family page. Galapagos is an eight and a half minute video highlighting IWC's longstanding relationship with the Charles Darwin Foundation and includes some really incredible cinematography. Don't miss the footage of iguanas foraging underwater. A little further down on the Aquatimer page is a short animation demonstrating the engineering behind the depth gauge within the Aquatimer Deep Two. It is an example of how IWC uses video to educate customers about their watches.

Galapagos video on the Aquatimer page

As the second installment of our series on building IWC.com, we're looking more closely at how this video is delivered to both desktop and mobile browsers.

A post on the Odopod blog.