Update 3: A new version of this tool is available and you can find it here: http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworks/
Update 2: This article is also available on the Adobe Developer Connection. The article is edited and therefore a better version of what you read here. Of course you are welcome to continue reading this page, result is the same!
Update 1: We are working with the patched version of Fireworks CS4 for a few weeks now and most of the problems are fixed. I removed the negative comments in this article on the bugs in CS4.
So, you are a designer. A concept-, interaction- or visual designer and you use Adobe Fireworks for sketching, wireframing, visual design and of course prototyping. Great choice. I have been working with this program for many years. I think it is the most efficient tool for creating anything based on pixels and consisting of more than one screen. In this post I use Fireworks CS3, but you won’t have any problems creating something simular using CS4.
Lately we are working on quite some iPhone applications. We always aim to see the design we make on the device it is made for as soon as possible. For web design this is easy. Use the “preview in browser” function in FW. But for iPhone it is a bit harder. We created 320*480 png’s and synced these “photos” with the iPhone so we could get a bit of a feel of how it looks on the handheld. But we wanted more.
This is what you want:
- Click through the screens the way you normally do with a FW mock up.
- Make use of the full screen (no Safari buttons).
- Export directly from Fireworks without the need of changing CSS or HTML afterward.
- Opening the app from the home screen.
- Disable zoom.
- Be able to send links to every iphone without even be an official iPhone developer.
This is what you don’t want:
- Learn Objective C or depend on someone who can.
- Take many actions before you can actually see the screens on the device.
- Wait for a new screen to load every time you click a button.
This is what you might wish, but is a bit harder:
(we are working on it)
- Animations, within a screen or from screen to screen.
- Using real form elements (that trigger the default iPhone UI elements).
Time to try it out to get the idea. We made a little demo, this is what you do:
- Be sure you are a fast network, Wifi or 3G with your iPhone
- Open this link in Safari on your iPhone: http://ipro.to/tap_iphone/ (I usually mail links to myself and open them on the phone)
- Follow the instructions.
How does it work?
Just very quickly, I explain more in detail later on:
- Download this zip file containing some folders with PHP files and jQuery.
- Create the screens with FW like you normally do. Start with a 320*480 canvas and call the first page “index” (no capitals please!).
- Use hotspots (instead of slices) for creating links to the different pages.
- Export the mockup to HTML and images like you normally do to test the mockup in a browser.
- Everything OK? Now export the file to Dreamweaver Library (.lbi) to
the folder named “Library”.
- Upload everything to a server that can execute PHP.
- Get your iphone and visit http://www.yourwebsite.com/..path..to..iprototype/iprototype.
But how does it really work?
Technically speaking. (if you are not interested, skip to “creating the mockup with FW“)
- When you open the URL on the iphone, jQuery will check the height of the screen, so it knows if you already have added the link to your homescreen.
- If not (screenheight is under 480px) it alerts you to add the link to your homescreen
- If you enter the site from the homescreen, the height of your window is 480px. So jQuery gets the content of the mockup using PHP.
- All .lbi files are loaded and changed a bit by PHP to correct path to images, remove unnecessary tags and change the links so jQuery can work with it. Also some DIV tags are wrapped around the images and the ID attribute is set to the name of the file.
- jQuery hides all DIV’s found in the generated HTML, but makes the screen (page) named “index” visible.
- Clicking the image maps (hotspots) on this image shows the DIV the URL links to.
Do it yourself
Download the files
Upload and view it on your iPhone
All files in the iPrototype folder should be on a server that can execute PHP. I normally use FTP in Dreamweaver to do this. Take your iPhone and navigate to the address, ending with /iprototype. Follow the instructions on the screen.
Let us know! We can also create a prototype for you, or help out with the design, that is what we do!