Designing for Multiple Screen Resolutions
How the Web is Viewed | Practical Considerations
Design Challenges | Testing Methods
How the Web is Viewed
The majority of viewers on the Web today are using the Microsoft Windows operating system in displays ranging from 1024x768 (usually 17" LCD monitors) to 1920x1080 (24" LCD monitors) although there are still some people running 800x600 or less (usually older 15" LCD or 17" CRT monitors).
The first number is the width of the screen and the second number is the height, so 800x600 is a display 800 pixels wide and 600 pixels high.
There has been a pivotal shift in the size of displays in the last couple of years. Because of dropping prices, most users have moved to flat panel (LCD) monitors and are able to see wider content without scrolling than with traditional tube (CRT) monitors because they support higher resolutions at a more reasonable physical size and price.
Primary Resolutions
The following are the main resolution categories that you will need to worry about for the time-being:
- Big screen (1280x1024 or higher)
- Average LCD (1024x768 or higher)
- Older CRTs and LCDs (800x660 or higher)
- Mobile devices (smart phones, tablets, etc.)
1024x768 is a Good Standard
An assumed resolution of 1024x768 is a good standard for today's websites.
Most people are capable of viewing at this resolution or higher, and those running higher resolutions are more likely to operate their web browser "windowed" so that it is not the full width of their screen.
Those running at lower resolutions may have to scroll for some of the content, but most will be visible.
A Simple Demonstration
I developed the Problems with High Resolution Websites page some time ago to demonstrate the issues with scrolling high resolution websites on smaller screens.
The page has the navigation menu and other enhancements removed so that it doesn't interfere with the display, so you'll have to use your browser's back button to return to this page.
Practical Considerations
Of course, there are other practical considerations in determining an optimum display width for your site:
- Not everyone has their browser set at full screen — windowed browsers are more susceptible to problems with large resolutions. Users can change this easily, but it may be inconvenient.
- There will be users with much older equipment running much lower resolutions.
- Folks with vision problems may be using software like ZoomText® that effectively displays at lower resolutions on larger screens (typically 640x480).
Don’t Forget the Scroll Bar
Be sure to leave room for the vertical scroll bar.
- A page with a fixed size of 1024 pixels wide will require a vertical scroll bar even at full screen at a display resolution of 1024x768 once the height of the content exceeds 768 pixels.
- At that point, a horizontal scroll bar will appear to compensate for the new vertical scroll bar.
Pixels and Monitor Resolutions
Pixels are a unit of measurement — each pixel representing one dot of colour on the monitor.
Obviously, the larger the area a set number of pixels is spread to, the blurrier it will appear to the viewer, so people tend to use higher resolutions (larger numbers of pixels) as the size of the monitor increases.
Very high resolutions are uncommon because Windows doesn't yet provide an easy way to alter the size of displayed text so people tend to choose resolutions in which they can see the largest screen real estate and still read the text in dialogue boxes and their programs.
Design Challenges
Designing for Multiple Resolutions
It then follows that people are going to see your web pages on various different sizes of screens (and in varying colour depths).
It is not unusual to see a site designed for a larger screen become unnavigable when viewed at a lesser resolution.
There are several ways you can resolve this issue.
- Many sites use Javascript or other means to determine the size of the viewer's screen and adjust their content accordingly. This will fail if Javascript is not enabled.
- You can offer various options at the entry point (home page) but this doesn't help someone that lands in the middle of your site from an outside link or as a result of a search.
- A very common approach is to use tables to lay out the content of a site. The content is stretched to the width of the browser window and adjusts accordingly.
- Newer browsers allow for multiple Cascading Style Sheets to be loaded for a single page. This can allow for a simple menu system where users can select a better viewing resolution according to their needs. This requires more skill and knowledge from some viewers than they currently possess.
Each of these solutions requires you to keep in mind how your content is laid out on the page so that it doesn't wrap onto another line inappropriately.
”Special Needs“ Visitors
Keep in mind that there will always be users that have special needs such as colour perception problems and reliance on web readers for the blind.
Different Browser, Different View
You need to check your websites out on several browsers — particularly Firefox and Internet Explorer. There is nothing more annoying than trying to read text that overlays other text or content that disappears altogether.
This is something that is sometimes very difficult to grasp for those that have never viewed a site in multiple browsers, operating systems and monitor sizes.
”Where is the Internet?“
Many have never viewed the Web with anything but Internet Explorer opening in the Windows default start page.
If you show them computer with a different default browser opening on a different start page they'll ask, "Where is the Internet?"
Working with Others
Forget Absolute Layout Control
You must also understand that most web designs lack the absolute control that people take for granted in the print world.
Testing Methods
While you can certainly manually resize your browser to 800 pixels wide using an image like the ones I've used, or reset your computer's resolution to 800x600, there is an easier way.
The Web Developer Extension for Firefox, includes a "resize" option that will automatically set the browser window to 800x600 or tell you what width your browser is currently set at. You can add various other widths to test your pages.
www.RussHarvey.bc.ca/resources/pixels.html
Updated May 3, 2013