Redesign Project - Arconati Family Website

I'll give you some fair warning ahead of time. This post contains some geeky technical details about web site maintenance. I am creating this post to log some of the changes I'm making to the Arconati Family website. I'm all about transparency and delivering the "how'd-he-do-that?" answers even though no one was really asking. Also, the notes are for my own sake, so I can revisit in the future and recall how it was done.

Applying Method to Madness

First off, I'm upgrading from ASP to ASP.NET. If you ask me my rationale for this, I don't have one but it seemed like the right direction to go. My needs right now don't go beyond the minimum for a language that supports server-side includes and just about anything would have worked here. However, I'm looking forward to learning more and stretching my coding skills and this looked to be the right direction to go. The Arconati News site that I host is on a PHP capable server, so I can grow my skills with that as well (though I'll likely just toy with Wordpress and Joomla customization).

For CSS and layout, I've completely dropped my old style and system and am going in an altered direction. The previous three-column layout was cobbled together from examples on A List Apart's Holy Grail and Holly 'n John's all-float demo. I recall tweaking it a bit, but not sure how much.

If you've never tried CSS from scratch, you may not know what sort of pain it can cause. One of the issues that develops is that browsers have default rendering that they assign to numerous elements and often when a setting you are implementing is not displaying as you thought it might, it takes a little while to think to blame the browser and not something you misplaced. That is why many coders use some sort of "reset" style sheet and I'm going to be using Eric Meyer's Reset Reloaded. It will save me time and headaches.

To achieve flexible three-column layouts, I found a very interesting set of 40 templates that came installed with CoffeeCup's HMTL Editor. They actually have an original source called Layout Gala that I've bookmarked previously. The examples all had the same three columns but you could arrange them any way you wanted simply by changing a few lines of CSS. That meant I could put all the content in place and if I wanted to change the basic layout it wouldn't take very long.

I created a third and final style sheet to cover text; fonts, colors, backgrounds and other style settings not arranged in the layout.

What Software I Used

I've used Dreamweaver before and really liked it, but I'm not installing it on this computer for now. I started to use CoffeeCup's free tool (mentioned earlier), but then later stumbled on Microsoft Visual Web Developer 2008, Express Edition. It looked like it might meet my needs now and be powerful later. And it was free, so..

Unexpected Hurdles

So here are the snags I ran into. Firstly, Visual Web Developer uses certain server extensions to connect upon upload that I'm leery of and that I couldn't get working right away. Instead of creating the files and uploading them immediately upon clicking save (as I am used to doing in Dreamweaver) I save them locally and upload as a separate action in FTP.

More distracting were the issues I found in the CSS. The reset wasn't really a problem, but the Layout Gala code contains some goofy default settings for inline links by making them block elements. In translation, this meant every link would take up it's own line even if it was in the middle of a paragraph, which I tend to do a lot. But I'm cleaning these things up right now as I go.