Backgrounds for the Census

On the web websites are displayed by many different devices with different screen size and aspect ratios. The paradigm for designing for that is called "responsive design" (if you want to look that up). Essentially, this is planning the layout of a website to provide the same functionality on all screen sizes, and in our case planning background art to display well under those circumstances.

Approach A

Because screens range from wide landscape aspect ratios on desktops to tall portrait aspect ratios on smartphones, I suggest we make our background sprites square to accommodate a wide range of aspect ratios. In the end a sprite will be scaled to cover the whole screen like this (where red marks the borders of a screen):

To plan for that imagine the widest and narrowest aspect ratios (graphic uses 16:9 for a typical desktop and 1:2 for a typical phone) on the sprite so that you find the area that would always be visible. Then imagine the graph in there and illustrate for that:

Resolution

If you use this approach the sprite should be at least 1920×1920px, ideally 3840×3840px for 4k / HiDPI displays. For devices with a lower resolution this will be scaled down automatically for faster loading times.

Approach B

Another way to design for different screen sizes is to create multiple layouts / in our case multiple backgrounds that suit a subset of screen sizes. There would be a mechanism in the website to determine which variant of the background would best suit a certain screen. I would suggest to design one background for landscape screens in 4:3 / 16:10 and one for portrait screens in 9:16.

Keep in mind that this still means that parts of the background may not display on certain screens:

Resolution

If you use this approach the landscape sprite should be at least 1920×1440px (for 4:3), or 1920×1200px (for 16:10), ideally 3840×2880px (for 4:3), or 3840×2400px (for 16:10) for 4k / HiDPI displays.

The portrait sprite should be at least 720×1280px, but ideally 1440×2560px for HiDPI displays.

For devices with a lower resolution this will be scaled down automatically for faster loading times.