Web pages aren’t viewed by everyone equally. We’ve taken one of our web pages and passed it through some tests to resize, reshape, mash, smash, shrink, expand, and mess with our design. If you are going to experiment with CSS, or even if you are just designing a simple Theme or web page layout, you have to put your web pages through extensive testing to make sure your design works across all the different browsers, and that means any equipment used to view, read, see, or hear your web pages.

Below are the graphic results of what different computerized media can do to your web page. The graphics aren’t represented as 100% original screen size but as representations of what it should look like. We took a great deal of care to make sure our pages are as accessible as possible, so the glaring errors and problems your page may or may not have might not be shown here. This is to encourage you to do these tests yourself to see how your page would look under the various conditions web pages are viewed so your design will work for everyone.

To see how you would view the original page we tested, check out our article on Dot Animal Syndrome for nature photography.

Screen Sizes

The view you see on your computer monitor is based upon the size of the screen, the screen resolution, and the depth of color. The following tests are done to compare actual screen sizes and not compare screen resolution or color depth. In the next section we look at font sizes which can relate to screen resolution quality. We’ve done our best to take one web page and set it to be viewed at different screen sizes, emulating the most popular screen sizes used on desktop computers, laptops, and handheld computers, which compare with future cell phone access to web pages.

Screen Size 640×480

Our web page viewed at a screen size of 640×480. At one time this was the most common screen size used by most computer users. As you can see, the content around the photograph of the bear is wedged between the left column content and the photograph. We only see the top 5-8cm of the web page, requiring scrolling to move down into the content beyond the header and the photograph to the right. The text is readable and not crowded around the graphics.

Screen Size 800×600

Most web pages are designed to be accommodated by the average screen size in use today which is 800×600, though this number is dropping as more people invest in better quality and higher resolution and larger monitors. As of 2003, about 45% of all Internet users had 800×600 sized screens. The page looks fine at this page size, readable, uncrowded, and well laid out. There is still a lot of text that needs to be scrolled down through, but there is enough of the page showing to invite the viewer to scroll down.

Screen Size 1024×768

The larger screen size of 1024×768 is gaining popularity, representing about 51% of users (2003), and expected to grow as people invest in higher resolution and larger monitors. We can see more of the content and the width of the page is now wider. As the screen size widens, designers may have to take into consideration their “narrow” view of forcing web pages into widths to accommodate the 800×600 average, since there will be so much more screen real estate to cover. Page layout designs like ours are based upon a combination of absolute and relative values so the page expands to fill the screen unlike those designed only with absolute column and page width values.

Screen Size 1280×1024

While still in the minority, the use of 1280×1024 screen sizes are growing as people improve their monitors and computer hardware. The width of the page is greatly increased and we see more of the document. The photograph is almost lost in the majority of text now visible on the screen. With the extra wide space, designers must consider how to lay out their pages to accommodate the extra width. Web designers who force their page to be sized to accommodate the smaller screen sizes will suddenly have a lot of empty space to the left and right of their designed page. Instead of the traditional portrait (top to bottom) content flow, some designers may turn to landscape layouts (side to side) creating several columns to fill the width of the screen. A wider forced screen layout would cause the viewer of the same page on a smaller screen to scroll to the left and right to see the entire page unless the page was coded with relative column widths. The latest version of Cascading Style Sheet (CSS) codes should include methods to take into account different screen sizes with alternative style sheets, further enhancing and complicating the design process.

Also notice how the font sizes have shrunk with these ever-widening screen views. As the screen resolution changes, so does the font size. Forcing a specific font size won’t change this. It is based on pixel size (dots-per-inch – dpi) and the higher the screen resolution, the smaller the font, unless it is modified by the user. By designing a page with a forced font, you take away the rights of those using higher resolution screens to adjust the font size of your page to allow them to read it.

Screen Size for Ipaq, PDA or Similar Handheld Computer

Handheld computers are growing in popularity for their portability as well as capability. Many of them are now incorporating cell phone and wireless technology, become one device that does everything for the mobile computer user.

