Debugging mobile sites

The rise of smartphones means that web developers cannot afford to ignore how their site looks on these devices. Buggy or broken sites will mean visitors will quickly leave and may even give the user a negative perception of the brand, never to return.

Responsive design is a method of building a website that adapts gracefully to the screen size of the users device rather than having a seperate site on a subdomain (such as m.thebettertwin.co.uk). Responsive design has grown in popularity in recent years in part because it allows developers to provide mobile users with the same content as desktop users as well as meaning that the developer only has one site to maintain.

Responsive design is a great way to build for mobile devices, but the problem still remains of how do you test for a multitude of devices, all at different screen sizes and resolutions without spending a fortune on test devices. Thankfully help is at hand, with various websites that can assist with your testing. It should be noted that none of these should be relied upon for 100% compatibility, however, they do give a great place to start for you to check functionality and iron out any major bugs.

Mobile emulators provide you with a look at how your site appears on various devices. The Responsinator website, provides you with a look at your site on devices in both portrait & landscape such as the iPhone 3 & 4, the iPhone 5, iPad, Kindle & Samsung Galaxy. It does not precisely replicate how it will look, however, it does help website makers quickly get an indication of how their responsive site will look on the most popular devices. They also provide a handy bookmarklet, which lets you to test directly from the site you are on. It is also very quick to load.

Similar to the Responsinator; Screenfly allows you to test your site and you can even use a proxy server to mimic the devices you select. It allows you to simulate your site at various screen sizes across desktop, tablet, mobile and even tv. The proxy server mimics the user agent string of the devices you select, but not the behavior of those devices. Still a great option for those trying to detect devices.

The Opera Mini Simulator is a tool every mobile browser vendor should supply. It provides a live demo of Opera Mini that functions as it would when installed on a handset. Opera Mobile Emulator renders pages as close as you can get to how it would look on a real phone. It runs in web pages through Java, or alternatively you can download and run it independently. Its a great little tool and makes you wish that every mobile browser had a similar tool.

Finally, there are a few tools to check if you site is ready for mobile users. Google provide a GoMoMeter that analyses your websites performance, from loadtimes to how your visitors will see your site. The GoMo site also advise on mobile best practices and also give other tips on how to improve your mobile presence.

You may already be aware of the World Wide Web Consortiums (W3C) HTML and CSS validators, but you may have been unaware that they provide a validator for mobile devices too. The checker performs various tests on a Web Page to determine its level of mobile-friendliness and will point you in the right direction if you have any errors.