My Web Design Journey

This blog is an experiment for me. I've been building sites by hand for over ten years (since 1994) and I've learned the technology as it developed. HTML was relatively easy for me to learn.

Most early websites were pretty basic. Unless you were a student at a university or had a good corporate connection, you only had access to dial-up. Images were neither as large nor as rich as those routinely found on the Web today. Sound was limited to background music using various plug-ins. Video was virtually nonexistent.

Most sites used the default Times New Roman font (determined by the browser you were using). In order to style a page, you had to use a font tag for every line on your site to redefine the font as well as its size and colour. As you can imagine, this led to some pretty horrific challenges when editing some sites.

I was never a fan of frames for layout, so I initially built my sites using tables for layout.

I began to see the benefits of Cascading Style Sheets (CSS) and I started adding style to the text on my pages. I quickly realized the advantages CSS presented: a single line in a style sheet could change the look of an entire site. No more search and replace to make a simple change to the site's overall look.

Soon sites such as css Zen Garden and Eric A. Meyer's Complexspiral Demo began to demonstrate even greater advantages for using CSS. By separating the layout from the content, you could change the entire appearance of your site without having to touch the content. Rather than simply styling the site text, you could change the layout.

However, it wasn't until I read HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer that I began to really work seriously with CSS to remove layout from the content. This not only made it significantly easier for neophytes to work on HTML (most still dreaded the experience) but allowed significant changes to a site after the client saw it.

Reworking sites was suddenly much easier (as a hand-coder, working with nested tables is a bug-bear, particularly when something goes wrong). Without having to go back to the drawing board, I could redesign an entire site to have a totally different appearance and layout. As well, the conversion from a tables-based site to a CSS-based site while retaining the content was relatively easy.

If the thought of hand-coding frightens you, quite a few programs allow you to compose the content of a site much like you use a word processing program. I place these into two classes:

• Web design programs like Adobe Go Live!, Microsoft FrontPage and Adobe DreamWeaver; or
• Content Management Systems (CMS) like Joomla! or Blogger.
  

Traditionally, most of these added their own tags and peculiarities (I call it tag soup). Microsoft FrontPage, which used the predominance of Windows and Internet Explorer to set its own standards, was probably the most incompatible. Although Netscape included a few of its own "standards" its sites could be viewed on various other operating systems and browsers without totally wrecking the intended look.

Designers began to use browser "sniffing" programs to determine the brand and version of a browser visiting a site, then providing the specialized content for that browser. As you might imagine, this created a great deal of effort and cost, something smaller businesses were unable to compete with.

When Microsoft "won" the browser wars against Netscape, most of the developers began to work around the eccentricities of Internet Explorer (IE), developing for the browser that "came in the box" for a majority of their visitors.

However, Netscape then released an open source version of the Netscape browser called the Mozilla project (Netscape 6 was developed from this Mozilla project). Then an open source project was launched that created the Mozilla browser. with thousands of individuals from all over the globe working on various aspects of this browser.

At the point this was occurring, most browsers were actually suites of software, including at least the browser and an e-mail program (Microsoft's was made an integral part of Windows -- something that has since haunted them in terms of security issues), with Netscape and Mozilla including a WYSIWYG Web publisher. People now had a free program that would design acceptable websites, albeit with a lot of unnecessary HTML code.

When the Mozilla team began to work on a light browser (Firefox) it changed two important things:

• it produced an excellent free browser that wasn't tied to any operating system (Windows); and
• it followed the standards that everyone had agreed upon, but most had ignored.
  

Many web developers were tired of having to provide work-arounds and fixes for each separate version of Internet Explorer (even the MacIntosh version was different). Many began to build with Firefox in mind, some continuing to "fix" older version of IE, but many now ignoring non-compliant code.

Interestingly, when IE7 was released, it was much closer to compliance than any prior version of IE. This is likely because the web developers had abandoned catering to IE eccentricities.

More recent versions of Go Live!, DreamWeaver8 and Blogger have made serious strides in producing clean and compliant code without the security risks sometimes associated with CMSs. Even FrontPage 2007 was working on cleaning up its output.