The need for an online responsive tester
There were and still there is numerous responsive testing method available both offline and online. They are all good in their own right serving a lot of different stages and purposes of responsive testing. 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 responsive design to test.
Trying to test OnDevice
When we started to create OnDevice, the online responsive design tester, we wanted to build a tool that ensures an accurate testing experience 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 responsive design tester? Well, for us, it means eliminating the smothering questions of the responsive web design testing by taking into account all the details that would alter the test result compared to a real device.
What was responsive testing like and what was missing?
Before we built our own online responsive tester, we used everything we could find to test our responsive design. 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 responsive testing into responsive guessing. In addition, those inconveniences listed below made us think of something smoother.
- Had no any nearby
- Can’t correct and re-test right there
- Limited number of devices
- Limited opening hours
- 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
- One resolution to test at the time
- Applying the resize to all opened window
- Getting lost in popups
- Screen size only without physical size
- Schematic device images
- Non comparable device listing
- Usually not client-ready interface
- Most ignore retina display, scrollbar width
- Very slow loading
- Load only one device at the time
- Test only mobiles devices
- Offered in package we don’t need
How our online responsive testing looks like now
To solve all the problems we faced during our online responsive design 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 online our responsive design 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 responsive testing flow more efficient.
Doing thoughtful responsive testing
Being thoughtful covers three main things. First, OnDevice shows 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, OnDevice shows 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 overview of how your responsive design looks across multiple devices, making bug searching and fixing much more effective. Third, OnDevice is a responsive testing tool prepared for 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.
We've never had a tool before 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 - 27.01.2017 )