What do you think of this site?

I like the header image, but I think it's way too big. If you're going to be adding a lot more content then you'll have to scroll a lot just to get away from the header. I already have to do that on the night’s page.

As for your HTML, I think it could do with some improvement. Your navigation would be a lot better in an unordered list, and I’d be inclined not to have all your images in page. I’m not sure how bothered you are about this side of things.
 
An initial impression, looking at just the aspect of design and interface, I like the style - it's smart and appropriate for the content :). Some thoughts:

  • I also think lower resolutions will suffer from the content and primary navigation being so far down the page. I would consider compacting the header graphics down to something smaller, maybe just on the inner pages (like the gallery). Especially when the initial page load is weighing in at ~350KB.
  • The gallery page seems like an afterthought as the layout changes. Not a big issue, but I'm a fan of consistency.
  • The typography of your main content I feel could do with a little extra fluff - perhaps some additional colour hints, and change the small-caps headings as they look quite ugly on my machine. Have you considered a serif font for the body text/headings (Georgia?) - might look better in respect of the surrounding images.
  • Logos and headers would benefit from being clickable (back to the homepage). It's a traditional interface feature, and many users expect it.
  • Biggest let-down, I feel, is the background and severe 'boxing off' of the content area. The flat grey background looks very bland in comparison to the content area's decoration, and the hard edges of the 1px black border accentuates this. Blending the container box into the background, and making the background a little more 'dynamic' would work well.
 
As Augmented said.

Don't make the header too much smaller, I love it, but unfortunately it is a bit much for low resolutions. The background needs sprucing up, maybe a subtle, faded image repeated along the top based on the black flowers of the header. Also, I'm not a huge fan of the buttons down the left, a bit dirty compared to the sharp AfterDark text. Maybe make them smaller and cleaner, giving the content more space. Haven't looked at the code.

Beautiful piece of work, very nice indeed.
 
I'll leave the coding to the experts, as i know nothing about that. :o

Visually;

Love the sidebar text ( grundgey ) , but don't like when the "Capital" letter for the link turns to the "scrolly/fancy" font.

Love the header.

Perhaps darken the background from white to a light grey ?

Very nice .

( Pity, i'm to old to join :D )

Mark
 
Thanks for the input guys. Done some changes....have a look www.lateafterdark.com


Mr L: What is the advanted of doing the nav menu in a list? What do you mean by not having all the images in page?

Augmented: Totally agree with what you are saying. The load time was a bit silly so I have made the header smaller and I have added a fade in there (from grey in the header to white)

I will make the headers and logos clickable

I agree with you on the background and the hardcore boxing off of the content. I had toned down the black border and it looks better. I was thinking of adding some kind of repeating pattern to the grey areas surrounding the content. What do you think?

How can I add images that float to the left and the right sides of the container div?


joeyjojo: I work at 1920x1200. I wish people would stop running stupid res lie 1024x768 :P I do have to make the header smaller though. I like the grunge of the buttons...I think it contrasts well with the flowers etc.


mrdbristol: Thanks. Glad you like it. I quite like the fancy lettering though. It also runs in line with the designs used for their print advertising.
 
I like the header, just not the font, or size of it.

I think the Navigation looks a bit out of place (Again, font issues.) Also, maybe the 'rollover-ish' effect could be a bit more subtle.

Good cool on Georgia, Augmented. Love that font.

Coding:

add an alt tag to this line 25:
Code: 
<img class="letter" src="a.jpg"  />

change & to &amp; on this line 31 nights.htm:

Code: 
<p class="nightinfo">On the Dancefloor: Hip Hop, Funk, Breaks & House</p>


Elsewhere seems fine.
 
UnknownSoldier said:
Thanks for the input guys. Done some changes....have a look www.lateafterdark.com
Click to expand...
Looking better.
UnknownSoldier said:
Mr L: What is the advanted of doing the nav menu in a list? What do you mean by not having all the images in page?
Click to expand...
Well, basically you have a list of links that go to various different parts of your website. So the best way to present the links is to put them in a list. Well structured HTML will make your website more usuable in various different broswers. Particulaly text-based and those that do not support CSS or have it disabled. This post I made earlier today has an example of a list of navigation links.

My second point isn't so important if you're going to link the header.
 
For the background, I was thinking maybe this sort of thing:



Just something I threw together off the old header. In body you'd change background to:
Code: 
background:#D3D3D3 url(bodybg.gif) repeat-x;

And it looks something like this:



Good job :)
 
Sorry, It don't like what you've done to the header.

( Viewed in FF , 1280 x 1024 )

You have lost too much of that graphic.

Mark
 
Joeyjojo....I like. Would I just be changing the background image of the body in my css file (and then fiddle with repeating setting)?

Well I am not really sure what res to design. I am trying to make it look good in 1024x768 and the bigger header means that you have to scroll lots to see the info. I think this is a fair compromise.
 
Sorry about the delay. Change
Code: 
body {
		text-align:center;
		background-color:#D3D3D3;
		}
to
Code: 
body {
		text-align:center;
		background:#D3D3D3 url(bodybg.gif) repeat-x;
		}

That keeps the background colour, but adds bodybg.gif as a background image, repeating it across in the x direction.

Also I see you've gone back to the original header. It's your call to be honest :) Looks fine in 1024 768 imo.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom