home

Create a Mobile Site


Thursday, October 1st, 2009

Where__s_is_my_phone__by_nhoxanhcaodo.jpg

Here I’ll show you how to plan a site for any mobile device. At least the theory, then obviously, since the huge number of models and their differences you’ll always have to adapt something, but that’s the whole point: creating a mobile site that it’s good for old cellphones and stunning for iPhones.

why a mobile site?

The same way some years ago businesses realized internet was a big thing and it was important to have a web presence, today is becoming clear that adressing to the mobile audience is the new must.
There are more then 3 billions mobiles, 4 times the PCs. The number is increasing, but most important, old phones are replaced with new one which means that a growing number of people have access to internet on their mobile devices.
number_of_devices.png
percent_with_browser.png
source:BoxUK

Normal sites are rendered decently on latest handsets that have a web browser similar to the desktop version, but they are a usability nightmare. On older phones instead they probably don’t work at all.
Trust me, something specific for cellphones it’s not a waste of time.

what we are dealing with

When cellphones first got a technology to access the internet they were using an old set of web standards called WAP, which contained its markup WML and the protocol to serve it (WTL, WTPS). WML is based on XML and it’s widely adopted and although it’s “outfashioned” it’s not deprecated, so you can consider to code a version of your site with this markup as a “safe mode” The evolution of wap was WAP 2.0 which adopts xhtml-basic/MP and the common TCP/IP HTTP protocol of communication. xhtml-MP is very similar to xhtml and renders the same, it only has some more features useful to mobile devices.
The first version of wap didn’t have styling options, but WAP 2.0 introduced Wireless CSS (WCSS) which is a subversion of CSS 2.1 to integrate styles to xhtml-mp. it’s similar to css 2.1 but has less attribute and to be sure that it’s cross-browser stick to simple. It doesn’t work on wap 1.0.
Today last devices such as the iPhone, Andorid, etc that have the same web browser as the desktop version, render and accept the same mark-up you use for web sites.here’s a couple of link to a guide on xhtml-mp and on wcss.

how to get started

What do we learn from this bit of history?
That is not difficult to build a mobile site that renders well on all phones with some sort of progressive enhancement.My best advice is to code in XHTML-MP and use different stylesheets. WML is additional, you should check your metrics to be sure but generally if people have such an old phone they don’t use it to browse now that there are alternatives.Before I show you any code snipplet let’s consider some paper work.

phone_stair.jpg

i. web strategy:

Why you need a mobile site? Are you really offering something useful for a mobile user? Do you offer a specific service? Do you help a task?
Don’t get me wrong, it’s not all about utility, you don’t need to build an iPhone app to have a mobile presence, internet is also entertainement. Think at someone in a coffee shop who decides to browse your blog killing time. What I mean is that you should get rid of everything is useless or not suitable for this kind of device. Heavy graphics or pages of pictures are a bad choice.
So think about your business goals, why it matters for you to go mobile. Think about your users goals, how they’ll benefit from your mobile site. Consider the technology available and its limits.As this is the step from which you’ll plan your interaction design later, it’s a good moment to understand which will be your audience. It may help you to know in which circumstances they’ll use the site and – very important, which kind of device they’ll use.One last question: are you considering to create a separate site for mobiles or you simply want to use some techniques to adapt your current websites to be rendered on mobiles?

ii. information architecture:

keep it as simple as possible! Avoid long chains of pages, think about “click investments” because even on 3G it always take time to load a page so the patience of mobile user it’s quite short. Cut everything that isn’t relevant and use well labeled links or categories: if the user knows what he is waiting for he is more likely to wait for it. Basically limit the choices and categories, don’t get the user lost in a labirynth. The fewer levels the better. It might help you to create a “click stream” to visualize how the content will be navigated.

iii. mobile web design:

there are a lot of things you have to keep in mind designing for mobiles. First of allscreen sizes vary a lot but what mostly matters it’s the width so my best advice is to create a fluid layout. Use percentages intead of pixels. you can learn more about it on A List Apart.
A liquid layout helps you as well on iPhones and other devices with the orientation features. However, for older phones that have only a portait layout it’s a good choice to style your content accordingly, like how you should display info and break text into smaller chuncks.

