Review Jazz site re-make

My brother and I made a website for a series of jazz concerts organized at my dad's church by my dad :) Eventually my bro quit the project and I had to finish on my own. The error I made was to continue with that same design which, although it's nice (I think), doesn't work well (if at all).
If you want to see it, sit down, take a deep breath, use IE and click here (http://www.ucmtl.ca/jazz).
As you can see, it only works in IE, it's slow, it's not XHTML, it's probably faulty HTML, whatever.

I decided to make the site cross browser, faster, validating and stuff like that. And while I was at it, I decided to change the complete look and especially code. A total re-make really.

I'm looking for comments on:
The looks (appeiling to the eye? suits jazz?)
The navigability (Are you able to know how to get a ticket quickly?)
The code (Am I using incorrect code? non-semanticly correct code? useless css? anoying js effects?)
Accessibility (Could someone with a cell phone or screen reader still use this site?)
And more (whatever you can think of)

not so much on the content since these concerts have already taken place... I'm doing this for the futur series there might be :)
I attached the site in a zipped file in this post :)

Thank you very much for any comments :)

Can't get it to attach

Still not working, go here:
http://www.angelfire.com/pro/shlagish/Jazz.zip

The looks (appeiling to the eye? suits jazz?)
The page where you chose the language should be the same as the site, as for the grays, they are not advisible, try some sort of pasel colour...
The navigability (Are you able to know how to get a ticket quickly?)
It's annoying having the bar on the right down even when your mouse isn't there...
The code (Am I using incorrect code? non-semanticly correct code? useless css? anoying js effects?)
JS I wouldn't recommend if it is nessicery, as for your code: It's not even this style...
Accessibility (Could someone with a cell phone or screen reader still use this site?)
No, they couldn't, look at http://www.w3schools.com/wap/wap_pages.asp
And more (whatever you can think of)

I wouldn't want to come back to a site like that...

Whoa, a little harsh there weren't ya Error? I have to admit that the colors aren't very appealing. The brown background with the green text is defininitely a little conflicting. As for the code, very nice and clean. Keep up the good work man. :thumbsup:

