When I first got into web development, I used to groan about testing in Internet Explorer 5.5 and 6, but held onto the hope that in the not-so-distant future all this testing nonsense would become unnecessary, outdated. I imagined that IE would get its act together, people would abandon their ancient browsers, and the tedious act of debugging CSS would fade into memory.
I couldn’t have been more wrong.
Though IE6 use has dropped dramatically (and older browsers are slowly but surely losing their market share), mobile browsers are rapidly gaining on their desktop counterparts, introducing a whole new world of buggy and unpredictable rendering, not to mention the new challenge of designing for smaller screens with a range of pixel densities.
So, what’s a diligent web developer to do? The same thing we’ve always done: test, test, and test again. After working on many responsive and mobile web development projects in the past year or so, I’ve come up with a few tips and warnings, things you can use, for browser testing in 2012 and beyond.
Considerations When Developing for Mobile:
The (Not So) Wonderful World of Webkit
The majority of mobile browsers are based on the open-source Webkit rendering engine. This might sound like great news to fans of the speedy, standards-embracing charms of desktop Chrome and Safari, but be warned: not all Webkits are created equal.
While mobile Safari on iOS 5+ may behave more or less as you’d expect, the stock browser on the still-dominant Android 2.3 OS comes with its own set of quirks and bugs, and the native BlackBerry browser has limited support for HTML5 features, and won’t even allow access to sites over a certain size.
What can we take away from this? Unfortunately, it’s that resizing Chrome on your laptop won’t give you an accurate representation of your site on the many Webkit-based mobile browsers. This is where mobile testing becomes a bit tricky: you actually need to get your hands on a device to really know how your site will render.
If this sounds prohibitively expensive, at least try to familiarize yourself with the basic capabilities of the browsers you’re targeting, and make sure you’re not relying on unsupported technologies for important functionality.
Doing the Math
Mobile devices come in every shape, size and resolution, from 240px x 320px BlackBerry displays to the huge 1136px-wide iPhone 5; there’s no standard size to rely on.
Beyond the dimensions, there’s resolution to consider: many modern smartphones have higher-definition displays than your computer. I find this to be one of the hardest things to wrap my head around: If I set my browser window to the dimensions of the iPhone 4 (960×640), the window is taller than my iPhone and half as wide. So while the iPhone’s screen may be twice the pixel density of your computer screen, that means that the pixel-width window will be half the size. While your design may seem to fit perfectly within your 640px-wide browser window, will those buttons be big enough to touch on a screen less than 6cm wide?
While you can rely on your average desktop visitor to be using a high-speed broadband connection, your mobile visitors’ browsers are likely plodding along at 3G speeds, and usually have a monthly bandwidth cap on their data usage.
Bandwidth is precious to mobile users, and wasting it with slow-loading, bloated pages may just send them running. Ultimately, I think this could be a good thing: it forces us to keep our sites as lean as possible. If that jQuery plugin is making your site unusable to mobile users, it’s probably not doing your desktop visitors much good either. Bandwidth limitations force ruthlessness with non-essential content: do you really need that 200kb image of a model smiling?
The Upshot: Progressive Enhancement
Progressive enhancement is hardly a new idea: it’s about developing usable, content-centric experiences that will function regardless of browser capability, then adding in goodies for modern browsers once you’ve satisfied this base case.
Developers have been embracing the progressive-enhancement workflow since we were first tempted by the exciting possibilities of modern browsers. Now that mobile visitors are becoming more and more common, progressive enhancement makes even more sense. Not only do we need to make our websites browser-independent, we also need to make them screen-size and resolution-independent, putting even more focus on content.
Progressive enhancement can help take the pain out of developing for multiple devices, but it’s no excuse not to test early, and test often.
Tools and Tips for Browser Testing
Web Developer Toolbar
Everyone’s second-favourite Firefox plug-in (after Firebug, of course) gives you the option to set pre-defined browser sizes under the ‘resize’ menu, so that you can quickly change the size of your browser to the exact dimensions you want. (Remember: your milage may vary when it comes to accurately representing a mobile browser).
Responsive Design Bookmarklet
Drag this bookmarklet to your bookmarks bar, then use it to quickly display your website at many customizable sizes at once.
Adobe Shadow is my new favourite tool for mobile testing. No longer do you need to push your site to a remote server to view it on your mobile device: simply install Adobe Shadow on your iOS or Android device (including iPod Touch, iPad, and Android tablets), install it on your computer, and download the Chrome extension. Open up your site (even if you’re working locally) and punch the passcode that comes up on your mobile device into your browser. Your device will now ‘follow’ your desktop browser wherever it goes, displaying the mobile version of the site you’re visiting in real-time. You can even connect multiple devices at once, as long as they’re all on the same wi-fi network.
Xcode iOS Simulator
If you’re on a Mac, Xcode’s simulator will give you the most accurate simulation of Mobile Safari you can get on your computer. Open up Xcode and look under “Preferences” for “Developer Tools”. I’ve compared the simulator to a real iPhone, and it’s a fairly accurate representation. Again, unless you have a retina display on your Mac, you won’t be getting the same effect for images, but otherwise you’ll have a much better idea of how your site will look than with your regular browser.
Bonus Tip: Modern Tools for Internet Explorer Testing
The ievms script takes much of the pain out of setting up virtual machines for IE testing. One command will install virtual machines for IE 6–9 using VirtualBox, free virtualization software. It takes up less memory and hardware space than manually installing various versions of Windows, and gives you an accurate representation of the browsers (unlike using IE9 developer tools, for example).
It’s an exciting time to be a web developer; exciting technologies like HTML5 and CSS3 give us unprecedented creative freedom when we create websites. However, it can be easy to get carried away with new technology and lose sight of what really matters to users: the content. The ubiquity of mobile browsing forces us to streamline our websites and focus on what matters most, and introduces new challenges in testing and debugging code. With some helpful tools, a little bit of forethought, and some patience, we can now create impressive, enjoyable experiences for all devices.