Standard supported screen sizes for testing?

[alphapapa]

Hi,

Having been working on #192, it occurred to me that it would be helpful if, for the purposes of testing, we decided on a few standard screen sizes or aspect ratios to test the site's appearance with. For example, using the Chrome tools, one can view a site in the equivalent of various devices:

• 1920x1080 (1.78 ratio) (standard desktop screen, maximized browser)
• iPhone SE (375x667) (0.56 ratio)
• iPhone 12 Pro (390x844) (0.46 ratio)

etc.

Otherwise, we risk our changes being tested inconsistently, potentially resulting in some "whack-a-mole"-style development. Also, this might allow us to set up a system to automatically preview changes in certain viewports when a PR is made.

@jarrodmillman @stefanv What do you think? Thanks.

[stefanv]

That makes sense. If we get those right, it may well scale to most devices. So, basically, you want: desktop, tablet, and phone modes.

[alphapapa]

Agreed. I think that having a few designated targets will help us measure our progress, as well.

I'll do a bit of research about common screen sizes/ratios to target, trying to get an average for each device type.

@stefanv @jarrodmillman I could also look into setting up a headless browser to automatically take screenshots for each targeted device for PRs so they could be evaluated more efficiently. What do you think?

Thanks.

[stefanv]

Some guidelines for developers would be good.

Also, a pytest equivalent for the rendered DOM could be helpful. I haven't run into such a tool yet.

We can easily enough render the different views in the debugging view, so no need to spend time on that now.