Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Site Review 2

Status
Not open for further replies.
First thing I'd say, is put some rollover effect on the main nav buttons.
Other than that, it looks pretty neat.
I'll look at the rest tomorrow! :p


 
I always like simple gradients and rounded corners. looks great, but i'm in no state of mind to find details right now.

 
Hi mate!

I like it, it's excelent.

But if I can nit pick?

1. Initially I thought it was a bit dark, mainly because the main header is quite dark and blends too much with the page bg which itself is very dark

2. Since the first like of text mentions Europe I was wondering should your prices be in Euro by default?

3. on the very top and bottom you have a small silver bar. Should you remove (or make lighter) the top border and bottom border respectively?

4. the green overlay text offering the price reduction, I wonder would it look ok if it was in a smaller overlayed box at the side, for example, so that it didn't block the text underneath. Know what I mean?

"Operators are online" - blimey it's so rare to see that, most companies are US based and always off line when i'm online! ;-)

<!--#sig value=''É'' url='' -->
 
Foamcow,

First thing I'd say, is put some rollover effect on the main nav buttons.

I did have image rollovers at one point, but recently switched it over to text navigation and got rid of the images. I've added a slight rollover effect just now, I will need to play about more with colours to see what looks best.

Cian,

1. Initially I thought it was a bit dark, mainly because the main header is quite dark and blends too much with the page bg which itself is very dark

I've had a few times when I thought this as well, but when playing about with bg colours, I couldn't find anything that I liked better. I'll keep trying though.

2. Since the first like of text mentions Europe I was wondering should your prices be in Euro by default?

The default currency shown is actually taken from the browser language but it only detects a few languages just now. I'm working on a more advanced way to do it which will cover about 99% of the countries who use the currencies the site displays in and hope to have this added soon. Also, Scotland still uses pounds. [wink]

3. on the very top and bottom you have a small silver bar. Should you remove (or make lighter) the top border and bottom border respectively?

I wanted to get rid of this a few times to bring the page up a bit, but everyone I asked said it looked better with it. Even my daughter told me it looked better with them. (3 years old and she already thinks shes a web designer[wink])

4. the green overlay text offering the price reduction, I wonder would it look ok if it was in a smaller overlayed box at the side, for example, so that it didn't block the text underneath. Know what I mean?

I've got a few different overlay ideas that I'm toying with, I keep changing them then end up going back though.

"Operators are online" - blimey it's so rare to see that, most companies are US based and always off line when i'm online!

It's really difficult to be on 3 chats and trying to do other work (tickets etc) at the same time so at the current time, it's still only offered on an "As Available" basis.

You would not believe the amount of comments I get about this, even though I don't advertise 24/7 live support people expect it to be on all the time. They all go quiet when you mention price hikes to provide it though. [tongue]

Suprisingly enough though, it's 8am here just now and I've been on here for the last 12 hours or so, with not a single chat request. It's going offline soon anyway, I'm going to bed and while everyone else is happy with answering tickets, nobody wants to man the chat. [smile]

Thanks everyone, I appreciate it.

As always, any other comments welcome.

Wullie

Fresh Look - Quality Coldfusion Hosting

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
Did you try an underline on those rollover links? Maybe a thick overline? Just to add to the effect, the grey rollover is a little dull.

<!--#sig value=''É'' url='' -->
 
I'm trying to avoid under/overlines in the navbar, I normally get annoyed by that on other sites with this type of nav.

Yeah, I know about the logo on the live chat, I'm currently trying to bring the chat inhouse because I've had a few problems with the current service. I'll get that logo changed today though.

Thanks again. [smile]

Wullie

Fresh Look - Quality Coldfusion Hosting

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
It looks pretty good, though I agree with cian that it's a bit dark. A few points in no particular order...

I see a broken image labelled "Chat to us Live" in the top-right.

Menu options turn grey when you mouseover, so the current option is less distinct than the other ones. I think it would look better going to white or yellow or some other bright colour.

The text in the four picture boxes under "Urchin" is a bit blurry - the "u" in Guarantee, for example (this sort of thing is much more noticable on laptop-style displays than on CRT monitors, I've noticed). You might experiment with not anti-aliasing the font, or trying a different one.

I think it would be better if you worded your FAQ answers to link from a bit of text, rather than explicitly spelling out the URL. For example, instead of
Please visit the following page to run various tests:

say
I also find it irritating that links from the FAQ page open in a new window.


Under the hood it's a lot less pretty. No DOCTYPE means you can't validate it, and browsers will display it in quirks mode. There's an awful lot of inline [tt]style[/tt] attributes, Javascript used for presentation and even the odd <font> tag. The resulting code is quite bloated - the total page weight is 92K, including 42K of HTML. Not apalling, but capable of much improvement. A couple of examples...

The menu bar:
Code:
<table border="0" cellpadding="0" cellspacing="0" width="746" id="nav">
				<tr>
				<td valign="top">

<table cellspacing="0" height="30" cellpadding="0" border="0">
<tr><td>
		        &nbsp;		<a href="[URL unfurl="true"]http://www.freshlookhosting.com"[/URL] style="color:#000000; text-decoration:none; font-size:13px; font-weight: bold;" onmouseover="this.style.color = 'gray';" onmouseout="this.style.color = 'black';">Home</a>
</td><td>               &nbsp;          <img src="/images/seperator.gif" width="2" height="39">

</td>
...
could be replaced with
Code:
<table border="0" cellpadding="0" cellspacing="0" width="746" id="nav">
<tr><td valign="top">
<table cellspacing="0" height="30" cellpadding="0" border="0">
<tr>
<td>&nbsp;<a href="/">Home</a>
<td>&nbsp;<img src="/images/seperator.gif" width="2" height="39"></td>
...
with the following added to your stylesheet:
Code:
#nav a {
   color:#000000;
   text-decoration:none;
   font-size:13px;
   font-weight: bold;
}

