Responsive Design Testing the Promet Way

Responsive design is a watchword for many web design gurus, and it has become a kind of unspoken rule for online experiences: If your website can’t respond to users on every device, then it is an affront to those users. This rule, which maybe doesn’t have to include such unforgiving terms as “affront,” has to be acknowledged well before a user even has a chance to set their eyes and cursor on a website.

Responsiveness is arguably the first barrier to creating good user experiences. So if it’s such common knowledge, then why are we all still talking about it?

End User Benefits

There are some benefits to weigh besides the nebulous term “good user experience.” For starters, responsiveness is 

Cost Effective
Does good design save money? Yes. The infamous tales of good intentions sabotaged by poor user experience The $300 Million Button caution against taking good design for granted. Winning at design, which includes responsiveness, helps improve the bottom line by providing a consistent experience for all users across all devices and doesn’t allow for potential sales or conversions to drop off at any point. If the handoff from mobile to desktop is muddled — or even required — for users who are trying to complete an action, then forget about repeat visits or favorable reviews. The negative experience of even one vocal user can spiral into many adverse effects for any website.

Easy to Manage
Standardization is at the heart of any scalable work. By following a standard for naming conventions or images, then the work can be passed from one developer’s desk to another with less friction and confusion. More work gets done, less head-scratching occurs. The system works.

User Friendly
Of course. It goes without saying, but if your site can please its users then it has already proved its worth. Next step is leveraging that user friendliness to achieve the business and/or social goals behind the site: create more awareness, sell more products or enlist more users by virtue of good design.

To underscore the last point, consider Google’s mobile-friendly mandate. In early 2015, the search engine giant began evaluating sites by their readiness to greet a user on a mobile device. Inattentiveness to responsive design means taking a hit in the search rankings, a fate that is tantamount to disaster in our metrics-obsessed world.

But there is some sway to Google’s decision to include responsive design in its search results criteria: according to Google, more searches are taking place on mobile than on desktop in 10 countries, including the US and Japan.

OK, so there’s no ignoring mobile users. Got it. End of story? No, not quite.

Responsive Enough?

Just making the decision to be responsive isn’t enough. Now developers and QA specialists have to weigh if a site is actually responsive enough.

To get all the facts about a site’s purported responsiveness, BrowserStack is an indispensable tool. The screenshot generator is a must-have for any team that is evaluating a site’s responsive chops.

A visitor to the screenshot generator might be left wondering which views are most valuable to grading responsiveness, since there are dozens of choices. BrowserStack can generate views of a site across a myriad of OS, browser versions and mobile device categories. Should QAers just dial up a whole order of screenshots to be sure?

No, they can certainly afford to be more analytical in their approach. These are the standards that we typically apply to site responsiveness here at Promet:

Browser Version
Go 2 or 3 versions back from the latest release to get an accurate depiction of users across the web. Not every visitor to your site will be up to date on the newest version, so don’t skip on testing those previous versions.

OS Platform
Test the top 3 OS platforms (Windows 7, Mac OS X, Windows 8.1) and then do a mix and match with the top 4 browsers (Chrome, IE, Firefox, Safari) and grab samples going back 3 versions for each browser.

Mobile Users
Test mobile platforms by sampling the top 2 OS versions (these would be iOS9 and Marshmallow in August of 2015) and their default browser type. Segment by device type (mobile or tablet) to get a complete portrait of mobile users and their experiences. 

For reference, we've uploaded a slideshow to the web so you can browse more in depth info on how we gauge a site's overall responsiveness and the tools we use every day here at Promet.

Have questions about responsive design testing? We'd love to hear from you. Subscribe to Promet's newsletter and stay in touch!