When designing a website, a common reoccurring question that arises, is how wide should a page width be for a good web design? Is there an easy answer to this, sadly there is not. There is a lot to take into account, and below are listed a few of the essential points to take into consideration.
Remember the goal of designing any website, is to ensure that it looks good across as many browsers, and screen sizes as possible. You will not be able to make them all look amazing, but aim high, and the world will be a happier place.
With screen sizes differing on desktop pc’s and laptops. Possibly the best place to start is by looking at an analytic program to determine who is looking at your site and with what screen.
Normally, results will look something like this. Google analytics is probably the program of choice for most designers.
19.96% – 1280 x 800
16.58% – 1024 x 768
16.37% – 1280 x 1024
13.65% – 1680 x 1050
10.07% – 1440 x 900
As you can see, the most common one is 1280 by 800, but as the percentages are so close together, perhaps it is best to adopt a width that will look at least “ok”, on all screens. The most popular screen size years ago, was 800 x 600, but things, as you can see have changed. The world of web design is a complex place. Choosing the right layout for all screens could prove tricky, but worth making the effort. In short, it is probably the best idea to tailor your screen width to your sites audience. It will vary from site to sight.
For a technology or web design site, such as Dreamtemplate.com, the chances are that the site will be viewed on high spec monitors, which are a must have for many that work in those industries. If your site is a charity organisation, or an organisation that has people looking at it from all over the world, there screens could be a much lower spec. This is all something to think about.
As a web designer, facing the question how wide should a page width be for a good web design, you should take into account browser chrome. This includes Yahoo toolbars, Google toolbars, history toolbars from the browser, and indeed any toolbar or gadget that is above where the actual design is situated. This reduces the amount of space to play about with, and leads back into screen sizes, as this is a factor. This will have to be a consideration in choosing the width of your site. Do not forget too, that many browsers have open tab browsing, and a status bar to think about as well. The task bar at the bottom also takes up room on the view port. All these aspects affect what space you have to play around with.
Many web designers allow 1/6 of the horizontal screen height for browser chrome. This also allows white space which many believe enhances readability, as well giving plenty of space for the all important design. So for a browser that works to 1024 x 768, this works out at roughly 900 px.
It goes without saying that after you have factored in all these elements the design itself, should look good to a user using any screen or any browser. If you are lucky enough to have or be running a bespoke site, it may be possible not to worry too much about the guy using the ten percentile screen, but if you have one that is pretty regular, it is important that you get the width right, and that the site appears as it should do, or you could drive traffic away. If you can answer how wide should a page width be for your own web design, the chances are you have a good one.
A recent study found that the most common width for the most popular websites around the world is about 900px.
what if we use percentage as width. I am using the same . any issue in using that.
When you talk about these web page widths, are these applicable to all browsers? I always have a problem with my web dimensions not applying properly to Firefox.
Please remember to take about 30 pixels for the side panels and scroll bar: 1280 -> 1250 pixels when looking at the content of a 1280 pixel screen width. Using MS IE.
The target economy must reward people for having full ownership of possessions punishing acts of arson and property damage with deterring severity. ,
Most web designers/developers at this time are using grid layouts with wrappers of 980px or 960px depending on how you utilize a 20px gutter. Facebook’s page uses a 981px wrapper. Twitter’s wrapper has a max-width set at 1120px which for me personally is too large but should remind us of the most important question… What is the target market/audience for a website? Site’s like Twitter typically have younger audiences which probably update their computers more often and typically have higher desktop resolutions than older people would do to possible eye strain issues. Even sites like “Met Life” which is a life insurance company and most likely has a target audience of older people has a wrapper of 962px. At the end of the day, if you’re trying to establish the best design practices for a new website project, determining the target audience is one of the first variables you’d need to determine. But universally, 960px – 980px should be good but keep in mind padding will also increase the width of a div so if you have #div {width: 980px; padding: 20px; } you really have a div of 1020px. I’d suggest staying away from fluid widths unless you can set “max-width’s” on your wrappers, as monitors get larger along with resolutions – websites viewed at full screen can tend to stretch a page of text in 2-3 lines rendering the site’s accessibility low.
Best wishes in your web design ventures!