Table of Contents for

The Modern Web

Test and Test and Test Some More

With the device landscape the way it is, the only way to be sure that the sites you build work across multiple devices is to test. Test at the start of the project, test at the end, and test at every opportunity all the way through. If you’re planning a multi-device project, factor in testing to take up to 40 to 50 percent of build time. Seriously.

You can’t find a substitute for testing on actual devices, so start building a library of as many devices as you can. If you work near other agencies, consider pooling resources so you can get a broader range. In many cities, open device labs are being assembled, with a range of devices donated by local developers and companies that are available for anyone to use. Search online for your nearest lab, or consider getting involved with creating one at your company or place of work.

And don’t stick to only mobile and tablet testing; think about games console browsers if you’re targeting your sites at a younger audience (research suggests that some one in four teens in the US use their games console browser to go online) or TV devices if your sites are aimed at a leisure market.

If you can’t get access to actual devices, some dedicated tools are available, and most (if not all) OS creators and/or device manufacturers have free-to-download software development kits (SDKs) with device emulators. In the mobile and tablet space, Android, Windows Phone, and Blackberry all have SDKs, and doubtless many more besides. Apple’s Xcode, available through the App Store, features an iOS Simulator that lets you switch between device and OS versions for testing.

Once set up, many of these SDKs also allow you to connect physical devices via USB to do debugging via a paired browser, but an easier way to do this is with Opera’s Mobile Emulator; once opened and connected to an Opera desktop version, you can use the developer tools on the desktop to debug the page on the mobile. If you need to use WebKit—and as it’s the dominant multi-device engine, why wouldn’t you?—software called weinre lets you connect a version of Chrome or Safari on the desktop with Android, iOS, or Blackberry emulators/simulators.

Adobe has a tool called Edge Inspect, which synchronizes the Chrome browser with any device running the Edge Inspect app (currently available on iOS and Android), allowing you to preview your site on many different devices simultaneously and use the Web Inspector for remote debugging.