Tech Overload / by Robin Dienel

Accessing the news digitally has never been so easy, and so difficult.

The news is a wide-reaching, all-encompassing creature. It can lay upon a bedside table, pop up in the upper-right corner of a computer screen, project from a family room wall, or even materialize embedded on a lens in a pair of glasses. Due to an abundance of different devices and browsers clogging the digital world, developers are debating on how to exactly design the news for audiences today.

Designing Responsively

In the ageless rivalry of old vs. new, the battle between adaptive (old) or responsive (new) web design takes center stage.

Adaptive design uses multiple, individually designed sites specific to the browser and device the page is opened on, while responsive design adjusts a singular website’s size to the device it’s opened on.

Before 2011, developers were compressing websites from desktop to mobile versions, whereas now they are expanding websites from mobile to desktop, says Yuri Victor, senior user experience director at Vox Media, in an interview.

VOX, the newest editorial site founded by former Wonkblog editor at The Washington Post Ezra Klein, covers politics and news for Vox Media. It opened for online viewership on April 6, 2014, with a completely responsive design.

Spot responsive design:

  1. Open VOX in a desktop browser
  2. Minimize the window to be the width of an iPhone
  3. Watch the different boxes move vertically into one column
  4. Open VOX.com on a smartphone
  5. Notice it looks the same as the minimized version on the desktop
  6. That’s responsive design

“For news organizations, I don’t see the benefit in adaptive design,” said Victor, who works mostly with VOX's website. His latest work was designing a “Create Your Own Hyperviolent John Oliver Headline” generator for the website. )Yes, that’s a real thing.)

Victor went on to say it’s much easier to make a new site, like VOX, responsive, than it is to take a current site and convert it to a responsive design.

For example, the Washingtonian magazine's website uses an adaptive design. Melanie Bender, their senior director of digital products and adjunct professor at American University, says in an interview they use Google Analytics to determine which platform their viewers are accessing their website on in order to decide what to design for.

“We’re looking at data for how many of our users are using a desktop...how many are using a tablet or mobile device?” she says.  Once a product has less than half percent of their user base, Bender says they stop designing for that device since it takes time to individually develop and test each platform design.

SPOT adaptive design:

  1. Open washingtonian.com in a window on the desktop
  2. Minimize the window to be the width of an iPhone
  3. Notice the site is cut off after a certain point while you’re minimizing it
  4. Now open washingtonian.com on a smartphone
  5. Notice the site resized to fit within the width of the smartphone, but not the minimized browser on the desktop
  6. That’s adaptive design

Other news sites, like The Washington Post, have tackled this mobile internet boom by converting their articles to responsive design while leaving their homepage as is. This, in part, is a response to the growing number of people accessing articles through social media applications on their mobile devices.

A February 2014 study by The Nielson Company measured that U.S. adults spend an average of 34 hours per month accessing the internet on mobile devices. In addition, 86% of their smartphone internet time is captured by apps, like Twitter and Facebook.

“If you’ve targeted like an iPhone screen [with an adaptive design], or that size screen, and then somebody opens it in Facebook or Tweetbox, that size is going to change because they [Facebook and Tweetbox] automatically add padding and borders and headers and footers and then all of a sudden all this time you spent making something specific for a certain size no longer works at that size,” says Victor. “With responsive, it doesn’t care. The equation runs in the background, does what it needs, and everything should look fine.”

But what does this mean for testing these different designs?

Test! Test! Test?

In the “golden age” of web design testing, developers only had to test their designs on the five major browsers: Chrome, Internet Explorer, Firefox, Safari, and Opera.

Today, a comprehensive test involves over 34 browsers and countless device combinations. The cost of owning all these devices is enormous, and the time it takes to test on these products is endless. But, there are alternatives.

DC Device Lab opened in northwest Washington, D.C., in 2013 and is currently the biggest open device lab on the east coast.

Mariesa Dale, founder of D.C. Device Lab and adjunct professor at George Mason University, was in the process of finishing a website project for Marriott in 2012 when she went searching for a few different devices to test the new site on.  She was advised by fellow D.C. developers to travel "way out" (about 38 miles south) to Sterling, Virginia, to the AOL Fishbowl Lab to pick up a box of devices.

“I thought, this [D.C.] is such a vibrant tech community, I can’t be the only developer who wants one of these,” says Dale in an interview.

She then took two months off work to build the lab in a small corner of Canvas, a co-working community she currently works out of in northwest D.C., with funds she received from the city, as well as monetary sponsorships and donated devices from local businesses. The lab now contains over 30 donated devices from Samsung and Microsoft that developers can use to test their designs on for a rental cost of $5 per hour.

But the news doesn't sleep!

Although this is a very cost-efficient way for developers at non-profits and start-ups to test their designs, the pace of the lab, which is only open during work hours from 9 a.m. to 5 p.m., does not work well within the 24-hour news cycle. When deadlines are pressing, designs need to be tested. Quickly.

To do that, many news sites use virtual emulators, like BrowserStack. These are online programs developers can use to test their sites aesthetically at any moment of the day, which Bender says is more realistic for news sites.

When asked if news organizations would use something like D.C. Device Lab, Bender says, “I know the nature of the work and the late hours and insanity of finishing projects, so I think [we won't] because internet based emulators and services provide instantaneous feedback.”

Both web-testing strategies have their drawbacks for news sites. Virtual emulators inhibit developers from testing the tactile functions of their sites, like link buttons on touch screen phones, while device labs present the obstacle of time to a fast-paced news cycle.

“I think we’re 75% of the way there,” says Dale. “We need to solve the problem of, you know, having a physical lab but maybe in your own virtual space, so you don’t actually have to travel somewhere to get to it.”

Samsung is doing something similar to what Dale suggests. They’ve started a remote testing lab in San Francisco where developers can hook into real devices virtually through a browser, like a virtual emulator, which Dale considers “some piece of the puzzle” to the open device lab movement.