Article: Bringing Sanity and Order to Device Testing

An excerpt from, by Aaron Gustafson

This article is part of a web dev series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

It seems like every other day the public is granted some new means of accessing the web. Some days it’s a new browser. Others it’s a new smartphone. Or a tablet. Or an e-reader. Or a video game console. Or a smartwatch. Or a TV. Or a heads-up display. Or a car. Or a refrigerator.

I worked on one project where the client provided me with a spreadsheet detailing 1,400 different user agents that accessed the login screen for the m-dot site. In two days!

As further evidence, consider the enlightening details of this post from Jason Samuels of the National Council on Family relations, a non-profit organization:

  • In 2008, visits from “mobile” devices accounted for only about 0.1% of their traffic. In 2014, that number had skyrocketed to 14.4%.
  • In 2008, they detected 71 different screen resolutions, which is already a lot to consider. By 2014, however, they were seeing 1,000 unique screen resolutions each and every quarter (with over 200 of those recording 10+ visits per quarter).

That last stat blows my mind every time I read it. You can’t design for 200 different screens, let alone 1,000. It’s a fool’s errand. And don’t even think of trying to test on that many devices.

And yet, here we are designing websites that can (and will) go anywhere. We need to thoroughly test because we can’t make any assumptions about the browsers and devices being used to access our content.

Testing can be tedious, time consuming, and costly. Surely there’s a way to make it easier. There sure is: Instead of getting hung up on creating one experience that needs to be nearly identical on every browser, we can be smarter about how we build things and treat experience as a continuum.

We can build websites that are both nimble enough to work on low powered devices over slow networks and smart enough to take advantage of advanced features and sensors when opportunity knocks.

Wha?! We can have our cake and eat it too? Yes. Yes we can.

Start on Solid Footing

When dealing with the insane proliferation of web-enabled devices and the great unknown of where our websites will go, it pays to take a step back and focus on what’s important. We need to ask ourselves two simple questions:

  1. What is the purpose of this page, this form, this interface?
  2. What is the simplest way to realize that purpose?

Then we need to build that first. Typically we’re talking text, some basic HTML, actual links to other pages, and forms that submit to a back-end of some sort. This is our minimum viable product and it will work anywhere.

Then we can look for opportunities to enhance the experience, all while keeping that functional core at the center of the experience.

We can use CSS to add visual hierarchy to the page, provide some visual interest, and adjust the layout to create a good reading experience on a wide range of screen sizes. We should start from the narrowest screen size we can imagine and let the content guide our breakpoint decisions.

We’ll use JavaScript to give real-time feedback to our users. We’ll hijack forms and links to lazy load additional content or otherwise avoid full-page refreshes. Heck, we can even take over the entire page and convert it into a single page app.

But we should never sacrifice the functional core.

This approach to designing for the web is called progressive enhancement and it’s the number one tool for dealing with the one-two punch of older browsers and device proliferation.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.