cre8. Now iPhone friendly friendlier

We’ve always prided ourselves on cross-browser compatibility with the sites we develop for our clients here at cre8. Most recently, we raised the bar by optimizing our own website for the iPhone.

The initial release of Safari for the iPhone made nearly all web content (Flash excluded) more accessible, but we thought we could — and should — do better. After switching to table-less layouts some years ago, the pros continue to outweigh the challenges faced by mastering CSS for presentation, and this became even more apparent when creating an iPhone-targeted stylesheet.

But before diving into any tech-speak, let’s take a quick look at the before and after views of our About Us page.

Who we were

The two screenshots below show the full page upon initial load (image 1), and the main content column after zooming in (image 2).

At first glance, not too bad: the user gets a view of the entire page and can focus on the body copy without a lot of fuss. But “not a lot” of fuss didn’t cut it. For starters, unless browsing in landscape mode, a user would have to strain their eyes or zoom in to read what we have to offer, and our navigation was even more difficult to make out.

Who we are

The next screenshot (image 3) is our About Us page seen with an iPhone-targeted stylesheet, no zooming or scrolling necessary. The body copy and navigation bar are clear and easy to read, and the proportions between heading and copy font-sizes match our site when viewed on a desktop browser. Our logo and tagline are also legible and equally accessible at the top of the screen. A much better first impression for our visitors, to say the least.

The nitty-gritty

So how did we do this, anyway? As mentioned before, beginning with clean, semantic markup made this optimization possible without re-structuring any of our HTML templates. All differences seen are a result of an iPhone-targeted CSS.

iPhone users, please identify yourselves

Almost easier done than said. With PHP, this is as simple as checking for the string “iPhone” within the $_SERVER['HTTP_USER_AGENT'] variable, and serving up a different CSS.

<?php if(stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone')): ?>
<link rel="stylesheet" type="text/css" href="iphone.css" />
<?php endif; ?>

Bump up the volume

Or rather, bump up the font-size. In standard browsers, we set the font-size for our body tag to 62.5% (most browsers have a default body font-size of 16px, so this translates to 10px, making the em-to-pixel conversion a cinch — 1em = 10px), but this is just too small for the iPhone. We found that 30px was a nice, legible baseline.

Images too small? Force-resize!

No, seriously. Safari handles resized images without a hiccup, and we used that to our advantage.

The <img /> tag for the cre8 logo has a parent node with a unique id attribute, and the photos in our About Us page bios have the same parent elements, so just two declarations handled the job of resizing four images.

#logo img {
	width: 173px;
	height: 88px;
	}
	
.bio .img img {
	width: 230px;
	height: 230px;
	}

Explicitly declaring width and height worked great in these cases, as the position and context of the images are predictable. But what about images that change depending on the orientation of the iPhone? Take the hero image on our homepage as an example.

This image takes up the full width of the viewport, which increases from 320px wide in portrait mode to 480px wide in landscape, so how can we handle this situation? One method involves using an @media query to determine the device orientation.

/* Declarations for Portrait mode */
@media screen and (max-width: 320px) {
	.promo img {
		width: 320px;
		height: 136px;
		}
}

/* Declarations for Landscape mode */
@media screen and (min-width: 321px) {
	.promo img {
		width: 480px;
		height: 204px;
		}
}

This approach has clear advantages (for one, no scripting is required), but in this case it also requires us to calculate the height of our hero image in proportion to the viewport width. We didn’t want to be locked into the same width/height ratio or have to update our CSS every time we change the height of this image, so we had to find another solution.

Give ‘em 100%

Or 90%, or whatever you choose. Set an element’s width to a percentage and the height to “auto”, and Safari will do the rest.

.promo img {
	width: 100%;
	height: auto;
	}

With this simple declaration, our hero image fills out our homepage in both portrait (image 4) and landscape (image 5) modes.

That’s that (for now)

We’re constantly trying to improve the user experience, and we hope you find browsing cre8 on the iPhone a breeze. Leave a comment and let us know your thoughts, or contact us if you need your site optimized for the iPhone.

Posted on October 04, 2009 by John Reed | Filed under Code, UI, Usability | Leave a comment