Site Review: Dance School Website 6

[Stretchwickster]

Dear all,

I would really appreciate your constructive criticisms of the following website:

http://www.slydance.com/

- please be as honest as possible.

Disclaimer: I am a programmer rather than a designer, so please make allowances for the design!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[feherke]

Hi

Nice job. I like the background image, but the gray could be abit lighter.

I have no idea what the "expertise" and "Community Involvement" wants to say there.

Regarding the img tag's alt texts, you write for example "Group Dancing". When this is read to the blind people, I think they would probably prefer it like "photography : group dancing". Just my theory, not a suggestion.

And another personal point of view : when an image has shadow like a sheet or frame like a picture or anything similar decoration, I have a feeling that it is a thumbnail. And discovering that they are not links is abit frustrating.

Hopefully the contact form is disabled only temporary ( HTTP Error 405 ).

Feherke.

http://rootshell.be/~feherke/

 

[GUJUm0deL]

Stretchwickster, nice work. These are my observations:

[ol]
[li]I don't think the purplish menu color fits all that well into the grayish background color scheme.[/li]
[li]I'm not too keen on the grayish color choice. I'd use some more vivid color choices, after this is a dance school -it's supposed to live and vivid and exciting, know what I mean?[/li]
[li]On the 'Contact Us' form the form submission doesn't work. I get an error:

Method Not Allowed
The requested method POST is not allowed for the URL /contact.htm.

[/li]
[li]Also might want to consider putting some form validation, such as e-mail syntax and required fields all entered.[/li]
[li]I didn't really read all the content copy (but I'm sure someone here will and give you that feedback)[/li]
[/ol]


____________________________________
Just Imagine.

http://www.imajinarts.com

 

[harrymossman]

Disclaimer: I am a programmer rather than a designer, so please make allowances for the design!

Could have fooled me. The site looks great to me.

The lavender nav box makes it hard for me to look at the rest of the page because of its placement, vivid color and drop shadow. I'd say tone it down a bit and move it over toward the margin.

The photo at the bottom of the home page needs more space from the text.

Harry

http://www.fws.gov/sacramento/es/

 

[Stretchwickster]

feherke,

Thanks for all your suggestions. The following are my responses:

1) I've not had a chance yet, but I'll see what it looks like with a lighter gray gradient background.

2) "expertise" and "community involvement" were words I stripped out of a complimentary letter to the dance instructor regarding a summer dance school he put on for the local community. I used these words to create an impression of the dance school being for the local community and providing expert tuition. If you have any suggestions as to how to make this more obvious/intuitive, I would be most grateful.

3) I've implemented your img tag alt text suggestion as I think it is a good one.

4) I used a drop shadow on the photos to give the page more depth as the photos look pretty lifeless when they lie flat on the page. I may well link them to an image gallery further down the line, which would hopefully sort out your frustration.

5) Shame of all shame, I must confess I forgot to code the back end of the contact form, hence the error. I thought I had already done it - must've been another project I was thinking of! Anyway, I've sorted that out now!

GUJUmOdeL,

Thanks for your suggestions too. The following are my responses:

1) and 2) Colour co-ordination isn't my strong point, so if you have any suggestions for a good vibrant colour scheme then please let me know.

3) Fixed

4) Done

5) No problem.

harrymossman,

Once again, thanks for your comments too. My responses:

1) Thanks for the complement

2) I'll see what I can do about that. Just out of interest, what screen resolution were you using?

3) Good spot - I hadn't applied padding properly to the bottom image, so I've now updated my CSS for that.

All,

Please feel free to post further feedback.

Many thanks.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[harrymossman]

Just out of interest, what screen resolution were you using?

1024x768

Harry

 

[dkdude]

Stretchwickster,

I tested with IE and FF in 1280x1024, font size: medium.

Very nice layout. I like the gradient fading body background. And the nice "music-score with dancers" background image too.

Here are my suggestions. Remember, these are meant in a positive way.

