Build an iPad portfolio app

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.

Step 3 There are a few interactions closely associated with the iPad and iPhone in particular, as well as the new wave of tablet devices in general. These include pinch and swipe, and are treated just like normal user events as far as scripting and the browser event model are concerned, so they’re accessible via Javascript in the same way a click or a mouseover are.

Step 4 You can set up event listeners to handle individual events using the syntax window.ontouchmove. If you’re not confident working with Javascript directly, or prefer to work through a framework such as jQuery (jquery.com), there are helpful plug-ins that allow easy access to these touch-specific events.

One such library is jQTouch (jqtouch.com), which provides access to the full range of touch-based events as well as having a convenient helper method for offline web-app caching, which suits our needs perfectly. We won’t use the helper method here, but be aware of its presence, as it can make the process more straightforward.

---

Step 5 If you design two versions of your site’s layout for portrait and landscape modes, you’ll need to include a crafty bit of code. You can load different CSS layouts into your pages according to the device orientation by using the following metatags at the top of your code:

(orientation:portrait)” href=”css/iPad-portrait.css”>

(orientation:landscape)” href=”css/iPad-
landscape.css”>

Step 6 To create an installable web app we need a few extra assets on top of the website itself. First of all, we’re going to want an icon that sits on the iPad’s springboard homescreen to act as the launch button for our app.

Create an icon 57 x 57 pixels and save it as a 24-bit PNG file with the filename apple-touch-icon.png. You don’t need to add rounded corners or the highlight effect as the iPad OS will do this for you (unless you specifically ask it not to through an additional metatag). Add the code below to link your iPad icon to your website:

icon.png”>

---

Step 7 Similarly we can have a startup screen for our app. This is entirely optional – the application will work just fine without it, but a startup screen adds a nice bit of additional polish to the final portfolio, especially if you let your potential client launch the app themselves.

Create a splashscreen image 1,004 pixels tall and 768 pixels wide. Save it as a 24-bit PNG file with the filename splashpage.png. Add the code below to your section of the website homepage to enable it as the startup image:

href=”splashpage.png”>

---

Step 8 We need to tell the iPad that your website can be installed as an application. This is easily done by adding another special HTML metatag to the top of each page. Add the following code inside your section to enable installation and match the viewport to the iPad’s resolution:

content=”yes” />
scalable=no, width=device-width, initial-scale=1.0,
maximum-scale=1.0”/>
style” content=”black” />

Step 9 Everything is ready to install on your iPad, but we need one final file to tell Safari on the device that the website should be treated as an offline-capable web app. This file is called the cache manifest, and it’s part of the HTML5 specification. A cache manifest tells the browser what to download a copy of, and what to bring in from the web each time the app is launched.

The file itself is plain text, and looks like the example below. Note that you must set up your web server to serve this file with a specific encoding of text/cache-manifest.

See the box above right for more information on how to do this. You need to list every file that makes up your website in the cache manifest if the web app is to function entirely offline:

CACHE MANIFEST
# Offline cache v1
article.html
# supporting files
css/styles.css
js/jQuery.js
js/jQTouch.jquery.js

# images
images/page1.png
images/page2.png
images/page3.png

You also need to link to the manifest file from the top of your pages by changing your HTML declaration to read:

---

Step 10 Upload all the files to your web server (or copy them to your computer’s web server folder if you’re using your local machine). Next, visit the site using your iPad and click on the + button at the bottom of the Safari interface. Click the Add to Homescreen button. Safari will download all the files listed in the cache manifest, as well as the icon and splashscreen, and install a button on your homescreen using the icon you created.

---

Step 11 Choose the Settings application from your homescreen and either enable Airplane Mode (if you have a Wi-Fi + 3G iPad) or turn off Wi-Fi (if you have a Wi-Fi-only model). This prevents iPad from accessing the internet, and tests the offline nature of your web app. Return to the homescreen and launch your app by pressing on its icon. You should be able to navigate around your portfolio without internet access. Now, go off
and wow some potential clients.

Sam Hampton-Smith

Posted in: HTML Tips-Tricks,Tutorials