.

Holy mobile devices, Batstand! How we test pages across screen sizes

Posted by on Nov 5, 2013 in Process, Technology

HelloTED_20130729_449_edited_small

One of the biggest challenges in creating digital content is accounting for the vast number of screen sizes that are now available to web-users. Desktops, smartphones, and tablets of all shapes and sizes each offer different and sometimes unique display resolutions. For the rebuilt TED.com, we’re using a responsive design system that reacts to the size of the screen the user is using, and provides functionality to match the capability of the device. If you want some background on Adaptive Design, check out a great explanation by my colleague, and TED’s front-end developer extraordinaire, Joe Bartlett.

Of course all of this new work had to be tested, and on as many devices as possible. To do this manually, webpages need to be visited and reloaded on individual devices after any change was made. This proved laborious and time-consuming, so we turned to the internet for help.

A little bit of searching provided a perfect solution: an open-source JavaScript tool called Remote Preview, written by Viljami Salminen, a Finnish web designer and developer. Remote Preview allows us to preview how any URL looks across a large number of devices simultaneously. It works by making an ajax call every 1100ms to check if the URL we specify on a local server (for us, a Mac Mini under my desk) has been changed. That URL is entered as the src attribute of an iframe served up by the Mac Mini. This means we can leave the devices pointed to one address, but are able to rapidly preview different URLs to check for bugs, verify layout and orientation changes, and ensure everything is just as it should be.

The ability to rapidly test encouraged us to expand our device library — which soon presented me, the keeper of our gadgets, with a new problem: Where do I put them all?

Again, we’d like to give a huge hat-tip to Viljami, who posted drawings and pictures of the device shelving that he built for the (envy-inducing) Helsinki open device lab.

Using those specifications, we commissioned a Brooklyn-based jack-of-all-trades, Transient Moorings (who knows his way around a wood-shop and just so happens to be my brother), to make build us our very own device wall. It’s affectionately been dubbed: The Batstand. You can see it above.

With Remote Preview and the Batstand, anyone on our team is rapidly able to preview any URL on our entire library of devices. With it, we can test more frequently and iterate faster.

Now to find room in the office for a second Batstand…

 

hello_willWill True is a product development associate at TED.

He has a superhero name.