Mobile Version of Website

To implement our changes, we first set the viewport to the device's width. Do this by inserting the following line of code into the head of your XHTML template:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Next, we linked up a special stylesheet called mobile.css right below our initial screen stylesheet and set it to target our first group of devices, the ones with screens between 320 and 480 pixels. We could have targeted all screens smaller or equal to 480 pixels without specifying a minimum value, but in this case, we wanted to use a different stylesheet for any screen smaller than 320 pixels. Note that only devices that support screen media types and media queries will use this stylesheet, but that includes the iPhone, G1 and many Android phones. Here's the code we added to the head of our XHTML template:

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

Then, we linked up another stylesheet called mobile_simple.css which would target our second group of devices. This stylesheet will not only target browsers that support the handheld media type, but also other browsers that support the screen media type and media queries and have screens smaller than 320 pixels. Here's the code we added to the head, directly below the previous link:

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

As a final step, we added this javascript to the head of our template to hide the URL Bar when the page loads on the iPhone.

<script type="application/x-javascript">
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
 
function hideURLbar() {
window.scrollTo(0, 1);
}
 
</script>

Testing and Troubleshooting

We used the emulators that come with iphone and Android SDKs to test our site. These emulators are free and available to the public. We also used some browser-based emulators.

As we noted on our mock-up above, we created a custom footer containing two special buttons that will exist only on the iPhone to provide special functionality unique to that mobile platform. The "Give us a call" button immediately dials our company number. Handy, since the user is browsing on their phone. The "Find us on the map" button launches the built-in Google client on the device and pinpoints our location.

Whereas all of the previous modifications were made by simply restyling and hiding content that already existed on our website, these new buttons are actually additional content that had to be added to the markup of our web pages. So, we added the following HTML code to the footer of all our templates.

<div class="iphone">
<ul>
<li id="iphone_call"><a href="tel:(405) 948-8300">Give us a call</a></li>
<li id="iphone_map"><a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=element+fusion&ie=UTF8&ll=35.594786,-97.053223&spn=5.760649,9.30542&z=7&iwloc=A">Find us on the map</a></li>
</ul>
 
<p>© 2011 Water Company, LLC. All Rights Reserved. <a href="http://www.water.com/" title="Water">Powered by Water</a></p>
</div>

Here are some important things to note about this content:

The "iphone" class applied to the div surrounding this content allows us to hide it for PC browsers and to enable it only for our iPhone devices, using the stylesheets mentioned above.

Note the syntax of the link reference for the phone number. This tells the iPhone to dial the phone number when the link is clicked.

The Google maps link works just like every other Google maps link. The iPhone knows internally to launch them through the internal Google client.