As a website owner or web designer you have to take into consideration what are the most common screen resolutions for the intended target audience of the website to determine what web page width is suitable for the website.
Have you visited a website that has a web page width too wide for your monitor or browser window? You have to use the horizontal scroll to go back and forth reading and/or looking for information on the page. This makes reading the website very hard and can be very annoying if the website has some information the visitor is interested in.
First, let’s get an understanding of what screen resolution is.
Screen Resolution Explained
hardware – the maximum number of pixels that can be displayed on a monitor, expressed as (number of horizontal pixels) x (number of vertical pixels), i.e., 1024×768. The ratio of horizontal to vertical resolution is usually 4:3, the same as that of conventional television sets….”
When someone refers to screen resolution they express it width x height. e.g. 1024 x 768
Let’s use a screen resolution of 1024 x 768 to explain further. The 1024 number is the width in pixels. In our example, the 768 number is the height in pixels.
You can test the screen resolutions available for your monitor on the fly.
The higher the screen resolution the more information fits on the screen.
Here are some examples:
640 x 480 Screen Resolution
800 x 600 Screen Resolution
1024 x 768 Screen Resolution
Take another look at the images. Did you notice that as I increased the screen resolution the information on the screen became greater?
The examples above are the most common screen resolutions today. As time progresses and technology advances, so will the most common screen resolutions.
So now you understand screen resolution a bit better what screen resolution should you design for?
Designing for the Most Common Screen Resolution
Designing for the most common screen resolutions is not hard if you understand the intended audience’s needs and expectations. Having done your research on the intended audience, you would also know what computer skills and type of technology they have and are comfortable with.
The W3 Schools browser statics as of this writing show that 1024 x 768 has a 57% share of the screen resolution trend as of January 2006. There is also a note that web designers should not forget about those who still use 800 x 600 screen resolution.
Looking the the information provided by Browser News (who provides statistics on the trends in browsers, colour-depths, and resolutions), their section on resolution trends says:
“Most users have 1024×768 or higher, but a large minority have 800×600. These numbers do not include those who browse using web appliances.
It is important to note that (a) the display resolution says little about the size of the browser window, and (b) users can normally resize the browser window. Consequently no particular browser window size should be assumed.”
Source: Browser Trends Resolutions – Dated January 5, 2008
You also have to consider those who have older machines, need larger fonts due to vision difficulties and other devices used to surf the web that have small screens.
There are two ways to plan the layout of a web page’s width, fixed or liquid.
Fixed Width Web Pages
As the name describes, the width of the web page is fixed. The web page will not adjust to the visitor’s browser window or screen resolution. If your website design is too wide for the visitor’s browser window a horizontal scroll bar will appear at the bottom of the browser window.
To design a fixed width web page layout you need to know what is the lowest common screen resolution for the intended audience. Once you have determined that then you have to do some research on the actual available space you have to work with in each browser. You could loose up to 100 pixels in width, depending on the browser.
Each browser has a different amount of space available when opened. Then of course there is also the problem of whether the visitor is likely to have a side panel open while surfing the internet.
There is a chart of available screen space available at AnyBrowser.com that is a bit outdated but it will give you an idea of how screen resolution relates to maximum available live space in the browser window.
Keep in mind that people with larger monitors and higher screen resolution tend to have multiple windows open at the same time and may resize the browser window so they can see everything that they have open.
If you have decided to go with a fixed width design just keep in mind that all the widths of the page elements have to add up to the width of your design. Take into consideration the spacing between elements as well as the actual element widths. Be sure to test your design at different screen resolutions to make sure the design suites the targeted audience.
Flexible (Liquid) Design
A flexible design (also known as liquid design) adjusts to the size of the browser window and different screen resolutions. All the web page elements rearrange themselves to suit the browser window or user’s screen resolution, if done correctly.
For a flexible design you use percentages as the width of the containers around the web page elements. A container can be a div or a table.
Just like a fixed width design, all your widths have to add up to the maximum width you have decided to go with. e.g. If you decided to use a flexible design that takes up 60% of the available screen space then all the elements, including spacing, have to add up to 60% of the screen space.
One thing that will ruin your flexible design is using images that are too wide. If you decided to use a 60% width and your header image is greater than that width the horizontal scroll bar will appear because the design had to adjust to accommodate the image.
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? – article at Smashing Magazine comparing the pros and cons of fixed, fluid and elastic layouts.
Testing for Most Common Screen Resolutions
Web Page Mistakes uses a flexible design. You can adjust the browser window until the available screen size is about 420 pixels wide before the top images start to overlap (the menu jumps down below the content of the page when you get below 600 pixels. To have the menu on the left still appear the browser window in it’s intended spot (on the left) the available screen space would be 600 pixels. This site was designed to suit down to 640 x 480 screen resolution. To see how it adjusts to suit your browser window, put your mouse over the bottom right corner of the browser window and drag the corner up and over to the left. Watch as the content adjusts as you change the browser window size.
There are various ways to test how your web page design will look at different screen resolutions. You could adjust the browser window manually as described above, change your screen resolution on the fly, use a toolbar that resizes the browser window for you or use an online tool.
Now, what if the user decides to change the font size for the page themselves (View, Text size, select a size in Internet Explorer or on a Windows machine they can press Ctrl while rolling the scroll wheel in the mouse). Does your design fall apart?
When Netscape and Internet Explorer were just about the only graphical browsers around web designers would put “Best Viewed with Netscape” or “Best Viewed with Internet Explorer” because at the time there was a major browser war going on and Netscape and Microsoft figured this would be a good marketing ploy. You still see “Best Viewed with…” statements but now the battle is mostly between Internet Explorer and Firefox. Some designers also state the screen resolution the site is “Best Viewed at…”.
If you have researched your target audience and designing for a specific browser or screen resolution works for that audience then you might want to do that. But, what about all the other potential visitors and customers. Can your business afford to loose visitors and sales because your website breaks in their chosen browser and/or screen resolution? Probably not, this is a decision only you, as the website owner, can make.
Viewable in Any Browser and at Any Screen Resolution
To have a website viewable in any browser and at any screen resolution:
- Determine the website’s target audience and their expectations.
- Decide on a web page width (either fixed of fluid) to suit the target audience’s most common screen resolution.
- Use only standards compliant valid coding.
- Test the website in different browsers.
- Test the website at different screen resolutions.
Having a website that is viewable at any screen resolution and in any browser will only help your business grow.
Further Reading on Designing for Most Common Resolution
Well known Usability expert, Jakob Nielsen, addressed this issue in his Alertbox, July 31, 2006 Screen Resolution and Page Layout. Although his article is about designing fo 1024 x 768 resolution he also reccommends using a flexible design that will adjust for resolutions from 800 x 600 to 1280 x 1024. Mr. Nielsen also stresses knowing your target audience and accommodating for the future.
From Smashing Magazine, a blog related to web design:
“Don’t optimize your web designs for your personal convenience. Don’t guess blindly; instead try to estimate the profile of your visitors and leverage your design accordingly. In most cases you can improve the user experience by keeping the width of your layout at most 1000px. Design for your visitors, even if it means that your design looks terrible on your high-resolution wide-screen laptop.”
Another Smashing Magazine articles related to screen resolution, fixed layout and flexible layout:
“You never really know who is going to visit your web-site next. You have no idea which configuration will be used, what browser will be installed, which screen resolution will be in use. However, since you’d like to comfort most of your web users, you need to know their habits and the profile of your average visitor — to adapt the design and layout to your users’ needs.”
“…Why should a user adapt his viewing preferences to a web-site? Shouldn’t a web-site rather adapt itself to the viewing preferences of its users? If you think about it for a second, you have the same situation as in a cloth store where you are offered cloth only in some very specific size. If the size doesn’t fit to you, it’s your problem, not store’s owner. And if you want to you can take a needle, some fabric and create the cloth of its own choice for free. That is not user-friendly….”
Screen Resolution: Should You Give a Damn? – Post at Closed Loop Marketing, June 23, 2008.
“…Many designers seem to design without giving any thought to the visible width and height of the end users’ display….I will concede that it’s much safer now to design web pages and landing pages bigger, but look at the statistics, decide where your target audience most likely falls, and then be sure to test your designs before launch….”
“…the size of people’s screens doesn’t correspond to the size of the browser. In 2006 I found that as the screens get bigger, the size of the browser stays pretty much the same …”
Further Reading on Page Dimensions
Webstyle Guide has some information on page dimensions where they explain what to consider when deciding on web page dimensions, how to decide on the suitable web page width and a discussion of most common screen resolution.
Compare Web Safe Area – Designers Toolbox has a page showing different resolutions and the web safe area available in different browsers.
Copyright © 2005 - 2014 Web Page Mistakes. All rights reserved.
18 Responses to Not Designing for Most Common Screen Resolution
Not Designing for Most Common Screen Resolution Was Mentioned Here:
- Website Design Mistakes
- newb - positioning my container in CSS...?
- Is there a maximum value for page width?
- Choosing a Content Management System
- Resize font in fluid layout?