Site Meter
 
 

Monthly Archives: October 2011

Full-height app layouts: Animated transitions within panes

In the previous post, I showed a simple yet very useful and robust CSS technique for creating full-height layouts for web-based applications. To recap, it means you can subdivide both the width and height of the screen into a arbitrarily nested set of panes, each of which can scroll independently. This is useful whether you’re building apps for desktop browsers, for tablets, or for phones.

image

Not amazingly exciting just yet, but there’s more… :)

One of the other reasons for defining pane positioning using those particular CSS rules is that it becomes trivial to have multiple different content panes that can populate any given pane container, then to change which pane is visible within a container, and even to animate the transitions during those changes.

For example, here’s a layout involving a fixed header, a fixed footer, and two scrollable body regions (laid out using the same CSS rules as defined in the previous post):

<div class="header row">
    <h2>My header</h2>
</div>
<div class="body row">
    <div class="first pane scroll-y">
        <p>This is the first body view</p>
    </div>
    <div class="second pane scroll-y">
        <p>This is the second body view</p>
    </div>
</div>
<div class="footer row">
    <p>My footer. Could put icons here.</p>
</div>

This will lay out as follows, with the first body pane and second body pane occupying the same area on the screen:

image

Then, you can trivially switch between the two body panes just by controlling their visibility (e.g., by using $(".first.pane").hide() and $(".second.pane").show()).

Animating the transitions

Instead of just hiding and showing panes instantly, you can cause them to fade in/out or even to slide in and out. This pretty well replicates an aspect of the UI experience familiar to users of touch-based smartphones and tablets.

However, JavaScript-based animation mechanisms (such as $.animate in jQuery) aren’t as smooth as I’d like. They tend to give low frame rates, as the browser has to run custom JavaScript to compute the positions of elements for each frame. Fortunately since we’re controlling the layout purely using CSS, it’s both easy and robust to use pure CSS 3 animated transitions, giving silky-smooth results on devices that support hardware accelerated CSS transforms (e.g., iPhone and iPad), exactly like a native application.

To make this easy to reuse, I created a small bit of JavaScript boilerplate (about 1kb gzipped) that exposes functions for triggering pane transitions, being sure to take full advantage of hardware acceleration where available. For example, you can write:

// Initial pane visibility
$(".first.pane").showPane();
 
// Navigation between panes
$(".first.pane button").clickOrTouch(function () {
    $(".second.pane").showPane({ slideFrom: 'right' });
});
$(".second.pane button").clickOrTouch(function () {
    $(".first.pane").showPane({ slideFrom: 'left' });
});

… and then if you click any button in the first body pane, the second body pane will slide in smoothly from the right, and vice-versa. Note that although this code uses looks as if it uses jQuery, it doesn’t – it actually uses XUI instead (a very lightweight JavaScript framework that implements a fraction of the jQuery API in a fraction of the space), but you could equally do similarly with jQuery.

The boilerplate code offers the following transitions:

  • slideFrom – causes the target pane to slide in from the specified direction, and simultaneously the current pane to slide out in the opposite direction
  • coverFrom – causes the target pane to slide in from the specified direction. The current pane stays still, getting covered over by the target pane.
  • uncoverTo – causes the current pane to slide out in the specified direction, revealing the target pane underneath
  • default – instantly shows the target pane and hides the current pane

… and it works on IE7+ (including WP7 Mango), iOS, Firefox, Chrome, Safari, Opera, and probably others. For browsers that support hardware-based CSS3 transforms, like Safari on iOS 4+, it will be used and is impeccably smooth; others will use unaccelerated CSS3 transforms, and for those that don’t support CSS3 transforms, it falls back on JavaScript-based animation.

Also notice the “clickOrTouch” event – on browsers that support touch events (e.g., iOS Safari), this fires the instant your finger comes into contact with the screen (and hence is noticably faster than a regular click), whereas on non-touch devices, it’s equivalent to a regular click (i.e., when you release the mouse).

Runnable examples

Here’s a phone-styled example just showing how you can transition the contents within a given pane, or you can transition the contents of the entire screen. Note that this is an iframe you can interact with, not just a pretty picture :)

Also: Run full screen (e.g., to try it on a phone)

Similarly, here’s a tablet-styled example showing how transitions work just the same in arbitrary sub-panes as well.

Also: Run full screen (e.g., to try it on a tablet device)

Note: To be clear, I’m not starting a new open source project here. These are experiments in mobile-friendly app layouts – I’m blogging the results just in case it’s useful to someone else! In the next post, I’ll focus on managing navigation history within each pane, so you can easily let a visitor go “back” and “forwards”.

Full-height app layouts: A CSS trick to make it easier

In HTML layouts, there’s a fundamental difference between width and height. The natural state of affairs is that your page’s width is constrained to the width of the browser window, but its height is unconstrained – it grows however tall is necessary to contain its contents.

image

That makes sense for documents, but it’s a pain for application UIs. Native application UIs tend to slice up the screen both horizontally and vertically into a nested set of panels, some of which may scroll/resize, others being docked against particular edges of their parent panes.

image

So, what’s the robust way, with HTML/CSS, to set up a nested collection of panes that exactly divide both the width and height of the browser window?

Hang on, didn’t we have this one solved back in 1999?