When hovering over the top-logo IE shows the "image tool bar". I'd get rid of that by adding this meta tag:

<meta http-equiv="imagetoolbar" content="no" />

I too find the lavender menu background a bit too "dominant" in the color tone. Try toning it down a bit or perhaps adjusting the color.

Try justifying the text and perhaps increase the line-height a bit. Try lightening the text-color a bit -in stead of black, try something like #202020. You'll figure out what looks the best.

The top logo and menu images may need a bit of work. The edges of the top logo could be antialised a bit better. And the menu image text seems a bit blury to me.

Perhaps a discrete 1px border on the container would look good too.

All in all -a very clean layout.

Well done, man

Best Regards


Jak;-)b

 

[Stretchwickster]

Jakob,

Many thanks for the compliments and all the suggestions.

Responses:
1) I didn't know how to get rid of that imagetoolbar, so thanks for that tip - it has been implemented.

2) When I get a chance I'm gonna tone down the menu background a bit

3) I've justified the text, increased the line-height from 1.2em to 1.4em and softened the text-color using #202020. What do you think?

4) I'll have a go at improving the logo and menu images.

5) I put a discrete "border: 1px solid #C0C0C0" around the container and it definitely adds to the design, so thanks for that.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[dkdude]

Clive - you're most welcome ;-)

Wow, yeah, that's a whole different look there! Increasing the line height and justifying the text makes it much more readable (IMO).

And the border -nice. Thought it would look great.

About the images - I usually do my graphic design in CorelDraw / Illustrator. Then export it in large format and use a raster graphics to scale it down -sharpening/blurring as I go, until I'm satisfied.

Glad you found the image tool-bar tip useful.

Regards

 

[Stretchwickster]

Then export it in large format and use a raster graphics to scale it down -sharpening/blurring as I go, until I'm satisfied.

Ok, this is where I don't have a lot of experience. I used Fireworks MX 2004 to create the navigation bar. Could you explain a bit more about the export and scaling process? Do you use the same software to do that? I've used the Export facility in Fireworks, but haven't particularly noticed the ability to export in a large format. Do you mean that you create whatever image to a larger size than the final website version, then scale it down to suit? If my memory serves me correctly, I exported as a jpg with something like 75% compression to keep the filesize lean. What would you recommend?

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[dkdude]

I don't know Fireworks. But I'm sure it can export an image in any size you like.

I usually export as bit map (no compression). To a size about four times of the result I need for a webpage.

I then import the result in PaintShop Pro or PhotoShop. Then I sharpen or blur the image and scale it down in a couple of steps.

I then export to jpg. It make several attempts to see how strong compression I can apply w/o messing up the image. Note, that the stronger compression you use, the more quality you loose. Color bleeding is one of those problems.


Jak;-)b

 

[Stretchwickster]

Thanks for the tips Jakob - I'll give that a whirl!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[feherke]

Hi

"expertise" and "community involvement" were words I stripped out of a complimentary letter [gray](...)[/gray] If you have any suggestions as to how to make this more obvious/intuitive, I would be most grateful.

Forget it. While nobody else found them confusing, probably there is nothing wrong with it.

When hovering over the top-logo IE shows the "image tool bar". I'd get rid of that by adding this meta tag:

I hate when a webmaster wants to take decision for the visitor. If someone does not disabled the image toolbar, then probably wants it. Sorry, but I see this kind of interventions like previous step before adjusting the visitor computer's resolution.

Feherke.

http://rootshell.be/~feherke/

 

[Foamcow]

Nice job.

I would say though that the justified text is harder to read.
You just don't have the typographic control with HTML to do proper justifictaion.

You have a few nasty 'rivers' in there (big gaps between the words). In print it would be necessary to adjust kerning, word spacing and margin values to avoid these things.

I'd also alter the colour (tone it down a little) behind the navigation and/or remove the bevelling/shadow effect. Maybe also run the gradient from top to bottom (or bottom to top).

