Coffeehouse Thread

26 posts

Looking for feedback on site design

Back to Forum: Coffeehouse
  • User profile image
    CyberGeek

    Over the past week and a half I've been busy redesigning my website, and I think that it's reached a point where I'm ready to show it off. It's not done yet, I still have to add two sections, polish some IE7 CSS rendering and add some spiffy Javascript stuff, but I'm ready to show it to people outside my family and group of friends.

    So, if you feel like helping me out, please visit http://www.donaldhays.com/ and comment about anything you like (or don't like). Style, markup, anything. Also, I've been testing on IE7, Firefox, Safari, and Lynx, so it should render correctly just about anywhere, but if there's any issues please let me know.

    Thanks!

  • User profile image
    jsampsonPC

    Everything appears to be neatly done. The layout and design reminds me of Apple's design. I'm thinking the navigation font-size might be a smidget too large for me, or perhaps there needs to be more of a vertical-padding in the navigation.

    Other than that, this looks pretty nicely done. A little minimalistic on the colors, but that is good sometimes.

    Nice work!
    Jonathan Sampson (jsampsonpc)
  • User profile image
    littleguru

    I would remove the Intro thing... It distracts.

  • User profile image
    W3bbo

    Looking good, but:

    • Menubar text doesn't look right, it needs more room to breath
    • Try not to mix Serif and Sans-Serif fonts on the same page. It looks like you're using 3 fonts at the same time (Serif masthead, Sans-serif menu, Serif titles, and sans-serif bodies), try to work in some consistency
    • You're using the class attribute on some elements when you should be using element identifier selectors
    • Is signing every post with your name really necessary?
    • The right border of the "home/archive/feed" buttons is missing
    HTH

  • User profile image
    CyberGeek

    W3bbo wrote:
    The right border of the "home/archive/feed" buttons is missing


    What browser/OS?

    I've gone through and implemented many of the suggestions made in this thread. Thanks a ton!

  • User profile image
    W3bbo

    CyberGeek wrote:
    
    W3bbo wrote:The right border of the "home/archive/feed" buttons is missing


    What browser/OS?

    I've gone through and implemented many of the suggestions made in this thread. Thanks a ton!


    It's probably a rounding error, I haven't seen your CSS yet. In Firefox 1.5.0.10 if I resize the window horizontally the border flickers. For every 1 pixel out of every 4 or 5 pixels I increase the window width the line disappears.

  • User profile image
    CyberGeek

    W3bbo wrote:
    It's probably a rounding error, I haven't seen your CSS yet. In Firefox 1.5.0.10 if I resize the window horizontally the border flickers. For every 1 pixel out of every 4 or 5 pixels I increase the window width the line disappears.


    Oh, yeah, I've been struggling against that with various borders throughout much of the development of the site. The fix has usually been to change em measurements to px, though I don't really like doing that.

  • User profile image
    stevo_

    em is over used. Since when is a single design fluid to that degree?

    em inheritance is also pretty frustrating sometimes. I've actually moved away from using it more recently.

  • User profile image
    LostIn​Tangent

    stevo_ wrote:
    em is over used. Since when is a single design fluid to that degree?

    em inheritance is also pretty frustrating sometimes. I've actually moved away from using it more recently.


    It's not really so much an issue of fluidity as it is accessibility. Until all mainstream browsers (or for that matter client-installed browsers) fully support resizing of pixel based designs, ems are the obvious choice for allowing users to resize their font and enjoy the same browsing experience.

    Even with the advent of pixel resizing, its still considered a best practice to employ the "absolute-relative" style in which your containers are absolutely sized, using pixels for example, then its children are sized relatively using ems.

    As far as the site goes, it looks good, nice work CyberGeek. I only noticed a few things (purely code related):

    1) You're using an <img> element for your header logo, whereas I prefer image replacement, for accessibility and SEO benefits, ect.

    2) Like w3bbo mentioned, you're definitely overusing classes whereas ids are more appropriate.

    3) In your headerBox, you're marking every <a> element with the "button" class, when you could easily just target all children <a> elements inside of headerBox and save yourself the repeated class declaration.

    4) You're using the <em> tag for purely presentational purposes also. The text its wrapping certainly isn't meant to be emphasized.

    5) The gallery is using a <table>.

    6) In the post explaining how to use BBCode, you're using <br> elements to seperate the different options, when in reality, a <ul> would be better suited, since it's a list of options, and you could style the list to  look the way you want it without using breaks, which are almost never semantically correct (the exception being poems, addresses, ect.)

  • User profile image
    Darbacour

    Initial response:

    VERY good-looking!

    I have an Underground Music site and mostly HATE any artistic website that deviates from a black background.

    Now going in for 2nd looks.

  • User profile image
    Darbacour

    A BLOG is NOT an acceptable homepage.

    Personally I HATE BLOGs they are the next great instance of AOL chat.

    Please do something different than the latest Brittney Speers of Internet usage.

    It still looks pretty, but if meant to be a viable Tech resource the color scheme is NOT good.  White backgrounds and black text is far superior for for relaying information more important then 'how to get a burnable copy of the Delirium Mix of Silence Santuraurty'

  • User profile image
    Human​Compiler

    Darbacour wrote:
    A BLOG is NOT an acceptable homepage.


    Are you saying we've got it all wrong?  The Channel 9 homepage is a blog of sorts.  Lots of other sites do it too (i.e. content sites...sites that are blogs).

  • User profile image
    Chadk

    Darbacour wrote:
    A BLOG is NOT an acceptable homepage.

    How so?

    I think its great. Often they are more informative then huge pages, thats hard to surf around. Most people know how to use a blog to find information.

    Its also an easy way to get information, with like RSS.

  • User profile image
    stevo_

    LostInTangent wrote:

    Snip


    I understand accessability, without sounding like an arse, I've been doing web design for long enough.

    Long enough to know that pixel measurements don't cause problems with the important factor of the website, the text.

    At least to the degree that you can expect the design to become somewhat less 'elegant', but when you take into consideration that em fluidity is often just as in-elegant. Then I don't see the point in working in complete em.

  • User profile image
    W3bbo

    HumanCompiler wrote:
    
    Darbacour wrote:A BLOG is NOT an acceptable homepage.


    Are you saying we've got it all wrong?  The Channel 9 homepage is a blog of sorts.  Lots of other sites do it too (i.e. content sites...sites that are blogs).


    Playing Devil's Advocate here...

    On personal sites, if the first thing you see are a bunch of blog-entries it can be off-putting, usually you expect the frontpage of a website to give you the "Who, what, where, why, when", not whatever their latest developments are.

  • User profile image
    Frank​Palinkas

    Very nice, and I agree with the other observations for the css.

    Just a few questions please?

    Why are you using xhtml 1.0 strict with a MIME/media type set to text/html? IMHO, xhtml should only be used if you're plugging in other xml namespaces, i.e MathML, ChemML, SVG, etc. into the web page. Also, you must serve all xhtml DTD's with a MIME/media type of application/xhtml+xml. I didn't see any xml plugins in the page, therefore my question.

    My reasoning is that xhtml is only to be used for its modular purposes, as mentioned above, and not as a whip to write so-called "strict" markup. All markup should be written properly, semantically correct and fully accessible by assistive devices regardless of the DTD it falls under.

    Using HTML 4.01 Strict will serve the same purpose. The only change you'll have to make is "opening" up the link and meta element tags in the head section.

    HTH Big Smile

  • User profile image
    W3bbo

    FrankPalinkas wrote:
    Very nice, and I agree with the other observations for the css.

    Just a few questions please?

    Why are you using xhtml 1.0 strict with a MIME/media type set to text/html? IMHO, xhtml should only be used if you're plugging in other xml namespaces, i.e MathML, ChemML, SVG, etc. into the web page. Also, you must serve all xhtml DTD's with a MIME/media type of application/xhtml+xml. I didn't see any xml plugins in the page, therefore my question.

    My reasoning is that xhtml is only to be used for its modular purposes, as mentioned above, and not as a whip to write so-called "strict" markup. All markup should be written properly, semantically correct and fully accessible by assistive devices regardless of the DTD it falls under.

    Using HTML 4.01 Strict will serve the same purpose. The only change you'll have to make is "opening" up the link and meta element tags in the head section.


    Not necessarily.

    XHTML1.1 is the modular version of XHTML1.0 with a few modifications. You can serve XHTML1.0 as text/html, just not XHTML1.1 (Hixie wrote a long ditrabe on that a while ago).

    XHTML1.0 Strict is what the W3C wants everyone to be using.

  • User profile image
    LinusTorvald

    Not a fan of the black background

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.