Seven tricks that Web users don't know

[joliettech]

As far as screen resolution is concerned, I find the best way to test your layout is to click File>Print Preview, as cyberRobot wrote. If your visitors are printing your pages (and if your providing the content they’re looking for, they’re printing your pages). If any of the content is cut off, it’s too wide. Approximately 680 pixels is the maximum for printing an 8-1/2 x 11 portrait page with 1” margins (which are the default settings for most printers, of course you can change these settings to print wider pages, good luck getting the average surfer to do that).

I use a 21” monitor with the resolution set at 1600 x 1200. It’s typical to have 8 to 10 or more windows open at one time (6 to 8 of them browser windows). None of the windows are full screen, the only program I use at full screen is AutoCAD. The browser windows are approx. 800 or 900 pixels wide, so it is easy to move from one to the next.

[ldyguique]

Print size is controlled by the setting in View / Size -- and then the larger/smaller, etc. This also controls the printsize in Outlook Express. Internet Explorer default settings will frequently override other browsers, especially ones based on the IE engine. IE is still the vast majority choice for browsers. And, while many people do not know how to change display settings, some of them do know how to make "some" settigs changes through File/Edit/View, etc.

Personally, I rarely dink around with the default screen resolution; however, I do edit my Appearance in display settings -- working with a combination of "larger" there and then, finetuning it through View/Size.

People with vision handicaps frequently are aided by a tech support person to find Internet Options / Accessibility and check "ignore font sizes specified." I sometimes use that for sites that keep fonts unbelievablly tiny (what would appear to be about 8pt type if they were in printed form AND are not affected by View/Size). Unfortunately, this blows out other sites and renders them unreadable as text overlaps, etc. I know how to turn off/turn on these settings; most don't. Once set, always set.

Readability is therefore controlled by a combination of Display properties: screen resolution and appearance choices, plus by View/Size AND Accessibility options. Printing is controlled by View/Size for browser settings, whether it's printing a website OR email.

[Niko Holopainen]

I use 1600*1200 for personal use and never have the browser in full size.

But back to the issue, for any testing/observation purposes the first thing to do is to filter out company personnel and similar people that would visit the site daily as to keep the ratings even remotely truthful.

Yours truly as always,

[AChernyak]

I use a very odd screen resolution configuration (1400 x 1050). Nonetheless, I am used to it. However, finding desktop wallpaper is always a pain =).

[Niko Holopainen]

Don't worry, most midprice (~2.000€) laptops seem to come in 1400*1050) I know mine is and most of my friend's so I'm sure they'll get more popular ;)

[splinter]

One way to get around the printing problem is to use CSS. You can create Print style sheets that automatically get used when the person clicks "Print". This means you can make things dissappear, other things appear, resize things, change colours etc. etc. and still have your normal page.

It also means no seperate print pages.

[Webnauts]

One way to get around the printing problem is to use CSS. You can create Print style sheets that automatically get used when the person clicks "Print". This means you can make things dissappear, other things appear, resize things, change colours etc. etc. and still have your normal page.

It also means no seperate print pages.

Can you tell us the how it works and the code?

[erica]

It's similar to the way you include a single css file in multiple documents with two small differences - first, you use media=print to specify that it is for print media, second you use a link to a file to print instead of the html. For example,

<link rel="alternate" media="print" href="printversion.doc" />

[cthathem]

SelfHTML (de) states, that Netscape 6.0 would have problems interpreting media="print". Maybe you could try something like this, but I'm not sure if that would work on all browsers:

@media print {    
  /* all font colors set to black */
  body, body * { color:#000000; }

  /* hiding all images */
  img { visibility:hidden; }
}

These style settings could be defined in your css file. In the above example the images are hidden (img visibility:hidden;) and the body tag and all its child elements are set to black font color.

Georg

[chiron]

The stats from the /.pl site were nice, but a bit limited in number and perhaps country-skewed, plus I find percentages easier to think of.

So here goes my info, some stats from a few million hits over past 30 days, representative of typical, global visitors to primarily F500 domains. I round here a bit so if it all doesn't add quite to 100%, well, that's why for you Rain Man freaks out there.

Someone mentioned bits, so here goes on those too, though wow, I have totally not cared about those since like 1995. Web-safe? What's that? ;P

32 bits: 67%
16 bits: 25%
24 bits: 6.3%
8 bits: 1.5%
----------------
1024x786: 57%
800x600: 23%
1280x1024: 8.5%
1152x864: 3%
1400x1050: 1.7%
1600x1200: 1.4%

Nothing else over about 1%, so if not above, it's not worth concerning yourselves over much. You who discussed it earlier may want to note that 640x480... simply not there - even on other sites based in non-US-EU countries that could be assumed to be a few years back on video cards and monitors and such, I seldom see it creep over 3% in stats.

This traffic data is mostly Fortune 500, so adjust mentally in consideration for your likely audience... but these numbers are roughly similar on many smaller (1M/yr or fewer sessions/page-hits) sites I work with. Depending on audience and which global geographies are hitting most, I sometimes see 1024x768 as up to 60-75% and 800x600 another 15-25% in USA-middle-wage-target market, but again, very few worldwide running 640x480 these days, in my experience.

Based on that I recommend, if anybody cares what I think, to build tables in CSS or HTML that either 1) scale (table width as a percentage), or that 2) peak at about 730 pixels wide.

Why 730? Given 800 pixels on the screen, you have to allow for browser borders to avoid horizontal scroll; reason 2 is that most default printers on default settings dish out 730-pixel fixed width tables perfectly (no cut-off text and no need for CSS on-print alternatives).

Though several people have noted in this thread that the CSS alternative is worth knowing about, I have found it frustrating given browser compliance to a pt/em/px setting can throw even your second CSS document off sometimes.