Critique please, Elysium Source

[Nik Coughlin]

Just implemented the html and css for a redesign of a game engine's site. I
was given a photoshop image for the design, so while I'll pass along any
comments on the look and feel that I get, I didn't do that, and I'm more
interested in critiques on the html + css. Obviously this is just a
template with no content in it, the links are just placeholders etc. The
existing content on the site will get plugged into it.

Here's the page:
http://nrkn.com/elysium/page.php

This is a jpeg of the reference image I used (55k):
http://nrkn.com/elysium/ES2.jpg

This is the site as it is now:
http://splamm.com/elysium/

 

[John Hosking]

F'ups set to alt.html.critique

Just implemented the html and css for a redesign of a game engine's site. I
was given a photoshop image for the design, so while I'll pass along any
comments on the look and feel that I get, I didn't do that, and I'm more
interested in critiques on the html + css. Obviously this is just a
template with no content in it, the links are just placeholders etc. The
existing content on the site will get plugged into it.

Here's the page:
http://nrkn.com/elysium/page.php

Hi, Nik

Just a few quick comments as I *must* go to sleep.

The reference graphic you're working from looks a bit blurry to me, but
the graphics (upper-right) on your real page look even more so. Of
course, maybe it's just because I'm really tired (or old ) now.

The page seems a wee bit sluggish. When I resize my browser (FF),
there's a half-second delay while the page gets recalculated (or
something) and then repainted. Don't know what this is. It's not my
tiredness or age, because I can get other pages to react perkily.
UPDATE: I've spent, oh, 15 minutes on this post and now, as I'm about to
send, I see the page responding nicely. So maybe I hallucinated the
slowness, or perhaps I'm the sluggish one. Nevermind.

Sluggishness not so bad in IE6, but I see you're doing something special
for it.

Loading takes surprisingly long (about 6 seconds on ADSL 2500 Kbps).
What will it be like with the actual content?

Hey, it's getting cold in here; throw another DIV on the fire, will you?

Okay, I see you're keen to have rounded corners. I guess the stretching
of the graphics is what's bogging the response down. Don't know what to
suggest here, sorry.

The button graphics actually get *fainter* on hover, which I think is a
novelty. It seems, er, not right to me, but I'm not a graphics person,
and you've got one of those there with you, so don't mind me. I would
prefer to see the captions for the buttons change for me as I resize
text, but that's partly because they look blurry to me.

I haven't studied your CSS long enough to find anything to criticize, so
probably it is both hunky and dory.

I can't say I like the frizzy diagonal background graphic, but I guess
that'll be mostly hidden be real content. Otherwise it looks really
good. Certinaly more fresh than the current page.

HTH. ZZzzz..

 

[Andy Dingley]

Just implemented the html and css for a redesign of a game engine's site. I
was given a photoshop image for the design, so while I'll pass along any
comments on the look and feel that I get, I didn't do that, and I'm more
interested in critiques on the html + css.

Too many ids, not enough classes on the major <div> Using class
instead gives you an easier life with CSS selectors afterwards.

Reduce this stuff
<!--[if lte IE 6]>
If you must (and there are vanishingly small reasons to), then keep it
down to the absolute bare minimum. At least you're using [if lte 6]
though (a contained and diminishing problem), rather than [gte].

I can't believe you need a "spacer.gif", especially sized in pixels,
and unbelievably for IE6 specifically. For one thing this is a very
simple layout - everything is full width, and it's width management
that gives most IE-related problems.

Obviously this is just a
template with no content in it, the

It won't tell you much until there's some visible content. Much of the
need for prototyping depends on seeing how it responds to resizing,
not just showing that you can get the boxes the right colour.

 

[Chris F.A. Johnson]

Just implemented the html and css for a redesign of a game engine's site. I
was given a photoshop image for the design, so while I'll pass along any
comments on the look and feel that I get, I didn't do that, and I'm more
interested in critiques on the html + css. Obviously this is just a
template with no content in it, the links are just placeholders etc. The
existing content on the site will get plugged into it.

Here's the page:
http://nrkn.com/elysium/page.php

As someone else mentioned, it's very slow on first load.

This is how it looks in my browser:
<http://cfaj.freeshell.org/testing/elysium.jpg>

 

[Bergamot]

http://nrkn.com/elysium/page.php

http://www.bergamotus.ws/screenshots/elysium.png

BTW, my browser default font-size is 20px, minimum size 17px.

 

[Jim Moe]

Here's the page:
http://nrkn.com/elysium/page.php

Using Seamonkey v1.1.1.
The rendering time is very sluggish. Always.

Look at the page with images disabled.
"spacer.gif"!?

I see no need for all of those DIVs. The corners and edges can all be
floated images. It would then be only a single div.
Are the gaps between the decorative headers/footers and content supposed
to be there? Looking at the jpeg, I guess not.

 

[Nik Coughlin]

Too many ids, not enough classes on the major <div> Using class
instead gives you an easier life with CSS selectors afterwards.

Yes, you're right, in fact I could probably not only make them class
instead, but get rid of a lot of them entirely.

Reduce this stuff
<!--[if lte IE 6]>
If you must (and there are vanishingly small reasons to), then keep it
down to the absolute bare minimum. At least you're using [if lte 6]
though (a contained and diminishing problem), rather than [gte].

Yes, mainly to apply corrections to IE bugs (am using the Holly hack because
IE isn't drawing backgrounds on floated elements) and also to replace some
png files with gif because I didn't want to use the AlphaImageLoader hack,
I've seen pages that use it crash IE too many times, and randomly and
arbitrarily at that.

I can't believe you need a "spacer.gif", especially sized in pixels,
and unbelievably for IE6 specifically. For one thing this is a very
simple layout - everything is full width, and it's width management
that gives most IE-related problems.

Again, you're right. I was being lazy here.

It won't tell you much until there's some visible content. Much of the
need for prototyping depends on seeing how it responds to resizing,
not just showing that you can get the boxes the right colour.

Can you stop being right already? I've done some testing and I've used
this technique before, IIRC it only breaks when you have floated content and
you don't clear it.

Thanks for your helpful comments Andy.

 

[Nik Coughlin]

As someone else mentioned, it's very slow on first load.

This is how it looks in my browser:
<http://cfaj.freeshell.org/testing/elysium.jpg>

Yes, it seems to break slightly when the text size is increased too much.
Will have a look, thanks.

 

[Nik Coughlin]

Using Seamonkey v1.1.1.
The rendering time is very sluggish. Always.

Look at the page with images disabled.
"spacer.gif"!?

I see no need for all of those DIVs. The corners and edges can all be
floated images. It would then be only a single div.

No, it doesn't work. Try it. Also, by moving the rounded box elements from
css backgrounds to image tags you are turning layout images into content
images, bad idea. It would look horrible in a browser without css. As I
said to mbstevens:

The divs are just a container for the background. Unfortunately because a
box is made up of 9 sections:

/-\
|@|
\-/

I need 9 divs for each box in order to be able to apply 4 different corner
backgrounds, 4 different edge backgrounds, and a central background. I have
seen tricks that reduce this number but they all break as the box gets past
a certain size. I'll keep looking into it though, and see if there is room
for improvement.

Are the gaps between the decorative headers/footers and content
supposed to be there? Looking at the jpeg, I guess not.

Do you mean the spacing between each of the three rounded boxes, or the gaps
that appear within the boxes as Chris pointed out here:
http://cfaj.freeshell.org/testing/elysium.jpg

The former is intentional, the latter is an issue.