About This Site

This site contains:

To give you an idea of who I am as a web developer, I wanted to share my thoughts about the design of this site.

Goals

Code in XHTML Strict

I am a bit of a code nazi and prefer the rigor of XHTML to forgiving HTML. (Who doesn't close a p tag?) But until now I have always coded in Transitional XHTML, so I could use a deprecated tag on occasion. To raise my game, I decided to code this site in XHTML Strict. I am interested in AJAX, RSS and efficient content management, so I wanted this site ready to transition into XML technologies as I grow as a developer.

Only CSS for Layout

I try to adhere to as many accessibility standards as possible, so I wanted to design this site's page layout without tables or frames. To achieve nearly the same look in as many browsers as I could test, I decided on a liquid, centered layout. I had started with a fixed width for the content area, but I discovered very unexpected behavior from different browsers when the window was crushed down to very small sizes (e.g., less than 600 x 800). Some browsers override the width specified in the CSS for a content item that is larger than the content div, for instance, while others just allow that wide content item to go beyond the content area. The layout works best for the range of most common screen sizes: 600 x 800 pixels to 1280 x 1024 pixels. Users who have huge widescreen displays and maximize their browser windows may see background below the footer (but it isn't too ugly). To suit the folks with tiny displays, I am not making any objects in the content area wider than 600 pixels.

Persistent Nav

I am not a usability expert, but I know web sites with consistent navigation selections on every page of the site provide a better user experience.

Change the Nav by Changing One File

I wanted this site to be easy to maintain. To support the persistent nav goal, I am using server side includes (SSI) to pull the same header, footer and navigation code into every page. This allows me to add a link to the footer of every page on the site, for example, by modifying only one file.

Semi-Transparent PNGs and Internet Explorer 6

I love that PNGs allow alpha channel transparency, and I had fun layering them in the graphics on this site. (FYI: The transparency in GIFs is either fully on or off, but a PNG can display any level of translucence in the alpha channel, which may contain flat color like a GIF or photographic data like a JPG.) I chose to make all of my web graphics PNGs, so I could make more complex visual effects using alpha channel transparency. The problem with using PNGs is Internet Explorer 6 does not support alpha channel transparency natively. But Microsoft offers a proprietary CSS value and function that can be applied to a semi-transparent PNG to make IE6 display the alpha channel transparency correctly. Although web browsers are supposed to ignore CSS they don't understand, I put the proprietary Microsoft code in a separate style sheet served only to IE6 users to prevent triggering quirks mode and unexpected results in other browsers.

The Future

I am learning PHP and mySQL, because I suspect it will be easier to manage all of my image content with a database and I can code many fewer pages of galleries using PHP.

I would like to add a shopping cart (that I build myself so I understand it) and integrate PayPal to receive payments for artwork and photos.

Back to Top