You've probably stumbled accross some of these sites out there. They're the sites with the strangely boxed text and images, usually with a blue background and flashing graphics. Oops I just described my site!
No, I'm talking about the thousands of websites that were put together early in this century or late in the last one that haven't gone through a face-lift lately. These sites usually started out with good intentions but have suffered from neglect or been passed up by technological advancements.
Usually, websites such as these have a message, or a central product or service that doesn't change much over time - like a yard rake or something. The site owners got it the way they wanted it in 1997 and, by God, they never want to go through
that process again!
So there the site sits, with the predictable never-ending scrolling text message promising that there is not a better yard rake for the value anywhere on the World Wide Web.
These sites sit out there with an un-dying hope that a customer will somehow be searching for the phrase "Pink Fiberglass Everlast Yard-Rake", find the site, click on the flashing "Contact Us for a Quote" button, call the long-distince phone number on the linked page (with no home button) and buy the whole lot of inventory stored in the back room.
It could happen.
But why wait? Heck, there are probably a lot of people that would like to buy that rake, but even if they find the site, there's no positive action that can be taken to make the purchase.
What most of these sites need is an inexpensive, economical, cheap, cost-effective (yea, I'm repeating myself here), quick re-design.
Well, there are a couple of ways to get this done. The first option would be to fire up that copy of FrontPage 98 and edit the original HTML. I bet there are some flashy new templates available these days!
The better way, of course, is a quick re-design using ASP.Net - specifically ASP.Net 2.0 (or above). The reason for this is the incredible amount of power the .Net framework provides for tasks just such as our re-design project.
The .Net 2.0 framework has a lot of built-in features that will make this re-design a snap. First of all, we can use a Master Page. This will be ideal, because we should be able to take the sites existing logo, color scheme (if we still want to use blue #003399) and general layout and place it into a re-usable template for all of the new pages.
The Master Page elements should then be set up in such a way that they can be controlled through the use of a Theme. The Theme will contain the necessary CSS stylesheet and possibly a .skin file for any .Net controls we are going to use.
Once this is done, we need to take a look at the current menu/navigation system of the old website. For many older websites, I have found that this can only be found on the home page! If we have to do some discovery and investigation to find all of the hidden pages - it will be time well spent. It can be kind of fun discovering orphaned pages! I once found a website that made kind of a game out of hidden hyperlinks - but that's for another article.
Anyway, after we have found all of the existing pages in the old website, we can make a web.sitemap file. This XML file will serve as the central navigation file for the new website and should be designed to create an organized, logical hierchy of pages for the new site.
The sitemap file will serve as the data-source for our choice of navigation - probably the asp:menu control, but maybe the treeview if we want to look a little bit fancy. We will add the menu control to the Master Page and bind the menu to the sitemap file. Presto! With a little tweaking of the built-in properties we have a menu system that will be displayed on ALL of our pages.
Next comes the content. One thing I have found with older sites is that the use of images tends to go to extremes - either lots of images, or almost none. The same thing seems to go for the text. Ideally, we will be able to re-use the content to a large extent from the original website.
In order to do this, we need to look back at our well thought out web.sitemap file. This will serve as the template for all of the pages we need to create. I have found that it is usually easier to go ahead and create all of the pages I will be using right from the start. For smaller sites, I will place the .aspx files in the root directory. For larger sites, I may split the pages into a couple of sub-directories for organization. I usually try not to go to extremes in building sub-directories because of search engine concerns, but I just can't stand for my sites to have all of the pages stuck in the root directory.
When creating the new pages, remember to select your Master Page.
When the pages are created, I usually just copy the content from the live site and paste it into the new site. Sometimes this can cause formatting problems (see "why can't I just use <tables> for formatting?" and "what do you mean I shouldn't just use the<font> tag?"). I have found that just pasting the existing content in and cleaning up the source eliminates a lot of typos in the long run. It's one thing when the old site has a typo and you fix it, and quite another when you screw it up and it used to be right!
Once the content is in place for all of the pages in the site map, the site will start to show signs of life. I have found that these simple steps accomplish a couple of things very quickly. First, the built-in .Net navigation system is usually a vast improvement over the older menu systems that you will find on older sites. Secondly, the consistent look and feel across all of the pages makes for an instantly more readable site.
I have shown customers the new site at this phase and they have been ready to go live right then. I can usually get something like this done in a very short amount of time which means that I don't have to charge very much. The customer gets some instant gratification and can test my services without having to make a huge investment.
In addition, because the new site has been built with the .Net framework, we have an enormous amount of tools at our disposal for improving the functionality of the site. In a later article, I will go through the creation of a cool email contact form, a drillable products section and a shopping cart for the new site.
After all, we need to be able to actually buy that Pink Fiberglass Everlast Yard Rake!
By the way, if you want to see what NOT to do with a website, check out the following site:
http://www.webpagesthatsuck.com/
I have laughed out loud many times here!