When starting a Mobile WebSite development, the most important thing you have to bear in mind is to preserve the User Experience. This is mandatory. Even though you would provide your visitors with the best features ever, the key thing is that your users have to find navigation easy and intuitive… Funny would be even better but before to get there let’s focus on the easy and intuitive ones.

In others words you even may have great ideas regarding features you wish to offer but beyond anything what’s important is that visitors use them! This is all good sense in a way but it is far too often forgotten by developers – talking about developers, the thing is before to start coding any line at all, you have to take some time to actually draw on a sheet of paper an advanced draft of what you wish to display. This is a key thing! Draw a couple of drafts and then finally try to imagine them on screen. Then wonder:

• Is it intuitive to browse from one category to the other?
• Do I find easy the reading?
• Am I being smashed by an outraging amount of information on only one screen?
• Do I really need to know everything I can see at a glance?
• Oh and actually, what do I see at a glance? If I take a quick look at my page – meaning less than 10 seconds – what do I remember seeing? You can always ask your colleagues to play that game which is a great lead to find out whether your layout does the trick and your colleagues see what you want them to see!

 

Thinking Usages vs Layout…

Usages of a Mobile WebSite is pretty often synonym of movement. I mean, you have to think about your mobile as an “outside connection to the World Wide Web”. In others words you don’t want your mobile WebSite to be a simple copy of your casual WebSite, as it never is going to suit the same needs and expectations.

For example, let’s say you’re working at an “e-trading” company. You then should be familiar with special offers banner, and special positioning to highlight a particular product. At least, this is how you’d do on your desktop WebSite. The main service you’d want to dedicate your WebSite to would be to get your visitors to buy products on yours rather than on your competitors WebSites.

Now thinking about it. Is this sort of usages what your users are likely to do thru your Mobile WebSite? Nah I don’t think so… Actually, what are they going to use your Mobile WebSite for?

• They will look for particular information;
• They may want to stay up to date regarding a hot topic but all at a glance;
• They may want to check the status of their last acquisition to be sent;
• Etc. etc.

Your interface…

Now think about your interface. First thing which you should keep in mind is that it is narrow! The space you’re going to be able to play with cannot be compared to the one you’d have with your desktop browser. You are not going to be able to display much different information at the same time or it’ll be on the lack of its own sense as none will stand out!

As a matter of fact, the screen of the device will surely let you work one information out at the time, maybe two at the most. So, as you may have already guessed, what you want to do is to make priorities… Sort of make a hierarchy of your services but bearing in mind the mobile philosophy.

Mobile WebSite, a first couple of Rules you’ll follow:

1. Your page must be displayed within a flash!

You don’t want your page to wait for a WebService to answer before to be displayed;

I.e.: The status of a sending you’re expecting could be easily accessed. But as this information should change along with time, this would require a WebService to be requested each time the page should be displayed. This could considerably slower your loading time. So it may not be your best option to display this information on the home. It would make much more sense to set it up behind a “my sending” tab or so.

You should never use images when it isn’t absolutely necessary;

I.e.: A category should be accessed thru a link rather than an image if that’s not too much outside your design guidelines.

Your images should have screen compliant resolution. There is no point in sending a huge image.

You should make sure your page is in needs of as little server requests as possible. You’re on mobile many server ping-pong would considerably slower the display of your page once again.

If an image is used all along the pages, a background repeat image for example, make sure you’re setting it up to be stored on the client cache memory.

 

2.  Your text must be readable in all sorts of situations. Meaning using an acceptable font size, colour and contrast with the background of the page.

I.e.: Your visitors will surely access your Mobile WebSite in movement, I mean in public transportations, walking or at least outside and far from a proper desktop and its broadband browser and connection.

 

3.  Each one of your pages is dedicated to a single usage and service.

Don’t confuse your visitors by serving them too many features on only one page. Key usage is to choose only one at the time and split your content as much as you have to for at least four reasons:

1. 1. 1. Your page will be lighter;
      2. Your visitor will find what he wants quicker;
      3. Your content will be clearer;
      4. This will speed up your visitor navigation;

 

Ergonomics = Esthetics + Efficiency…

This means that before to think esthetics you want to think efficiency. Cause that’s where we are: Ergonomics is equal to esthetics + efficiency and loading speed. That would make no sense at all to have an awesome looking Mobile WebSite if it’d take ages to be displayed; on the other side to be comprehensible you must use a clear and clean layout so that visitors don’t need to search for the information they are looking for.

As far as I know, I’d say you have to think your Mobile WebSite as a natural complement of your desktop WebSite. This is usually where most of the mistakes are made: don’t try to render the same look, to provide the same information, or to provide the same services on your Desktop and you Mobile Websites! Those are two different tools you have to provide complement services with no more than absolutely needed redundancy.

Your mobile phone becomes some sort of a multi-function pocketknife. When you are at home or when you have access to a computer there absolutely is no point in using your mobile device unless you’re offering different sorts of services. This is the keystone!

We’re applying all this in WOPE!

What WOPE will do for you:

• The page code is optimized for the device currently requesting it. WOPE smartly rewrites in real time the code of your page in order to match the device characteristics making your page as light as possible!
• It adapts the look of specifics blocs according to the family of the device. For example, it makes a button wider when on a touch screen, and smaller when displayed on an “advanced” device screen which is going to use a point and click method.
• It resizes images to suit the device screen capabilities.
• It gathers all the CSS bits and adds them in the pages’ header of the page so that only one network request is needed.

 

By Yann Cadoret