In case you haven’t already noticed, mobile devices are the way of the web today. Mobile-optimized websites are no longer considered convenient, but are demanded by audiences. Companies and web developers must make sure their sites are responsive and mobile-friendly, and there’s no better way to ensure compatibility than to test, test, and test again.
More and more people have been using their phones to browse the web for some time now. In fact, according to StatCounter, mobile web usage finally surpassed desktop usage in October of last year.
Students at Purdue University certainly exhibit this trend. It seems that nearly every other student you pass on the sidewalk has their phone in their hand: texting, tweeting, browsing, or just holding on for good measure.
There are many ways a developer can test his or her site to check the mobile experience. Some are more accurate than others. Nick Pettit does a nice job explaining some of these options in his article over at the Treehouse Blog. Below I recount a few of his suggestions and offer my opinion on the subject.
Resize the Browser
This is home base when it comes to testing mobile responsiveness. As a developer, I probably resize my browser a thousand times when coding a new website. This method, however, must be used in conjunction with another testing strategy. Desktop browsers don’t accurately represent how mobile browsers function. Not even close.
Use your desktop browser to quickly test layout responsiveness when developing a site by positioning your cursor on the extreme right edge of the browser window until the cursor changes to an arrow. Click, hold, and drag to the left to watch your layout change. Then, at the end of development, move to another option to test the actual functionality of the site on mobile screens.
Use Device Previews
Blisk is a really useful piece of software that allows you to quickly test responsiveness for a myriad of different mobile devices all from your desktop computer. It comes preloaded with various screen sizes and pixel ratios that allow you to quickly switch between devices to check your site on all of them. It even simulates touch-like interactions.
It also has a few other handy features, but a big benefit to using Blisk is that it integrates emulators for the various preloaded devices. An emulator is a simulated device environment that “mimics” the functionality of the native device. Translation: it’s still not as accurate as an actual device.
Blisk will help you catch errors that resizing your browser did not, but it won’t illuminate all inconsistencies. Use Blisk as a good second-step check.
Use Actual Devices
As I’ve alluded to above, accurate mobile-ready tests come down to actually testing your site right on the device itself. However, while this is the ideal situation, it’s not really the most practical. Tracking down working models of all the mobile devices that could possibly be used to access your site would definitely be a chore, and it would probably be costly.
Instead of filling your office with stacks of outdated devices that serve only one single purpose, try focusing on a set of devices that (at least somewhat) represents what your audience might be using. My stack would ideally look like the list below, but, again, yours should reflect your target audience.
- one iPad or iPad Mini
- one Android tablet
- one or two iPhones of different sizes
- one or two Android phones of different sizes
It’s also important to consider what version of an operating system is being used to access your website, as browser behavior can change between versions. This is especially true among Android devices. Apple provides a current breakdown of their iOS version usage here, and Android does the same here.
The important point here is to remember to test your websites in as accurate of a mobile environment as possible—and test thoroughly. According to the Huffington Post, when a user has a positive experience with your mobile website, they are 67% more likely to buy your product. So before you throw out that old iPhone 4, maybe consider keeping it around to test your next website; it’s important.