Skip to Site Navigation | Skip to Content

Blog

Tutorial: optimizing your website for mobile devices

Please note: This article was created in 2009, so the screen dimensions and/or phone names might be out of date.

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.

  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, 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.
  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 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:

  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.

52 comments (Add your own)

1. Andrea wrote:
Wow, this is *really* great stuff. Thanks very much for sharing this!

Tue, May 19, 2009 @ 3:40 PM

2. Michael Dick wrote:
Amine, great post on mobile web, I am glad to see EF supporting its cause! Looking forward to seeing EF supporting it more!

Fri, May 22, 2009 @ 11:15 AM

3. Amine Ouahidi wrote:
Thanks Guys.

Tue, May 26, 2009 @ 8:27 AM

4. Jeff wrote:
Great tutorial. One question: in the phone link above, is the ? in the number deliberate, or is it a rendering error? Tel:(405) 948?8300 I imagine the original had an em dash, outside the character set?

Tue, June 9, 2009 @ 10:45 AM

5. Tim Wall wrote:
@Jeff, you are correct. That was just a rendering error. Thanks for the catch, I've corrected it in the post.

Tue, June 9, 2009 @ 11:12 AM

6. Dave Myron wrote:
I believe the correct value for the meta tag is device-width, not device-width-constant.

Thu, July 2, 2009 @ 1:35 AM

7. Amine Ouahidi wrote:
@Dave, Yes that's correct. Thanks for pointing that out.

Thu, July 2, 2009 @ 8:07 AM

8. jack wrote:
www.selingmobiles.com

Tue, August 18, 2009 @ 3:01 AM

9. Alicia Trimble wrote:
I followed your tutorial, but I can't get the new footer buttons to go to the bottom of the screen in the actual footer section... any quick hints?

Sat, August 29, 2009 @ 10:30 PM

10. Sree wrote:
Hi, Very useful stuff!! Thank you very much.

Fri, September 4, 2009 @ 3:36 AM

11. Andy wrote:
Great post, I really loved it!

Fri, November 6, 2009 @ 8:21 AM

12. lisa wrote:
Hello - I enjoyed reading your article. I have been studying mobile web design for some time now and have read that the keyword !important can have a huge negative impact on the maintenance of a site. http://reference.sitepoint.com/css/importantdeclarations/ I would like to know your thoughts on this. I see it used a lot in your css. Thanks, lisa

Mon, November 16, 2009 @ 10:49 AM

13. Amine Ouahidi wrote:
@Alicia, Sorry for the delayed reply, I am not sure why the buttons aren't going on the bottom of the footer for you, this sounds more like a CSS issue, and it also depends on where you placed them in the markup. I would start troubleshooting it by checking the markup and making sure all the tags are closed properly and that you have the buttons placed in the right area where you would like them to be placed. Hope this helps. @lisa, I wouldn't disagree with you, I think the keyword !important can have a negative impact on the maintenance of a site but I have to admit that sometimes it is the quickest way to adjust things or make changes, especially when dealing with multiple style-sheets. Since we've optimized our website using the same markup, in other words we didn't create a new website just for mobile users, we wanted to use the same content and change the layout using different stylesheet, I used the important keyword to make sure that nothing in the markup would overwrite the mobile stylesheet. Hope this make sense, Let us know if you have any questions. Thanks.

Mon, November 16, 2009 @ 12:41 PM

14. lande wrote:
thanks a lot for this article. it's really helpful!

Tue, December 8, 2009 @ 3:17 PM

15. Kien wrote:
Excellent tut on designing for the iphone. Best one I've come across so far. Like it or not, the iphone is how many are viewing websites on the go now - might as well learn how to personalize the experience. Thx for the links under Testing & troubleshooting...a BIG help as I get my hands dirty. Do you know of any web based iphone emulators? Been searching with no luck.

Fri, February 26, 2010 @ 4:17 PM

16. Sildenafil wrote:
Great tutorial, thank you

Fri, March 12, 2010 @ 4:04 AM

