Critique please, Elysium Source

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/

F'ups set to alt.html.critique

Nik Coughlin wrote:

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..
--
John

John Hosking wrote:

F'ups set to alt.html.critique

Nik Coughlin wrote:
http://nrkn.com/elysium/page.php


Hi, Nik

Hi John, thanks for your time and helpful comments!

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

The reference graphic you're working from looks a bit blurry to me,

Probably the high jpeg compression I used to make it download quickly
I'm not using that actual image as my reference, I have the original
photoshop file, was just to give some idea of what I was working off

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.

I think that's probably the combination of italic text and a drop shadow,
will let them know.

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.

It repaints fine on my 4ghz dual core :P I'll try it on a more entry level
machine, thanks.

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.

Excellent, had me worried for a second.

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

Yeah I didn't want to use the alpha image loader hack, so I'm replacing some
of the png files with gif files for IE 6. I don't like using the hack
anymore, I've seen IE 6 freeze and crash on pages that use it under certain
circumstances.

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

Might take a while to fill in all of the background graphics, but everything
apart from the css background images the page totals to only 11k, so, aside
from those it should show the content pretty much instantly, even on dialup


It's not so much the size of the page as the latency introduced by having a
lot of seperate image files (for the corners of the boxes etc). Might see
if I can combine some of them, use the css sprite technique. Then I can
probably get it down to 3 images per rounded box rather than 9 (could get it
down to 1 if it didn't need to be fluid!).

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.

Yep, all that nesting is a necessary evil to have:

a) Rounded corners with
b) alpha transparency and
c) Still be fluid

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.

Ah, the hover effect is just a temporary one that I threw together to test
doing a hover. I probably should have mentioned that.

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

Validator thinks so, but that doesn't mean it is :P It should be though

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.

I'll pass that on, thanks!

On 3 Apr, 01:25, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

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.

On Tue, 03 Apr 2007 12:25:07 +1200, Nik Coughlin wrote:
I'm more

interested in critiques on the html + css.
Here's the page:
http://nrkn.com/elysium/page.php

It suffers from the dread divitis.
Remember that any block element can be positioned without being surrounded
by a div. If you don't really need a div, just position the element.

Spacer images are usually a bad idea -- use CSS for positioning. I
realize these may have been put there just for the template you are
showing, but get rid of them when you write the real page.

It validates nicely, thanks.

On 2007-04-03, Nik Coughlin wrote:

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>

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
========= Do not reply to the From: address; use Reply-To: ========
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Nik Coughlin wrote:

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

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

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

--
Berg

Nik Coughlin wrote:

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.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Andy Dingley wrote:

On 3 Apr, 01:25, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:
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.

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.

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.

Can you stop being right already? :P 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.

mbstevens wrote:

On Tue, 03 Apr 2007 12:25:07 +1200, Nik Coughlin wrote:
I'm more
interested in critiques on the html + css.
Here's the page:
http://nrkn.com/elysium/page.php

It suffers from the dread divitis.
Remember that any block element can be positioned without being
surrounded by a div. If you don't really need a div, just position
the element.

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.

Spacer images are usually a bad idea -- use CSS for positioning. I
realize these may have been put there just for the template you are
showing, but get rid of them when you write the real page.

Yep, just laziness on my part.

It validates nicely, thanks.