Designing a mobile layout and knowing how to code it properly is great, but how does a webdesigner/developer test how a layout will perform on a mobile browser? After all, it’s not quite as easy as testing desktop layouts through your browser before uploading it.
I worried over this as I compiled this series, but thankfully, there are folks out there who have solved part of this problem, developing wonderful online tools that can test your site’s layout and help you identify problems in mobile browsing. The following sites are the best of the best, in my opinion, offering simple and sleek functionality as well as a wealth of information. Simply visit these sites and type your URL in to test how your current layout performs in mobile settings!
W3C MobileOK
This tool is a MUST for mobile web developers–it helps you validate, improve, and ultimately optimize your code for mobile usage. As you can see from the above pictures, Crooked Glasses currently fails miserably at being a mobile-friendly site…I got a lot of work to do. *sigh*
Responsive Design Tool
This simple online tool loads quickly and shows a range of different page widths at a glance, so that you can easily compare and contrast. (Caveat: you can’t click through pages unless you download the free tool from Github, but the download link is provided.)
Screenfly
Screenfly displays your website on many different platforms, mimicking everything from tablets to televisions. Click the various icons to see even more specific screen sizes (like Kindle vs. iPad, or iPhone vs. Android phones); you can even click through your miniaturized site to view different pages!
The Responsinator
The Responsinator gives you a scrollable list of all sorts of mobile devices, even comparing portrait vs. landscape orientation on the same device to show you how your site changes when the device is held a different way. The scrollbars on each individual display allow you to scroll around on your site to see what parts of your site may be obscured to the mobile user.
Further Reading
If the above tools have whetted your whistle in terms of mobile site testing, check out the following articles for even more apps and online tools!
SixRevisions: 10 Excellent Tools for Testing Your Site on Mobile Devices
WebDesignerDepot: 8 Popular Apps to Test the Mobile Version of Your Site