Viewports all the way down…

Bryan has been experimenting with the new  iBooks Author tool.

This morning, he created a random page. On it he placed an HTML (dashcode) widget (which is basically an embedded area containing HTML). Within that widget, he included a link to the Yiibu site. The whole thing took about 2 minutes.

Here’s what happens when you tap that link.

The Yiibu home page loads within the widget…within the iBooks page. This view is of course chrome-less, but still smart enough to launch (live) URLs and render the resulting content pretty flawlessly. And if that content happens to includes a hyperlink, you can load yet another page into the space occupied by the first. (If not for the lack of chrome and any ability to scroll…it’s basically a small custom browser).

Quick tests reveal a (slightly) different user agent string and dimensions that appear to be an aggregate of the native browser viewport, and that specified by the pixel dimensions of the widget we’ve embedded.

The entire exercise took five minutes. We didn’t need a developer account. Only a Mac, iBooks Author and an iPad.

The past few weeks have seen several conversations around diversity and fragmentation. A fair number of people feel that mobile browser and device fragmentation are “unsustainable” and that when it comes to properties such as screen size, “supporting leading…breakpoints will help accelerate the settling out of the market and its resolution toward a semi-standard set of viewports”. In other words this is all temporary and more importantly, it’s something we can all start to affect through the way we design.

I understand the roots of this sentiment but i’m just not sure it will play out that way. Here’s the deal. Your grandma can now create a viewport. And so can the kid next door. These may not be ‘proper’ browsers, and they may not (yet) be fully interactive, but they can load a pretty sophisticated web page. A year from now, the most popular ‘browser’ may just be be the embedded web view full of ‘related’ links in a Stephen King iBooks bestseller.

Diversity isn’t going away. It’s about to get worse. Ignore it at your peril.

9 thoughts on “Viewports all the way down…

  1. Matt Wilcox

    Great post, makes a lot of sense and is another argument for mobile-first progressively enhanced responsive methodologies. Imagine if that was a deksktop-first adaptive design, inside a desktop first adaptive design, inside iBooks… sloooow.

    Reply
    1. steph Post author

      It was basically the same as iPad Safari, but lacked the last portion of the string…the one that actually says “Safari” :-P I will try to post a copy later today and we’re planning to run some more tests to try to figure out what is going on under there.

      Reply
    2. Dave Olsen

      So it sounds like it’s just a standard UIWebView element. The interesting part is the dimensions of the viewport. I’m curious to see where the testing takes you.

      Reply
  2. iDGS

    Hmmm… Y’know, I’m starting to wonder if Steve Jobs might’ve ever read Neal Stephenson’s “The Diamond Age” (see, e.g., http://en.wikipedia.org/wiki/The_Diamond_Age) and liked its interactive book, the “Young Lady’s Illustrated Primer.” …since iPads, et al., seem poised to sooner then we expect provide likewise astounding capabilities.

    Reply
  3. Pingback: Responsive Web Design May Soon Not Be A Choice | Wes Chyrchel

  4. Chris Seckler

    That’s sounds really cool! Thanks for sharing!

    Is the widget that Bryan used for the website that loads the browser within the widget itself a built-in widget or custom made? If it is custom, is there a chance I could check out the source code on that widget? I am trying to do something similar and it would be really helpful!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>