• Experiment No 4

    Off Canvas Panes for RWD

    Method

    A rough and ready demo to show related information displayed across adjacent panes in small, touch-based contexts. The pattern uses swipe.js with visual tweaks to hit towards extra information a la WP7. Swipe from right to left to see it in action

    The demo is intended for small and touch-based contexts - it wouldn't make sense in your current viewport. Try opening on a touch device with a small viewport width - eg iPhone, Android etc.

    • Joni Korpi
    • Ethan Marcotte
    • Mark Boulton
    • Jason Weaver
    • Cole Henley
    • Chris Coyier
    • Jason Grigsby
    • Stuart Robson
    • Brad Frost
    • Jordan Moore

    For more off-canvas inspiration see: Off Canvas Multi-device Layouts by Luke W, A Multi-Device Web Layout Pattern by Jason Weaver and Off Canvas List - a pattern translation by yours truly.

    A quick demo by Jordan Moore using the awesome swipejs.