Hmm… this reminds me of something… I remember: the <frameset> tag from HTML 4. Yes, HTML frames do divide the browser window both horizontally and vertically, exactly consuming the available screen area. So why don’t we use them any more? There are loads of reasons, including:

  • What you’re building is logically one page, but technically each frame is a separate HTML document, which makes interactions between them so much more complex
  • It’s not really practical to support deep-linking to (i.e., bookmarking) particular UI states
  • Mobile devices and tablets have very limited support for HTML 4 frames. iOS in particular requires the user to use two-fingered scrolling within panes. This is UX death.

OK, so what’s the 21st century solution?

I’ve used lots of hacks and tricks over the years to get columns and panes into my web applications, often involving JavaScript, $(…).height(…), window.body.clientHeight, and the onresize event. Ugh. Fragile and messy. But at long last this week I learned there is actually an elegant and robust way to set up nested exact-height panes with pure CSS, and it works on all browsers back to IE 7, even on current mobile browsers that don’t support position:fixed.

You know that if you set position: absolute on an element, then you can make it appear at a specified distance from the top, left, right, or bottom from its parent element. Well, it turns out that you can specify both top and bottom, or both left and right, and then it will dock against both edges and always resize to match its parent’s dimensions.

Let’s define some generic CSS rules for panes:

/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

Now it’s easy to set up a fixed-height header, variable-height body, and fixed-height footer:

<body>
    <div class="header row">
        <h2>My header</h2>
    </div>
 
    <div class="body row scroll-y">
        The body
    </div>
 
    <div class="footer row">
        My footer
    </div>
</body>

Of course, you also have to configure the heights and positions of the three rows by using a bit more CSS:

.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }

The result? It’s the classic mobile phone app layout. Screenshot with some colours and content added for interest:

image

Try it in your desktop or mobile browser here. Works on IE7+.

More nesting (or, tablet-style layouts)

The reason for setting up the generic CSS rules in that way is that it makes it easy nest panes arbitrarily. For example, you could split the main viewport into two vertical columns:

<body>
    <div class="left col">
        Left col here    
    </div>
    <div class="right col">
        Right col here
    </div>
</body>

… and then subdivide the right column so it has a fixed header, variable-height body, and fixed footer, just by putting some more row divs inside it:

<div class="right col">
    <div class="header row">
        View or edit something
    </div>
    <div class="body row scroll-y">
        Here’s some content that can scroll vertically
    </div>
    <div class="footer row">
        Some status message here
    </div>
</div>

Here’s the CSS to configure the widths/heights/positions of those panes:

.left.col { width: 250px; }
.right.col { left: 250px; right: 0; }
.header.row { height: 75px; line-height: 75px; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; line-height: 50px; }

Going further, in the right-hand pane’s body, you could also nest a horizontally-scrollable row:

<div class="body row scroll-y">
    <p>Here's a horizontally-scrollable thing:</p>
 
    <div class="scroll-x">
        Any content in here, if it's too wide, becomes independently scrollable
    </div>
 
    <p>That's enough - bye.</p>
</div>

The result of all this? Well, it’s a structure like this:

image

… but that’s pretty boring to look at, so here’s a version where I threw in a rough effort of some iPad-like styling:

image

Here’s a live example. It still renders correctly on very small screens (like a WP7 or iPhone) but this 2-column layout really needs a wider screen to be usable.

Enabling touch scrolling

The scrolling looks and works fine on a desktop browser, but on a mobile browser it varies:

  • On WP7, you’ll see no scrollbars, but you’ll get one-finger touch scrolling, without the lovely inertia/momentum effect. This is kind-of OK, though imperfect.
  • On iOS, you’ll see no scrollbars, and it requires two-finger scrolling (which is horrible), and it won’t use the inertia/momentum effect either. Badness.
  • There are similar problems on Android

With iOS 5, it will be possible to enable fluid, native touch-based momentum scrolling to our divs just by making a tiny tweak to the CSS, thanks to the new “touch scrolling” feature:

.scroll-x, .scroll-y { -webkit-overflow-scrolling: touch; }

I really hope this catches on and becomes a standard.

But in the meantime, for visitors on other mobile OSes, and until iOS 5 becomes prevalent, you can use the open-source iScroll library that provides one-finger momentum scrolling for Webkit (iOS and Android) and Mozilla browsers.

Enabling momentum scrolling on any given element requires only one line of JavaScript (assuming you’ve referenced iScroll.js):

new iScroll(theElementYouWantToEnableItFor);

For my example, I used the following block of JavaScript, which enables touch scrolling on all the .scroll-x and .scroll-y elements:

<!-- Touch scrolling -->
<!--[if !IE]><!-->
<script src="script/iscroll.js" type="text/javascript"></script>
<script type="text/javascript">
    var xScrollers = document.getElementsByClassName("scroll-x");
    for (var i = 0; i < xScrollers.length; i++)
        new iScroll(xScrollers[i], { vScroll: false });
 
    var yScrollers = document.getElementsByClassName("scroll-y");
    for (var i = 0; i < yScrollers.length; i++)
        new iScroll(yScrollers[i], { hScroll: false });                
</script>
<!--<![endif]-->

You could do this in fewer lines if you’re using a library like jQuery or XUI (which is a tiny implementation of a small part of the jQuery API surface, intended for mobiles). Here’s the resulting mobile-style scrollbar:

image

Of course, to see the momentum effect, you’ll need to run it in your Chrome/Safari/Firefox browser.

Credits: Thanks to Rob Swan and FellowshipTech for their articles and projects where I found the CSS positioning trick that underlies this approach to exact-height layout.