17. danny wrote:
hi there. thank you very much for this tutorial, however i have not really accomplished my site goal in this way. i have used a stylesheet switcher based on the user agent. i am also using a CMS which is smarty based. i also have not specified an absolute width for my iphone css. i am using 100% width to guarantee proper placement. my question relates to font sizes. i have tried using the desktop browser base font size of 12px. when i first viewed it in my iphone the text was way too small. i have upped it to 30px and now it looks ok. i am using em scales withink my H1 and H2 and P tags with the body having the base of 30px. can someone tell me why the iphone font size is so big but for the desktop browser and handheld it doesnt need to be that big at all? my site is http://www.pembrokeshire.ac.uk/esw cheers Danny

Wed, March 31, 2010 @ 3:26 AM

18. Amine Ouahidi wrote:
Danny, I think this is happening because you are not specifying the viewport width. it would look something like this You can find more info about the viewport here: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25 Hope this helps, Amine

Thu, April 1, 2010 @ 9:32 AM

19. Brand wrote:
I tried to optimise it, but it is very difficult...

Tue, April 6, 2010 @ 4:23 PM

20. Christian Nguye wrote:
I love your codes. Thanks a bunch. :D

Wed, April 28, 2010 @ 2:46 PM

21. Ankur Datta wrote:
Hi, its a nice and informative article. However, i am quite a novice as far as mobile web development is concerned. I have a site already in place and now i want it to be mobile device compatible. How should i go about it? do we i need to do re-code the entire site for mobile application separately? Do I need to keep 2 separate versions on the server: one for normal web and another one for mobile devices? A reply would be highly appreciated. thnx, Ankur

Mon, May 17, 2010 @ 4:47 AM

22. Amine wrote:
It mainly depends on how you use your website, but you can do it either way. You could optimized your current site to be viewable on mobile devices like we did here in this tutorial, that would work great for a blog, or a website that gets updated frequently. Or you could create a separate site specifically for mobile devices and redirect your users once they visit your website via a mobile device, that's usually easier to style and more customizable but could be time consuming depending of your website size since you will be recreating the content all over again. Amine

Mon, May 17, 2010 @ 9:43 AM

23. Klara wrote:
Thank you for this tutorial. It's very helpful!

Wed, July 7, 2010 @ 10:18 AM

24. ROSSiDEAS wrote:
Thank you... working on a project right now... very helpful

Sun, July 25, 2010 @ 7:59 AM

25. Igors wrote:
Thanks for great tutorial! I will use it for my website mob.version!

Fri, August 6, 2010 @ 6:16 PM

26. Steve Markey wrote:
I used your tutorial on a site, and for iPhone it works fine, but in a Blackberry it still shows the original page, is there any way to get this to work with blackberry?

Fri, August 13, 2010 @ 11:46 AM

27. Mido wrote:
thanks very nice info

Mon, September 20, 2010 @ 5:03 PM

28. Chad wrote:
I have tried using Dreamweaver CS5 media queries, but the page keeps defaulting to desktop design when I load it to my iphone. It looks great in the media queries window of dreamweaver, but not on the iphone. Has anybody else run into this issue? However, when I use the format indicated in the article:








if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}

function hideURLbar() {
window.scrollTo(0, 1);
}


it works correctly on my iPhone. Is the dreamweaver cs5 media query flawed for the iPhone?

Thu, October 21, 2010 @ 10:10 PM

29. Chad Lesnick wrote:
I found the coding error in dreamweaver. This error prevents multiscreen for the iphone. I will contact adobe to see what can be done.
I corrected the coding error and it works on the iphone like a charm.

Fri, October 22, 2010 @ 10:21 AM

30. John wrote:
The Element Fusion website appears identical on my iPhone and laptop... also don't see the code on the page.... did the site change without including this?

Tue, November 16, 2010 @ 5:01 PM

31. Tim Wall wrote:
John, yes. This article was published in May of 2009 and was referring to the design of the Element Fusion website at that time. We have since redesigned the Element Fusion website and the new design does not include a mobile-specific version, at least not yet.

Thanks for the question.

Thu, November 18, 2010 @ 9:25 AM

32. marian wrote:
i'm working on a project like this for a few weeks and I must say its a hard job to optimize your website for mobile devices. I only know basic html and stuff so.. i think ill give a try with www.convertwebsite.com because it seems to be the coolest service till now, and i'm already tired to look for a free way to convert my website for mobile.

