Odopod – A Multi-Device Web Strategy

To address this shift away from desktop dominance, a contemporary web strategy must:

  1. provide universal access for each piece of content
  2. optimize layouts for a variety of screen sizes
  3. support touch gestures in addition to mouse and keyboard interactions
  4. deliver optimized content for devices with limited resources
  5. fully optimize key experiences for the specific contexts of use

via Odopod – A Multi-Device Web Strategy.

New post by me over on the Odopod blog.

four screens, two orientations, one Boston Globe

Looking at the Boston Globe on four screens confirms some of my inclinations regarding breakpoints for Responsive Designs.

The portrait orientation in particular shows that one design that scales up to a breakpoint somewhere between 640 and 768 makes a lot of sense. The Kindle Fire (600 pixels wide in portrait mode) works well with the same flexible one-column layout used for 320 pixels. Meanwhile, the 768 pixel wide iPad handles a two-column layout quite nicely.

It also clearly illustrates something I had undervalued until recently. The primary breakpoints should not be hard and fast. The page header seen on the Fire in portrait (compared to the one on the phones) shows the advantage of establishing additional breakpoints for key elements on the page. The same layout optimization is used on the phones in landscape mode.

four screens, two orientations, one Boston Globefour screens, two orientations, one Boston Globe 2

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.