Archive of TideArt content.

Sat, Nov 3 2012 21:27:48 UTC

Web designers: Thinking about screen sizes

Many artists and designers create content for the web. As such, you may be in part responsible for the final look of a site on a user's browser, whether it be your own site or that of a client. This is why knowing as much as possible about that browser is important, including the display resolutions people use.

There are two ways to create a site, when it comes to width. There are fixed sites, which have a certain size and don't vary, and then there are variable sites, which adjust themselves based on the user's browser size. There's no bad way to do it, and you can make arguments for both methods, but variable sites tend to adapt better to various screen sizes, with elements on the screen repositioning themselves to fit the resolution of the user, and consequently have become more popular in recent years.

Even with a variable site however, chances are it looks better at a certain resolution. As a content creator, you need to know what size to focus on when creating graphics, banners, tables, and so on. For that, there are two useful resources out there. The first is the Steam Hardware Survey, which is a great resource showing the hardware configuration of Steam users. Because there are so many people using Steam, it gives you a good idea of what computer users use. If you go to the display part, you can see that the lowest common denominator is now at 1024 x 768 pixels, with 4%. Other popular resolutions are 1280 x 800 with 3%, 1280 x 1024 with 9%, 1366 x 768 with 18%, 1440 x 900 with 7%, 1600 x 900 with 7%, 1680 x 1050 with 9%, and 1920 x 1080 with 28%.

Another useful place to look at is the W3Schools Browser Display Statistics page. Their page shows that as of last January, 13% still use 1024 x 768, and only 1% below that. So from those stats, it seems clear that 1024 x 768 should be the baseline for most sites, with a clear trend going towards higher resolutions, mainly 1920 x 1080. This can help you design your assets so they look right for most people.

Lastly, one particularly interesting feature that has recently started to become very popular is something called responsive design. This is a technique that reformats a web site based on the user's resolution, mostly useful for when you switch to drastically different resolutions, like tablets and smartphones. Basically, instead of making a separate mobile site, you can specify that your site should change for anyone with a resolution lower than 1000 pixels.

You may not be in charge of code for your own particular project, but if you have access to the CSS files, the important part is this:

@media screen and (max-width:1000px)


Basically, this means that anything prior to this line will apply to normal resolutions, and all the declarations inside of this section will apply to screens lower than 1000 pixels. This even works if the user starts with a browser on a large screen, and then resizes his or her browser to be smaller. You can make several declarations like that, one for large displays, one for tablets and one for smartphones. In the end, as an artist you should be thinking about how your work will be seen by your target audience, not by yourself, so it's important to keep up to date with what people use, and design accordingly.

Back to index

© 2007-2019 Patrick Lambert - All resources on this site are provided under the MIT License - You can contact me at: contact@dendory.net