View Full Version : PW Symphony Orchestra

08-08-2009, 03:29 AM
Hello, This is the first site I've ever done and I did it all by hand. I volunteered to do it because the other one was VERY horrible. Seriously I don't think this is all that great (which is why I'm here) but the last one was sooo much worse. The director likes it but I still think it needs help. Any Ideas? Oh yeah, I have no control over the ticket purchasing thing because all I know is html and css. So take that into consideration when you reply. If you happen to have a link that would help me learn that monster of a shopping cart I'd be grateful but it's not necessary.

PWSO.org (http://pwso.org)

08-08-2009, 04:29 AM
Your images look so squashed. They reaaaaaaaaaally shouldn't be so squeezed in; save it at a normal resolution and crop it.

It looks unfinished because you used Times New. If you're going for the serif look, a typeface like George would be much better.

08-08-2009, 04:55 AM
I know the images look squashed. I don't like it that way either, but it was done by an artist who is supporting the orchestra, there's an agreement to use her work and that's the picture she gave me. It wasn't large enough to go all the way across, I wish she could just give me a bigger picture but getting stuff out of her is like pulling teeth. You're right about the font, I've spent weeks looking up font stacks but really couldn't pick one. I'll get right on that!

08-08-2009, 03:56 PM
OK, first things first: The overall functionality and organization of the site is great. Itís simple and I find what I need without much hassle.

When I first looked at the home page I was wonderimg about the colorful image. What purpose does it have, how does it relate to the orchestra and why is it going down at the left side? (I do know that itís from the supporting artist, that was just a hypothetical question)

I would suggest only using it at the top and possibly as background for a real header (i. e. with the symphony name in it). However, now that I think of itÖ this image is really too much on a website if itís just supposed to be some decoration. It draws all the attention away from the actual content. If you have to use it it would be best if you put this on a separate page as main attraction (like: ďhere is some artwork of [artist name], a strong supporter of the PWSOĒ), the way it is now itís just disturbing and counterproductive.

Next: Your color scheme could be a lot better. I donít know if they have any logo or corporate colors but a plain black background isnít very good, and also not the combination with the blue page background. It looks too heavy and depressing right now. For a classical orchestra I could imagine something much lighter, simpler, with much room, or something that looks classy. This would go together with the right choice of fonts. Below Iíve uploaded a very simple mockup of what I mean:


The fonts Iíve used are Eutemia (can be found on dafont.com (http://dafont.com)), Bodoni Antiqua SC (serif small caps font), and Georgia for the links (you may be able to set the ďfont-variantĒ CSS property to ďsmall-capsĒ) and regular text. The header and menu backgrounds would stretch across the viewport while the page width is fixed at 750px right now. These warm colors and the serif fonts (plus the script font) feel much more comfortable, especially for an association with classical music.

What I could imagine is that you have the sub navigation in a sidebar rather than as a dropdown, and have that drawing of the artist below the navigation then. This would also make it easier to have an indication where the user currently is.

Important rules: Draw attention to the actually important things through color and placement on the site. Donít use images and effects where they donít have any purpose or support the content.

Oh and I almost forgot to mention the coding part: Is there any reason why you tell the browser to assume XHTML 1.1 when you donít actually serve the page as XHTML 1.1? Iíd suggest you use XHTML 1.0. But in any case you forgot to specify a character encoding and MIME type in a meta element. Secondly, although itís just a minor issue, the link element must be all lowercase. Other than that the code and document outline look alright.

08-08-2009, 04:38 PM
VIP your image of a design is lovely. Are the page colours great with the photo because you got them from within the picture? (or is that the specialist knack you have?)

Thanks for the link for the fonts (and image fonts :) )


08-08-2009, 05:58 PM
Thank you VIP Stephen, I didn't really like the black either as I think that's generally a bad idea but I thought it might be ok. Basically they gave me a print up of what they wanted and he saw it and said it's beautiful, but I will definitely talk with him about it, if nothing else I will see if I can get him to let me change it next season. Maybe I will show him your picture and say look at the possibilities. I think he would be happier with a site like that anyway. Thank you for the font link!

and I'll get right on that character encoding and mime type (What's a mime type?)

08-08-2009, 08:52 PM
Alright! (Sorry for the double post) - Update!

Doctype - XHMTL 1.0
Character Encoding - added!
MIME type - Added!
Font-family - Changed!
Link attribute is lower case!
I'll talk to the director about maybe doing a different design later today. But if there are any ways to make it better the way it is I'd be very grateful!


08-09-2009, 10:59 AM
My comments are similar to the rest so I'll point out something new. The top image doesn't line up correctly with the image running down the side. I'm using Firefox 3.5.2.

What is up with the little image in the top left corner? What is that there for?

08-10-2009, 12:38 AM
that is the pwso logo that he said *HAD* to be on it somewhere. I didn't know where to put it.

I'll check on the side image.

Also, I asked about redesigning the site but he's very happy with how it is now (the last one really was horrible) So there's not a lot I can do to change it. However, when this season is over I'll bring it up again and hopefully get the whole artist issue out of the way to give me more freedom.
Thanks though guys, I was really looking for problems with the code and technical parts which you've helped me fix.

08-10-2009, 05:07 PM
OK, so that small image at top left is the pwo brand?? Then that is naturally the logo of your site. Why someone would wish to move the most important part of their site away to somewhere obscure, in favour of someone who has nothing to do with music (the artist), suggests to me ~ at least ~ a mis-placing of priorities.

The brand should be of a size and in a place which best promotes the subject of the site.

If they want to promote the artists, they can do that by link from the nav menu and promote other businesses too with, perhaps, a generation of revenue for the orchestra as well.

I would suggest you draw the issue of the mixed message and, if you like, this comment, to the attention of whomever has the brief. They may realise the negative impact it has on the site and its use and they may also see how they would nearly be better offline than with siuch a mish-mash of purpose.

I usually find when I explain something clearly and concisely, often the recipient of the info realises what the obstacle has been and they give greater freedom to the web builder who, after all, is the knowledgable one. I bet he wouldn't feel the need to accept your advice as conductor??? lol.

I should also suggest you consider that if this is a portfolio of your work it can't be done like this if you want to show how good you are. It is in your own interest to get this message across to them.

Then even if it involves more work, I would do three designs. one as a working site and two as psd graphics. they can then see the site working and may be better able to visualise what either of the other two layout would be like. In my experience, they choose a design which was nothing like they first envisaged and usually is a mixture of three.

In sumary then.

1. logo has to go from top left across the page.
2. nothing should clutter the logo or it won't do its job effectively.
3. the web designer needs to have the confidence of the employer. If they do most times the employer wil let them get on with it.
4. Clients often cannot visualise what they want and they often don't know what will work - even if they think they do. You need to make it simpler so that the visual ideas are in front of them. then they can tweak it. A 'blank canvass' is of little help.

I hope this helps.


08-10-2009, 11:16 PM
Are the page colours great with the photo because you got them from within the picture? (or is that the specialist knack you have?)

Just noticed I never responded to that one.
Actually I didnít use the colors of the orchestra image. In fact, Iíve only added the image at the end. Those colors were just what I imagined would look warm, elegant, and classy, what I would associate with a symphony orchrestra or an opera houe. However, now that you mention it the headerís brown could in fact resemble the color of the string instruments, and upon that thought Iíve improved the design a little by adding some (barely visible) wood kind of structure into the brown and also adding a single f hole at first and then even the shape of a cello (lying) that comes out of the straight edge of the header.

But anywayÖ YaymeQ, the artwork image looks waaay better now that it isnít squeezed anymore and kinda goes ďaroundĒ the content in one piece (Iíll ignore the alignment issue for now). However, Iíd suggest you put the image as background behind the content (or to say it the other way íround: layer the content above the artwork).

There just comes another thought into my mind: Why donít you have the artwork as page background and put the content above it? If the artwork is really big you could make it like 2000 pixels wide and apply it as background with fixed position to the body element. This way itíll stay fixed when the content is scrolling and with 2000px width itís unlikely that many people wills ee the edge (you could make it wider but watch out for file size).

Also if you wanna keep the color scheme you currently have you could do something like this (I also used the beige of the logo as complementary color):


(I used a different bg image because I donít have the artwork in full but you know what I mean)

08-10-2009, 11:32 PM
Iíve improved the design a little by adding some (barely visible) wood kind of structure into the brown and also adding a single f hole at first and then even the shape of a cello (lying) that comes out of the straight edge of the header.

part of that sounds very wude. :D

I'm off to the opticians. can't see a thing :(


08-11-2009, 12:28 AM
What do you mean?

I haven’t uploaded my improvements, just wanted to tell you about it.

08-11-2009, 01:00 AM
I understand, now. It sounds very good, if I have imagined it correctly.

08-11-2009, 04:28 PM
That part about the f hole... rather graphic.

Yeah Yeah Yeah, I'm just messin around witchoo, I know what you mean... btw trombonists do it in 7 positions! :thumbsup: