Re: Paged UIs a la Mobile Navigation

Yehuda Katz wrote:

 > I'd like to get some feedback on whether we could have explicit way in CSS
 > to describe the type of UI that mobile devices use for navigation or
 > hierarchy, but which also figure into popovers on tablet or desktop devices.
 > 
 > The basic idea is:
 > 
 >    - A container element of this type could have several child elements,
 >    only one of which could be presented on screen at once.
 >    - When a child element is on screen, it can scroll using the normal
 >    scrolling mechanism, but the container element never scrolls.
 >    - The container can transition to an element to its left or right. After
 >    transitioning, the new element retains its last scroll position (the
 >    initial scroll position is top).
 >    - Transitions should be regular CSS transitions, and possibly some
 >    additional conveniently defined transitions, like "pan" or "fold"

So, if I understand you correctly, you'd like to have:

 (a) a series of scrolled columns/regions/elements/documents ("cred")
 (b) lined up so that the user can navigate to the left/right cred
 (c) with transtion effects
 (d) and browsers should remember the position in each cred

In your request, the "cred" is an element but it could be a
column/region/document -- it's the user experience you're after,
right?

If my understanding of your use case is correct, I wouldn't call it
"paged". Pages appear when both the inline and block direction have
hard constraints that can only be resolved by adding another page. In
your use case, the block direction is never constrained; a scrollbar
is added when needed.

Still, the UI you're after is similar to what is often used with paged
mode in apps: gestures are used to move to the left/right, and
transition effect occur when moving.

Opera has implemented page-based interaction with web content:

   http://people.opera.com/howcome/2011/reader

Try one of the builds pointed to from that article on this page:

   http://people.opera.com/howcome/2011/tests/multidoc.html

In this example, the "cred" is a document and the @navigation
construct is used to navigate between them. The functionality is
described here:

   http://dev.w3.org/csswg/css3-gcpm/

Transition effects are also sketched in that document. 

Opera's implementation doesn't implement the "remember position"
feature you're after. But that could be changed; implementations are
free to remember what they feel like remembering.

Here's another example where the "cred" is a column:

  http://people.opera.com/howcome/2011/tests/onedoc.html

In this case, implementing "remember position" would be harder -- it
doesn't really make sense to have separate reading position for
columns in the same document.

Potentially, we could also define "break-after: page" to mean that a
new page should be instantiated, even when in not in paged mode. This
could be a way of allowing you to have multiple "cred"s in one
document while also remembering the position in each of them.

So, so summarize, I think your use case is interesting: HTML/CSS
should be able to do this stuff. I don't think of it as "paged" mode,
but the UI is close enough to reuse functionality described in GCPM. I
don't think we need any fundamentally new concepts to support your use
case.

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Tuesday, 22 November 2011 23:01:25 UTC