July 19, 2016

Mastering the Growing Digital Landscape with Our New Device Lab

Travis Johnson • Developer

Austin Gil • Development

You Should Know

  • Making sure your website works on various different mobile devices, tablets, etc. is a difficult process that we prioritize highly.
  • We have many different devices as well as special software so that we can do proper testing and deliver superior projects.
Over the past decade, our digital experiences have evolved from the screens of desktop computers, to laptops, smart phones, tablets, watches and more. We are now in an age of the Internet of Things, and the majority of internet use is through mobile devices.

This poses an interesting challenge for web designers and developers because we want to make sure the sites we build for our clients are accessible, functional, and beautiful across as many screen sizes and digital contexts as possible. So how do we manage it?

The Device Lab

Here at Visceral we recently created a device lab, which is an array of different mobile devices used for testing our products before they go live. When we are developing sites for clients we need to account for different screen dimensions, browsers, hardware, operating systems, and more. As you can imagine, going through an entire website on each device and browser can be very time consuming!

Traditionally, multiple people would test sites one device at a time making sure everything is functioning properly and looking right. With the device lab, all the devices can be viewed at the same time.

We have also coupled our device lab with software called Ghostlab which syncs the scroll position, events, and pages across all devices simultaneously. This allows our quality assurance (QA) testers to audit all of the devices simultaneously, making the process even more efficient. It’s like magic!

The Details

Our current device lab is a prototype so we wanted to build it using inexpensive materials for experimenting. It is a plastic workshop panel with metal hanging “shelves” and pegs to hold up the devices. We chose to use the workshop panels for this first version because it is modular and can be extended, thus making the device lab flexible for different quantities and sizes of devices.
The lab has a stand so that all of the devices face the user and a power strip with a timer so that we can easily turn off all of the devices to conserve energy.

We currently have the following devices:

  • Dell Inspiron 11
  • iPhone 4S (R2-D2)
  • iPhone 5 (Johnny 5 from Short Circuit)
  • iPhone 6 (Agent Smith from The Matrix)
  • iPad 2G (Iron Giant)
  • iPad Mini (Voltron)
  • iPod Touch (WALL-E)
  • Galaxy S4 (Bishop from Aliens)
  • Galaxy S6 (Deckard – Blade Runner)
  • Nexus S5 (Ava – Ex Machina)
  • Nexus 7 Tablet (T-1000 from Terminator)
  • Amazon Fire Tablet (Optimus Prime)
  • Droid Charge (HAL-9000 from 2001: A Space Odyssey)

(We of course had to name them after famous fictional intelligent machines!)

With these devices we can now test the following:

  • Browsers: Chrome, Firefox, Internet Explorer 11, Microsoft Edge, Safari, and Android Browser
  • Operating Systems: Windows 10, Windows 8 (virtual machine), Windows 7, OSX 10, iOS 9.3, iOS 9.2, Android 6, Android 5, Android 4.1, Android 2.3, and FireOS 5

Why We Love the Device Lab

We are always looking for ways to improve our process, and the device lab has really advanced our QA testing efforts. Here are some main reasons why we love our device lab:

  • Makes testing more efficient and comprehensive
  • Takes less time and human resources
  • Makes it easier to find and squish bugs
  • Has a wide range of the most popular devices, browsers, and operating systems
  • Uses real devices rather than emulators which don’t always have perfect fidelity
  • Because “It looks fine on my machine” is not a good enough answer

Looking Ahead

As mentioned, this is the first iteration of our device lab and we plan to improve the design and function of it as we move forward.
Since the design is modular, we can easily add new devices or remove old devices as the mobile market transforms in the future. Also, since this is a really helpful tool for building better quality web sites, we have discussed the idea of opening it up to the local web development community for developers who might not normally have access to so many devices.

We are really excited about this latest development at Visceral, and we look forward to happy QA testing and totally awesome websites in the future!

In this post

Categories: / / /