Friday, October 19, 2007

Check your web in varied browsers

OK, so you're an avid [Firefox or Internet Explorer or Opera or Safari] browser fan. You checked your web pages and they look fine. In your browser. That's not enough.

You need to know if your web pages look good and don't "break" in other popular browsers. Some services are free, some are paid. Check browsers such as:

  • Firefox 2.0
  • Internet Explorer 6
  • Internet Explorer 7
  • Opera (varied versions)
  • Safari (a couple of versions). iPhones use Safari, by the way.

Not only that, you need to check different operating systems, because some browser versions can and do differ on different OSs. Consider:

  • Mac OSX
  • Linux (which has a lot of flavors
  • Windows

You can pay one-time or monthly fees to use a commercial service that checks a web page against varied browsers or you can go the free route.

Browsershots is a free online service I like. It uses computers of volunteers around the world to make snapshots of a web page in browser versions you select. After a wait (you can hang on or just return to that web page), you get a collection of thumbnail images. Click on one and get a larger view.

It's very easy to see if everything looks OK or if there's a problem with that browser displaying your web page as you intended. The image below represents about 35 minutes worth of waiting -- a price of the price.

As you can see from the image, one snapshot appears at only half-screen vertically. That's because the volunteer forgot to maximize the browser. When you run into that, this service even has an instant "problem" report for each browser snapshot.

Tuesday, October 16, 2007

Newsletters: Size matters

Among the many factors you need to think about when designing or redesigning a church newsletter is it's physical size. Why? Size affects:

  • Ease of handling the printed newsletter.
  • Column width and layout options.
  • Ease of online reading.

All those are usability factors that you need to consider. Remember, the key is not what you think looks nice or what you've "always done", but rather how easily and quickly the many different readers of your newsletter can scan and read the content.

Also remember that online readers (and probably many readers of printed editions) scan text rather than reading it. The newsletter layout and design can help or hurt that scanning.

When you offer your newsletter as an electronic file attached to email or online, you have some added responsibilities:

  • Make size readable. Make sure you use a size that does not exceed screen width. Make sure that if a visitor resizes a newsletter to their screen width, they can still read it easily. Reduced size fonts can become "squint print" in a hurry.
  • Don't design for hi-res. Design for a screen resolution of 800 x 600 pixels, but make sure the newsletter looks good at 1280 x 720 pixels. Why not design for hi-resolution and widescreen? Many people don't maximize browsers when they have widescreen monitors. Check your web site stats to see what screen resolution is most common, but remember that it needs to look great at 800 x 600 pixels (or the Mac equivalent).
  • Colors. Keep color saturation and contrast in mind. Many LCD monitors "wash out" contrast and over-saturate colors. Window scrollbars may be very hard to see, as will light pastels or grays.
  • No snake columns. Make sure readers don't have to scroll down and then up again on the same page to read your online or electronic file newsletter. This most often happens if you use "newspaper" columns that snake from bottom to top across multiple columns. Columns are fine, but avoid the snaking column. Do that by keeping stories flowing vertically; no column changes. If you have two columns, story text in each column flows only downward.
  • Avoid folds. Whenever possible, don't use a folded paper format. A newsletter that has vertical folds results in a newsletter that exceeds the screen width. It also often means columns that snake across the fold. This format is quite hard to read online or in an electronic file format. Don't force your readers to print the newsletter to be able to scan and read it easily. Give up the old print mentality. Think of online and electronic file readers, while keeping the format attractive in print as well.