Since we announced our optimization of the Element Fusion website for mobile devices including the iPhone, we've had quite a few requests to share the steps that were taken to complete this task. While there are different ways to accomplish such a task, the following is a look at how we did it.

Phone considerations

For our purposes, we divided all mobile devices into three categories.

1. Devices with screens that have widths between 320 and 480 pixels, that support CSS, and that support screen media types and media queries. This includes the iPhone and the G1. We will refer to this group collectively as the iPhone. These devices will be able to support all of the optimizations we put in place.
2. Devices that support CSS and that either support the handheld media type or support the screen media type and media queries and have screens smaller than 320px wide. We'll create separate, simplified CSS rules for these devices since their screen size will limit what they are able to display.
3. Devices that don't support CSS. These devices will render our content from the markup only. We don't have to provide any special optimizations for this group. Since we use standards-based XHTML, it will still render effectively on these devices.

Design

First, we had to decide which elements should be kept onscreen for the iPhone and which elements should be removed. Here's a look at the Element Fusion home page with overlayed notes about our decision-making process.

Once these decisions were made, we created a mockup to lay out the included elements on a screen that's 320 pixels wide.  Our mockup can be seen in the image below.

Notice the "Give us a call" and "Find us on the map" buttons in the footer of this mock-up. We're replacing the regular footer on the EF site with this special footer content which will only be shown on the iPhone. We'll cover this special situation a little further down.

Implementation

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 and G1 phone. 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" />

Development

Next, we created our mobile.css stylesheet to target the iPhone / G1 phone, overwriting the PC screen style sheet, changing dimensions, modifying backgrounds, and hiding or showing elements as defined by our mockups for the iPhone. This tutorial assumes knowledge of CSS to make such changes, so we won't get into all of the CSS rules here. However, you can view our stylesheet here to see what's under the hood.

We also created the mobile_simple.css stylesheet for smaller-screen devices. This stylesheet essentially strips out most of the content styling, making our website display in an almost "unstyled" form which is more accessible to other mobile devices with smaller screens. You can view this stylesheet here.

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 & 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.

The final product

Here's the resulting code added to the head of our template documents. To see this in context, you can view the source of our Element Fusion homepage and look at the head section.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link media="Screen" href="style.css" type="text/css" rel="stylesheet" />

<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (max-device-width: 319px)" href="mobile_simple.css" type="text/css" rel="stylesheet" />
<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>

Special content for iPhone

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>© 2009 Element Fusion, LLC. All Rights Reserved. <a href="http://www.embracewater.com/" title="Water content management system for business">Powered by Water</a></p>
</div>

Here are some important things to note about this content:

1. 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.
2. 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.
3. The Google maps link works just like every other Google maps link. The iPhone knows internally to launch them through the internal Google client.

With mobile web browsing gaining momentum, it's important to consider the way your website looks and feels to visitors on mobile devices. We've recently completed an optimization of our own site, ElementFusion.com, for mobile devices, with strong optimizations for the iPhone and Google phone. We're now offering this service to our clients. For more information, please contact one of our sales consultants.

Currently, nearly 60% of people accessing websites through mobile devices are using the iPhone or Google phone. When users of these two devices access our site, they get a customized view created specifically to display on their device (pictured to the right and below). The content of our site is the same, but selective CSS techniques allow us to shape how the content is rendered and formatted on these two devices.

Other mobile devices render the content differently. Those that support handheld CSS receive our customized, stripped down layout which makes the content as accessible as possible for the largest number of devices. Other devices that don't support CSS at all will render the content gracefully by its semantic markup.

This type of mobile optimization is possible because our own WaterCMS, SkyCMS and LightCMS systems are built around XHTML / CSS standards, without any special languages or conventions that could muddy up the process. With our CMS system, we are able to easily create these optimizations while leaving the website content intact.

If you're interested in exploring mobile optimization for your site, please contact our sales team to learn more. If you're a designer using our LightCMS system, be watching for upcoming tutorials explaining the behind the scenes details of how we performed the optimizations on our own site. If you have knowledge of XHTML / CSS code, you can likely perform these optimizations for your own clients yourself.

Screenshots

Here's a look at the full resolution Element Fusion site.

Below are two iPhone screen shots. The first shows the upper part of the home page as rendered on the iPhone. You can see the feature region is optimized for the screen size and the menu is simplified into our three primary menu items. The second shot shows the lower part of the home page, where you can see some mobile-specific content created to allow users to call us or find us on their mobile mapping software, each with a single click.