The need for a responsiveness tester

There were and still there is numerous method available both offline and online to test the responsiveness of a website. They are all good in their own right serving a lot of different stages and purposes of testing website responsiveness. That stage we were interested in was the front-end building and final refine stage. That part of the workflow when we are compiling the layout, choosing the media queries, and target the devices or device groups. Usually we do it in localhost with the design already done and waiting to be built. Well, on that stage we were missing some things and a handful of those missing things led us to think of a comprehensive solution for our website responsiveness test.


Trying to test OnDevice

When we started to create OnDevice, the website responsiveness testing tool, we wanted to build a tool that ensures an accurate responsive view for our web design projects. We aimed to create the experience of a device lab translated into the online world. We call OnDevice thoughtful. So what does thoughtful mean as a responsiveness tester? Well, for us, it means eliminating the smothering questions of the website responsiveness testing by taking into account all the details that would alter the test result compared to a real device.

What was responsiveness testing like and what was missing?

Before we built our own website responsiveness testing tool, we used everything we could find to test our responsively designed websites. Although we have not necessarily found everything in the whole wild world, the tools and methods listed below are those we did find and used quite often. The results were often puzzling, turning our website responsiveness testing into responsive guessing. In addition, those inconveniences listed below made us think of something smoother.

DEVICE LABS

  • Had no any nearby
  • Can’t correct and re-test right there
  • Limited number of devices
  • Limited opening hours

SHOP TESTING

  • Testing per device was slow
  • Increasing line of shoppers behind us
  • Making low quality notes in a hurry
  • Shop stuff's embarrassing look

BROWSER DEV TOOL BAR

  • Constant switching between resolutions
  • No device type assigned to the resolution
  • Not particularly presentable
  • Occupy a lot of screen when open

BROWSER PLUGINS

  • One resolution to test at the time
  • Applying the resize to all opened window
  • Getting lost in popups
  • Screen size only without physical size

FREE TOOLS

  • Schematic device images
  • Non comparable device listing
  • Usually not client-ready interface
  • Most ignore retina display, scrollbar width

SIMULATORS

  • Very slow loading
  • Load only one device at the time
  • Test only mobiles devices
  • Offered in package we don’t need

What do we want from a
website responsiveness testing tool

Compare the devices

and quickly correct any misalignment

For the sake of efficiency, it was crucial for us to be able to quickly scan through the result of the website responsiveness testing by comparing the devices. This way we could see whether a modification applied in the stylesheet was put under the right media query and didn't mess up other views. If it did mess them up, we wanted to be able to correct quickly and re-test the page with a single refresh.

Comparable devices for website responsiveness testing

Scrollbar width for website responsiveness test

See the breakpoints applied

as on real devices

We needed to see whether our breakpoints were set correctly or generally the strategy of designing responsively was chosen wisely when we were targeting a specific device or device group. This was especially so when the design we needed to test online for responsiveness contained custom graphic to resize carefully. That’s were we needed to take into account the scrollbar width, because 17– 20px can be crucial when it comes to applying the media queries.


Show the result to the clients

in a simple and appealing way

The client-facing part of the design process was always one of the most sensitive parts of our workflow. Thus, we needed to show the website responsiveness online to people who had no interest in layout explanations and no time to listen to the stories about what would fit in the viewport and/or how much to scroll to reach a particular section. The other very important lesson for us was that clients perceive the design very differently when a black device image is wrapped around the page, simply because it's altering the contrasts of the design.

Website reponsiveness presentation to clients

Big devices for website responsiveness test

Testing laptops and monitors

to have the whole picture

When we were designing responsively on a 2–3K pixel wide monitor, even the 1920px one looked like a small screen, let alone laptops. We needed a device range that contains several other office devices under 2–3K pixel, but above the tablet size to be able to test online for different enterprise equipment. With that we could avoid misunderstanding during client reviews and website responsiveness presentations.

How our website responsiveness test looks like now

To solve all the problems we faced during our website responsiveness testing sessions, we created an interface for OnDevice on which the test result is displayed: horizontally · by device size · with real device picture · in a scalable form.

So here we are now, testing our responsively designed website on our ergonomically designed tester tool, OnDevice. It’s also our first live product, constantly improved and shaped toward the highest efficiency based on the members’ feedback. There is much thought in OnDevice and great hope that it can make your website responsiveness testing flow more efficient.

OnDevice for website responsiveness test and presentation

Doing thoughtful website responsiveness testing

Being thoughtful covers three main things. First, showing the test results according to the real device sizes, so you can see whether you set your break points correctly. This also means you’ll see the most optimal picture of what the client sees on its device, decreasing the number of change requests afterwards. Second, showing multiple devices in one horizontal viewport, making it possible to compare them. Because you don’t need to switch between devices, you get a clear responsive overview of how your responsively designed website looks across multiple devices, making bug searching and fixing much more effective. Third, being prepared for website responsiveness presentations. By switching from the edit view to the presentation mode, you can hide the developer toolbar and show the responsive overview of your work to stakeholders.

Feedback

reviewer
We're happy to have a tool to finalize the design and make immediate fixes during live presentation. Our stakeholders and marketeers loves it, it makes our preparation for the releases so much smoother! ( Veronika - TACO Studio )