Navigation is another aspect that should be reconsidered. Even in multi-touch devices it’s a bit awkward to navigate and it couldn’t be less on other phones with the limited pad.
A good idea is to use lists, always, and keep links to a max of 10 per page possibly adding accesskeys (these last ones won’t be useful on multi-touch devices).
Avoid multi-levels links because on small screens won’t show properly.
Provide escape links to home, next, and previous section, at the end of each page so the user won’t need to scroll back to top.

Resources and bandwith are 2 of the biggest limit of mobile phones. Avoid object and javascript when possible because they are not supported on old phones and on the new one they drain the battery.

iphone_sketch.jpgLimit also the use of images because they add weight on the page, plus you need to consider which would be the right size for them. If you want to play safe stick to the minimum which would be 120px wide. Another option is to use the size of the bigger screen you expect your site will be browsed (let’s say 480px, the width of an iPhone in landscape orientation?) and then apply this technique to let it adapt at the screen like your liquid layout. Obviously it’s not a “best practice” because the browser should anyay download the big picture. The right way of doing it is to use images with fixed dimensions and resize it on server side if you have to. When you can, always use sprites for images (if you don’t know what I’m referring to read this article on ALA). As usual, don’t forget the “alt text” in case the image isn’t loaded.

I mentioned the page size, my advice is to stay between 10kb and 25kb. I’m talking about the basic devices, for smartphones it’s ok also 50kb and for touch phones even 100kb but it’s better to stay low and it always depend on the quality of the connection.Caching is also something that can help you a lot with loading time, try to avoid common resources to be always downloaded and control caching
<meta http-equiv="Cache-Control" content="max-age=300"/> . Fun fact: Safari on the iPhone caches only files under 25kb, so zip all you external files like the stylesheet and try to stay within that weight with your images sprites.

When you style your fonts I suggest you don’t specify sizes in pixels, rather use “small/medium/large” because every device knows what’s right for him.

let’s talk about links: on mobile phones there’s no mouse so no hovering, forget about the attribute “hover”. Something fun instead is that if you use “tel:” or “sms:” in links you can actually activate those function on the phone, which would be pretty coolin your contact page as by clicking a link they can call you. here an exemple


<a href="tel:43802948">call us</a>
<a href="sms:12125551212">Send SMS to 1(212)555-1212</a>

Getting a bit more technical the first rule for your site to be rendered correctly on mobile devices is to use the right doctype (XHTML MP), character encoding (utf-8), and MIME Type (application/html+xml).


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site Name</title>
<meta http-equiv="content-type" content="application/xhtml+xml" />
<meta http-equiv="cache-control" content="max-age=300" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

For what concerns the structure of your body try to build semantically (in the order things appears) and avoid tables or frames.It’s best if you validate your markup, limit the link to external resources and please, don’t use popups.

detecting and addressing specific devices

Ok, what I told you till now was true for any device, but you may want to add something special or simply focus on specific devices that you know are using your site.
How can you recognize the devices and then adapt you content accordingly? First of all remember what I asked you during the planning stage: do you want to build a mobile site or adapt a web site to render on phones? if you decided to do everything I suggested in the designing process I assume you’re going for a mobile site (good boy) but if for any reason you want only to adapt, the easiest way is with CSS. Add a separate stylesheet for mobiles


<link href="screen.css" rel="stylesheet" type="text/css" 
media="screen" />
<link href="mobile.css" rel="stylesheet" type="text/css" 
media="handheld" />
You can also add specific styles inside a unique stylesheet