The page where you chose the language should be the same as the site
it is... Are you reviewing the old site, or the new (http://www.angelfire.com/pro/shlagish/Jazz.zip) one

It's annoying having the bar on the right down even when your mouse isn't there...
Which bar?

JS I wouldn't recommend if it is nessicery, as for your code: It's not even this style...
JS in my site is NOT necessary...

I'm gonna stop right here, lol, I think your reviewing the OLD site.
Make sure you reviewing the NEW, re-made (http://www.angelfire.com/pro/shlagish/Jazz.zip) one..
As for the link you gave me about the WAP tutorial, I now realise there is much more to cell phone compatibility than what I've done. I didn't know I would need to learn a new llanguage..
;)
Thanks for reviewing though (even if it's not the right site;))

Antonio, what colours would you suggest? (I was never good at choosing colours ;))
Thanks for your input yet :thumbsup:

oh, and I forgot to mention something.
I also made a stylesheet for printing (it adds the urls to links ad stuff). Use preview print if you want to review it.

These might help some:
[http://www.pixy.cz/apps/barvy/index-en.html]
[http://www.colorschemer.com/online.html]
[http://www.codingforums.com/showpost.php?p=67755&postcount=6]

I was gonna give you a nice review, BUT THIS SERIOUSLY MAKES ME MAD IN YOUR OLD SITE:
http://www.ucmtl.ca/jazz/english/error.html


We're Sorry

This page uses features that are not compatible with Netscape browsers.
To view it as intended, please use Microsoft Internet Explorer.

For information about the Jazz & Justice Concert series, contact us directly:
Tel: (514) 251-1777 E-mail: jinder@dsuper.net


So, you're telling me that since I'm on a Macintosh, viewing it in Firefox, Mozilla, OmniWeb, or Safari that I don't get to view your site!!?!?! That my only choice is to use Internet Explorer or override your script (which is easy enough)?!?!?! That's extremely bad -- if anything, most of us would do the opposite, as your page looked better in those browsers the full two seconds I saw it before I overrode it. There should be no reason why this is done -- and if you continue to do this, atleast give people the option to view the website anyway. This is my one pet peave on the web and you had to find it...

OK, the new site looks a lot more structured and clean -- I liked the old site layout a little better only because of the images -- you could use some more I think. As for a color structure -- I'm a chicagoan, and from my young days sneaking into Jazz clubs (but I'm more of a blues man myself) I would go more for that type of atmosphere. Cool colors, more mellow and relaxed. Blues or bluish green and a little darkness. If you want to keep a warm theme going, do some more of a blood red, burnt-sienna like the crayons back in the day would be nice -- Jack Keroauc, who coined the Jazz phrase of the 20's Beat Generation, loved a dark red jazz club dimly lit... as played in his biography.

But that javascript browser sniffer better not be in there!! :mad: :)

Sorry, not allowed to download zips; can't really "review" a bunch of files, anyway. See if you can get it working and online, like in a subdirectory on the original domain.

I was gonna give you a nice review, BUT THIS SERIOUSLY MAKES ME MAD IN YOUR OLD SITE:
http://www.ucmtl.ca/jazz/english/error.html



So, you're telling me that since I'm on a Macintosh, viewing it in Firefox, Mozilla, OmniWeb, or Safari that I don't get to view your site!!?!?! That my only choice is to use Internet Explorer or override your script (which is easy enough)?!?!?! That's extremely bad -- if anything, most of us would do the opposite, as your page looked better in those browsers the full two seconds I saw it before I overrode it. There should be no reason why this is done -- and if you continue to do this, atleast give people the option to view the website anyway. This is my one pet peave on the web and you had to find it...

Know what? I agree with everything you say. That's why I'm making a new site. That's why I'm not asking to review the old one.

OK, the new site looks a lot more structured and clean -- I liked the old site layout a little better only because of the images -- you could use some more I think. As for a color structure -- I'm a chicagoan, and from my young days sneaking into Jazz clubs (but I'm more of a blues man myself) I would go more for that type of atmosphere. Cool colors, more mellow and relaxed. Blues or bluish green and a little darkness. If you want to keep a warm theme going, do some more of a blood red, burnt-sienna like the crayons back in the day would be nice -- Jack Keroauc, who coined the Jazz phrase of the 20's Beat Generation, loved a dark red jazz club dimly lit... as played in his biography.

But that javascript browser sniffer better not be in there!! :mad: :)
Thanks a lot. This is exactly what I need :)

So, what to do now:
more images
Cool colors (Blues or bluish green and a little darkness)

I'll probably use the links antonio gave me to get this going :)

and ronald, I can't upload it at the real place for now :(
I'll upload it to angelfire, but there will be ads and faulty angelfire code ;)
just give me a few minutes, by the time you read this, it will probably be done :)

Thank you all for your comments, keep 'em coming.
btf, once you unzip, the first page is ENGLISH.html

here it is:
http://www.angelfire.com/pro/shlagish/jazz/ENGLISH.html

noteS: the ugly text at the top is angelfire's work...
long to load... angelfire's ugly text takes 10 seconds to load, then my page pops up, lol


so, if you're allowed to download .zip...
take it here:
http://www.angelfire.com/pro/shlagish/Jazz.zip

Thanks for the reviews

Well, for making this all a little easier, I included a style switcher in my site (temporarily).
It's at the bottom. With it, you can select the style you preffer and tell me how I could make it even better :)
I have made one new style named Blue but it isn't done yet.
I've also included a style named print that you would normally only see if you print the document.

Well, that's it, I'll try getting Blue finished soon :)
Any more comments? tips?

