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!

27 thoughts on “How to Make Your Portfolio iPhone-Compatible

  1. Knox

    Hi Dani, good post. Thanks for mentioning the redirect script. I agree a lot with you saying “use it with caution” – I think, because of the flash limitations, that flash driven sites need a solution like this. Otherwise, you are spot on.

    Nice webspace you have here:) Live long and prosper!

    1. Dani Post author

      George – Nice mobile site! I’m glad to hear other artists are using the tutorial.

      Knox – Thanks for the script. It works nicely.

  2. Shaun Williams

    Hey Dani, that works really great! I didn’t have a working site for my ipod touch at all until last week. All I had was rollovers, so I made them “clickable” That at least made it viewable, but I like your idea of a separate mobile site. My site was created in golive and all I have is dreamweaver now. I updated some stuff, but really didn’t do much since I don’t know the program well. I will have to try out your idea later though. Also, look up cooliris.com if you like to view reference fast on the web. It is good to see you are working hard and doing what you do best all the time. Take care

    1. Dani Post author

      Hi Shaun. Thanks for your comment. I looked up cooliris and it is pretty cool. Good luck with your site and artwork. Keep at it! Hope things go well for you.

  3. Joni Solis

    I don’t have much of a clue about mobile devices. I don’t even own a cell phone, but I do like the idea of people being able to view my artwork easier no matter what they are using to surf the web. I do know that people view my site on a blackberry, or maybe I should say that people email me from their blackberry so I am guessing they are also viewing my site from it too.

    So is the size the is good for the iphone also good for the blackberry and any other models of these types of mobile devices? Like is there a standard screen size for these things?

    By the way, thanks for taking the time to make this helpful post.

  4. Joni Solis

    Well, I finally got my mobile site up. It took some time — I’m not the best with CSS, had some trouble centering my images.

    Horse-Logos • Joni Solis
    Portfolio of past custom horse logos
    http://horse-logos.com/mobile/

    It is just one page for now, but later I may add more pages like yours. I would never have attempted this project without your helpful article. Thanks!

  5. Dani Post author

    Joni – I have no clue about blackberry screen sizes or other mobile devices. I would go with a quick google search. Thanks for posting your link.

  6. ziRta

    Dear Dani,
    I found this tutorial while researching something else about illustration portfolios; I hadn’t thought of the importance of having a mobile version, thank you so much for sharing! I researched a bit more about it and found a site that may be of your interest, specially for your blog: http://mippin.com

    Currently I have my site http://mippin.com/zirta which is created from my feed; the downside is that it doesn’t feature my contact info, etc, but for sharing your blog, I think it’s a great option :)

    Looking forward for more tutorials from you!
    Betty.
    P.S. BTW, the link to the code for the redirect is broken.

    1. Dani Post author

      Thanks for the link.

      Yep, I know the redirect doesn’t work. I updated my website a while ago and haven’t gotten around putting it back. Thanks for letting me know though.

  7. mc

    hi Dani
    thank you! have been looking for this info
    what software/builder do you use to make your web sites?
    mc

  8. Marian

    useful tutorial :) i tried once to optimize my website for mobile view but I abandoned the idea after is crashed something, i dont know what, that was fixed by a friend. After this experience I used http://www.convertwebsite.com and I’m very happy about my choice, and I recomand it to those who are afraid to work on those html codes. :)

Comments are closed.