Critique please, Elysium Source

Discussion in 'HTML' started by Nik Coughlin, Apr 3, 2007.

  1. Nik Coughlin

    Nik Coughlin Guest

    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/
     
    Nik Coughlin, Apr 3, 2007
    #1
    1. Advertising

  2. Nik Coughlin

    John Hosking Guest

    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, Apr 3, 2007
    #2
    1. Advertising

  3. Nik Coughlin

    Andy Dingley Guest

    On 3 Apr, 01:25, "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.


    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.
     
    Andy Dingley, Apr 3, 2007
    #3
  4. 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)
     
    Chris F.A. Johnson, Apr 3, 2007
    #4
  5. Nik Coughlin

    Bergamot Guest

    Bergamot, Apr 3, 2007
    #5
  6. Nik Coughlin

    Jim Moe Guest

    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)
     
    Jim Moe, Apr 3, 2007
    #6
  7. Nik Coughlin

    Nik Coughlin Guest

    Andy Dingley wrote:
    > On 3 Apr, 01:25, "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.

    >
    > 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.
     
    Nik Coughlin, Apr 3, 2007
    #7
  8. Nik Coughlin

    Nik Coughlin Guest

    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.
     
    Nik Coughlin, Apr 3, 2007
    #8
  9. Nik Coughlin

    Nik Coughlin Guest

    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.
     
    Nik Coughlin, Apr 4, 2007
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    4
    Views:
    522
    Chris Uppal
    May 5, 2005
  2. Long
    Replies:
    5
    Views:
    383
  3. Developwebsites

    critique these sites please

    Developwebsites, Sep 14, 2004, in forum: HTML
    Replies:
    15
    Views:
    697
  4. Highlander
    Replies:
    9
    Views:
    2,437
    Al Dunbar
    Dec 7, 2005
  5. KK
    Replies:
    2
    Views:
    596
    Big Brian
    Oct 14, 2003
Loading...

Share This Page