Seven tricks that Web users don't know

[Webnauts]

Seven tricks that Web users don't know

They may seem obvious to you, but less-technical users are frequently stymied by issues like these here: http://www.smackthemouse.com/7us-tricks.pdf

Any other not mentioned in the above article?

[JMac]

I don't know if this qualifies as web specific but knowledge of screen resolution and how to change it (does that make it "screen reVolution"?) has really come into play in the last month for me.
One client (at that time, potential client) surfed around our portfolio and had the following complaint: "we noticed all the sites you've designed are too big for the screen." That awful screen resolution demon!!! I've been designing in 1024x768, feeling that (espcecially here in Canada, where high speed and high tech are supreme) if they weren't already, users would catch up pretty quickly... that was despite reading a poll here a while back that gave 800x600 as the most common resolution. All of our clients (except this one, of course) have had 1024x768 or more.
When I explained screen resolution to her, a blank look came over her face. The concept of tinkering with the default settings on something so simple as screen resolution was horrifying to her.

JMac

[mediaman]

I have been designing for 800 x 600 as I see many of the "big boys" do, however, I always debate on placing the content area on the left (as per bbc.co.uk) or centering it (like macromedia.com).

It's amazing that such a simple thing gives me such a headache!

[Narasinha]

Originally Posted by JMac

I've been designing in 1024x768, feeling that (espcecially here in Canada, where high speed and high tech are supreme) if they weren't already, users would catch up pretty quickly... that was despite reading a poll here a while back that gave 800x600 as the most common resolution. All of our clients (except this one, of course) have had 1024x768 or more.
When I explained screen resolution to her, a blank look came over her face. The concept of tinkering with the default settings on something so simple as screen resolution was horrifying to her.

I've run into many neophyte users who don't know much at all about changing any settings on their computer. They know how to get online and browse the web. I suppose it's somewhat similar to drivers who know only how to put gas in the car. Anything beyond that and they're truly lost.

As for designing for 1024x768 or 800x600, I take the route of designing for a decent look even down to 640x480. WebTV is even a bit smaller (560x420)! I try to get the best compromise for all the resolutions I can. I even check how it looks on a PDA with the Shift+F11 option in Opera for Small Screen Rendering view.

As for the list of browsing tricks, they're things that many of us take for granted. How many people know that if you hold the shift key when you click a link (even in IE!) it opens the link in a new window? I use that all the time (though I rarely use IE).

Best Regards,
Narasinha

[igor1]

Following this discussion about screen resolution I have added a simple utility:

http://www.ij.nQ.pl/english/screen.jsp

This (just created) JSP shows present statistics of screen resolutions of web surfers visiting my website.

with regards

Igor

[JMac]

Igor-

I think I'll keep watching your stats page, if that's alright.
I've been sort of going by "people who leave must not like the site OR their resolution is such that they can't use it" - not very considerate of me, I know. One of the women who make up the Mostly Mommies group (www.mostlymommies.com ) recently found out about screen resolution, too. We're now plotting the changes needed to make it friendly right down the resolution line.

Frankly, designing in 800x600 makes me nauseous. :-) I know I need glasses!

JMac

[Narasinha]

While we're thinking about display settings, let's not forget bit depth. My stats program records display resolution and bit depth. 1024x768 and 800x600 are pretty evenly split. When it comes to bit depth 32-bit is leading, but 16-bit still accounts for over twenty percent of my visitors. The web looks quite different through 16-bit glasses! ;) I rarely change bit-depth when checking my work. Perhaps I should start.

Regards,
Narasinha

[cyberRobot]

Originally Posted by igor1

Following this discussion about screen resolution I have added a simple utility:

http://www.ij.nQ.pl/english/screen.jsp

This (just created) JSP shows present statistics of screen resolutions of web surfers visiting my website.

with regards

Igor

Just curious, do you visit the site frequently while maintaining it? Is your resolution set to 1024x768? Some times the webmaster may be the one skewing the results, making it look like the majority of the users view the web page as you do.

We also might want to take into consideration that just because I have my resolution set to 1024x768, doesn't mean I have my browser maximized. I rarely surf with the browser maximized. It all depends on how the window opens when I click my browser icon.

You also have users which surf with side panels open (Favorites, History, etc.), which takes up screen space.

I personally still design pages at 640x480, but allow them to stretch for people with higher resolutions. Not only is this good for people with 640x480 moniters, but for those who want to print out one of your web pages. Most printers only print 650px of screen space. (Not including landscape mode) The rest gets cut off.

And I don't accept the paperless society excuse. A lot of people I talk to use more paper now than they ever have because we are going paperless.

[salubritas]

