To address this shift away from desktop dominance, a contemporary web strategy must:
- provide universal access for each piece of content
- optimize layouts for a variety of screen sizes
- support touch gestures in addition to mouse and keyboard interactions
- deliver optimized content for devices with limited resources
- 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.
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.
Most conversations about mobile strategies include the following two perspectives: limited resources of devices require new technical approaches, and mobile use cases are different and demand unique content and application features.
As we’ve settled into our new multi-device lifestyles, a new perspective has entered into these conversations: finding different content at the same place on different devices is a problem and flies in the face of web accessibility and common sense.
via Odopod – Mobile Strategies: Untangling Device Contexts and Use Context.
A post I wrote on the Odopod blog.
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.