How to Make Your Portfolio iPhone-Compatible

Iphone 01

When speaking about artists’ websites, an art director recently made a comment that caught my attention – he is annoyed when he can’t view them on his iPhone.

The comment was half-joke, half-serious, but it brought up an important point. You never know what potential clients are out there, and what they are using to view your work.

And so I went home and made an iPhone version of my web portfolio.

Why make an iPhone website? Is it necessary?

No, I don’t think every artist should go and make an iPhone portfolio right this minute. Quite frankly, I don’t expect a lot of visitors to my mobile site. However, I DO think artists should keep these ideas in mind. The use of iPhones and other mobile phones is on the rise, and artists should always be thinking of ways to make it easier for clients to access their work. At the very least, avoid flash and multi-media rich websites that don’t work on mobile platforms.

It was a fun experiment and it didn’t take long to create at all. I know it will make at least one art director happy, so that alone is worth it.

So if you have the know-how and a little bit of time, I say it’s worth the extra bit of effort. It might not matter to most of your clients – but it might mean the world to the few who happen to be on an iPhone.

Here is an in-depth review of how I put the site together.




Setup

Get a Subdomain

You need a place to house the mobile version of your site. The easiest way to do this is to set up a subdomain like iphone.example.com or example.com/mobile or m.example.com. Use something catchy and easy to remember. Don’t use anything too long that would be hard to type on tiny phone keyboards. My site’s address is danijones.com/mobile.

Designing the Page

Move Things Around

On a standard computer, most displays are horizontally oriented. So, most of the time it is best to organize your website content in several columns. On my standard website, for example, I have my thumbnails on one side of the page, and the main image on the other.

On an iPhone however, the display is vertical most of the time. Sure, you could turn the phone around so it is horizontal, but the screen is so small that the usual multiple-column way of navigating becomes a hassle.

Iphone02 Iphone03

For my mobile portfolio, I have organized all my content into one-column pages. The portfolio images are stacked one after the other so they are easy to see and scroll through.

Resizing

Now, if you simply place all of your text and images on a page, it’s a lot easier to navigate, but it’s still not ideal. Text still looks really small and the page is too zoomed out.

Iphone04 Iphone05

To fix this, it is best to define the width of all your content. If you are familiar with basic html, you can use tables. If you like CSS, you can use div tags. The resolution of an iPhone screen is 320×480, so I set the width of all my content at 300 px.

Then I changed the size of all my portfolio images to a uniform width to make them as large as possible on the screen.

Iphone06

Zoom

Now, your page is easy to navigate, but if you view the page on an iPhone, it will look like a big page with a skinny column going down the center. To fix this, you have to insert some code into the page header that will tell the browser to automatically zoom into the main content when viewing from an iPhone.

The iPhone reads a specific meta tag called “viewport” to do this. This is what the code looks like:

<meta name="viewport" content="width=320" />

Insert this anywhere between your <head> tags in the html code, and the iPhone browser will automatically zoom in to a viewing window of 320 pixels wide.

Iphone08

Iphone07 Iphone 01

Content

Contact Information

As always, make sure you make your contact info easy to find. On an iPhone, there are also a few other considerations:

  • If you list an email address, make sure you hotlink it using a “mailto” link. That way, the user can start composing an email right on the phone.
  • Also, if you type out a phone number, use the standard format – e.g. 1 (234) 456-7890. The iPhone will automatically detect the number and create a link. Users can just click the number to call you. Cool, huh?

Multimedia

  • Make sure all your graphics are optimized for the web and not too hefty. You want the website to load fast, especially if your iPhone visitors are on a slower cellular network.
  • If you include any type of video, use formats that are compatible on the iPhone. Basically, this means either Quicktime or YouTube.
  • Flash is not supported on the iPhone, so don’t use it. In fact, I would rather artists not use Flash EVER for websites, but I digress…

Extra Features

Create a Webclip Icon

There is a feature on the iPhone that will allow users to bookmark websites right onto the iPhone homepage, like an app. Normally, the icon for this bookmark is just a screenshot of the site, but you can go the extra step and make your own icon.

  1. Create a png image that is 57×57 pixels in size. Note that you don’t need to add any special effects to make it look “button-like” because the iPhone will do that for you automatically.
  2. Name that image apple-touch-icon.png.
  3. Upload the image to the root folder of your site.

That’s it! The iPhone will automatically detect the image and use it as the webclip icon.

Apple Touch Icon

Iphone09 Iphone10

Redirect Your iPhone Visitors

Remember to include a link to your mobile site on your standard website, and vice versa, so your visitors can switch back and forth according to their needs.

It is possible to simply redirect the iPhone browser to the mobile site using code. There are several Javascript and PHP solutions out there. I happened to use a piece of code I found on this site: http://www.ebaspace.com/2008/08/04/iphone-seo/

Just insert the code into the header of your standard site, and the browser will redirect the user to the mobile site automatically.

Iphone11

I would use this solution with caution. As a rule in web design, it is generally not a good idea to “force” your users to do anything – e.g. resize windows, pop-up links, etc. Also, my standard website is slightly different than the mobile site and has more content, so I don’t want to trap my iPhone visitors on my mobile site.

There is probably a code solution out there, but I don’t know it. I came up with a simple workaround though:

I duplicated my main page – index.html – and named it “home.html”. On the home.html page, I deleted the iPhone redirect script. I then changed all the site links that are meant to point to the opening page (index.html) and directed them to the home.html file. The result – iPhone visitors who visit “danijones.com” are automatically taken to the mobile site, yet I can still link back to the full site and the visitor won’t accidentally get redirected again.

**

That’s it! If you have an iPhone or iPod Touch, go ahead and navigate to danijones.com to see the working site.

Please leave any questions or comments if you have any. Have fun!