How to make a killer website

Having your own website is now fairly commonplace, and some sites are starting to show their age. Maybe your website has been up since 1996. Perhaps you went through the entire blinking text fiasco, or the flashy animated splash page stage. Fortunately the internet has moved on. Nowadays, lots of effort goes into designing and building the usability and functionality that website users really want. But with this comes complexity. To help you get the most of your site, here are 10 tips to help you redesign, rebuild, reprogram and generally steer clear of typical website blunders. We’’ve also gone one step further and reviewed the top web design packages out there to help you build the best site.

Log your design

Once you upload your site, you should talk to your web hosting service about log reports – reports on who visits your site when, and where they go.

Log reports come in a number of different forms, but in general they should have the following information:

• Number of people visiting your site (unique IPs summary)
• Number of pages viewed for a certain amount of time (page view summary)
• Number of files transferred (hits summary)
• Number of visitor sessions (number of visits summary)
• Busiest time periods (month/week/day/hour)

You can and should use the reports to redesign your site to your users’’ needs. For instance, different browsers display the code and layout of sites slightly differently, so use the top browser summary to match your code to the most popular browser. Also, check the ‘resolutions summary’’ to make sure visitors can see your entire site.

Next you can look at content and navigation changes. Start by finding out what’’s interesting to your users via the most/least requested pages. Link some of the least requested pages to see if their unpopularity is due to navigation issues directly from the home page.

You can also rewrite the link text or the pages themselves to test whether the actual content is turning people away. Once you’’ve confirmed the most popular content, leave it linked from the home page for easy access. Have a look at how users travel through your site with the favourite path summary log. Look to see if you can make that journey easier – are there unnecessary pages in the middle? Can information be summarised onto fewer pages? Particularly if people coming to your site are buying from you, every click you save them can increase your sales.

New take on tables

If you have tables in your site, chances are you are using them to create the standard two or three column page. But why not  do something more creative, and use them for a left hand navigation pane, or the front page?

The only table codes you might be unaware of act in a similar way to the merge function in MS Excel. That is, they merge cells in varying ways.

• colspan – merges columns (columns  are the vertical ones)
• rowspan – merges rows (rows are the horizontal ones)
  

You can combine both in one tag, so if you wanted one cell to cover two rows and two columns, the code would be:

<td colspan=2 rowspan=2>

The illustrated table consists of six rows and eight columns. It’’s comprised of a few different types of cells. Some have  varied background colours and have a declared width like <td bgcolor=#ffcccc width=”54”>. Others use colspan and rowspan to create different sized cells. Some do all three:

<td bgcolor=#993300 colspan=2 rowspan=2>

The easiest way to build these complex tables is to draw the finished table you want on a piece of paper or in Excel, then play around with colspan and rowspan to achieve the result you want.

Here are the first two rows of the illustrated table for you to start with. Don’’t forget to close off the <tbody> and <table> tags at the end. Note on the second row, one of the cells spans two columns. This means you won’’t need to put in a <td> for that cell in the next row along.

<table cellspacing=0 cellpadding=5 width=400 border=0 align=”center”>
    <tbody> <tr valign=top>
     <td colspan=5></td>
     <td bgcolor=#ffcccc width=”54”> </td>
     <td colspan=2></td>
    </tr>
    <tr valign=top>
     <td width=”6”></td>
     <td bgcolor=#88bbbb width=”56”> </td>
     <td colspan=2></td>
     <td bgcolor=#993300 colspan=2 rowspan=2>
      <p><font face=”Arial, Helvetica, sans-serif” size=”2” color=”#FFFFFF”><b><font color=”#FFCFCE”>Services<br>
       </font></b>Professional and cost effective graphics, logos, and photography</font></p></td>
     <td bgcolor=#ddaaaa width=”3”> </td>
     <td></td>
    </tr>

continued on next page....