I'm trying to add more images, but man I suck at making images, eww.
I made a blue version of my Jazz&Justice image (bg.jpg) which is now at the top left of the screen. If I adopt this style (blue), I wont use the red version at all..

I need more help

Okay, I'll ignore the ugly Angelfire junk; other then that, the coding looks pretty solid.
Just to be sure: the original colour scheme really is black text against a brown background, with lime/purple links? Man, that's tough on my eyes. Couldn't care for the Times font, either (Angelfire doesn't let me view the style sheet, so it's an educated guess. Serif, anyway).
The blue/green job isn't much better (though I like the colors more) regarding contrast. If you want a dark feel, remember to adjust your text color as well to maintain sufficient contrast.

The photograph switching is a nice touch, but the quality isn't very impressive; especially the "Jazz & Justice" logo thingy would look a lot better done as a gif (or a png, if you are so inclined).

Also, the headers could do with some more styling, which would give the whole page more visual structure as well; right now, it doesn't really invite me to start reading.

ok, with all this, I got one thing strait : I'm no good at colours (especially contrasts) nor fonts.
I agree that pic is horrible.
I personally would like a really good quality picture with 3d effect and shading a smoke and whatever, but the only imaging software I know how to use is paint...
So I'll try my best, but that's not my priority :D
I get it both the styles I have are bad..
I'll try making another, see how that works :)

Thanks for the review
Anyone else?

:D
Cleaner image...

Being a jazz musician myself (guitar), I tried to think about what colours really spring to mind as "the colour of jazz"
Obviously blue was the first one, "Kind of Blue", "All Blue" etc, but I had a look around my collection to see what album art had decent colour schemes. Most are black and white, obviously. You may want to consider a grreyscale pallette with a few 'flecs' of colour?
The two images attached are pallettes made from the cover art of two of Miles Davis' records from the 60's...

Hope it gives you some kind of help :)
Andrew.

I'm a jazz musician myself :) (piano)
but I don't listen to it :D
Thanks for the suggestion of black&white... interesting
But this jazz series is far from the traditional jazz. It's very modern jazz. It's original compositions of new musicians (such as Pierre François, my piano teacher :rolleyes: )
oh, and thanks so much for that clearer image :)
Was that long to do?
if not, would it be possible to make a cleared version of the blue Jazz&Justice logo?
or even better, show me how?


UPDATE:
I made another stylesheet named Contrast, check it out :)
edit: don't pay attention to the images, I'll get those arraged once I got the rest of the site done

I'm a jazz musician myself :) (piano)
but I don't listen to it :D

You're lucky I'm still willing to help after a statement like that! :p


Was that long to do?
if not, would it be possible to make a cleared version of the blue Jazz&Justice logo?
or even better, show me how?


Umm.. maybe 80 seconds.
Blue one is attached, I've used a more pure blue, as opposed to the aqua you had used. It's softer and more friendly :)
Show you how? Ok...

open photoshop
type words
select fonts
add drop shadow

hehe :D

yeah, the open Photoshop part is hard when you don't have photo shop :rolleyes:
well thank you :)
I added the other one, I'll add this one now :)
angelfire don't show it though, don't know why..


oh, and I changed the contrast stylsheet and set it as current..
Any suggestions for the title's font?

angelfire don't show it though, don't know why..
You need to do a "hard refresh" Ctrl + F5.

Any suggestions for the title's font?
I'm quite fond of Georgia for decorative titles...

I'm quite fond of Georgia for decorative titles...

Typography points for mindlessLemming, damn good choice. Always liked the clarity.

ok good, georgia it is then :)
What's that hard refresh?
clear cache maybe?

It's now Georgia.

SO:
Contrast issues have been addressed. Ugly colour issues have been addressed. Title's font issue has been addressed.
What next?
Now is the time to say one of these:
That's perfect, use that style!
Still a few things: +"List of things I should change".
That's not very good: +"Long list of things I should change".
That makes me puke, start over from scratch.

