Reviews   ::        

Articles   ::        

Home   ::        

Links   ::        

Archives   ::        

Search   ::        

About Us   ::        
HDTV Costs     

HDTV Guide     

Diskeeper 9     

Stor n Go PRO     

Blade SSD Server     


  Anatomy of a Website Redesign

15 Sep 2003

By: Agi

Some websites seem to unveil a new look several times a year. Other sites like ours, may go years with the same design. For some, it's a matter of skills and resources; for others, it's a matter of finances. For Digital Silence, it was both.

Who is your audience?

Before beginning a site redesign, you need to understand your target audience a bit. One of the first things we considered was the screen resolutions our visitors were using. Looking at our site logs, over 95% of our visitors run at least at 800 x 600. In fact, over 75% of our visitors run at a minimum of 1024 x 768. We finally decided on a resolution between the two. Those visitors running at 800x600 will end up seeing a slight horizontal scroll bar.

The second item we considered was whether to go with a fixed or variable width design. With a fixed format, you are reasonably assured the site will look the same on everyone's PC. The problem with a fixed width design is all the blank space on the sides at higher resolutions. With a variable width format, the content of the site streches as the screen resolution increases. It almost penalizes those running high resolutions if you use a fixed width. However, a variable width format is more difficult to program.

It's all about navigation

At one time or another, we have all probably visited sites that were not user friendly; the culprit was usually poor navigation. We tackled the issue by having two navigation bars - an abbreviated one in the upper right and the main one on the left.

The 60's are over

Psychedelica was cool in the 60's, but not now. Some sites are so full of Flash banners and animated gif's that they could trigger flashbacks. Yes, in today's economy, advertising is a necessary evil. However, ads should never overwhelm the content of the site. The new design keeps that in mind by limiting the top of the page to a few ad banners.

[Update 1: Unfortunately, since this was written, we've added a few advertisers with animated banners. We will try to keep them to a minimum.]

A Changing of the Guard

Now that the layout issues had been addressed, it was time to turn our focus to the news. We had been using a news posting program called NewsPro. While NewsPro worked great early on, we outgrew it by the end of the first year. As time passed, posting news and comments became slower and slower. We did not have the resources at the time to address the problem. Eventually Avatar taught himself PHP and developed our own news program.

The news scnipt now has a database structure. Not only does this make the faster, but we have significantly reduced our storage requirements.

User Customizations

Since its inception, Digital Silence has been kind of a "static" site. In other words...visitors had no control over the content they viewed. By going with a PHP based design, we will soon be able to offer visitors a more personalised experience. If you decide to register (which will not be required to view the site), you will be able to filter the types of stories you view. Some of the filter categories include hardware, software, science and technology.

Final Credits

As with any big project, there are many people to thank. First, to Mr. Delles who gave the original design life...your vision served us well. Next, thanks to Mungler and Mr. Delles who laid the groundwork for the new design. The excellent graphics work for the final design came courtesy of Mohsin Ali of Shapps. The tremendous html programming effort was done by Universal Interative. Finally, the PHP design and programming was by own Avatar of Network Innovations.

[Update 2: One area we all totally missed the boat on was variable text height. Mungler pointed out (unfortunately, just before we were finished) that if you enlarged your browser's text more than the default height, text would run outside of some of the graphics. That was a major problem for us. The new design constrains many text fields by graphic boundries. When I looked at websites that did a good job of handling variable text height, I found most used graphic boundries sparingly. Without some major redesign work, we weren't going to be able to solve this issue. So we had to make the hard decision to lock the height of some text. After the dust has settled, we may revisit this issue and see if there isn't a better way of addressing it.]

That concludes today's lesson ;-) If you want to see some early versions of the site, then read on.

Next Page
Table of Contents
Page 1: The Redesign of Digital Silence
Page 2: The First Site and Intermediate Steps

      Posted by: , September 15, 2003, 6:00 pm  

    Cool banner #1
       ::  USB News

       ::  Bjorn 3D

       ::  [H]ardOCP

       ::  BurnOutPC

       ::  I am Not a Geek

Top Products














Sound Cards

Creative Labs



Graphic Cards




Hard Drives







2001 - 2004 Digital Silence
Digital Silence is not responsible for the information or the accuracy of the information above.
All trademarks and copyrights owned by their respective companies.

Graphical Design by Mohsin Ali
Website Layout by Universal Interactive

PHP Programming by Network Innovations
Additional HTML Programming by Moddin.Net