Problems with High Resolution Websites

Viewing a High-Resolution Page at Lower Resolutions
Three Resolutions Illustrated

Display Issues are Intentional

The odd right margins on this page is intentional.

  • This page is an illustration of the principles discussed on the Designing for Multiple Screen Resolutions page
  • The 640-, 800- and 1024-pixel graphics demonstrate the difficulties with larger pages when viewed in smaller monitors and devices.

It's the Principle That's Important

The size of monitors has increased significantly since this page was designed, and few are using tube monitors, so visitors can see larger widths.

However, the principle remains the same. Those viewing a site at resolutions smaller than it was designed for will have to scroll back and forth horizontally to see content.

Don't forget those using smaller mobile devices face these challenges.

Navigation & Padding Removed

The navigation bar and most padding has been removed from this page to make the comparison easier. Please use the bread crumb navigation to navigate to the rest of the site.

Effects of Viewing a High-Resolution Page at Lower Resolutions

To illustrate the effect, this page has been designed to run at a fixed 800 width.

800 pixel line

  1. Resize your browser window so that it is the same width as the 800-pixel line shown above.
    — This won't work if you're running your browser in full-screen mode.
  2. Once your browser shows only the full width of the line in the browser window, view the following portion of Alice's Adventures in Wonderland.

Notice how you have to horizontally scroll the browser window to read the text.

The width of this section has intentionally been enlarged to force viewers to scroll horizontally in order to read it if the instructions above were followed.

“You can‘t think how glad I am to see you again, you dear old thing!” said the Duchess, as she tucked her arm affectionately into Alice’s, and they walked off together.

Alice was very glad to find her in such a pleasant temper, and thought to herself that perhaps it was only the pepper that had made her so savage when they met in the kitchen.

“When I’m a Duchess,” she said to herself, (not in a very hopeful tone though), “I won’t have any pepper in my kitchen at all. Soup does very well without—Maybe it’s always pepper that makes people hot-tempered,” she went on, very much pleased at having found out a new kind of rule, “and vinegar that makes them sour—and chamomile that makes them bitter—and—and barley-sugar and such things that make children sweet-tempered. I only wish people knew that: then they wouldn't be so stingy about it, you know—”

She had quite forgotten the Duchess by this time, and was a little startled when she heard her voice close to her ear. “You’re thinking about something, my dear, and that makes you forget to talk. I can’t tell you just now what the moral of that is, but I shall remember it in a bit.”

“Perhaps it hasn’t one,” Alice ventured to remark.

“Tut, tut, child!” said the Duchess. “Everything’s got a moral, if only you can find it.” And she squeezed herself up closer to Alice’s side as she spoke.

Alice did not much like keeping so close to her: first, because the Duchess was very ugly; and secondly, because she was exactly the right height to rest her chin upon Alice’s shoulder, and it was an uncomfortably sharp chin. However, she did not like to be rude, so she bore it as well as she could.

“The game’s going on rather better now,” she said, by way of keeping up the conversation a little.

“’Tis so,” said the Duchess: “and the moral of that is—‘Oh, ’tis love, ’tis love, that makes the world go round!’”

“Somebody said,” Alice whispered, “that it’s done by everybody minding their own business!”

“Ah, well! It means much the same thing,” said the Duchess, digging her sharp little chin into Alice’s shoulder as she added, “and the moral of that is—‘Take care of the sense, and the sounds will take care of themselves.’”

This text is taken from Chapter IX of Alice's Adventures in Wonderland and is adapted from the Project Gutenberg version.

Imagine what that would be like for a page full of information. People unable to properly view your site at the designed width would probably leave your site very quickly.

The Three Resolutions with Graphics

The three lines below are 640-, 800- and 1024-pixels wide respectively:
 

640 pixel line
640 pixel line

800 pixel line
800 pixel line

1024 pixel line
1024 pixel line
 

Notice the difference between the end of a shorter line and the next longer line.

That represents the amount of scrolling required to see content if a page is designed wider than the viewer's browser's maximum window-width.

Return to the Designing for Multiple Screen Resolutions page

Return to top

www.RussHarvey.bc.ca/resources/1024.html
Updated: August 9, 2011