What width should a website be?
Unfortunately there are a lot of resources online that offer people differing information and statistics, so it can be hard to figure out what’s best.
When you’re referring to the width, size and dimensions of your website, it’s important to make sure you understand the terminology that your web team is using. The screen resolution is basically the number of distinct pixels in each dimension that can be displayed on your screen, depending on the setting you choose on your computer (or the default setting your computer operates at). So if you were to have a tiny screen that is 10 X 10, then that means there are 10 pixels along the top and 10 along the side. Although you’d never get one that small!
You don’t have to understand how this works, but you need to know that screen resolution evolves over time, as computer screens have been generally getting bigger (remember the tiny 14″ screens?) and their resolution much finer. What this means is that websites can be a lot wider than they used to be, contain more information, have bigger picutres, banners etc, and still fit most screens without needing to scroll horizontally to view the entire thing.
This is the reason why, when you come accross an “older website”, it looks very narrow and old fashioned compare to more contemporary websites.
W3Schools recently published a table which provided readers with different information about screen resolution, as well as data about what resolutions and browsers most people are using.
This table shows that most websites need to be designed between 980 and 1100 pixels to ensure that they will work well and look good on all devices.
Although this is generally a good resolution, there are some things to bear in mind. Firstly, if someone is viewing your website on a mobile phone or tablet device, the website is “shrunk” automatically to fit their screen regardless of its initial pixel size (presuming the website has been well designed and coded so that it’s compatible with mobile browsers).
Some sites such as Amazon are real 100% width rather than a defined pixel width, and this means that the website has been specially made to stretch or shrink depending on which kind of screen the user has. This doesn’t work well for most websites and it is only really best for websites that display a huge amount of info on their screen.
Building a website with aligning in the middle of the screen and a fixed width is today’s standard. The header and the footer often stretch to 100% of the screen, so there are never any gaps.
This ensures that your website looks slick and modern.
Images via Victor Svensson and The Guild of Master Chimney Sweeps.
Leave a Reply