Ways to test your site for the mobile web

The buzz about the future of the mobile web is almost defining. Even though the mobile tsunami has not hit the web yet, it is better to be prepared for when it does crash down on us, rather than trying to swim to the surface after it does. While I wouldn’t necessarily start creating a mobile specific version of your site, but simply ensure that relevant content can be found on a mobile device.

Need a pretty universal example? I had a client that was supposed to come to my office for a meeting, but had trouble locating it. If I had a map on my site that was mobile accessible, they could have simply followed it rather than looking up my address and hoping to google maps.

So the best way to find out the “mobile ready” level of your site is through basic testing. However that is much easier said than done, as even the most phone savy users doubtfully have access to more than a handful of mobile devices to test with and there are over 40 mobile browsers and 160 devices.

The solution? Test as far as you can reach!

Unstyled

The first easy way to test your site for mobile devices is simply to remove the style sheet. Many older phones still render un-styled raw HTML. The good thing is that if your site is build using semantics and web standards, this should be the easiest platform to test and adapt too. This can be done through firefox by going to “View > Page Style > No Style”

Resize Your Browser

Simple yet effective, resizing your browser gives you a good idea of how your site would look in a modern phone that supports style sheets. If you have FireFox and the developer toolbar you can simply go to “resize > Resize window” and enter the width you would like to test for. Here are some common resolutions for hand held devices.

OperaMini/OperaMobile

Opera has developed a mobile browser with an amazing technology called “Small-Screen Rendering.” While not all phones are supported and it is not currently pre-installed on any phones that I am aware of, it works so well that you can be sure you will be seeing and hearing more about it in the future.

Luckily it is quite easy to test for OperaMini, simply download Opera and go to the page you wish to test. Hitting SHIFT + F11 will render the page as if it were on an OperaMini browser.

Emulators

Once you have exhausted the phones you can borrow to test with, it is time to resort to emulators. Luckily many mobile browsers have windows emulators for improved testing.

There are several good resources to get you started, hopefully as you tweak your site to render properly in the browsers you can test for it will become more compatible for those you can’t.



Google Analytics Alternative