Actually I just noticed that the navigation is a single image with an image map. Why not do it with individual images and either a list or a table (if you are more comfortable). It will make future alterations alot easier.


<honk>*:O)</honk>
Designease Ltd. - polyprop folders, ring binders and creative presentation ideas
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[glenmac]

Hi, I have error checking on my browser and get runtime errors on each page. For instance on the home page it is object expected line 91. I get the same error on all your pages but the line number changes. Hope that helps

Glen

http://lantzvillecomputers.com

 

[glenmac]

Looks like this is the culprit for the errors

 <script type="text/javascript">
    _uacct = "UA-888357-2";
    urchinTracker();
  </script>

Glen

http://lantzvillecomputers.com

 

[ChrisHunt]

Hey, it's lookin' pretty good.

Personally, I'd keep the justified text, it may be a little bit harder to read, but the increased line height compensates for that and it looks a lot neater. Just try to ensure that you have plenty of width available for the text - gaps only really become excessive when a picture squeezes the text into a narrow column.

I'd use a colour for the "SLYDANCE" header, either for the whole thing or just the "SLY" or the "DANCE" bit. Perhaps a deeper shade of the purple you're using for the menu?

I'd lose the "expertise" and "Community involvement" images altogether. I don't think they add anything but confusion.

You could code the menu a lot better like this:

<div id="sidebar">
  <ul>
    <li><a href="home.htm">Home</a></li>
    ...
    <li><a href="contact.htm">Contact Us</a></li>
  </ul>
</div>

Then you make devious use of CSS and background images to mimic your current look:
[ul]
[li]You give div#sidebar a background colour the same as the palest purple in your gradient fill. You also give it a fixed width in ems.[/li]
[li]You make an image of the slither just above "Home" in your current menu - i.e. the top right hand corner and the top edge. Make this the background image of div#sidebar, positioned top right and no-repeat. Give div#sidebar enough padding-top to accommodate the image.[/li]
[li]Make an image for the main part of the box, with the gradient fill and the drop shadow. It only has to be a few pixels high as you can tile it vertically. Use it as the background image for the <li>s.[/li]
[li]Make a third image for the bottom edge and right hand corner. Make this the background image for the <ul>, aligned bottom right and no-repeat, with enough padding-bottom to make room for it.[/li]
[/ul]
You'll then have a menu on which you can easily change the number and value of the options without having to edi any images. Visitors can also re-size the text from their browser if they need to.

Finally, on the Events page it says "The Children register at the beginning of the school summer holidays and can attend the school for up to 3 days." Surely that should be "up to three days each week"?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Stretchwickster]

Foamcow,
Thanks for your feedback.

Here are my responses:
1) The only area of text justification I wasn't happy with was in the first paragraph of the home page due to the width of the image next to it. I have now reduced the width of that image to give the text some more room and I think it looks much better than it previously did.

2) I've toned down the colour of the navigation bar a little.

3) I've now converted the image map to a list, which does make adding/removing links very easy indeed - thanks for pointing that out!

glenmac,
Thanks for pointing that error out. Unfortunately, I don't seem to be able to reproduce the error you were experiencing. Which browser are you using and how did you setup the error checking (as I want to be able to see if I can reproduce these runtime errors)?

Incidentally, the code is supplied by Google Analytics to provide detailed statistics of site usage, so I don't particularly want to remove it.

ChrisHunt,
Many thanks for the suggestions Chris!

My responses:
1) I've kept the justified text as I think it looks a lot neater too. I slimmed down the top image on the home page and the text now flows a lot better as a result.

2) I haven't yet tried a change of colour of the SLY Dance logo, but I think it's a useful suggestion and will try it out soon.

3) I've removed the "expertise" and "community involvement" images, seeing as more than one person has questioned their existence. If you guys wonder what they're doing there, then likely a number of site visitors would too.

4) Thanks for guiding me through the restructuring of my navigation bar - the step-by-step breakdown really helped.

5) You're right - I've made the suggested change!

All,
Please feel free to post further feedback.

Many thanks.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096