Mobile web – introduction

Posted: July 31st, 2009 | Author: | Filed under: Mobile Browsers | Comments Off on Mobile web – introduction

I’m not a marketing specialist, but I can see a lot of things change very quickly when we talk about mobile devices. Since its invention the mobile phone became indispensable in our lives. The mobile phone is used mainly for business purposes, but this is changing day by day: The market is moving fast to consumers too. With more people using a high-end phone, the capabilities for mobile web design give developers the opportunity to focus on this group of people as well.

Many people think it’s hard to make their website suitable for mobile devices, but this isn’t the case at all. In this article I’ll introduce a couple of things you should consider before developing a mobile website. In a future article I’ll give some hands-on advice on where to start.

Know your visitors nokia_1100

When you consider to build a mobile website you should first question who you want to target. This is first step and very important for the rest of the process. There are thousands of different mobile devices and how much you probably want to target them all, that is pretty ambitious since almost every mobile browser reacts different. Why is this so important? If you want to target a group of people using low-end devices such as the Nokia 1100, which is very popular amongst low-budget users, this has consequences for example in the choice for the right mark-up language (more about this in a follow-up article). Another good example is when you have a b2b (business to business) model, most visitors use a ‘Blackberry’, so your website will have to be compatible with the Blackberry browser.

Choose your method

There are a couple of methods you can choose from for setting up your mobile environment. One of these methods is ‘doing nothing’. This is the easiest way, but definitely not the best way of dealing with mobile devices. Why is this one of the methods? After reading this article you could decide not to develop a mobile website any longer. I just want to point out that this “method” causes unpredictable results rendering your website on a mobile device.

The second method is to make a mobile version of your CSS stylesheet using ‘media=”handheld”‘. In many cases this works just fine, but you’ll run into problems very easily when you test your site in different devices. Although the mediatype ‘handheld’ is W3C compliant, it’s not a general standard. Many mobile browsers have their own way of interpretation of ‘media=”handheld”‘ and therefore this method is not very reliable. Here you can see the differences in interpretation (source from ‘a list apart‘):

CSS Behavior Browsers
Reading only handheld style sheets OpenWave browser, Nokia lite-web browsers, Netfront (configuration dependent), Digia, BlackBerry browser, Opera Mini until v4, Opera Mobile until v9
Reading both handheld and screen style sheets Palm’s Blazer, Nokia S40 browser, IEMobile 6.x and 8.x
Reading only screen style sheets with Media Query support iPhone’s Safari, Opera Mobile starting v9, Opera Mini starting v4
Reading only screen style sheets without Media Query support Nokia S60 browser, Netfront (configuration dependant), Teleqa Q7, IEMobile 7.x

A third method you could use is to let your server determine which user agent your visitor is using and showing him the right version of your website. This method gives you the opportunity to build multiple versions, for multiple platforms, without using an alternative url. Your visitor can easily find you on your normal url (www.mybrand.com) instead of an alternative (www.mybrand-mobile.com). The problem with this method is that you can never let your visitor decide which version of your website he wants to see. He can’t switch between your versions if he thinks your pc version is better on his device.

The last method is related to the third method. It is possible to use build your own mobile version of your website with another url without losing your brand name. Examples: www.mybrand.com/mobile or mobile.mybrand.com or even shorter: m.mybrand.com. In this case you can give your visitor the opportunity to switch from you mobile version to your standard version, so for flexibility reasons this method could be the best way. It is also possible to registrate an .mobi TLD (Top Level Domain), for example your url looks like: www.mybrand.mobi.

In my opinion the last method is the best way to achieve your goals. With a mobile version next to your normal site you can also optimize your mobile content. My preferences is to take the .mobi domain name, which could quickly evolve into the standard, when everyone uses a different way it will be still difficult to find the mobile version.

You can always choose or combine methods to suit your preferences. Keep your focus on your target group of visitors and be aware of the restrictions on many mobile devices.

The importance of testing

Although this is a step you take after realising your mobile website, testing is an important component of the process. You have to think about validating/ testing before you can put your site online! Mobile browsers, in contrast to the browser on your pc, are very strict in reading your code. Make sure you validate your xHTML (validate / mobilevalidate) or WML (validate). Another way to check the mobile browser compatibility can be found here or here.

Last but not least you have to test your websites. This can be difficult if you are not in possession of the right equipment. Let me point out a few possibilities to test your mobile website.

Test your mobile website on an emulator. This is the most common way to test your website in the first place. It is also not the easiest one. Finding a good emulator isn’t easy since the most look more like a simulator. Well known emulators are from dotMobi, Openwave and Apple. Problem with the most emulators is that they interpret the user agent like a normal browser (browser on the machine where the emulator is installed). This makes it hard to test and you can’t rely 100% on what you see.

The most expensive way of testing is to buy a small subset or representative phones. This is more an option if you’re considering to develop more mobile websites in the near future. Make sure you select a combination of different browsers on different devices (Windows Mobile Explorer, Safari Mobile, Opera Mini and Nokia’s built in browser).

Another way is to ask your friends or colleagues to test your website on their mobile phones. There is always someone to help you out. Make sure your code is valid first and that you have tested it in an emulator, so that you can do your testing on you friends phone quickly and effective.


Comments are closed.