In the past, we have looked at reasons and ways for testing your website, whether business or personal, on multiple desktop browsers. The importance of testing your site on different browsers ensures that your site looks and behaves correctly, no matter which browser it is being viewed on.
The same goes for mobile browsers and may even be more crucial these days, as many people employ the use of responsive web design. This concept, in a nutshell, provides a website that will look and behave well on all mobile devices, regardless of size. With so many different types of cell phones and tablets, designing your site to only accommodate one device is a huge mistake.
Here is what Eric Fischgrund, Marketing and Communications Professional, has to say about the importance of this concept in a recent Huffington Post article:
Content often needs to be rewritten, too. For smaller devices you want concise, easy to understand text. Images should be smaller in size. Responsive design is about enhancing the users’ experience by anticipating their needs.
With all of this in mind, no one expects you to purchase and maintain every device available. And it is important to note, that as new devices are produced and sold, it would be impossible to keep up with that method.
Enter, the mobile emulators. These handy tools allow you to not only view, but in most cases navigate through your website through the “eyes” of different devices. Each of these emulators works well and is available for free.
Mobile Phone Emulator
The Mobile Phone Emulator site allows you some good flexibility for testing your website. You can choose which device to view your site on and switch between them all for review. Although it does not contain a complete list of devices, you can find popular ones from Apple, Samsung, LG, Blackberry, and HTC with screen sizes listed for each. You can also choose to view your site in both portrait and landscape views on the devices.
Once your website is displayed on the device, you can click different articles, navigation, or menus to see how each area looks. You can also choose to view the device in its “real” size or to fit your browser window. Mobile Phone Emulator is a really nice, free option for mobile browser testing.
Responsinator
Responsinator will display your website on various devices all in one view. There are not many devices options, but you can view your site on a few recent iOS and Android devices in both portrait and landscape views. Each has scroll bars for viewing the entire page and again, you can click links on your site from the devices to check out the navigation and other pages.
Responsinator is available for free, but if you would like to create your own Responsinator, that option is there for either $6 monthly or $60 yearly. If you do a lot of responsive design yourself, then this might be a good option for you to look into further.
ResponsivePX
ResponsivePX may not be as pretty as the other options, but it does the trick. Rather than choosing from different devices, you select the screen size. Adjust the width and the height and the screen display will adjust as you go.
You can choose to show a scrollbar, which really could just be there by default, but it helps you move around the page of your site. Each element can be clicked on your site so that you can view the navigation and different pages easily.
ResponsivePX is a decent option for mobile testing and considering you can adjust the screen size to 3000 by 3000, it could be used for more than mobile viewing.
Matt Kersley.com
The Matt Kersley site is again, not as nice-looking as some others, but you can see your website in four different mobile device views. Device sizes include a small phone and tablet as well as iPhone and iPad. Each has scrollbars and allows you to click your site elements for further testing like those above.
iPad (and iPhone) Peek
For testing on iOS alone, iPad Peek shows both the iPad and iPhone views of your website. You can quickly switch between the tablet and the phone and also between portrait and landscape views.
Just enter your URL onto the device and test away. As with the other emulators, iPad Peek lets you move through your site pages and navigation for a complete experience.
MobiReady
MobiReady has until recently been an excellent tool, however, the site seems to be experiencing some problems currently. I want to include it in case their issues are fixed soon, because it really is a good emulator. Not only does it display your website, but also provides some useful testing information.
You can check out analyses and reports along with various test results showing graphs, fails, and passes. The devices shown are limited to a few different phone sizes along with a desktop view.
But the other information is really what is the most helpful on MobiReady. Hopefully the site will be back in action soon so that you can give it a try.
Is Your Site Ready for Mobile?
Do you use responsive web design to make sure your site is mobile-ready? What about your testing; do you check out your website using an emulator like one of these?
from makeUseOf