Mobile websites

[Willemina]

Has anyone here designed a mobile website before? As in a site which has been optomised for mobile phones, PDA's etc?

And if so, do you have any tips for noob mobile site designer like myself?

thank you.
Willemina

[ryanhellyer]

I made a mobile only website once, it was very easy. The trick is to keep things as simple as possible and avoid adding anything unnecessary to the pages due to the high costs of mobile browsing and the slow data transfer rates.

Don't use images unless absolutely necessary and make sure they're highly compressed if you do. There is usually no point in changing fonts or font sizes. You can control the style of the page via H1, H2, H3 etc. and in doing so save yourself some valuable bandwidth which would have been used for styling purposes.

Also make sure your sites have a liquid layout, fixed width designs are unacceptable for mobile only websites.

[BigAlReturns]

You can also use a different stylesheet for mobile devices:
<style type="text/css" media="handheld">
</style>
<link rel="stylesheet" src="xxx.css" media="handheld" />

[Willemina]

Thank you Ryan and BigAlReturns =)

Originally Posted by ryanhellyer

Also make sure your sites have a liquid layout, fixed width designs are unacceptable for mobile only websites.

Why is that?

[BigAlReturns]

This is because of the wide variety of screen sizes on different mobile devices - if you used a fixed width layout then on some devices it won't use the whole screen, whereas on others it will require side scrolling (not good!). With a fluid/liquid width layout, it will always fit the width of the devices screen perfectly.

[ryanhellyer]

Originally Posted by Willemina

Why is that?

As BigAl said, screen real estate is scarce on mobile devices. Most cell phones rarely have anything larger than a 320x240px screen and some are even smaller. If you don't create a design which can work across a broad range of resolutions, some of your visitors will be left with a tiny skinny band down the center of their screen for your content or on the flipside, may need to horizontally scroll an unacceptable distance just to read your content.

Here are some links about mobile devices you may find useful:
Global Authoring Practices for the Mobile Web
Emulator | dotMobi

[Willemina]

Thanks Ryan.

The emulator was particularly useful

[ryanhellyer]

Some other thoughts to ponder:

There are three different routes you can take to serving mobile content. You could serve different sites to different devices via server side scripting, you could set up a subdomain (http://mobile.example.com/) and serve the mobile site from there, or you could use a mobile only style sheet.

My suggestions above were NOT for setting up a mobile style sheet.

For mobile stylesheets, it is criticial to ensure that you avoid using IMG tags in your markup when they aren't semantically required. Basically you want to avoid images wherever possible as they're a killer for mobile sites due to the size of each image download. If you display the images using CSS then you can either serve smaller versions or none of those images to mobile devices.

[Willemina]

Thanks Ryan.

I'm having troubles though. I had some people test my mobile website out and they are complaining that it is hard to navigate because they need to scroll a long way just to reach the menu

[ryanhellyer]

Originally Posted by Willemina

I'm having troubles though. I had some people test my mobile website out and they are complaining that it is hard to navigate because they need to scroll a long way just to reach the menu

It's usually a good idea to ensure that you have navigation at the top and bottom of the pages as it's often difficult to scroll in mobile browsers. You can also include this functionality with a mobile stylesheet on a regular site even if you don't want the footer displaying when viewed on a regular desktop computer, you can do this by removing it via the media="screen" stylesheet with display:none.