The iPad is a great device for interaction, and should you whip one out while visiting a potential client they’re sure to be impressed. Wouldn’t it be great to use the iPad to show off your work?

Creating a personal portfolio app is perfectly possible. As the iPad (like the iPhone) supports the concept of an installed web app, we can create a tailor-made website, install it onto an iPad and make it available for use even if we’re not connected to the web.

For this tutorial, you will need access to a web server on your computer, or webspace that allows you to change the MIME type for a filetype. If in doubt, contact your web host for support.

Step 1 Create your design as you would a normal website. Take into account the different dynamics associated with a touch-screen interface, and let your work do the talking – this is your portfolio, after all. The only technical consideration you should be aware of is to avoid saving HTML files in sub-folders under your Index file – HTML5’s cache doesn’t like folders for HTML files. Script files, images and cascading style sheets (CSS), however, are all fine when put in folders.


Step 2 The iPad has two different screen orientations, so you’ll need to decide which way you want your portfolio. If you want to retain visibility of the iPad status bar at the top of the screen, design for 768 x 1,004 in landscape and 1,024 x 748 in portrait or, if you’re going full-screen, design for 1,024 x 768 in landscape and 768 x 1,024 in portrait.