Update - 7th Nov 2007: see note
Having recently read Apple’s iPhone HCI guidelines for designing iPhone content, I wanted to see whether I could tweak my blog so that it read better on the iPhone, and once that has been done work up a look and feel for mobile devices in general for alpower.com. What I want is one look and feel for my blog through a regular browser, and a slimmed down version for mobile content.

As viewed with no changes:

A slight problem is that I do not have an iPhone, but this has been momentarily solved by the use of iPhoney, an open source iPhone Web developer tool (Mac only), with Zoom to fit turned off, using the iPhone user agent, and installing Safari Beta 3 for the closest experience.

Donations of spare iPhones happily accepted for my further theme development/testing ;o)

As the page generated was going to be the same, I decided to use only CSS to change the look and feel, and go with a totally separate CSS file. The main issue I had was how to determine what CSS file to use.

The most commonly used method is to use a CSS3 media query in your header.php of your theme:

<link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />

This detects that the stylesheet is for screen use only for devices of a certain width in Mobile Safari.

However I immediately came across a stumbling block in that iPhoney doesn’t yet support this type of selector.

The only alternative was to use some php to detect the user agent and sends different css to the browser if an iPhone is being used:


<?php
if (ereg("iPhone",$_SERVER['HTTP_USER_AGENT'])) {
$iphone = 1;
} else {
$iphone = 0;
}
?>
<style type="text/css" media="screen">
<?php if ($iphone) { ?>
@import url(<?php bloginfo('stylesheet_directory'); ?>/iphone.css);
<?php } else { ?>
@import url( <?php bloginfo('stylesheet_url'); ?> );
<?php } ?>
</style>


Code snippet from Jeremy Flint’s blog - check his excellent blog out for details. This is a workaround, and I will probably recode this to use the css3 selector method only I have a suitable mobile device to test with.

As per Apple’s guidelines I set the viewport to set the resizing properly on the iPhone:


<meta name = "viewport" content = "user-scalable=no, width=device-width, height=default-height">


I came up with the following design last night, and have taken a few some screenshots today:

Still a long way to go in terms of design/readability/usability (buttons instead of links etc), but as a rough start its there in only 24 CSS selectors. To do it properly I would have to add some things into my html code, rather than just tweaking the CSS and header, and show/hide them depending on which device was being used.

A good starting point on mobile content design can be found in ALAs Put Your Content in My Pocket article.

Looking ahead, as mobile browsing takes off into the stratosphere (and it will), for future Wordpress versions I can see Wordpress automatically detecting the user agent then feeding specific templates (xsl or otherwise) dependent on what device is accessing your blog page.

Comments ( 1 Comment )

Add a Comment