The way I approach this is that I design in my normal resolution (1280 x 1024) then test the pages by sizing the browser window differently using JR Screen Ruler as a guide - http://www.spadixbd.com/freetools/jruler.htm

The problem with changing your own screen resolution is that low resolutions look awful on a large screen monitor, particularly flat screens that are made for a particular native resolution. You just can't tell how it would look on a different monitor.

[sijpie]

We also might want to take into consideration that just because I have my resolution set to 1024x768, doesn't mean I have my browser maximized. I rarely surf with the browser maximized. It all depends on how the window opens when I click my browser icon.

Exactly. I use 1200 x 1024, but my main reason for having such a big screen resolution is that I can have various windows open, and click from one to the other without having to search which is which on the task bar.

So a quick check on the size of my browser window shows it is roughly 1110 x 810, with about 1020 x 665 useable area (the rest is favourites and toolbars). If I work on any PC with more than 640 x 400 resolution I will usually have a smaller sized browser window.

So to me 800 x 600 is still a very safe and good size to design to. So what if I leave a bit of real estate unused on bigger screens. If it makes it less busy, so much the better.

[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]

Originally Posted by 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.

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.

[Webnauts]

Building accessible web sites, you do not need to worry about resolutions.

Check my web site for an example.

[Faglork]

@webnauts - below 600 pixel you are running into problems. Try viewing it with a PDA or a cell phone ... the text in the right column will get off the viewport.

Why not go all the way and use 100% liquid design?
This will work on *all* platforms ...

While I agree that liquid design may look strange on resolutions which are above a width of 1200 pixels (especially the increasing sentence length poses a problem): I never had a case where those guys used their browsers at full screen resolution. Heck, big screens are for using multiple windows, or not?

Anyway, it would be better to discuss "viewports" instead of screen resolution. Viewport means the actual browser area which is available for viewing. With a given resolution of 800x600, the viewport may be even below 760xsomething if the user likes to have sidebars activated.

And: What if your user chose to incease font size because of e.g. eye weakness? Most fixed designs will break in this case.

This just shows that fixed width designs have severe limitations. Don't forget: Fixed widths are a limitation of *print media* and should be abandoned in favor of the new possibilities of the www. And one of these possibilities is to let the user adjust the page to his current needs - be it bigger text, smaller viewport, different colors etc.

Just my 2 cents,
Alex

[Webnauts]

faglork did you really examine my web site?

[Faglork]

Yep. Why should I make something up?

I can send you a sreenshot if you want.

Alex

[Webnauts]

Originally Posted by faglork

Yep. Why should I make something up?

I can send you a sreenshot if you want.

Alex

Hey that is cool. Can you please send me a screenshot?

[Faglork]

I sent you a PM.

Alex

[Webnauts]

I just wanted to share with you the great news. The Accessibility & Usability forum is back.

And I would appreciate your support promoting accessibility and usability issues here.

[mystic]

please post the screen shot here on this thread

[Orion]

When I first started designing websites about 8 years ago we were at the crux of 14" monitors vs 15" monitors and people increasing screen resolution from 640x480 to 800x600 lol.

At that point in time some were using javaScript to identify the screen res and then directing to the correct page and / or setting the 'width' of the table for the browser OR designing sites fluid (ie. using 100% width).

After a couple years 800x600 ruled and has till about a year and a half ago, that's when I had my first customer request a site done at 1024x768.

In todays world of monitors ranging from 15" CRT at 800x600 to 21" LCD monitors running at over 1600px width trying to design any site static is generally NOT a good idea. If you do, then at least offer 800 / 1024 / 1280 pixel width options. A site designed at 800px viewed at full screen on a 1280px width monitor looks rediculous as there's more white space than site.

BTW.. 800x600 is the most common in the business world (outside of IT). Most companies still have their employees behind 15" monitors at 800x600 res. So if you're designing a site for the home user or the IT user.. 1024x768 (Canada and most of the USA too) is just fine. Also don't forget age... our aging populations prefer nice big fat text to read!

Keep smilin'

[shesarainbo]

When I design sites, I use my stats to tell me the screen size of my visitors. The size that I notice now is 1024 X 768. In the past it was always 800 X 600. With the decision made as to the "default" viewable screen size, I make the page auto resizing or constricting according to the user screen size.

Making a few of the columns auto stretch will allow the site to "come in" or "expand" and still be viewable with some sense of the original design.

I know this is all basic stuff. What I am really interested now is how to design a good site that allows images to be viewed on a phone or PDA with the composition and aesthetic quality of the original web document. I am sure there is much info on this topic somewhere else, so I will be looking for that tonight!

Bye