What do YOU say?

no reply, so I'm guessing the site is PERFECT?

Good, I'll go with that then, thanks for all your help :)

Here is the finished product, I'll probably take it off the internet soon, dunno when, I'll post back when it's hosted by the REAL server :)
zip file: http://www.angelfire.com/pro/shlagish/Jazz.html
Hosted by angelfire: http://www.angelfire.com/pro/shlagish/jazz/ENGLISH.html

You've managed to reach a stage where nothing really is wrong: code is fine, layout is usable, colors aren't too bad, contrast is fine, logo looks good... but it doesn't impress me or strike me.
Not being a designer myself, and finding myself in the same predicament every time I try to come up with something new I can't really provide anything more useful; I'd suggest taking a look around for some inspiration. The CSS Zen Garden (http://www.csszengarden.com/) is a well-known place that features a bunch of stunning designs by inspired artists; maybe you can dig for ideas there. Something blue (http://www.csszengarden.com/?cssfile=/090/090.css&page=1), perhaps? Or maybe a bit darker (http://www.csszengarden.com/?cssfile=/089/089.css&page=1)? Clean & green (http://www.csszengarden.com/?cssfile=/067/067.css&page=4)?

I see.
Since I'm really really bad at doing any graphics, I'll probably just try playing around with the colours..
I'm no good at that either, but I'll try.

I know about csszengarden, it's amazing :)

Thanks for your imput!
anyone else?

I tried adding images to enhance. I wanted to create the illusion that drips would accumulate at the top of paragraphs and fall down to the bottom of the page...
This (http://www.angelfire.com/pro/shlagish/images/test.html) is what I get for not paying attention in art class. (2 screenshots)
But do you think it's a good idea?
Do you think I should get a better quality image or just abandon that idea?

Argh!!! Don't use bmps, those takes ages to download! Try a couple of jpgs instead.
Anyway: if you're not good with a graphic editor - I personally don't get much further then cropping and resizing - I'd avoid complicated graphics since the end result will rarely satisfy. I posted the CSS designs to provide some clues as to what can be accomplished with some simple boxes and borders in soft color variations: nothing spectacular, but just enough to make it a bit more dynamic.
On the graphics front, you could do some simple gradients, like for header backgrounds, or maybe some small icon-style images for custom list bullets, that sort of stuff. At the moment I'm whizzing through "More Eric Meyer on CSS" and he shows some pretty stunning work with photographic backgrounds; after a bit of darkening, or washing out, or blurring, they can make great masthead or header backgrounds.

I hadn't thought if custom list bullets, good idea!
I'll get to ir :)
As for gradients, I have no clue about how to do them...
I had thought about putting gradients in my headers...

And thoses links you posted are mostly images...
Gradients everywhere...
anyways, I get it you don't like my stupid looking drips :D
I'll go give the custom bullets a try..
But then that's all I've got, any more ideas?

What do you think of these custom bullets?
screenshot (http://www.angelfire.com/pro/shlagish/images/bullets.html)

I also added bass clef images before h3 elements.

Is it any good?

What else could I add/remove/change?

Nice touch, but don't go overboard... ;) At least, they're fitting with the theme! Make sure you use gif formats for these.

It's very hard to give any concrete advice, but I'm not too thrilled about the solid blue all over, too; it just doesn't make anything stand out... :( Try a lighter background for the main content, and do something contrasting for the page header ("Jazz&Justice") and the footer. Also, experiment with a different background color on the various paragraph headers, and maybe a border or something; a thin border in a slightly darker color can help to "lift" its content visually from its surroundings.

By the way, the Zen garden examples I gave were more an attempt to provide some inspiration; the big majority of those designs are true artwork which in my wildest dreams I can't even hope to come close to. They do show however what can be accomplished with separating the various sections of a page (headers, content, navigation, footer) to create a dynamic feel while still maintaining unity.

I agree with ronaldb66's last statement about too much blue all over, but I wouldn't change as much as he suggested. Just change the background of the main content div for now (I suggest either white or a lighter blue, but don't go crazy throwing in random colors like neon green or pink). You've got a good color scheme going on right now. Stick with it!

One of the things that I noticed right away...if this is a jazz website, where's all of the instruments? Again, don't go overboard here, but I'd at least have one or two instruments visible on the page. It tells the visitor right away that this is a music site. First impressions mean a lot.

I'll try a different background for the main content.
I'll try adding instruments..
As for the gifs, I can give it a try, not sure if I know how to.

Thanks for all the suggestions :)

P.S I won't make these changes till tonight.

I've made the changes.
Though I havn't found any instruments nor have I found how to add them so they don't distract the eye and turn the look away from the content... anyways, all the other changes have been made (plus others suggested by people at accessify.com)

zipped file (recommended): http://www.angelfire.com/pro/shlagish/jazz.html

hosted site: http://www.angelfire.com/pro/shlagish/jazz/ENGLISH.html

Do you think an image as title would be appropriate?
example: screenshot (http://www.angelfire.com/pro/shlagish/images/titleImage.html)

I tryed adding images, what do you think?
http://www.angelfire.com/pro/shlagish/jazz.html
http://www.angelfire.com/pro/shlagish/jazz/ENGLISH.html

A graphic header / title can do a very good job in adding a bit more visual interest; do use anti-aliased text, however, and when using a gif apply the same background color as it will have on the site to get the edge coloring as close as possible.

I"m still not too happy about the colors, though; thinking "Jazz" I see cream, tans, and perhaps the occasional brown, dark red maybe. Surprisingly, searching for "jazz" in Google turned up quite a number sites of which none used any of those colors... :( So much for my designer aspirations... :rolleyes:

Still - and I referred to these more than once, simply because I love the packaging, I would like to point to some of the sitepoint design templates; I think for a Jazz site, "Ultrahip (http://www.sitepoint.com/article/796/2)" may offer some possibilities, although the color combinations of "Corporate (http://www.sitepoint.com/article/796/6)" approach my original sentiment more, especially the cream/tan/greyish-blue combo. Then again, what do I know... :o

Thanks for your reply.

I have been trying to design a title header for some time now. I'll get it eventually I guess :rolleyes:
What do you mean when you say:
do use anti-aliased text
?

And also, in my gifs, I use a background of transparent, isn't that enough? I can't see any problems with that...

Also, I not very happy with the colors either, but as you said, google's not helping me on this one...
I'll try thinking about it some more. Maybe the double border around the main content area is wrong??

What do you mean when you say: do use anti-aliased text?
When you construct a text with a single color against a background, the pixels will cause the edges that are at an angle (mainly near to horizontal or vertical) to look jagged; this is called "aliasing". Most graphic packages offer a way to use some sort of anti-aliasing fix, which causes the deepest "gaps" to be smoothed out by using extra pixels with an intermediate color.

If gifs are used with a transparent background, first construct them with the background color they'll be used against (exactly the same, or as close as possible). When setting that background color to transparent, the "smooth-out" pixels will retain a color in between the color of the pixels they're next against and the background color. If the background color on the site differs a lot from the original color, the edges again will look jagged, cancelling out the anti-aliasing effect.

Phew... :o

I don't get it, if the background is TRANSPARENT, why would there be a smoothing out effect??

ok, I tryed making a title image.
Tell me what you think (btw, the colours shifted when saving my screenshot...
And I know the color of the title image isn't good, but how do you think the logo is, shape-wise?
2 screenshots (http://angelfire.com/pro/shlagish/images/sslogo.html)
Thank you

Well, since I'm not getting any replies, I'll just go with what I have now.
If anyone wants to see:
http://www.angelfire.com/pro/shlagish/Jazz.html

Starting file is ENGLISH.html
French version's not made