Quantcast
Channel: Faith and Web » Technologies to Watch
Viewing all articles
Browse latest Browse all 8

Customizing Websites for the iPhone

0
0

While all of the sites that I maintain look fine on my lovely new iPhone, they are itsy-bitsy postage-stamp renditions of their big daddy monitor versions. Does that suffice, I wondered? My hope was it would be easy to “sniff” (i.e., have the browser recognize) an iPhone accessing a site and then direct it to an iPhone-friendly rendition (whatever that means).

Specifically I was hoping to point iPhones to alternate style-sheets (CSS). It turns out it’s a breeze — if you have a nice clean site (in the HTML/CSS-sense).

Why Point to Alternate CSS?

I haven’t talked much about the importance of CSS on this blog, but that’s only because the blog is young. If I’m a zealot about anything, it would be CSS. CSS is incredibly important to a web professional and this is a great example.

Back in the dawn of browser-sniffing time (1997ish), webmasters coping with browser inconsistencies would point users to alternate pages. This was an incredible amount of work, and fraught with peril. Then CSS started to mature and came into its own at the point browser producers started to support it.

The Cliff Notes version is that nowadays a webmaster worth her salt will aim to totally control a sites’ look, feel and layout with CSS. If you can achieve this separation of look and content, the site should be easy to adapt to the many unpredictable web twists like the creation of the iPhone.

How Does a Website “Sniff” an iPhone?

So how does one do this magic — using an iPhone as an example? It actually depends on the scripting used for a particular website. These days I use PHP on all my sites, although other technologies like ASP.NET and Coldfusion would work just as well.

It only needs one or two lines of code — something like the following:

<?php
$browser = getenv(“HTTP_USER_AGENT”);
echo ‘<p>HTTP User Agent is: ‘ . $browser . ‘</p>’;
?>

You can see the results of this little script here.

Mine says “HTTP User Agent is: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4″. This translates to I’m using Firefox (Mozilla) on an aging Mac. But when I’m on my iPhone, ta da, the resulting page includes the magic string “iPhone”.

iPhone Detected; Then What?

That’s the big question. But to answer it from the simple coding perspective, you can do something like a classic if/then statement, along the lines of:

$browser = getenv(“HTTP_USER_AGENT”);
if (eregi(‘iPhone’, $browser)) { … }

“Eregi” reads the resulting string stored in the variable $browser and if it sees “iPhone”, then it does its thing. So where the ellipses (…) are you do whatever you want — the most likely being point to an iPhone-friendly stylesheet.

For this example, I’ve monkeyed just a little with the embedded stylesheet.

<?php
$background = “#fef9b7″;
$browser = getenv(“HTTP_USER_AGENT”);
if (eregi(‘iPhone’, $browser)) { $background = “#b7ebfe”; }
?>
<style type=”text/css”>
body { background: <?php echo $background ?>; }
</style>

The result? If you look at this page on an iPhone it’s light blue (#b7ebfe). On anything else, it’s light yellow (#fef9b7).

What Next?

For now, all I know is how to code. What best to code for an iPhone is a different kettle of fish. Actually, I think it’s too early to know. It depends on how users work with iPhones. I could fall into the classic trap of designing for me on my iPhone, and while that’s fun, it’s a big usability no-no.

The bottom line is we web pros now have two homework assignments:

  • Figure out how most people look at our websites using an iPhone.
  • Clean up our code. If you haven’t done this already (and most church sites haven’t in my observation), separate content from style. If yours is such, get going. It’s a great investment in the future of your site, iPhone or no.

Viewing all articles
Browse latest Browse all 8

Latest Images

Trending Articles



Latest Images