@media handheld {#image1 {display: none}}

in this exemple we decided to don’t display an image with that id on mobiles and could be really useful if you’re adapting your web site. With the same technique you can address some particular devices by their screen resolution:

@media only screen and (max-device-width: 480px) {}

In case you want to be more specific in your adaptations and you need to know the models of phones that are visiting your site you can identify them by the infos they share in their http header, the “user agent”. Online there are several databases that contains all the infos about every user agent. For instance you can use the WURFL database which in an opensource project and shares an API that you can use in your server side code to adapt your site content and presentation to the specific device. Another database is DeviceAtlas which also shares its API and has various tutorials like this one to implement it in your PHP code.

iphone

iphoneb&w.png Yes, I know there’s a lot of hype around it and i didn’t forget it. Here are some tips specific for this device.
The best advice is to keep the user experience close to that of the iPhone throughout your site. This doesn’t mean to avoid originality. What I mean is rather to use lists for your menus and keep buttons big enough to be tapped, this is a touch phone.As it runs Safari 4 you can code in xhtml and use CSS. Actually the fun part is to use all those CSS3 rules that aren’t supported elsewhere and the most common it’s obviously the rounded corners:


 div {  
     color: #bcbcbc;  
     padding: .5em;  
     -webkit-border-radius: 6px;  
     -moz-border-radius: 6px;  
     -khtml-border-radius: 6px;  
     border-radius: 6px;  
     } 

Start by adding in your the viewport in order that the page will fit nicely:

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

Second step is to hide the address bar as we already have so little space for our content. We simply need a bit of javascript:

 
window.scrollTo(0, 1); 

Create a Springboard icon that represent your site if someone decide to bookmark it in their home screen. It has to be 57×57 pixels and you should add<link rel="apple-touch-icon" href="icon.png">
Something I think could be very useful is a small function that once detected an iPhone visiting your web site pop-ups a small window asking if they want to switch to the mobile site. A tutorial can be found here.
As an alternative, if you think a pop-up is too intrusive, you can simply show a message to inform a visitor that the mobile site is available. It simply detects the user agents as I explained before, but read more in this quick tutorial.After these first steps it’s up to your creativity. Remember to use big target areas in your links and buttons because users should be able to press it with their fingers. Use lists for menus and links, use columns for text and breaks it in chuncks. Actually keep in mind everything I said in the first part of the tutorial and apply it also to the iphone even if here you can push things a lot forward. Read the official safari web guide to learn about best practices and system limits of the iPhone. It’s short and it helps a lot.

If you need some help with the interface you can use some frameworks and tools. Check this resources:
Dashcode
iUI
Yahoo stencils for the interface

testing

To test what your sites the ideal option is always real devices but in case you don’t have them or that you’re working locale there are some other tools. For the iPhone is better to work on the SDK from Apple if you have a Mac. If you’re on windows test your results with MobiOne, a very nice emulator I use as well.
For other devices you should check if there are specific emulators, otherwise the MobiReadyvalidator by dotMobi is a very helpful resource to check how your site would render and rank in speed, weight, etc, on many handsets.

wordpress

In case you are running a blog on wordpress and you simply want it to render decently on mobiles I found a couple of interesting plugins:
iWphone it’s thought for the iPhone and basically adds a theme thatworks well on that device;the dotMobi WordPress Mobile Pack is more complex and complete, it actually fully mobilize the blog making it xhtml-mp compliant, adding specific themes, it integrates with the DeviceAtlas database, and so on.

resources

There is the usual list in the enu below the article, but it was important to give some relevance to this particular resources that helped me a lot and could do the same for you:
the web developers guide from MobiForge, which contains everything you need to know.
another guide on developing mobile sites, more sinthetic then the previous one and with happy graphics.
MobiForge, the entire site it’s th best place to start your education on mobile sites.
At iphonmicrosites.com you’ll find some very useful tuts, eventhough they obviously focus only on the iPhone.
Speaking of iPhone, check on Nettuts the tips by Paolo Ranoso or the indepth article on Webdesignerdepot.

You can leave a response, or trackback from your own site.


Tags & Category




Share

  • digg
  • SFacebook
  • Twitter
  • technocrati
  • stumble
  • delicious

Comments   25rss

    1. Comment by Sneh Roy

      October 6, 2009 @ 7:42 pm


      This is so useful! I must try this out :) Thnx!

    2. Comment by Ivan

      October 6, 2009 @ 10:36 pm


      Cool. Here, I can find what I want: WordPress theme for mobile. Thank you.

    3. Comment by Bendesign

      October 7, 2009 @ 4:50 am


      Nice post about Mobile Site Design. Thanks for sharing!

    4. Comment by Michel (admin)

      October 7, 2009 @ 6:49 am


      Hey guys, I’m glad it helps.

      I really think it’s time to start creating a beautiful web for mobiles too :)
      thanks for the feedback.

    5. Comment by Mark Carter

      October 8, 2009 @ 5:39 am


      Great comprehensive resource. Many thanks for sharing this …

    6. Comment by clippingimages

      October 28, 2009 @ 6:42 pm


      WoW :) Awesome tutorial. Thanks for sharing this nice post.

    7. Comment by Vytenis

      December 3, 2009 @ 5:20 am


      Very nice post. I think that you should look to http://www.superwap.eu project. It is new and very powerful wap creator

    8. Comment by gustavo c

      December 29, 2009 @ 8:24 pm


      Excelent Job, thank you

    9. Comment by Idel

      December 30, 2009 @ 8:26 pm


      There is an open source project called "Apache Mobile Filter", this module detects mobile browser and gives its capabilities as environment variable.
      Also the "Apache Mobile Filter" resizes the images on the fly to the screen size of the mobile device.

      The url: http://www.idelfuschini.it/apache-mobile-filter-v2x.html

    10. Comment by designi1

      February 1, 2010 @ 8:10 am


      Really nice article… dam why i didn´t read this before make mine :/ Congrats!

    11. Comment by Frederick

      May 24, 2010 @ 2:03 pm


      Great article . I actually have been using UNITY Mobile to create all my mobile sites. It’s kind of like mofuse, only instead of lots and lots of forms, UNITY Mobile has a mobile WYSIWYG editor which makes things very simple and easy to create profession mobile sites. There are a bunch of other services out there, but UNITY’s service alone is worth it.
      http://unitymobile.com

    12. Comment by Eric

      September 2, 2010 @ 11:35 am


      Very Nice, THANK YOU!

    13. Comment by Niamh Carter

      September 12, 2010 @ 12:54 pm


      mobile websites will surely grow in the following years`,,

    14. Comment by Mason Parker

      September 12, 2010 @ 12:57 pm


      i guess mobile phones in the future will feature more processing power and great graphics""`

    15. Comment by Alcoholism Treatment :

      October 24, 2010 @ 2:14 pm


      there is a growing trend in mobile websites this year alone;,’

    16. Comment by James-MobileWebsite

      December 7, 2010 @ 4:51 am


      Hey, great channel and information you have here, keep it coming, best of luck- James

    17. Comment by Rajnikant

      December 23, 2010 @ 1:35 am


      Very Nice and great information about mobile site, will all tutorials and ref. sites links.

      Great Thanks!!

    18. Comment by steff

      January 28, 2011 @ 5:41 pm


      very nice tutorial! i was looking for some tutorials make my blog mobile friendly! i’m going to give it a try … i hope don’t mess it up too much!

    19. Comment by Terri Sloniker

      February 1, 2011 @ 2:47 pm


      This has been a huge help for myself and my team members! We needed comprehensive help and direction to finish project on time. Hopefully with all the resources you gave we can get it done! Thanks a million!

    20. Comment by Rajesh

      June 26, 2011 @ 9:43 pm


      Very useful indeed.. Thanks for sharing. Would be great if you could contribute any video tutorials. ;)

    21. Comment by jlm

      July 24, 2011 @ 9:15 am


      Great blog.

    22. Comment by Human Resources Job IL

      August 7, 2011 @ 12:09 pm


      I already knew about most of this, but having said that, I still think it is instructive. Great work!

    23. Comment by tranh nghe thuat

      December 30, 2011 @ 2:53 am


      cool, I apply this thread for my wap site and succuss on my phone.Thanks

    24. Comment by Pablo

      January 6, 2012 @ 4:20 pm


      Excellent. Ive been looking for a complete and easy startup for mobile web and this is it :)!!

    25. Comment by Carl

      April 11, 2012 @ 12:04 pm


      Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly.


top