Developing a mobile site for your website allows your visitors to see content on their mobile devices. However, building a mobile site is more difficult than it first seems, because you have got to focus on every single detail. Below are some of the best practices I have come up with, that we use on the Simcoe Weather Mobile website.

Keep Javascript to a minimum or avoid it
This is fairly important. Only more advanced smartphones, such as the iPhone/iPod Touch, Android, Palm Pre, a few Blackberry's and a few other phones support Javascript. Of those phones, even fewer phones have full support of Javascript. Over 90% of phones do not support it at all. What you could do is to create a mobile site just for the iPhone/Android and then another one just for all other phones. I personally don't think its a good idea, just because it doubles the amount of work. Another thing to watch out for is that Javascript takes time to load and also takes additional bandwidth (more on that later). In short, you can use Javascript on your page, but do not rely on it, and keep it to a minimum!

What we have done on Simcoe Weather Mobile, is that the entire site is viewable on any internet capable phone. However, if the visitor has a Javascript capable phone, it will show some extra features. For example on the main page, we show a button that will allow the user to auto detect their location. This button will only show after a javascript function is being called on page load (further more its only being shown if the phone supports the W3C Geolocation or Google Gears). If the user does not have a Javascript capable phone, then it will just ignore that. The initial Javascript code being imported is kept to a minimum. As the user clicks on the button it will append another Javascript file using dynamic scripting. This way you only load Javascript code when its actually being needed (on-demand), rather than loading it all at once.

function createDynamicScript(url) {
    var e = document.createElement("script");
    e.src = url;
    e.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(e)
}

Keep UI Simple
Keeping the User Interface simple is an important thing. The space on a mobile phone's are usually very small, unless the user has a more advanced smartphone. A mobile site should usually only have one navigation menu, best located a the top. Keep it simple! Do not over crowd the menu bar, inly keep 2 or 3 of the most important pages of your mobile site and describe the links one word. You shouldn't need more than one navigation bar.

On Simcoe Weather Mobile, we have one little, and less important, menu located at the bottom of the pages with the most important link going back to the home page. We think that having a navigation bar at the top ruins the simplicity of the site.

Avoid Advanced CSS
CSS on mobile phones seem to be a major issue. Even most newer smartphones, sometimes only support basic CSS, in different ways. An article I have read last November explained that sometimes the basics like "font-size:1.1em" is not supported on all mobile browsers. Floating Div's is not a good idea at all. Even tables are not a good idea, because different mobile browsers may or may not support them. Make sure that information conveyed with color is also available without color. Make sure that foreground and background color combinations provide sufficient contrast. Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values. Do not use graphics for spacing. So, all the CSS you used on your normal website, forget it! Use CSS wisely, and only when needed.

On Simcoe Weather Mobile, we use CSS for the header, for the footer and somewhat in between. But that's pretty much it. The content is being displayed in simple div's. Even, if no CSS is being used, the content of our mobile site still looks rather decent. This way we can support pretty much any kind of phone.

Keep Bandwidth to a minimum
This is the most important thing when developing a mobile site. Chances are is that the user who is accessing your site, is paying for every megabyte they use for their bandwidth. Make sure you keep webpages as small as possible, with as a little content as possible. If your page becomes large, consider to paginate into different pages. Use clear and simple language. If your using Javascript, make sure you only load what is needed, and if more is being requested use dynamic scripting. Also, consider compressing your Javascript and CSS code. Here is a tool that allows you to do that.

Other Best Practices
Carry out testing on actual devices as well as emulators if you want to see how your visitors are actually seeing your site. Testing on desktop browsers does not mimic the mobile browsers as they are quite different. Keep the URL's of site entry points short, e.g. m.yoursite.com. Do not cause pop-ups or other windows to appear and do not change the current window without informing the user. Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it. Keep the number of externally linked resources to a minimum. Do not use frames, they will likely not work and there is not enough space for them. Specify the size of images in markup. This way the browser does not need to calculate them and takes less time to load the page.

Those are just a few best practices. Make sure you use common sense when developing a mobile site and keep it simple. Only you use content that is necessary and most useful to your visitors.

Mario is excited about the new improvements to Simcoe Weather Mobile