The screens come in two average sizes currently, a short square shape and a longer rectangular shape. Many handheld computers (PDAs) feature a retractable base which opens to reveal a writing pad or more of the screen. Some handheld computer software systems recognize when the bottom section is open or closed, resizing the content on the screen accordingly. Some allow for quick switching from horizontal to vertical viewing, again changing the perspective of the viewed page.

In general, most web pages can be viewed by the software typically provided by the PDA manufacturer. Working with Cascading Style Sheets (CSS), the designer can control how their page will look when viewed on a handheld computer. This technology is still new, but expect it to grow quickly. We’ve embedded such CSS code within our style sheet which looks like this:

@media handheld {
  body  { background: center center; background-position: 45% 55%}
   #sidebar { display:none}
   #content { margin: 0}
   #footer {text-align:left}
   .ad  { display:none}
      }

These instructions tell the browser that if the page is being read by a handheld computer, position the page within the center of the “screen”, do not display the sidebar menu, reduce the content menu margin to zero (to fill the small screen), moves our footer code from the right to the left so the user might not have to scroll from left to right to see it, and not to display any advertising, which slows the loading of the page. The result should look like the example to your right, depending upon the screen size and software involved.

Variable Font Sizes for Internet Browsers

Font size on a web page is controlled by three things:

• The designer’s embedded font code
• The setting of the Internet browser for font size
• The monitor’s screen resolution quality

Designers work hard to make their pages look as good as possible, and one of the choices they face comes with the fonts they choose. While there are hundreds of thousands of fonts available for printed material, a font used within a web page design typically must be on the user’s computer already. This means there are only a limited number fonts a designer has to choose from in order to be viewed by the most amount of users. The one thing designers can control is the size of the font. Thinking of web pages as another form of desktop publishing, many novice designers set the fonts with absolute values such as point sizes to force the font to be the same size no matter what. Well, the no matter what is limited to their machine, screen size and screen resolution and Internet browser’s default font size. Not mine.

Built into Microsoft Internet Explorer and other Internet browsers is the ability to view a page’s fonts at different sizes. Typically they are named x-small, small, medium, large, and x-large or smaller, small, medium, large, and larger. In Internet Explorer, you can change the web page font size by accessing the menu for VIEW, TEXT SIZE and choosing the size. If a page has been designed with relative or variable font sizes in mind, the font size will reset itself. If the fonts have been hard-coded, embedded into the document as absolute values, then the font size will not change. When a designer uses absolute value references for fonts, they are taking away the right of the Internet user to choose the font size that helps them read the page in comfort. Internet browsing software designed for accessibility, for disabled users, can have difficulty working around absolute font values, or the results might not be “pretty”. When possible, use relative sizes when choosing fonts to make your page accessible for everyone.

This should mean that a 12 point Times Roman should look the same on everyone’s machine. It doesn’t. The other part of the problem is screen resolution. The higher quality the screen resolution, the smaller the font will appear on the screen. As you saw in the above examples on screen sizes, more and more people are using larger screens and most of them are taking advantage of the higher quality resolutions. This means that your 12 point font viewed with an 800×600 screen will look like a 10 point font or possibly smaller when viewed with a 1280×1024 size screen. Let’s look at some examples.

Text Size for Large Type

Viewed at a screen size of 800×600 with the font set at the largest font size, the font is large and easy to read, and the content still flows well around the page. In a life-size view of this page, the font size would be about 14-18 points, even though the web page’s default base font is set at 11 points. This is approximately how a page would be viewed at about 8 or 16 bit color resolution, fairly low (640×480 to 600×800).

Text Size for Medium Type

Viewed at a screen size of 800×600 with the font set at medium, the page is set at what we designed the base font size to be, about 11 points. It is readable, and the graphics and content flows through the page. This is approximately how a page would be viewed at a fairly medium resolution, about 24-32 bits (800×600).

Text Size for Small Type

