Easily organize your RWD website testing flow

I had some time to spare so I’m sharing my thoughts on how to improve your work. I was cooperating with a remote Wordpress developer working on the website. I’ve found him on upwork.com and it was our first project. And being a software developer myself where Wordpress is not my specialty, I was guiding him towards a better way to organize his work and test his changes.

First was creating a Trello board for the fixes, which are organized into the following categories:

problem categories

And some columns for flow

Ready is put by developer, then I accept or put to “Back to work”

The flow is very simple, Trello is great for basic needs and you can easily communicate — comments, attachments, mentions; so it was proved easy to catch on for everyone and effectively communicate.

After setting it up with the developer, it struck me that I have to put a lot of tasks back in the “back to work” column when the developer thinks it’s ready. I understand it very well — you see one problem, you fix it and you’re done. But that’s why software testing is so important — to have a different perspective on what you’re working on. It also applies to other areas of life.

The fixes the developer was doing were related to a visual discrepancy with the design. So then the acceptance criteria came to work:

• it has to be very similar to the output of a UX+web designer, which was designed for mobile, tablet and desktop sizes
• it has to look good on various devices and screen sizes

But how to define various devices? I wanted to sketch a list myself, and this is what I came up so far:

Let’s list them:

• medium and big screen sizes
• normal android phone with small viewport
• modern smartphone with a bigger screen size
• iPhone 5/SE which is tiny
• iPhone 6/7/8 which are common Apple devices
• iPad and iPad Pro in landscape and portrait mode

So in the end you have two desktop setups, 4 various smartphone types and tables in both rotation modes.

But then I asked a fellow QE for some guidance on this matter, and he directed me to BrowserStack’s list of mobile sizes. But I wasn’t satisfied with the data I found there, so I looked on StatCounter and W3Counter and these are my findings:

1. If you combine Chrome, Safari, and Firefox, you get 80+ percent of browser market usage worldwide
2. If you combine top 20 distinct screen resolutions, you get 70+ percent of all used viewport combinations

So I got myself into grouping the data into similar resolutions, mostly by width, and I managed to divide the list into 6 groups:

Data from StatCounter (as for 03.2020)

And there you have it — 70% of the device market is in my opinion enough for a small company to test their website.

So wrapping it up:

• Make a simple communication flow about bugs
• use Chrome, Firefox, and Safari for testing your website
• when you write CSS, test in at least 6 different resolutions setups

Device sizes for 70% of a market (as for 03.2020)

I hope you will find those numbers and methods for organizing work useful.

PS — I know testing is not that easy, but I believe it’s a good start if you never did proper testing and you would like to start