The concept
There are a lot of very complete and handy frameworks for putting together a mobile web application, most of them are full featured and can reproduce a lot of the most common behaviours of mobile operating systems, like skinned buttons, carousels, lists, tables, tabbed sheets, popovers and beyond.
In the world of native programming, there is an object that is quite well known and is usually called in the same way, regardless the platform: that's the scrollview. Scrollviews are generical objects that are used for showing contents that are usually bigger than the available space. User can scroll its content with fingers in many ways: scrolling horizontally, vertically, with a paged approach and so on. Usually this object is subclassed in order to recreate specialized versions of these objects, like tables, lists and more.
After using some native applications, mostly on iOS and a bit on Android devices, I've noticed that are used quite everywhere. Springboards are carousels with icons, and both are paged scrollviews. The phone contact list is a vertical scrollview with items that covers the full width of the container, that are the table rows. Even the iOS Facebook app have its springboard and the horizontal scrolling bar with sections is a scrollview too.
That's why I thought that scrollviews are the vanilla of mobile apps. Are quite everywhere, just nested or with different parameters so, probably scrollviews is what marks a modern mobile application. VanillaOS is my personal attempt on checking if that's true: what can I do with HTML, CSS and just a scrollview object written in javascript? It will look like a native app?
The project
VanillaOS is a mobile OS that doesn't exist. And will never be. By the way it has its own gray-shaded style, his apps, icons and standards, borrowed here and there from the most famous stereotypes in mobile OSs. VanillaOS is a prototyping playifield made with just 3 things:
- A generical scrollview, written in javascript.
- A stylesheet, for keeping the apps layout coherent.
- A library of helpers, implementing just a few common practices.
The rules are simple: just an HTML page for each application and use the less amount of javascript possible. How many well-known GUIs you can do?
The scrollview
The VanillaOS project's core is a scrollview implementation. While in most of the cases, the javascript implementations are of scrollview subclasses like lists and carousels, the VanillaOS's scrollview is just... a scrollview. When created into the webpage as a DIV element, it just shows its content in a scrollable box.
The VanillaOS scrollview is quite configurable, so you can reproduce the classic scenarios we've talked about: it can be paginated or scroll in just one direction but, mainly, doesn't implement any of them. Moreover, the VanillaOS scrollview tries to recreate the nesting behaviour that is crucial in native applications: if a scrollview isn't able to handle a particular scrolling gesture, it passes the command to the nested scrollviews. While is a very simple and natural concept, you'll soon understand that is the trick behind how native apps acts.
As I usually do in my project, I'm providing a bunch of examples in order to learn how the scrollview works (that's are my tries on the VanillaOS game) but, since my birthday is near, I've wrote a in-depth API manual. Obviously using VanillaOS so check that out in the mock-apps section.
As an added bonus, the VanillaOS scrollview supports mouse scrollwheels, so you can use that for desktop browsers web applications too.
The stylesheet
There is nothing fancy to say about the VanillaOS stylesheet. Is just a stylesheet. If provides a number of classes for creating tabbars, headers, table rows, springboard icons and so on using a number of well-known tricks.
While its main role is to give a skin to VanillaOS apps, his role is very important too: javascript based layouts are usually slower than CSS one so, the more we use the built in CSS classes in VanillaOS, the better is for the application performances.
Any of the shipped CSS classes are directly related to the scrollview object: it can work without the VanillaOS stylesheet. It just does what stylesheets can do better: making HTML more readable and compact.
The helpers
Javascript is obviously the main character of the VanillaOS examples, starting from the scrollview implementation. But is quite realistic that, if you want something more than scrolling things, you need a bit of more of code.
The helpers library of VanillaOS implements some quick way for creating DOM objects, getting them, changing its attributes and, as added bonus, showing passive notifications. While its target isn't to be a JQuery replacement (that is like insulting JQuery), it contains the allowed tricks you can use in VanillaOS mock-apps. Just give them an eye: is really small and can be useful in other contexts.
Wrapping up
All these elements will be tied up by a single HTML page, that will mock a particular use case of scrollview, trying to simulate some classic scenarios. That's the mock-app, a gui simulation obtained from scrollviews and styled objects. I've tried to test these web pages on a number of devices, ranging from iOS devices like iPad and iPhones to Android devices, like my Samsung Galaxy Ace and a Galaxy Tab borrowed at work. You can test them on desktop browsers too: it works on the latest versions of Firefox, Chrome, Safari and Opera. I just suggest you to play with mock-apps with smaller windows, since are thought for mobile devices, but should work ok with bigger screens.
The Mock-Apps
All the demos are bookmarklet-compatible on iOS, so add them to your home screen for viewing them in full screen! Click on the image to enlarge the screenshot or on the Try this Mock-App button for trying the related demo in your current browser.
-
Try this Mock-App.
Tableview
The classic tableview, with vertically scrolling items. You can move along the list items dragging vertically. The header bar and the footer bar are placed absolutely, so they don't scroll with the list and doesn't overlap his content.
-
Try this Mock-App.
Mail
While is very suggestive, the Mail sample is quite simple: it includes 2 vertically scrolling scrollviews and another one that scrolls in all directions in order to replicate a typical e-mail client interface. I suggest you to try this mock-app on tablets or on other devices with bigger displays, since the larger is the available space the better is in terms of usability.
-
Try this Mock-App.
Springboard
Springboards are being quite common in touch displays and, in some ways, are the mobile replacement for desktops. In this mock-app, the springboard is simulated enabling pages on a scrollview. I've tried to create a new GUI element too, that is a scrollable dockbar: the icons on the dock can be scrolled horizontally like in the springboard.
-
Try this Mock-App.
Wheels
iOS makes use of scrollview on its combo box replacement: big scrolling wheels are shown on the screen and each of them changes a field on a form. These wheels are simulated using vertically scrolling scrollviews, in which rows are resized depending on the available space.
-
Try this Mock-App.
Magazine
While there are more optimized solutions for doing a web magazine, you can make small magazines nesting scrollviews together. Our magazine pages can have page links and scrollable elements too. I suggest you to try this demo on a tablet or on bigger displays.
-
Try this Mock-App.
Navigation
Adding dynamically elements to a scrollview, I've tried to recreate the behaviour of a navigation controller: views are stacked one on top of another one like a stack and user can add elements moving in-depth or remove the last one hitting the "back" button. Code is structured as a little library, so you can make your own navigation controller based on the VanillaOS scrollview.
-
Try this Mock-App.
Feed Reader
A typical mobile RSS reader interface. It includes a main list with the feeds and a detail view. The detail view, that usually lists the unread posts of the selected feed, grow up hitting the More... button placed as last item, that's another typical scenario of growing lists.
-
Try this Mock-App.
Puller
Nesting scrollviews together, I've tried to simulate the classic pull to update list: while the list scrolls vertically as usual, its content is updated from the top when is pulled from up to down, before the first element. It shows how the drag proxying is useful for scrollview implementation, in order to recreate uncommon scenarios.
-
Try this Mock-App.
Chat
Nesting more than two scrollviews together, I've tried to recreate the classic GUI of chat softwares on mobile phones: while the contact list tab is a common vertical scrollview, the chat sessions tab scrolls horizontally between chat each opened session. Moreover, the first horizontal page offers a summary of the opened sessions: each item jumps to the relative session when selected. Notice that the tabbar behaviour has been simulated with a scrollview too.
-
Try this Mock-App.
Widgetboard
Scrollviews can't only be nested one into each other but also one over another one, like in this widgetboard example. When the topmost view scrolls like into the springboard mock-app, the scrollview below scrolls slower, recreating a parallax effect that is very common on Android main screens. For better results, If the back view is just an image, you can use a simple DIV with background image instead of a scrollview, like this.
-
Try this Mock-App.
Documentation
Last but not least, a documentation browser - more specifically, the scrollview documentation in your pocket. This demo is fully work and while its functionalities are more complete than the other demos, the amount of code is pretty the same. Commands list is collassable, in order to see each function quick reference.
The code
While testing scrollviews was a funny game for me, you can use the VanillaOS freely in your projects or for testing more layouts. In any case, I release the whole code of the scrollview and demos as MIT/GPL2 so you can play as you want trying to mimick native behaviours in webapps. You obviously can help making the scrollview (and demos) code more complete, bug-free and feature packed. Just drop an email to my usual email address (strip the numbers as usual). I'm forgetting anything? Huh... the code.
Download VanillaOS version 0.1
I usually use my Github repo for projects just when is needed, so if you're going to collaborate continuously, just let me know and I'll upload everything there.
Thanks
I've to thank my GF Bianca for its patience as usual... this time the name of the project is by me and obviously, is really really bad ;)