Building ‘For an iPhone, By an iPhone’

In May my old iPhone and I launched a new website. It’s a gallery of wallpapers and backgrounds for your iPhone, all taken with an iPhone camera. They’re for an iPhone, by an iPhone.

For the past two years, I haven’t used the iPhone’s camera very much. Mostly because my wife and I never think about taking pictures; we’re not photo-fanatics. But after hearing CameraBag from Joshua Blankenship and seeing his iPhonaroid set on Flickr, my interest in taking fun and artsy snapshots with my iPhone peaked.

Originally, I figured I would create a Flickr set like Josh did and upload the shots to there. But then, after coming across Greg Shmigel’s Just What I See website, the Flickr set seemed inadequate…

The name and concept of For an iPhone, By an iPhone materialized one evening while walking home from the general store with my wife eating popsicles. After a few days of designing and coding, along with a few more popsicles, the site was launched.

A Picture versus A Thousand Words

Building a simple, photo-based site was a nice change of pace. There are quite a few differences between an entirely image-based website and a text-based one, and it was nice to have new challenges to tackle.

At first the Home page design of For an iPhone, By an iPhone showed a cascading list of the five most recent pictures. I was thinking about the convenience of being able to see a handful of wallpapers all at once. Undoubtedly not everyone will like and use every single wallpaper and giving the ability for someone to quickly scan is a feature.

But having five full-sized images on every page (except for permalink pages) felt less like a feature and more like a competition between wallpapers. Which is why I decided to only display one image per page. And by placing the navigation just above the pictures while the title and the tags sit below, it is still easy to browse through each wallpaper, even though it is just one at a time.

However, in good conscience I couldn’t completely abandon the ability for someone to scan several images at once. Which is why the archives display multiple images per page. Not to mention, (a) browsing an image gallery by title is just about as productive as picking out new music by song title; and (b) if the archives displayed only one image per page, that would be the exact same as the way non-archives are displayed.

And getting the archives to display and work just right wasn’t as easy as it should have been. Displaying full-sized images within the archives, like the original Home page design, was overwhelming; the archives needed to be displayed as thumbnails. And even though there are a lot of photo-gallery plugins for WordPress I was unable to find a simple one that would do what I wanted. So I hacked my own system for displaying the archives.

When browsing the archives you are looking at the excerpt content wrapped in an <a> tag which links to the permalink of the wallpaper.

To get WordPress to display only one post per page unless it was an archive page I’m using Matt Read’s plugin, Custom Query String. The CQS plugin allowes me to set exactly how many posts (images) display in any type of archive pages. I set all archives to display fifteen posts per page, which shows five nice rows with three images each.

On shawnblanc.net categories are only discoverable from the sitemap, because it’s easy enough to link to past articles through a linked list post, or simply link to past articles organically within other articles. However, on For an iPhone, By an iPhone, tags are much more vital. When the only content of a post is the image and the title, you can’t interlink to your own posts in a photoblog unless you use tags.

The Problem With Permalinks and Pagination

Standard WordPress behavior is to display the latest post on the home page. But to view the previous posts, you don’t browse by permalink, you browse by page.

Which means that getting the latest picture to display on the Home page, but to have the “previous” link point to the pervious post’s actual permalink page rather than /page/2/ was a little bit tricky.

Because of the way For an iPhone, By an iPhone is set up (with only a single image per page) there is a problem with the default pagination from the Home page. Because you’re only viewing one image regardless if it’s a permalink or nor, you could easily get /page/2/ confused as the permalink for the image you see on page 2. But once a new image gets posted, what used to be on /page/2/ is now on /page/3/, etc., etc…

I wanted all browsing to be from one permalink to the next, so that at any given time you were precisely where you thought you were.

After some searching around, I discovered a simple line of code, that when placed above the loop, does the trick just perfectly:

<? php $wp_query->is_single = true; ?>

This line causes the Home page to act like the most recent post’s permalink page (yet without re-directing to the URL of the latest post). Thus, what would normally be the “Previous” link is now the title of and a link to the previous post.

Which means once you begin navigating from the home page you go from permalink to permalink, rather than page to page.

From Phone to Published

By the time a new wallpaper shows up on the website, a lot has happened with that image already.

It starts when I come across something or someone that warrants a picture. So I take one. Usually several, actually. The best of the shots is then processed through CameraBag or CameraKit [iTunes Link], and the next time I sync the iPhone, all the photos get dropped into iPhoto. They are then re-sized, cropped and watermarked via Photoshop, and saved as 320×480 pixel JPEGs.

The 320×480 images are then run through an Automator process that copies the original, renames it, and resizes it for the thumbnail used in the Archives.

I then upload all the full-size images and their repsective thumbnails with transmit, and then publish each one via MarsEdit.

It sounds like a lot for something so basic, but it’s not as tedious as it sounds.

When first developing the site, I thought about coding an automated process or using a plugin so that if I emailed my image directly to WordPress from my iPhone, then it would get automatically cropped, a thumbnail created, and the image published. But aside from finding a plugin that worked the way I wanted, a set-it-and-forget-it process felt too sterile — I prefer taking the time to hand-craft each image that gets posted.

An Aside Regarding Pageviews

Over the last seven weeks, For an iPhone has averaged a 53% bounce rate with about 4 pageviews per visit. Shawnblanc.net, on the other hand, has a 73% bounce rate and an average of 2 pageviews per visit.

The average new visitor to For an iPhone will browse twelve to fifteen pages on their first visit. The average new visitor to shawnblanc.net, if they don’t bounce right away, will browse perhaps only four or five.

The biggest contributing factor is that For an iPhone encourages pageviews due to its one-image-per-page layout. Since it’s natural and not forced, it isn’t a big deal to click through many pages each visit.

In contrast, shawnblanc.net offers a dozen posts right on the home page. And each article is usually a stand-alone piece, and that each link list item is intended to send the reader away from the site. (Since each website has its own definitions of success, and its own audience, it wouldn’t be fair to compare them against one another to define the achievement or failure of one or the other. But that doesn’t mean it’s not interesting to see the differences.)

For me, what defines the success of For an iPhone, By an iPhone isn’t that it would be full of jaw dropping iPhone photos and wallpapers. The site isn’t made up of individual images, but rather an overall collection of wallpapers all centered around and contributing to a simple and fun concept.

And it is the concept of For an iPhone, By an iPhone that makes it a success. That each image was taken with an iPhone camera, edited with iPhone software, and published for use on an iPhone screen.

Building ‘For an iPhone, By an iPhone’