I now have my portfolio at christopherwardphotography.com iPhone ready. The site is heavy on javascript, and loads a lot of images at once. Makes for a slow 3G iphone experience. And the images were too small once safari scaled them. So I fixed that.

After hearing David mention a lightroom gallery plugin that was made for the iPhone, and trying to show someone that site (no flash on the iPhone), and my own (too slow), I thought I should do something. I don’t have lightroom. I have Aperture, but have never tried the web sites it can create. I just decided to create something on my own.

I wanted it to be simple, and not to use javascript. I also wanted it to look iPhoneish, and look good when the iPhone was vertical or horizontal. Also, just like wptouch that I wrote about yesterday, I wanted it to come up automaticly for iPhone users.

If you go there now with an iPhone you will see the iPhone specific site. If you don’t have an iPhone, this is what it looks like:

On the left is the first page displaying the albums in vertical mode. The horizontal mode shows all four in a row. On the right is the blue album in horizontal mode. In vertical mode the images are two wide, and you scroll a bit more. Press an image and you see just that image in the browser. I didn’t make pages for each image. Each album has that nav bar at the bottom like the bottom of the first page.

I discovered a couple of things to pass on while doing this. The first is the screen. At 480×320, it is small. Be careful about image sizes. They really can’t be larger than 320 ever, or it won’t look right in the vertical mode. It they are too big for the screen, safari will scale the while page. Not what you want.

Since you are makeing this for an iPhone, you can use some specific iPhone/Safari attribues. These items can go in your stylesheet:

  -webkit-text-size-adjust:none;
  -webkit-border-radius: 10px;

The first line in your body tag will prevent text from being resized. Carefull with this. Users may expect to be able to do this, so use sparingly. The second line used in a div will give you the round corners. We don’t need to be cross platform here.

If you expect that others may want to look at this iPhone/mobile page on a regular browser, say one without javascript like from my page, you could add a couple of other things:

  -moz-border-radius: 10px;
  max-width: 600px;

Add the first line so that Mozilla browsers will give the rounded corner. Then hit the web if you want IE to have rounded corners. I decided that I didn’t want to expend the effort, and the best ways use javascript that I didn’t want to use for this, or background images for the corners, which just seems like too much effort for this right now. The second line placed in a container div (a div containing most of the site) will limit the size, and not make it look too odd on bigger screens.

One other thing iPhone specific. I put this line in the head of my html:

This will cause iPhone Safari to limit the screen to it’s native dimensions and not allow pinching to zoom the screen. Again, be careful with this. If you want your pages to act like an application, use it, if you want them more like a web page, don’t.

I cheated with the images. I decided to use the same images from my site and using CSS, have the browser scale them. This usually doesn’t work that well. It would be faster loading to use smaller images, and browsers don’t use great scaling algorithms. I have been impressed with how safari does this though.

Lastly, we need to switch to this version if somone comes with an iPhone. I decided to do the browser check in php. I now have an index.php that looks like this: (code adapted from the wstouch plugin)

There you go. Check out collage.html and iphone.html to access the different sites.