Web Design – Filling the Screen

Home

It's not uncommon during a web design project for a client to ask for a design to “fill the entire screen.” The response to that request is: “Whose screen would you like to fill?” The appearance of a web page in a computer screen, or monitor, is dependent on a lot of things, not the least of which is the screen resolution at which the user has their monitor set. I took a look at the last couple of months of one of my higher traffic blogs, as I do on a regular basis, to see how my visitors are viewing the website.

Here are the results:

	Screen Resolution	Visits	Contribution to total:
1.	1280x800	1,041	14.53%
2.	1366x768	896	12.50%
3.	1440x900	726	10.13%
4.	1920x1080	702	9.80%
5.	1280x1024	670	9.35%
6.	1680x1050	630	8.79%
7.	1024x768	582	8.12%
8.	1920x1200	491	6.85%
9.	1600x900	272	3.80%
10.	320x480	125	1.74%

Computer Monitor As you can see, screen resolution widths of between roughly 1300 and 1400 pixels are most common, with larger resolutions coming next, and the old 1024 x 768 standard making up less than 10 percent of the total. 800 x 600 is long gone. And 320 x 480? That's the iPhone, ranking number 10 at 1.74%.

So you can see that filling the user's screen is relative. Elastic designs can be used to some extent to resize the page to fill screens at different resolutions, but this technique has limits. In the end, it is more important to have all of the content visible to users with low screen resolutions. That means that sometimes visitors will see background on the sides of your web content, especially if they have a large monitor set at a high screen resolution.