Placing the pages in your domain  

A point of special consideration, before you start designing your website, is how you would like to allow mobile users to access your page. There are several options, ranging from automatic generation of mobile pages under the same URL's to having dedicated mobile pages to even having special (sub)domains for mobile devices. The way you want to deal with the pages in your domain greatly impacts the way you design the mobile webpages.

Using the same URL for both the mobile and desktop version has huge benefits. The biggest benefit is that for users the URL does not matter: people might enter a URL by hand, are originating from a RSS feed or follow a link from another website and are expecting specific content. Basically all you have to do is strip or modify the content based on the clients capabilities. This is of course limited: when the content of the site is extremely complex or dynamic, this might not be possible.

Many argue that it is fundamentally wrong to redirect based on a browser: in their philosophy a webpage should always be aware of the capabilities/limitations of the browser and adapt accordingly, regardless of the type or age of the browser. But you might choose to do this anyway. In fact there is a very good case for presenting totally different content based on the brwoser: one of the most important arguments is that the information needs of mobile users might be totally different. For example: a desktop user generally is just casually browsing for films appearing in the cinema's for the next months, a mobile user is more likely to stand in the middle of a town just wanting to know where there are still tickets available for that hot film.

Adding a specific subdomain (mobile is most commonly used, resulting in mobile.yourcompany.tld) to your site is another way  of opening your website for mobile users. This could be very usefull if you would deliver other content to mobile users than you would for desktop users. One could think of adapting more to the needs of mobile users. Mobile users generally have a need for context specific information (they have to act now), while desktop users are in need for more random information.

Another option is to use the .mobi top level domain for your mobile version (resulting in www.yourcompany.mobi). Disadvantage of the .mobi domain is that it has another top-level domain, basically forcing you to redirect users. This is an extremely challenging situation if you run several international sites (under their own top level domain): how to map all those overlapping pages onto the same TLD.

The last two solutions do have the disadvantage that you have to stimulate users to use the proper entrance of your site. Putting links up on you site might help some, but experience shows that most users oversee the links. Besides that, you have to enter a desktop-optimized version to see find the entrance of the mobile version. Automatic redirection in these situations is a necessity.

Content

Please be reminded that the context the user is in is more demanding on the user. Few people browse websites while sitting comfortably at home. Most people are in transit or busy with other activities while browsing your site. There are some very good examples of mobile websites to inspire you as well, helping you understand how others have solved the below challenges.

General things to take in account are:

• Remove all categories of content that is not important for people that are mobile. This means that all data that is complex or not needed when thay are solving a pressing problem should not be present on your site. Some examples of what people don't expect and what they do expect on a mobile website:
• People don't want complete technical details of your product on the mobile website (including technical drawings), most will want to know its basic features and current suggested retail price (and the amount you have in stock).
• People don't want to know that you are a great equal opportunity employer, they probably just want to know what products you make or sell.
• People don't want to know what the price of a year of unlimited travel on railways is, they do want to know when the next train to Amsterdam will leave.
• People don't want to know about your mission statement as an airport, they just want to know if their flight is delayed.
• Make pieces of text short and to the point. Direct/advise them to use the desktop version if they need more information.
• Do NOT add big advertisements on the screen. The screen fills quite quickly and advertisements tend to delay loading of websites significantly. In fact, considering the need for speedy information, one should really consider running without advertisement.

General page design rules

Please realize that mobile devices have a different screen layout than desktops. Because the screensize is smaller, you have to work differently with the available scrensize: whitespace management is vital. There are some good examples of mobile websites.

Do's of mobile webpage's design:

• Do design pages for a screen size of 320 by 240 pixels.
• Keep in mind that the user can not focus on very detailed area's of your design (see also this article for more information). One of the most important considerations is that user input can be garbled for many reasons and clicking on small links is hard when doing it running for a connecting train or plane.
• Do add alt-tags for pictures, users regularly block downloading images in their webbrowsers just to reduce bandwith consumption.

Don'ts of mobile webpage's design:

