The multiplication of mobile devices makes it more and more difficult to ensure that your website looks fine on many screen resolutions and screen ratios, from the iPhone 320×480 to the Nook Color 600×1024. To make the matter worse, these devices can be held vertically or horizontally.
In the desktop world, web designs can easily scale up by using bigger empty margins for higher screen resolutions. But in the mobile world, screen real estate is precious, and should be fully used. Scaling down for smaller resolutions is also a challenge as it can lead to very small fonts with the auto-zoom of mobile browsers.
Once you’ve tested your web layout on one mobile device, or two if you’re lucky, you need to check how it looks on other devices. There are very few resources online that offer virtual mobile browsers for testing layouts. Mobilito.net was launched recently to fill this gap.
Mobilito.net is a free website to take screenshots on virtual mobile browsers: iPhone 3&4, iPad 1&2, Nexus S, Nook Color, etc. Select a mobile device , choose your device orientation (vertical or horizontal), and take a screenshot of any public website. That is an easy way to validate a layout on multiple devices.
Mobilito.net has a few limitations. First, it has a limited selection of devices: no Galaxy Nexus, no Kindle Fire, etc. Hopefully those will be added soon. Secondly, it caches screenshots for a day: if you enter the same URL within 24 hours, you will get the same screenshot. You can get around this by modifying the URL slightly, for example by appending a query string (?foo) or an anchor (#foo) to create unique URLs.
This can be used for evangelism as well: you can easily send the screenshot of a website to a customer to show how bad his current page looks to his mobile users.
Hopefully this will make your life as a web designer a little bit easier, and users will appreciate websites that look fine on their mobile device, whatever screen resolution they may be using.