Webdesign

My Approach to Webdesign

Currently I use XHTML, CSS and a touch of Javascript to build websites. These three tools give me the ability to build versatile, highly accessible web pages that will work on practically any system for any user. They have built-in search engine optimization and are extremely compact and quick to load.

For now I don't use programming or databases in the sites I design, but that could change. These are great technologies for sites that need dynamically generated pages, but I mostly focus on robust static pages.

Flash is really cool but can easily lead to a site that is hard to find, use and update. I don't use Flash for these reasons, but sometimes it can be very worthwhile. If you decide you absolutely must use Flash, use it sparingly as a decorative effect. Avoid placing all of your content into a completely Flash-based page.

My Webdesign Experience

Websites I designed, built and currently maintain:

Metalbillies

Savage Patty

Lafayette Flea Market

Dragonfly Coffee, Tea & Spices

Older sites which I've handed over to others:

Big Mama Fitzgerald

Original Penny Lane Website

Griffinshop.com

Webdesign Resources

Getting Started

One day a few years ago I decided that I needed to learn how to make a website. My ISP included hosting in their service and I wanted to use it for something. I began to look around online for help with learning HTML. One site I found was very useful and usable: Sizzling HTML Jalfrezi.

After a while I discovered the idea of web standards. Web standards take the unpredictability out of website viewing. No more "Site Best Viewed with..." statements. I wanted a site that anyone, with any browser, could successfully navigate and read. W3C Tutorials became my primary resource for learning what was necessary for making my site work for everybody.

Doctype Declaration

Every web page should have a correct doctype declaration. This tells the browser what version of HTML is used for the site. Knowing the HTML version lets the browser display the information exactly as intended by the designer. Here's a useful article on doctype declaration from A List Apart. One thing this article doesn't mention is that how your server sends pages will impact what doctype you can use. Your server may send pages as text/html, application/xhtml+xml or other types, and this has to be compatible with the doctype used. Here is a page on doctype/media type compatibility.

Advanced CSS Techniques

Not long after learning the basics of making web pages I discovered frames. Frames let me do some cool things like have a navigation menu that always stayed at the top while the rest of the page scrolled. Unfortunately they also caused some problems and I eventually found a better method for getting the desired result: CSS frames from 465 Berea Street. This technique gave me the function I wanted while also being valid and accessable.

If you are wondering why I use CSS for layout while most websites still rely on tables there's a good explanation on www.hotdesign.com.

An advanced technique for giving users control over the look of a website can be found at Invasion of the Body Switchers on the site A List Apart. I used it for a while on this site, but I wanted to keep things simple so I am back to one style sheet and minimal JavaScript.

Speaking of JavaScript, I do use a little in this site. The only thing it does is cause certain links to open in a new window. Generally, the links that open in a new window are links to other sites. This can cause problems for some users so switching off JavaScript will disable the "external" behavior. To find out how the "new window" function is added see this article, New Window Links in a Standards-Compliant World at Sitepoint.

Accessibility

Most recently I have begun to include accessibility features to this site. Complete information can be found on the Accessibility page. The idea is to make the information in this site available to everyone regardless of their preferred mode of accessing the internet. Users with text browsers, readers, braille devices and mobile devices can access the information here with a minimum of effort.

Tools

Below are listed some of the online tools I use for ensuring the quality of my designs.

Validators

HTML validators examine your code to make sure there are no mistakes that could make your site malfunction in browsers.

CSS validators check your style sheets.

Webdesign © 2007 Patrick G. Tracy|

Valid XHTML 1.0 Strict | Valid CSS!