• Don't use scripting languages, flash or other complex objects. 
• Don't use frames or other dividers, they take a lot of space and do not add much value, many frames are shown only for 20%, causing a lot of sliders as well.
• Don't use objects that have a fixed size, like tables.
• Don't use big pictures, besides the waste of screenspace, they also use a lot of bandwith costing a lot of time and money
• Don't write lengthy texts, since people on the run generally have a hard time reading them

Technical implementation

Once you have decided what to tell you mobile users, the next step to decide is how to bring the pages to them. Of course, you can create specific pages for the mobile users, but that has the huge disadvantage that people have to notice that they have to click that specific link.

Meta-tags

If you have mobile optimized webpages, give them a mobile meta-tag: MOBILEOPTIMIZED, this will signal mobile webbrowsers that the content does not have to be shrinked down (pictures will not be doubled for example).

Stripping down a page using CSS

This is the most subtle way of modifying a website for mobile use, if it is feasable. It will NOT reduce your bandwith load and loading speed, but it will optimize the viewing experience on a small device (once it finally is loaded...).

In your CSS stylesheet, you can include @media handheld tags to overrule some objects have that have to be treated differently for browsers on handheld devices. For example by adding the following to our CSS:

@media handheld{ .icon { display: none; } }

A demand is that all objects that are (generated) in your HTML must have some class attached to them. This might put a demand upon your CMS. However, more modern CMS applications do this routinely just to allow the appearance of your content to be controlled effectively by the CSS.

By adding the right tags to your CSS, so, you can modify your site completely to adapt itself to handhelds. For example, our own site:

• does not display sidebars because they do not add much value on a small screen and consume too much space.
• hides the dropdowns from the menu because they are not parsed nicely by Pocket Internet Explorer and create a lot of garbage in the top of our screen.
• does not display avatars and icons with articles because they consume too much bandwith. We do display pictures within articles because we can not predict what the function of a picture in an article is: it could be just an illustration but it could also prove to be vital for the story.
• removes borders and make many objects look smaller. We do this to get a good page-layout and maximise content on the page.
• some background pictures are not shown at all, or shown in a smaller and less high quality version, to reduce bandwith.

Big advantage of this approach is that you have one central place where the layout of all your content is controlled and that your entire website (both for desktop and mobile version) are available under one domain. Links will always represent the same page and even if explicit URL's are mentioned, people will see the same content.

There are several disadvantages for this approach. The biggest disadvantage is that you might still send lot of content to a mobile device, just to make it a "display:none" object. In our layout for example, the contents of the sidebar and drop-down menu's are still pushed to the mobile device but they are not displayed. Also things that have to be downloaded seperatly (including pictures and widgets) are also downloaded. This can result in a lot of unnecesary work for both the client and server. So while it does provide you with the opportunity to trim the page to fit a mobile device, it does not reduce the bandwith usage.

Mobile aware generation of webpages

If your webpages include very server-intensive parts, generate a lot of data that is not included on a mobile device, or have a completely modified page to send you should consider that the server-side is aware that it is generating content for a mobile device.

Client-side redirection

Client side redirection is easy, by just adding this small piece of java-script in your webpage:

if((navigator.userAgent.indexOf("PPC")!= -1) && (navigator.userAgent.indexOf("Mac")==-1)){ top.location.href='http://mobile.yourcompany.tld'; }

Server-side redirection/Browser detection

If you design specific webpages for PDA's you might have to direct them server-side or make sure some parts are excluded from the webpage for mobile browsers. Key to all the intelligence is the detection of the browser. It is possible in most scripting languages to detect the browser quite easily.

In PHP:

if(preg_match('/Windows CE/i',$_SERVER['HTTP_USER_AGENT'])) // redirect to pda page else // redirect to regular page 

In ASP:

UserAgent = Request.ServerVariables("HTTP_USER_AGENT") IsPocketPC = (InStr(UserAgent, "Windows CE") > 0) IsMME = (InStr(UserAgent, "MME") > 0) IsThin = (IsPocketPC Or IsMME)

References

• Designing web sites for PocketPC
• Forcing mobile browsers to respect your layout using metatags
• Microsoft MSDN on Web development for Windows Mobile
• Supported tags by Pocket Internet Explorer
• W3C recommendations for Mobile websites