Thu, June 2, 2011 @ 7:31 AM

33. Smashing Ninja wrote:
It also works with this JavaScript:

if(navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)
){
var cssLocation = "css/handheld.css";
function getCss(){
var objStyle = document.createElement("style");
var objText = document.createTextNode("@import url("+cssLocation+") screen;");
objStyle.appendChild(objText);
document.getElementsByTagName("body")[0].appendChild(objStyle);
}

window.onload=getCss;
}


http://www.smashingninja.com/webdesign/optimize-website-for-mobile-devices/

Fri, June 17, 2011 @ 12:30 AM

34. Tim Wall wrote:
Apbyte, you are correct. This blog post was published several years ago and since that time we have redesigned the Element Fusion website. We chose not to create a mobile optimized version of the new design at this time. The screen shot examples that you see in the post are from our previous site design.

Thu, July 21, 2011 @ 1:35 PM

35. Mike Bosch wrote:
The CSS (mobile.css) used by you is applicable for all kind websites? or I have define my own CSS?

Tue, September 20, 2011 @ 2:57 AM

36. Razibul Hassan wrote:
Very helpful post. Does the light CMS cover all the aspects of the mobile version of the site? What about multi-browser and multi-platform compatibility of a mobiel site?

Tue, October 18, 2011 @ 5:33 AM

37. Razibul Hassan wrote:
Very helpful post. Does the light CMS cover all the aspects of the mobile version of the site? What about multi-browser and multi-platform compatibility of a mobile site?

Tue, October 18, 2011 @ 5:33 AM

38. Web dizajn wrote:
Great article!

Wed, November 7, 2012 @ 1:40 PM

39. d3s wrote:
that just changed my life. Thanks infinitely.

Tue, November 20, 2012 @ 5:41 AM

40. Gopi wrote:
Great Post. It is Very Help full.

Wed, November 28, 2012 @ 6:50 AM

41. TeMc wrote:
The code generates an error in WebKit browsers due to invalid syntax:

:: Viewport argument value "device-width;" for key "width" not recognized. Content ignored.

It has to be comma separated, not semi-colon separated. For example:

:: "width=device-width, initial-scale=1.0"

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Wed, January 2, 2013 @ 9:07 AM

42. hikingmike wrote:
Good info, thanks. However now that iPhones iOS comes with Apple Maps and not Google Maps, the id="iphone_map" thing doesn't open any native app, just the Google Maps web app. I tried just to check.

Thu, January 10, 2013 @ 9:25 AM

43. web developer wrote:
Hi..
Your post is really awesome and very much helpful.
Thanks for sharing your thought..
Thanks..

Sun, January 13, 2013 @ 11:01 PM

44. Gary Bryant wrote:
This is a fantastic page of information on mobile web design. If you want to understand why you need a mobile website - watch this video http://youtu.be/edCvfNl02vo

Sat, March 2, 2013 @ 11:11 AM

45. bfgg wrote:
hgh

Mon, March 4, 2013 @ 2:39 AM

46. sayed wrote:

Thu, June 27, 2013 @ 12:38 PM

47. Apt wrote:
In that case since the previous site is removed, are you still hosting it somewhere so that i can still reference from there?

Thu, July 4, 2013 @ 3:37 AM

48. irtouring wrote:
very useful, i am a newbie and it was useful to me your step by step guidance , so, i am going to apply your advices for my own site very soon
thank you and keep it up

Sun, January 12, 2014 @ 1:50 PM

49. Mayank Yadav wrote:
Hey good stuff

Mayank

Sat, September 6, 2014 @ 11:47 AM

50. Sunita wrote:
Very useful info, would be great if you can update this and also maybe add more info on how to hide and add using css

Sat, October 25, 2014 @ 7:45 PM

51. jaime wrote:
i need optimized my website to mobile webpage , can you to do this?

Tue, December 2, 2014 @ 4:47 PM

52. Webmaster wrote:
Was stuck for a while with my html code. Thanks, it really helped me.

Wed, December 3, 2014 @ 3:33 AM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.