I was asked by a visitor how wide he should make his web page. This article addresses that question.
Although that visitor was looking for a definitive answer, there is actually no single answer that suits every site. Nor is there any requirement written in stone about the width of a web page. It depends on your content, design, aesthetic sensibilities and audience.
Here are two common approaches.
Some people design their web pages to fill the entire browser width, no matter how wide or narrow it is. They do this by using the percent ("%") as the unit of measure, and setting it to 100.
This is the approach thesitewizard.com has taken. You can see this by adjusting your browser window on this very article that you're reading. As you make it wider, the article expands to fill the space. And if you shrink the window, the web page adapts to the smaller width so that visitors reading the page don't have to scroll left and right to read a sentence.
(Obviously if you shrink the window too small, smaller than even the width of a mobile phone's screen, you will reach a point where the browser is no longer able to cope. But since no sane person surfs with that kind of screen size, other than the webmaster when testing his/her own site, it's an artificial problem that doesn't impact real visitors.)
It is also the approach taken by the free Website Layout Wizard that generates a two column web page that is both desktop and mobile friendly. The layout created behaves similarly to thesitewizard.com's own pages, filling the width of the screen on a desktop computer, and adjusting as necessary for mobile browsers.
The advantage of doing things this way is that you don't waste screen space. It is especially important for sites that have a lot of content for their users to read. It makes the overall experience more pleasant since visitors can visually scan the text more quickly.
Another popular method is to make the page fill only a fraction of the horizontal screen real estate. Some of Dreamweaver's pre-packaged layouts take this approach: those with a relative width only occupy 80% of the screen width, and those with a fixed width 780 pixels.
I have discussed the situations where you may need to use a fixed width elsewhere before, so I won't repeat it here. While you may want the width to be the total of all the elements you need to place on its horizontal axis, it may be a good idea not to let it exceed the width of the most common screen resolutions in use, otherwise a lot of your visitors will have to scroll back and forth horizontally to see your content.
For those wondering, at one time, the most common desktop or laptop computer screen width was 1024 pixels, although this seems to have been replaced by 1366 pixels. Note that this is not definitive. The median (ie, most commonly-used) screen resolution varies from country to country, and from website to website. To get a more accurate picture that is relevant for your site, you will have to look at your own web statistics. And remember: "median" doesn't mean "everyone". The smaller computer screens are still in use. It may not be the most popular, but there are still people stuck with them.
In addition, whether you use a fixed or relative width, you will probably need to make your web pages mobile-friendly as well, detecting such small screens and adapting accordingly. It wouldn't do to ignore what is probably the most commonly used screen size these days (when you count all possible devices and not just desktop ones).
If you are following a tutorial to design a website, and you don't have any specific requirements, just use the width that the guide says to use. For those using my Expression Web tutorial, this means that your site will use a width of 100% (like thesitewizard.com). And if you use the Dreamweaver tutorial, your page will use 80% of the screen width. And so on. In general, these methods work fine for the typical website.
On the other hand, if you are asking this question because you are trying to fit a gigantic picture on your page, and are wondering about the upper limit on its size, I suggest that you don't change your entire layout just for that image. Create a smaller version of the picture and put it on the page (ie, a thumbnail), and link to the larger picture so that visitors who want to see it in its high resolution glory can do so with a click. If you like, you can even use one of those fancy scripts that pop up a larger image over your page since they seem to be the fad these days.
And of course, if you know what you're doing, then there's nothing to stop you from using any width you want. As I said at the start of this article, there are no hard and fast rules. If it is your own site, and you're the designer, the final decision is up to you.
Copyright © 2017-2022 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
What Should the Width of a Web Page Be?
