One of the great things about the Internet is the often low "barrier to entry." While the once level playing field of Cyberspace is becoming evermore competitive, it is still a place where you can jump in and learn the ropes as you go along. Unfortunately, this is often quite noticeable in the abysmal design of many web sites; especially those that have been quickly slapped together by neophytes untrained in the visual arts. Fortunately, help is easy to come by.
This brief series will not delve into the complexities of HTML or provide shortcuts for using your favorite editor. Instead, I will show you some of the most important techniques that you can use to ensure your web pages portray as consistent an appearance as possible to the widest range of viewers. In other words, I'll help you to make web pages that everyone will see the same way as you do.
Freud and Fashion
There are basically two main issues for us to consider when we examine the design of our site: the designer's ego, and the viewer's system. I mention the ego of the designer first, as it is (or should be) the easiest problem to overcome.
You see, many times a designer will make the mistake of building a "technology showcase." This type of site typically features a slow-loading Flash intro, complex and unreliable DHTML navigational systems, and endless JavaScript bells and whistles that will do little to effectively communicate the site's message or to enhance the user's experience. Often times this is an attempt by amateurs who lack the technical skill and design knowledge needed to create an attractive and functional site that is accessible to the broadest audience possible.
This is a shame since "gee whiz" designs slow down load times, increase bandwidth costs, and needlessly limit sales by excluding potential customers who are unable to view the site. This isn't really a problem if building web sites is your hobby, but if your business depends on it, then your attitudes need to change. "Keep it Simple" is the name of the game; and while favoring speed over style may not win you any art awards, it will definitely contribute to having a more robust and profitable site.
While dealing with your natural desire to "make the coolest site ever" can be challenging, we can easily mitigate some of the anomalous results produced by varying systems and configurations - but only if you understand why the problem exists...
Apples and Oranges
One of the biggest hazards to being a newbie is that sometimes you just don't know any better. With that in mind, let me explain something: different people have different computers.
Now I'm not talking about some folks having a Compaq and others having a Dell, I'm talking about "PCs" and "Macs" (among others), each offering different feature sets, including varying screen resolutions, color depths, and native fonts. These issues are compounded by the possibility of user intervention, such as setting the standard display size of screen fonts to a larger or smaller size to improve readability, or adjusting the normal color depth from millions of colors down to 256 colors in an effort to improve the performance of an older graphics card.
Add to this mix the further problem that different browsers display web pages in different ways. This isn't just a "Netscape vs. MSIE" issue, as different versions of these browsers each have their own display peculiarities. Need more to think about? How about AOL, Opera, WebTV, Lynx, and a host of other "non-standard" browsers, each with their own demands and limitations. If you are unaware of or do not take these real-world systemic differences into consideration, you will not be able to effectively design a "decent" web site.
A Tough Lesson to Learn
Let me tell you a little story about how I learned this lesson: it was 1994, and I was building my first "commercial" site, a showcase for a Wedding service. I spent two weeks constructing this "pinnacle of perfection," hard-coding a masterpiece that looked exquisite on my Windows 3.1 / MSIE 2.0 equipped Presario with an 800x600 24-bit display. On the day I finished and uploaded the site to the proud owner's new domain, I went by his office (and handing him a hefty invoice) proudly proclaimed: "It's done - check it out!"
words cannot explain the feeling I had as he typed in his new URL, and the "masterpiece" that looked SO good on MY computer pathetically materialized on HIS machine, which was running Netscape 3 at 640x480 and only 256 colors. The images looked blotchy, the text was formatted poorly, and the pages looked as if a 3-year-old had made them... I wanted to cry.
Fortunately, I was able to save the account with a bit of fast talking and a rapid turnaround time on his "fixed" site, but the hard lessons of that day left an indelible mark on me, and the words "TEST, TEST AND THEN TEST AGAIN!" etched firmly in my mind.
In the next installment, we'll look at the basic ways that you should always test your site, and since testing can only reveal problems, we'll also look at ways of avoiding them in the first place. Stay tuned…
