with Lorelle and Brent VanFossen

Views of a Web Page

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

Screen size of640x480Our 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

Screen Size 800x600Most 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

Screen Size 1024x768The 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

Screen Size 1280x1024While 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

Screen Size for Ipaq or Similar Long Screen Handheld Computer Handheld computers are growing in popularity for their portability as View of a web page on a handheld computerwell 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.

Screen Size for PDA or Similar Short Screen Handheld Computer 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}
      }

Estimation of the view on a handheld computer using CSS style sheet coding 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.

Results of a Font Survey of the Most Common Fonts Online by Visibone. external site 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

Text Size for Large TypeViewed 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

Text Size for Medium TypeViewed 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

Text Size for Small TypeViewed 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

View of a Printed PageUsing 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

Viewed with Lynx Internet softwareLynx 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

Viewed with backwards compatibility viewerOlder 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

View of what a search engine may see when it visits your web page 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

Deuteranope filter applied to web page
Protanope filterapplied to web page
Tritanope filter applied to web page

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 Grizzly bear, photograph by Lorelle VanFossenis 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.

Viewed with Accessability features turned on Microsoft Windows. 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.

Yellow large high contrast text against a black background.White large high contrast text against a black background.

Green large high contrast text against a black background.Black large high contrast text against a white background.

 

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.

13 Comments

  • Gunny
    Posted August 13, 2005 at 17:26 | Permalink

    i have no words to express my thanks to your effort for the web developing community. This is SIMPLY OUTSTANDING wealth of information. Almost every information covered is unique and Just noticed live comment preview (oh awesome). Somewhere in this website that you had mentioned that in the beginning another website carried similar website like yours. Can you name the website?

  • Posted August 13, 2005 at 17:46 | Permalink

    Thank you and you’re welcome.

    Our website has undergone massive changes over the more than 10 years of existence. I’m not sure what website that is “similar” to this one would be. It’s fairly unique. We have over 3000 links to external sites so you’d have to be more specific with which one you are talking about.

  • Posted December 12, 2005 at 7:26 | Permalink

    Thanks for posting so much useful information on your site, Lorelle. I come here often.

    Another accessibility emulation tool is Fangs, a Firefox extension that emulates screen reader output. The URL of its maker is too long to post here but is readily accessible by typing into Google:
    fangs firefox

    I put Fangs’ output into a plain web page which I open in the Opera browser, and have it read aloud by Opera’s free IBM speech technology add-on — for even greater verisimilitude.

  • Posted December 12, 2005 at 9:19 | Permalink

    Excellent addition. I wrote this several years ago and the technology has really developed and expanded. I need to update this. Thanks for reminding me!

    And anyone else out there have any other recommendations on ways to “view” a web page to put it through its paces on how people use web pages?

  • Posted December 13, 2005 at 5:57 | Permalink

    Two other “views” of a web page:

    1) Check out the way the page looks to people who browse with images turned off. You can use either Opera, or Firefox with the Web Developer extension (which has lots of useful options for development work).

    2) There is an MSN TV Viewer to emulate the way web pages look to the increasing number of people who browse through their TV.

  • Posted August 27, 2006 at 16:49 | Permalink

    Interesting post – Visually Impaired Views. Th’x!

  • Posted December 1, 2006 at 15:55 | Permalink

    the site i am constructing is a multi user dungeon, it is done in css, i would like the interface to look exactly the same regardless ofscreen rez, i like to use relative values e.g. the width of things, but the height cannot be so relative, in low rez the bottom of the controls disapear off screen in high rez’s there is a blank gap at the bottom, i would like to be able to say ‘hey this page should be the height of the browser no matter what rez, any element within containing elements will resize based on percentages not on absolute pixel height’ but i cannot, not without some clever javascript functions to get the pixel reslution and resise based on that

  • Posted December 1, 2006 at 23:40 | Permalink

    Online games present a serious problem for many designers. I recommend that you consult a professional designer (and pay them) for the expertise you need on this issue. Otherwise, honestly, your game will not get the respect it deserves until you get it the respect it deserves in a browser. Good luck.

  • Posted December 6, 2006 at 15:54 | Permalink

    I need some help with the Asktheseguys wordpress theme..
    I can't figure out how to get the header and ad bar at the top to go all the way across the screen.. Or better yet, how I can place an ad box in the empty space at the top right.
    I can usually figure this stuff out easily, but can't find anything in the CSS that will make it work..
    Anyone have any ideas?

  • Posted December 7, 2006 at 1:28 | Permalink

    First of all, you can get all these questions answered on the the WordPress Support Forum. I recommend you search first, as you will find tons of answers to these questions. Please do not ask individual bloggers to answer these questions for you, as it is the job of the WordPress Support Forums.

    I recommend, though, that you check out my article, Problem Solving the WordPress Header on my blog totally dedicated to WordPress and blogging at Lorelle on WordPress. That should help you with the problem you are having. Good luck.

  • Sunny
    Posted November 10, 2007 at 2:29 | Permalink

    Hi,

    I have developed a site which is perfectly viewable on 15″ monitor widescreen but when I see that website in 17″ monitor it get alligned to left rather than displaying website on complete screen ? Any clues why this ? Thanks in advance :)

  • Posted November 10, 2007 at 12:10 | Permalink

    @Sunny:

    Check the overall width of the HTML or BODY tags to see if they are set to a “flexible” width or a fixed measurement. If fixed, it will sit on the left. 100% or 90% is a “flexible” width. 800 pixels is fixed.

  • Posted November 24, 2009 at 16:57 | Permalink

    @Coder15:

    You are going to have to be more specific with your question. And I now talk about a lot of this on http://lorelle.wordpress.com/

5 Trackbacks

  • […] Yesterday I encouraged you all to read the article Fixing Browsers: Bugs and Hacks by Lorelle VanFossen. Lorelle was kind enough to share another article she wrote, Views of a Web Page. In this article, Lorelle describes in wonderful detail the testing process used when building a web page. The article discusses developing and testing for various screen sizes, handhelds, variable font sizes, print, browsers, search engines, color blindness and visual impairments. Taking Your Camera on the Road puts into practice everything that we have discussed in class about accessibility. Thank you Lorelle for sharing your amazing resource with us! […]

  • […] I’ve done a lot of work on my main site, since it is the full version of WordPress and I have control over the look and design elements, to make it as accessible and user friendly as possible. In doing so, I wrote a lot about the different things I did and lessons I learned during the process, including creating an article that takes one web page article and puts it through more than a dozen tests on what it would look like under different circumstances including on a cell phone, hand held computer, text reader, and different types of colorblindness. […]

  • […] Being “blind” doesn’t mean the “absence of sight”. The majority of people classified as “legally blind” have some form of vision. They can see light and/or see with magnification, close up, from a distance, through a pinhole in the darkness, or only around the edges, and every variation in between. There are also many methods available for accessing the Internet, including text magnification, audible reading programs, braille readers, and browsers that overwrite colors and fonts to enable better viewing. Designing a web page for accessibility means taking the simple steps that allow these other programs to function better. No different from testing your web page design on Firefox, Internet Explorer, or Safari. […]

  • […] while ago, I took on this challenge for myself. In Views of a Web Page, I picked one web page on my blog and ran it through all the different screen resolutions, sizes, […]

  • […] phone (Iphone anyone?).  But cell phone browsers don’t work the same as computer browsers.  Check out this website for more details and share it with your I.T. department. « What Should I Have On […]

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>