Viewed at a screen size of 800×600 with the font set at smallest, the text is still readable, though it takes some work. The font size is about 6-8 points, even though it was set at 11 points. Web designers who use absolute fonts get a web page view similar to this when viewed at high resolutions (32 – 128 bit and greater) on large monitors with screen sizes of 1024×768 and higher. The font may be set at 10 or 12 point, but they look like 6-8 point when viewed at the higher resolutions.

View of a Printed Page

Using Cascading Style Sheets (CSS) we encoded our web page to be printed without the background graphic in the header and the sidebar content. The style code also sets a print margin and does not print the advertising. It looks like this:

@media print {
    BODY  {background:white; font-size: 10pt; margin: 0}
  #sidebar  { display:none; }
  #bottom  { display: none}
  #header  { height: 30px}
  #header p  { font-size: 120% }
  #content  { margin-left: 0; float: none; width: auto; }
  #content a:link:after, #content a:visited:after {
  content: " ("attr(href) ") ";
  font-size: 90%;
  }
  #content a[href="/"]:after  {
  content: "(http://www.cameraontheroad.com" attr(href) ") ";
  }
  .ad  { display:none}
  h1, h2, h3, h4, h5, h6  {page-break-after: avoid;
      page-break-inside: avoid; }
  blockquote, table,
  pre  { page-break-inside:avoid; }
  ul, ol, dl  { page-break-before: avoid; }
}

To see how your own web page would look without print, in Microsft Internet Explorer from the menu choose FILE, PRINT PREVIEW.

Viewed with Different Internet Browsing Software

Different Internet browsing software views web pages differently. Some interpret the HTML and CSS codes differently. Others have trouble with Javascripts and layers. Older software didn’t know what CSS was so it will just ignore it. Other browser software, like Lynx, strips all the pretty out of page and boils it down to its barest content. Let’s look at some examples.

Viewed with Lynx Internet Software

Lynx Internet Browser Software is designed for the disabled and for those tired of the graphic heavy Internet who just want to get to the content. It is commonly used by the academic community and hard core computer users. Lynx ignores all graphics code and layout style and displays the content of a page, stripped of all its prettiness. It features an 80 column page width and displays the content in Courier font. It does some interesting things, though. If your page features meta tags that specify your main home page, table of contents, email address and copyright information, it will display this as content. All links wrapped around graphics will display as the ALT tag.

By checking to see if your page can be viewed with Lynx, you can check the accessability of your page to the disabled, and really put your HTML to the test. Does it pass? [[Note: Due to abuse, you have to save an empty HTML file called delorie.htm to your site's root folder in order for the Lynx viewer to work. It's like giving "permission" to use their tools.]] There is another technique by CRSchmidt.net’s Lynx Viewer. Just type in the name of your site after the link and it will show your site as if it were viewed with Lynx, stripping away all styles. To view our site, type http://crschmidt.net/services/lynx/www.cameraontheroad.com and the Lynx view will open in a new window so you can compare.

Backwards Compatibility

Older Internet browsers don’t recognize new code standards such as Cascading Style Sheets (CSS). What they don’t “see” they ignore. The page to the right was created using the Backwards Browser Compatibility test. It tests for Microsoft Internet Explorer version 5.0 and older. Since it doesn’t recognize the CSS style sheet, it just shows the simplest of page layouts. Is it still viewable? Can you read it and see the pictures associated with text?

This isn’t just a matter of backwards compatibility with older browsers. Can your web page be seen by any browser, with or without its stylesheet? Strip it down to its barest essence and what remains.

We did this with our own web pages to put them through the naked or stylesheet-less test. In this example we show one of our web pages with no stylesheet. That’s right. No CSS. Only the default look of the tags by your browser. By default, headings are larger than the text but photographs and graphics just sit there, with no text wrapping around them. Now, view the same page with the stylesheet turned on. Totally different.

If your web page design can pass this very strict test and still be readable, then you are on to a good layout and design.

What a Search Engine Sees

Want to know what the search engine sees when it visits your page? Delorie.com created a free online testing program to strip your page of the pretty design elements and view it as a search engine robot or spider would.

