What’s New

My Shiny New Web Site

Or: A Crash Course in Modern Web Development

ENTRY DATE: June 22, 2009

Back in 2003 I designed and produced a pair of personal web sites: one for my artwork and another showing my design work. I maintained both of them for a couple of years, then refreshed my art site in 2005 while my design site languished, becoming one of those places showing a perpetual “under construction, come back soon” notice. I built all of these sites in the now hopelessly outdated table-style, slice-and-dice method.

Fast forward to 2009. While my art site is old, it’s easy to maintain, still works pretty well visually and the browsers still like it (for the most part). My design site, on the other hand, just needed to be replaced. Time to start from scratch. Doing so would allow me to breath some life into the design while learning XHTML and CSS, the (not-so-newfangled) way of separating content from presentation.

So after a couple months of asset gathering, book reading, typing and tweaking, I have a working web site to show the world. The learning process has been interesting and pretty fun and — from what I can remember — a lot less painful than it was in 2003. With CSS controlling the appearance, you can tweak a style and have the change automatically apply to every page — extremely handy when dealing with changes on 20 to 30 separate pages. And having the HTML free from styling makes for more readable markup and a speedier development process. In the interest of learning I chose to hand-code the site rather than using an application that generates the markup for you, such as Adobe Dreamweaver. Not that I won’t use Dreamweaver in the future, but because I typed everything myself I have a better knowledge of the syntax and how to tweak the markup of an existing document.

In addition to CSS I’ve ventured into previously uncharted territories of PHP and JavaScript (my dear husband coded my art site in case you are sleuthing). Many of the navigation blocks exist in a separate PHP file which is “included” with the page when the document loads — a pretty neat trick and a great way to easily manage navigation updates. The JavaScript rollovers used on the portfolio page thumbnails were somewhat tricky, involving testing the states of all the thumbnails on page. The resulting code works, though I’m certain it could be more elegant, which is what I’ll tackle in the next phase — or the part where I can continue to tweak and add functionality while having a real live site too.

Phase two includes tweaking the markup and code to make the site as lean and perfect as possible, as well as integrating WordPress or similar blog software so this page works like an actual blog, instead of just looking like one. I also I have my eye on some fancy jQuery extensions that I’d like to try out for a video I have yet to post.

My goal behind building this site on my own was to learn as much as possible about the nuts and bolts of current web site development, with an added bonus of having complete control over my design vision. Now, because I know the basics behind building a site, I can more confidently design one that takes advantage of current technologies, while also avoiding the pitfalls that come with any particular media. And after a little more practice, I can confidently take a site from design through development on my own. And I think that’s pretty cool.

Resources and Credits