With the increased number and success of the iPhone, I thought it’d be a good idea to make a site of mine containing best quotes from Johnny Drama optimized for iPhones. While the original version was working well on the iPhone thanks to its awesome zooming and scrolling capabilities, the page wasn’t taking advantage of the device’s built-in UI controls, such as swiping plus the landscape and portrait orientations.
Inspired by Jin Yang’s blog post on Designing for the iPad, I decided to get to work. I’m not an iPad owner, but his blog post discusses most of the important aspects to take into consideration when optimizing web pages for Apple products. To make the project more manageable, I broke it down to the two following tasks:
- Optimizing the UI, and
- Optimizing the code
Optimizing the UI
The first and most important aspect of making a page iPhone optimized is the use of screen real estate. While the most common computer screen resolution these days is 1024 x 768 pixels, the iPhone screen resolution is only 320 x 480 pixels. URL toolbars and the bottom toolbars eat away the effective pixels, which doesn’t leave much room for the actual content.
Portrait mode
In the original version of the page, Johnny Drama’s posterized picture takes up about half of the page width. Considering the smaller real estate on the iPhone, there is no sense in showing proportionally such a large image. In the portrait mode, I decided to narrow the image down to 50 pixels, which is only about 15 percent of the screen’s width. This allowed me to get the site name/branding at the top of the screen without making it too crammed.
Below the branding is the content area. Since the site’s content is quotes, I wanted to keep the quotation mark as a design element. By placing it under the image, I was able to maintain a grid-like horizontal division on the page. The quotes differ in length with some being just one-liners from Drama and others a snippet of dialogue, the container displaying the quotes varied in height. To keep the “Drama-tize me” button from bouncing around, I anchored it to the bottom of the main <div> using absolute positioning.
This is the only area where I don’t completely agree with Jin blog post; I do think absolute positioning has its place even in iPhone CSS. Since the page has fixed width and resizing is disabled, the risk of having elements float outside the viewport is zero. Since the height of the viewport is known, it was easy to give the content area a fixed height and place the button at the bottom. This still allows the user to scroll down the page to see the brief description of Johnny Drama without the button destroying the page flow.
What if the future quotes are longer than the existing ones? My solution would be to adjust the font-size dynamically using jQuery.
Landscape mode
The landscape mode adds a new layer of complexity to the UI design. The viewport proportions are closer to a normal computer screen, but no cigar. Especially the height of the page forces more creative thinking of how to lay out the page. Thanks to the wider page I was able to bump the size of Drama’s face a little bit (It is now about 20 of the width of the page) while keeping the site name on the same line to offer consistent branding.
The button would have taken awkwardly lot of room at the bottom, so I decided to place it on the side. Since people are predominantly right-handed (and you shouldn’t be holding your iPhone 4 from the lower left hand corner anyway 😉 ), I figured placing the button on the right would allow the user to click the button without moving her thumb even when going from portrait to landscape orientation, which removes the need for “re-learning” the UI. I also kept the width of the button the same to keep the clickable area equal.
Adding the swipe
At first I was happy with just optimizing the layout for iPhone’s smaller screen and the two orientations. As I was testing the page, I realized something was missing; the page was not taking advantage of any of the iPhone’s built-in UI controls. Clicking the button loaded a new quote, but I started thinking if any of the other controls would make sense. Then it occurred to me; the Swipe! Based on my own iPhone usage, I associate the swipe with progress, which loading a new quote essentially is. Now swiping across the quote text loads a new one. I have to say I am pretty proud about that. Sure, I could’ve added the shake, pinch, what-have-you to trigger loading of a new quote, but I wanted to keep it simple and not make it a UI-control-galore.
Optimizing the code
The quotes are stored in a MySQL database and fetched using PHP. To minimize traffic and page loading time, I used ajax to fetch a new quote. To account for lagging response or slow connection (which is possible when the page is not viewed over Wifi) I added a basic loader image to signal to the user that a new quote is loading. The ajax call returns a JSON object, which is parsed using jQuery. I was very happy for the lightning-fast parsing times.
Background images (the quotation mark and two sizes of Johnny Drama’s face) are loaded in one sprite only 19kb in size. The entire page makes 8 HTTP requests (including two for Google Analytics) and is only 92Kb in size. All in all, I was happy with the optimization effort of this page and it really taught me a lot.