Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Critique please, Elysium Source

Reply
Thread Tools

Critique please, Elysium Source

 
 
Nik Coughlin
Guest
Posts: n/a
 
      04-03-2007
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/


 
Reply With Quote
 
 
 
 
John Hosking
Guest
Posts: n/a
 
      04-03-2007
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
 
Reply With Quote
 
 
 
 
Andy Dingley
Guest
Posts: n/a
 
      04-03-2007
On 3 Apr, 01:25, "Nik Coughlin" <(E-Mail Removed)> 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.

 
Reply With Quote
 
Chris F.A. Johnson
Guest
Posts: n/a
 
      04-03-2007
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)
 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      04-03-2007
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
 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      04-03-2007
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)
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      04-03-2007
Andy Dingley wrote:
> On 3 Apr, 01:25, "Nik Coughlin" <(E-Mail Removed)> 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? 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.


 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      04-03-2007
Chris F.A. Johnson wrote:
> 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>


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


 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      04-03-2007
Jim Moe wrote:
> 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.


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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Critique Request: CheckBoxColumn Fao, Sean ASP .Net 0 02-15-2006 05:09 PM
Pls critique Ike Java 1 10-01-2003 04:47 PM
Critique request: x01 Andrew Cameron HTML 53 09-17-2003 08:56 PM
critique request Cynthia Turcotte HTML 7 09-13-2003 07:33 PM
comp critique nkiru HTML 2 08-05-2003 07:44 AM



Advertisments