Last week it finally arrived at the office: Our long awaited iPad. No question that we took the chance to play with this cute device …
The goal: Learn about rapid prototyping on the iPad with HTML5
Our goal was to explore the possibilities of the new device, especially its browser as Objective-C is really a painful environment (at least for me) when it comes to fast prototyping. So we wanted to know: Can we use HTML as prototyping platform for future projects? How far can we push the boundaries of the browser? Can we make a webapp behave just like a native app?
The result: notabene - An infinite workbench for ideas
Music: “One Shot” by Luc Bartoli (Powered by Jamendo)
The result of our trial is a little prototype that hopefully makes you forget that your using a browser. It utilizes jQuery library to add the behaviour but takes full adavantage of CSS transitions to speed up performance. We also use new CSS features like gradients, a new box model (to center the breadcrumbs) plus animation and transform capabilities. And of course just like our previous experiment it is possible to install it as a full screen app on your home screen to make it feel more native. If you own an iPad or got the Simulator installed you can give it a test drive. (Keep in mind: This is just an experiment, things won’t get stored and the menu in portrait mode is just a mockup)
What did we learn?
Some of this stuff wasn’t that easy. We came across several problems but also faced new possibilities that we’d like to share:
- It proved to be a valid approach for building simple touch prototypes
- It’s a look to the future
If performance of Javascript and Browser engines will continue to speed up this approach will become even more valid and might soon be seen as a real competition to native apps. - Development with CSS transitions can be random
Sometimes a little tweak in your CSS will just blow up your app for no reason. So if Apple really wants to embrace HTML5 as a mobile UI technology it needs to tackle this issue and make Mobile Safari even more rock solid. - Performance, performance, perfomance
We did several iterations until we got to the current performance, especially for dragging the little notes. You really have to reach the speed of a native app. Otherwise the interaction just doesn’t feel right. In order to do so use CSS transitions and iPhone OS touch events (touchstart, touchmove) instead of the traditional events (click, mousedown). This will speed up the performance of your interface significantly. - You can even do multitouch in the browser now
- Not for sissies: multitouch on bigger screens is a smeary thing. After using the screen for some 10 minutes you definitely long for a cleaning tissue.
Standing on the shoulders of giants
In order to get this experiment done we used some great Open Source components. So we’d like to give some shout outs and credits to the projects that luckily did a lot of hard work to create the building blocks of notabene:
- jQTouch by David Kaneda as an inspiration
We used the transition approach of this great library as a base for the slide transition. - Swipe Plugin by Ryan Scherf
We used the plugin as a basis to build a swipe gesture detection plugin for jQuery - Delicious Font by Jos Buivenga
We’ve used the extraordinary Delicous font in combination with the @font-tag to add a little extra spice to the UI.
Sources available – Feel free to remix
The source code of this project is available under the MIT License. So feel free to remix! Drop us a line if you feel inspired …
Next steps
What to do next? Well, at the current state the project is a rough experiment but we’re thinking about taking it a step further. Any help, contribution and ideas are deeply appreciated. Just a few thoughts on improvement:
- Building a backend
Cloud syncing is really the thing that would make these notes superior to paper notes. Also the offline database capabilities of Webkit could serve as temporary database. - Additional input techniques
Currently the software keyboard for adding new notes is not really satisfying. Voice input would be great but could be hard to implement. - Improving the UI & adding true multitouch support
In any way we’re quite happy with the result and curious to get some feedback. To be continued…
Like this small prototype, I think I should learn much more about HTML5 :-) I agree that the virtual keyboard isn’t a really good solution. But I can imagine another oppurtunity for text input.
What’s about a stylus? Don’t know how hard it is to implement an handwriting detection. But the iPad is like a sheet of paper and it could be a really natural possibility to write on. You can create a new idea over the UI and use the stylus to write or maybe paint on it. You could directly add small sketches without any drawing tools?!
I’m working on a similar topic (about ideas, collaboration, conception, prototyping and so on), so I will stay tuned :-)
Hi Kevin! Love your ideas with stylus.
We had a similar one based on another device. Actually I’m currently playing around with my new SmartPen. Hope I’ll have some time to dig a little bit into this stuff in the next months.
You’re project sounds interesting. If you like you can let us know about the progress.
Very cool! Thanks for the shout-out as inspiration – it’s a great looking project.
Thankx David! jQTouch has really changed the way I think about webapps.
Did you also encounter problems with the software keyboard on mobile Safari? Sometimes it seems to crash all the transitions applied to a website.
P.S. Just working on storing the notes and pages inside the Webkit’s built-in database. Seems like an interesting feature for these kind of apps.
Hi Matthias,
I’ve already tried one of these SmartPens. Used it some times with a fellow student, really liked it.
The project I’ve talked about is my depending bachelor thesis. It’s about the use of these more “intuitive” input and interaction possibilities for brainstorming and conception of interactive projects. Combining touch and stylus input, etc.
Maybe Klaus Birk could tell you some more details, he’s one of my academic advisors. (or you can write me an e-mail too, I’m interested in every input I can get :-))
Hey Matthias,
nice work. If you are looking for new input techniques, you might want to check out this pretty decent JavaScript Unistroke/Gesture recognizer:
http://depts.washington.edu/aimgroup/proj/dollar/
Cheers
Mirko
Hi Mirko, great to hear from you! A great script and interesting space for exploration. Not only for text recognition but also for gesture recognition on mobile web interfaces. Thankx for the link. Hope I can give it a little try…
@Kevin: I’ll talk to Klaus now that I’m back in the office. Very curious about the project :-)
Hi,
In addtion to the gesture recognition, i would suggest to use voice recognition using this Javascript api named WAMI (http://docs.google.comView?docid=dgnht447_2hjdx76gq)…
and compatible with iphone/Ipad (http://wami.csail.mit.edu/mobile.php)
Regards,
Johnny Baillargeaux
Awesome stuff! This is one of the best iPad demo I have seen. Keep the good stuff coming!
Leon
whoisleon.com
A related prototyping approach: Jeff Batterton built an iphone interface with only CSS3 and “no images whatsoever”. Renders nicely in webkit browsers.
This is insanely cool, Matthias. Love it!
Hello,
I downloaded the source code but i do not see the file “transitions.css” under the css directory.
Could you help ?
Thanks,
Johnny Bailargeaux
@Amir: Thankx!
@Johnny: Sorry for the confusion. The file is not needed anymore. In previous versions I had the CSS code for page transitions seperated in this file. You can just ignore it. I removed the reference from the index.html and uploaded it aggain. Hope that helps!
P.S. I’ve also updated the overall project. Added offline support and storage of all the data in Webkit database. I’ll hopefully find the time to post an update.
[...] I found the time to update my little lab project called “notabeneâ€?. So this version (0.2) actually is a fully functional prototype. But let’s move on and face [...]
Hi Matthias,
I think this is great! At the moment there is two backgrounds and another for the start page. How can I increase the number of backgrounds?
Thanks
You should put it on github and let us contribute! zip files suck! :)
@Brandon: Thankx for the hint. I’ve moved the project over to github. Feel free to fork… :-) I’ll also be moving our latest experiments (http://blog.intuitymedialab.eu/2010/12/22/ux-lab-how-can-we-enrich-the-reading-experience-on-a-screen/) to git when I have the time to do so.
@David: I would love see these kind of features.. But I currently haven’t got the time to do it. But as the project is on git maybe somebody will fork it and add this kind of stuff …
Sorry I forgot the Repostory URL. Here it comes:
https://github.com/intuitymedialab/Notabene
Hi Matthias
I have done a proto of a chartbook using your source. Would like to show it and ask for few ideas. If its ok, please PM and I will send you the link. Dont want to post the link here since its being hosted at my home and dont want unnecessary web/bot traffic at home.
Thanks
Mudit
I love this framework. I am a crappy developer but its because i am a designer. I love playing around with your code and would love to see what other people have created from it. Is there a place to see examples?
thanks again for sharing and making it open to us all.
@Mudit: Wow. I’m excited about new ideas that emerged from our little lab project…
@Billy: Thankx. A good place for this would be Github where the code ist hosted now. I created a wiki there where I can add your links if you send us some… :-) Just comment here or send us your links via Twitter (@itymedialab). I’ll add them to the wiki…
https://github.com/intuitymedialab/Notabene/wiki
Nice iPad example. We also made a small HTML5 demo, illustrating that game development can be easy if you only use the canvas element in conjunction with JavaScript:
http://www.previewlabs.com/ready-for-html5-prototyping/
[...] Intuity’s notabene – Rapid HTML5 Prototyping on the iPad [...]