Thursday, February 26, 2009

The Web doesn't work like your word processor

The Web is not print, and the editor you use in CommonSpot shares some similarities with Microsoft Word, but they are not the same programs. One of the first lessons I learned as a Web designer was that the Internet is dynamic and you can never count on what you create looking the same across your users' computers.

Let's say you type this fancy new document in Word and center all of its text by throwing in a bunch of spaces or tabs. It looks great and you print 50 copies. Aside running out of toner, you can guarantee that each of those 50 copies will look exactly the same. The text will be in Times New Roman and centered at 12 points. But the Web does not work this way. What you see on your screen isn't necessarily what your users will on theirs.

Not only do you have to take into account the quirks of each of the major Web browsers, you have to realize that your users are coming to your Web pages on different devices with different screen resolutions.

Let's use a very simple example with some centered text.

Text centered in commonspot template
In the image above, I've centered text using a bunch of spaces. This how the page would appear on a computer monitor with a resolution of 1024 x 768. (The image has been sized down to fit on this blog.)

Now that same text on a monitor at 1680 x 1050:

Text centered in commonspot template 1680 x 1050

Uh, oh. It's no longer centered. The better way is to use the center button in the text editor.

Text editor with center button highlighted


Most of the pages you construct will be in the basic CommonSpot templates and you don't have to worry much about variations, although you should always test what you have made and never count on it looking the same across platforms. Sometimes a simple stretch or shrinking of a screen can make the simplest designs fall apart.

Major Web browsers also throw their own curve balls. Although each browser's support of Web standards has improved greatly over the past 15 years, each has its own quirks, especially when rendering your formatted pages.

Internet Explorer 6, which you cannot use to edit CommonSpot pages, is the absolute worst offender. The nearly eight-year-old browser has given Web developers nightmares for the past few years and is mercifully dying. The latest statistics show IE 6 only holding about 19 percent of the market. That share, like IE's use overall, continues to fall.

I strongly recommend you test your newly designed pages in the major browsers (Internet Explorer 7, Firefox 2 and 3, and Safari 3) and at different resolutions. Mac users, if you do not have Internet Explorer, try NetRenderer. That site also lists a variety of rendering services, which may or may not help you with the other browsers.

0 comments:

Post a Comment