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.
NOTE: the site used in this example runs our company's own content management system for web designers, LightCMS, but the technique described here can be implemented in static websites as well as sites running on any CMS that, like LightCMS, provides you with full control over your HTML, CSS and JS.
Phone considerations
For our purposes, we divided all mobile devices into three categories.
- 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, the G1 and many Android devices. 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.
- 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.
- 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 our CMS allows us to use HTML standards, 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, 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" />
Development
Next, we created our mobile.css stylesheet to target the iPhone, 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:
- 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.
Posted on
Monday, May 18, 2009
by Amine Ouahidi
filed under