Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I took the CSS plunge. Please critique the aftermath.

    Edit: Here's the link, without the backstory: www.offtone.com

    Alright, so all this talk of "CSS: good" and "Tables: *gasp* he said the t-word" flooding through dev forums these days convinced me to start learning and playing with this stuff. That, combined with the fact that I've grown to hate my current site (www.aaron-wright.com), inspired me to do a CSS redesign and rebuild.

    I started with http://new.aaron-wright.com/, and got a fair ways into it before I shouted a few obscenities at my monitor, took a week or two off, wiped my eyes, and then re-opened Photoshop.

    Now I'm here to post the link (which perhaps you've probably already clicked in my signature) for you all to judge and offer suggestions on.

    Anyone who says they prefer the look of my first attempt may rest assured that I will be making a skin for offtone.com using the same idea.

    So I guess you'll mostly be critiquing my default skin, but the source is still there for suggestions too. I'll post again when I've finished the site and have more skins.

    Thanks,
    Aaron
    Last edited by AaronW; 08-19-2004 at 03:27 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or not.


  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    Cheshire, England
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awwww!

    Well you're right, tables for layout are bad. Using CSS-P you seperate the presentational logic from the actual markup of the site. You can also very easily comply with web standards with CSS.

    You new.* site looks nice, and I actually prefair it to your first site. Keep up the good work.

    It's good to see more and more people using CSS-P over table (*gasp*)
    m crilly
    http//www.cheesynimrod.com/

    "There is no such thing as a problem, only an opportunity for a solution."

  • #4
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Looks nice But it looks like you've caught div-itis. You don't need that many divs in there

    eg: <div class="poll_question">Why did the chicken cross the road?</div> could just be <span class="poll_question> or something similar.

    Not got time to go through it all, someone else will prolly have time to show you what to change and stuff

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're reviewing the wrong one :P

    Guess I should've expected people would just click the first link they saw in the first post rather than read the post itself. Heh.

    www.offtone.com

  • #6
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Oops Looks good too Sorta got lost in your first post to which site it was, so looked at the new.* one

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First impression is that I really like the look and feel.

    Looking at your code, I'm curious why you're using a php file as your stylesheet.

    And I couldn't help but notice the comment in the css about your feelings for IE, so maybe you know your site produces some funky effects in IE6.

    The three floater divs on the right side are not moving like they do in Opera or Firefox. They seem to reposition themselves only when mousing over the main navigation.

    And the header image is producing a flicker on mouseover.

    Looks great in Firefox. Nice touch on the forms with the onmouseover effect and having labels for your inputs.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was aware that they didn't resize with the window, but I didn't know that mousing-over the navigation fixed it :S That's crazy.

    I'm not seeing the flashing on the header onmouseover, though. No idea what would cause that.

  • #9
    Regular Coder
    Join Date
    Aug 2004
    Location
    Cheshire, England
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd suggest re-creating your CSS code from the original CSS code. Also, don't forget to validate your code.
    m crilly
    http//www.cheesynimrod.com/

    "There is no such thing as a problem, only an opportunity for a solution."

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Blimey. It was valid. I copied and pasted the article text from MS Word into my textarea... Apparently MS Word likes to do funny little entity replacements on quotes and such.

    Fixed. Markup's valid. Will wait a bit longer and see if someone who's experienced something similar has a solution other than "rewrite the CSS" which I'll do as a last resort.

  • #11
    Regular Coder
    Join Date
    Aug 2004
    Location
    Cheshire, England
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You use MS Word as an editor for your code?

    Well I was only suggesting a re-write so that the code is clean and you know you haven't got little bits in there you don't need, but might be causing your problems.

    Sadly, I don't have time to go through your code and check it for you, otherwise I would and give you a complete solution.

    Maybe tomorrow I can find the time.
    m crilly
    http//www.cheesynimrod.com/

    "There is no such thing as a problem, only an opportunity for a solution."

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't use Word to write my HTML... I use Word to write my articles (better than a textarea :P)

  • #13
    Regular Coder
    Join Date
    Aug 2004
    Location
    Cheshire, England
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah!

    Well if you're going to create BIG articles (5,000 words plus) then I believe it's better to maybe post the first paragraph or two and have the rest either in a PDF file or in a Word file for download. I personally can't stand reading big articles/papers straight off the screen... I like to print them off and read them while I'm in bed or on my break/dinner in work.

    That's just me.
    m crilly
    http//www.cheesynimrod.com/

    "There is no such thing as a problem, only an opportunity for a solution."

  • #14
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mcrilly
    I believe it's better to maybe post the first paragraph or two and have the rest either in a PDF file or in a Word file for download. I personally can't stand reading big articles/papers straight off the screen...
    Just to stick my oar in, I personally hate it when files are in pdf instead of html. Opening pdf files uses up so many resources. Html files can be printed too.

    But that's a good idea, mcrilly, for long articles - to post the first paragraph or two on a page with a link to the rest of the article on a separate page that is suitable for printing (for those who like to read in bed).

    running Win2K viewed page in Firefox0.8 at 800x600 and 1024x768

    I quite like the look of offtone.com (that is the one you want reviewed??) It's very pleasing - and I'm not usually fond of looking at sites with black backgrounds.

    But at the risk of sounding like a broken record, when it is viewed at 1024x768, the side columns are rather large and blank. It would be great if you could make the layout more liquid. It would be a bit of a challenge but maybe you could divide the header image in two and take a portion of the header image that would repeat logically in the center as a background image for screen resolutions that are larger than 800x600.

    I see where you are going with the marker on the links to show what page one is on. Maybe you could accentuate it a bit more - possibly have a yellow top margin appear as well as the black bottom margin. (I hope that made sense) It would also be nice if the corners were rounded to reflect the rounded corners elsewhere.

    Is something going to go below the "standards" box? That is quite empty as well.

  • #15
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nothing's going under the "Standards" box. There may be more floaters above it, but there will always be that empty space. I could maybe make the content wrap around the floaters, but I'd much rather leave the content narrow and fixed width because a) It's easier to read narrow columns of text and b) It's easier to design cross-browser in a fixed-width environment :P That's also why the layout isn't fluid. That and I hate fluid layouts to begin with.

    Edit: But it takes to font scaling very nicely. I use px for sizes though, but I may or may not change those to pts or ems later...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •