How to make a website ready for every mobile phone with a browser

Mobile phone browsing is in rapid development. Today .mobi domains are getting increasingly populair. When offering a widely used service like Twitter, Hyves and Google you want to make sure that it's available in mobile devices to serve a wide audience. Nowadays people can browse the internet just about anywhere they want.

We will look at a few important subjects concerning turning your website into a mobile-ready website.

Cut down on Javascript usage

Turn off Javascript usage, especially in important website sections like signup, login or menu's.

Cut down on Flash and image usage

Flash is a problem too. Consumer-oriented sites use a lot of Flash-based interaction. It just doesn't work on most mobile browsers today. Audios and videos may not play either. In some ways, the mobile Web is where the tethered Web was 7 or 8 years ago, and that really affects how sites built to today’s standards work (or don't) on mobile webbrowsers.

Use less images. They can make your website for mobile phones painfuly slow.

Avoid useless filler content

Large content pages make it boring for the mobile user to stay focused because the user has to scroll alot. Use custom CSS sheets for mobile viewers, that hides the filler content like this.

.mobileHide { display: none }

Use mobile phone emulators

There are a number of emulators that simulate a phone's view, it's important that you test your website is a few of the most important browsers out there. Most of the mobile phone emulators do a good job at giving you an idea of how pages will look like. Use them to find major problems. Opera is great for its small-screen rendering support. Preview pages in Opera Mini with the Opera Mini bookmarklet.

Don't forget to check out these emulators too :

dotMobi Online Emulator - mTLD has an online emulator that you can use to quickly see what your site will look like on a common phone
Nokia Browser Simulator - this simulator simulates a generic Nokia phone and WAP gateway
Openwave Phone Simulator - Openwave's browser simulator
BlackBerry Simulator - multiple different BlackBerry simulators
Yospace SmartPhone Emulator - a versatile emulator that can display multiple phone instances at the same time
iPhone Simulator - bundled as part of the iPhone SDK. You'll need to purchase a Mac to run the SDK
Android Emulator - the Android SDK includes a mobile device emulator. The Android emulator mimics all of the typical hardware and software features of a typical mobile device, except that it can not receive or place actual phone calls
Palm Pre Emulator - the Mojo SDK from Palm include a Palm Pre Emulator. You can download the SDK for free (requires email registration)
BREW Emulator - the BREW SDK includes a mobile device emulator. It does not however emulate a handset's hardware. The BREW application is instead compiled to native code and linked with a x86-compatible BREW runtime library.

Use Google to download. ;-)

Optimize website speed

While wireless or GPRS are great technologies, they tend to be enormously slow. Some even compare it to using the good old 56K modems. That is why is it's important to make sure your website is not larger than 15/10 KB.

Wrap your text or write short sentences

Search for long words and use or to indicate places in where the words may be wrapped. Restrict the width of images to 100 % of the screen size using the following code :

img { max-width: 100% }

Use advanced analytics to check user-agents

Preferably use Google Analytics to see what user agents(browsers) your visitors use. Once found out which one is used optimize your website for that particular browser.

Posted by James on 2009-08-03 in the category " html "