This online tests provides several examples of how a search engine robot may gather information. In the first example, it from all the headers such as H1, H2, H3 and so on. In the last example, it reveals the content of your page, all titles, headers, ALT tags, and TITLE tags clumped together.

Designing your web page for search engines, if you understand that this is the only information a search engine robot or spider is interested in, make sure your page design allows them to get to this information as quickly as possible. Move this content up to the top when possible as a search engine robot or spider typically views only the first 25-50% of a page.

Checking for Color Blindness and Visually Impaired

Color blindness is much more common than people realize. Vischeck.com’s Color Blindness free online tester, Color Blind Color Tests and Example and Q42 Color Blind Tests will test your web page colors to see how they would be viewed by someone who is color blind. We ran our test page through tests for the three more common types of color blindness, Deuteranope, Protanopia, and Tritanope. As the results of the color shifts might be difficult to view on your screen, we’ve provided you our original photograph of the bear seen in the web pages to the left of this paragraph to help you see the differences.

Deuteranope (Deuteranopia) affects about 4.9% of the male population. It is the absence of sensitivity to green colors and influences how people view reds and greens. The bear and the graphic text has an almost black and white sepia look with the red tones gone. Notice that the blue letters in the graphic text and the head line for “The Nature of Composition” and the title of the article underneath are almost black.

Protanope (Protanopia) affects about 1 percent of the male population. It is the absence of sensitivity to red and influences how people see colors at the red end of the spectrum, specifically reds and greens. While this sample appears close to the original, there is a hint of red missing and the blue is darker than the original.

Tritanope (Tritanopia) is very rare and affects approximately 0.001 percent of the male population. It is the absence of sensitivity to blue and influences how people see color along the blue scale, especially blue and yellow colors. All blue within the graphics and photograph of the bear are gone, leaving a green and purple tint, and the blue used for the headlines and titles are now black.

Visually Impaired Views

Not all visually impaired people are 100% blind. Many suffer from various degrees of sight impairment including blurred vision, and partial or blocked vision. Microsoft Windows and other operating systems come with accessibility features included. Add-on software, like speech recognition and speech reading and control, are widely available to disabled users, too. Each “see” a web page differently. Part of designing and validating your web pages for accessibility means understanding how those with sight problems can view your web pages.

In an amazing step into stupidity, according to the author of Blindness-Related Resources on the Web and Beyond, he highlights web pages about blindness and for the blind that are not even close to accessible. One of them is the Website for the Helen Keller foundation. These sites serve a valuable lesson in how to design for (and not!) web page accessibility.

Crecon’s Page View Tester for the Visually Impaired is a poorly designed online tool but it does the job in portraying what your web page would look like using simple accessibility features which enlarge the text to sizes usually bigger than the typical Internet browser.

You can try this yourself through Microsoft Windows. They have an Accessibility feature built into the last few versions of their operating system. Accessibility features in Windows can be turned on through the CONTROL PANEL, ACCESSIBILITY or ACCESSIBILITY OPTIONS icon. Look for HIGH CONTRAST and set the settings for any of the different high contrast settings for the visually impaired. Below you will see several different examples of our test web page viewed at high contrast using the large fonts in black or white backgrounds and different font colors. Different forms of visual impairment see better when viewing different colored letters against a black background. People with dyslexia view dark letters against a blue-tone background better than a white background. The software completely ignores the designer’s font sizes and colors when possible. The more a designer uses absolute coding for fonts, the less likely a visually impaired user will be able to view the site using these tools.

As the text is so large in these examples below, you are viewing the entire page as seen at full width on our monitor set at 1024×768, including the Internet Explorer menu and title bar, and the Start and Taskbar in the bottom. We mention this because if this was viewed on a monitor with the screen setting at 800×600, you would see even less of the web page content with the smaller screen size.

Want More?

As we find more ways to view web pages, we will post our findings here. If you know of a way to view a web page and would like to let us know so we can post the web page view here, please leave a comment below and we’ll get back to you as soon as we’re back online – ah, the joys of the traveling life.