As I’m working on improving the user experience of some of my recent mobile appliations, I thought it could be useful to start documenting some basic UI patterns for mobile apps.
The goal is not to provide yet another UI framework, but rather to document the basic/raw approach (or different approaches) to implement a specific UI pattern using HTML, CSS, and JavaScript. The code is intentionally simplistic so that it can easily be integrated in your own libraries using your own conventions.
I created a GitHub repository called “mobile-ui-patterns” where I’ll try to publish the patterns I come across in the apps I’m building.
I just pushed a first example of the “Page Swipe” pattern that is pretty common in tablet layouts.
Watch a short video here:
In this implementation, I used the swipe gesture event available in Zepto.js (a lighter weight jQuery compatible DOM library).
In my next post, I will share another version of the same pattern implemented with iScroll and its “snap” feature that provides a slightly different user experience.
I thought about trying this
http://lagoscript.org/jquery/flickable/demo
together with jQuery Mobile.
very usefull, thanks.
very usefull, thanks.
Very cool! I like it! I’ve done swipe pages before but never without the animation, nor up/down
Very nice.
Thanks for posting
hank you. very helpful code. this code more useful that before :)
Hi! You need to try one of the most popular collection http://inspired-ui.com with lots of beautiful and really great UI patterns.
well done but if you change the screen resolution or flip the screen between portrait and landscape the viewport fails.