#nav a:hover {
   color: gray;
}
This could be further refined - I'm not sure you really need the inner table, and you could probably do the whole thing as a styled <ul> with a little more work.

On the subject of styled <ul>s, the code for the list of features on each plan is truly horrible. Tables with little bullet images? Consider swapping
Code:
<table style="font-family: verdana; font-size: 11px" cellpadding="0" cellspacing="0" width="100%">
  <tr> 
    <td><img src="/images/bullet.gif" width="10" height="13"> <span style="font-weight: Bold;">100MB</span> Disk Space</td>
  </tr>
  <tr>
	<td><img src="/images/bullet.gif" width="10" height="13"> <span style="font-weight: Bold;">1GB</span> Rollover Bandwidth</td>
  </tr>
for
Code:
<ul class="features">
<li><strong>100MB</strong> Disk Space</li>
<li><strong>1GB</strong> Rollover Bandwidth</li>
...
with this styling:
Code:
ul.features li {
   font-family: verdana;
   font-size: 11px;
   list-style-image: url(/images/bullet.gif);
   /* You'll probably need some left padding or margin too,
      to make room for the image */
}
Much easier to maintain, eh?

-- Chris Hunt
 
I see a broken image labelled "Chat to us Live" in the top-right.

At this time I'm relying on a third party for the chat and those images are called via their server. This means any problems they have show a broken image on the site. We are currently bringing the chat inhouse so this will be fixed soon.

Menu options turn grey when you mouseover, so the current option is less distinct than the other ones. I think it would look better going to white or yellow or some other bright colour.

This was something I mentioned above, I'm still to get a better colour scheme for this.


You may wish to run various tests

This is a limitation on the FAQ page I built. At present, the URLs are parsed at runtime and HTML would display as code on the page. The FAQ page you see was only added very recently and I'm still working on the background coding to improve it.

Under the hood it's a lot less pretty. No DOCTYPE means you can't validate it, and browsers will display it in quirks mode. There's an awful lot of inline style attributes, Javascript used for presentation and even the odd <font> tag. The resulting code is quite bloated - the total page weight is 92K, including 42K of HTML. Not apalling, but capable of much improvement. A couple of examples...

Well, to be honest validating it doesn't bother me. [smile] Seriously though, the code behind it is being tweaked all the time to get it more compliant. At present it displays as required in every browser tested, so the size is the only issue I'm trying to overcome just now.

<table border="0" cellpadding="0" cellspacing="0" width="746" id="nav">
<tr><td valign="top">
<table cellspacing="0" height="30" cellpadding="0" border="0">
<tr>
<td>&nbsp;<a href="/">Home</a>
<td>&nbsp;<img src="/images/seperator.gif" width="2" height="39"></td>
...
with the following added to your stylesheet:

#nav a {
color:#000000;
text-decoration:none;
font-size:13px;
font-weight: bold;
}

#nav a:hover {
color: gray;
}


This part was only thrown in a few days ago and I've still to get around to switching it. My original code was nearly identical to your above example but I had a few problems with implementing it and not much time to mess with it.

This could be further refined - I'm not sure you really need the inner table, and you could probably do the whole thing as a styled <ul> with a little more work.

On the subject of styled <ul>s, the code for the list of features on each plan is truly horrible. Tables with little bullet images? Consider swapping

The current layout was added because it was going to originally need cells because of the way I wanted to do it. Since then things have changed and the code has not been updated yet to reflect this.

I've got the flu just now and I'm snowed under with other work but will be making changes to the site over the coming week or so.

Thanks for the review Chris, much appreciated. [smile]

Wullie

Fresh Look - Quality Coldfusion Hosting

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
Thanks Chris.

I've implemented quite a few of the suggestions but still have some work to do.

As usual, further suggestions/comments welcome!

Wullie

Fresh Look - Quality Coldfusion Hosting

The pessimist complains about the wind. The optimist expects it to change. The leader adjusts the sails. - John Maxwell
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top