At CakeMail we are ramping up our mobile effort with a new mobile web app, recently we hit a milestone & completed most of the interface design. It got me wondering what could be the best way to get my coworkers to experience on their phone what this was going to be all about.
Turns out, about 3 years ago I asked myself the same question. How can I effectively present mockups for mobile beside just trowing them in basecamp or powerpoint. So I prototyped a project to do just that using jQtouch.
A video will probably explain better than words what this is all about, see below.
A live example helps too (better experienced on a phone). CakeMail let me use our first design iteration for the demo, so you have a sneak peak at that too!
The idea was to sell the app but that never concretized, I still think that there would be a market for this, specially with agencies wanting to impress their clients in a presentation. I’m kind of surprised there is nothing like it 3 years later.
Open sourcing
Head to github to download the code.
The code is not exactly pretty (I refactored it a bit, but it still 3 years old), it’s based on a old, modified jqtouch version and an old jquery version, but it works pretty darn well.
Usage
Everything is controlled by an xml that is given at the plugin extentiation, we can say what we want about xml, it’s pretty nice in terms of readability, here an example that creates a complete app:
<debug mode="true"></debug> <!-- Your dock icon on the iphone --> <dockIcon src="jqtouch.png"></dockIcon> <size width="320px"></size> <!-- Your Startup Screen when your presentation is loading --> <startupScreen src="loader.jpg"></startupScreen> <!--Do you have images for the horizontal mode? --> <screenOrientationChange mode="false"></screenOrientationChange> <!--This is how you include a mockup --> <interface id="main" src="cherry/login.png" horizontal="cherry/login.png"> <!--This is how you include links --> <links href="reports" animation="slide" style="top: 387px; left:10px; width: 300px; height: 50px;"></links> </interface>