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.
Results 1 to 9 of 9
  1. #1
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Design/Layout Review

    Could you please have a look at this site I have been building for a friend at school. I am just doing the design, not the content, so that is why only the home/guestbook links work. Please tell me if you like the layout/colours and what I could do to improve it. I know I should use CSS for the design instead of tables, but I do not know how, so any helpful pointers to CSS tutorials would be very welcome !

    There is one thing I am not sure about on the site: In IE on the home page (index2.php NOT index.php) there is a gap between the header image and the navbar. Any ideas why? I thought it might be something to do with the
    img {
    border:none;
    }

    in the CSS file but I have tried it without and it made no difference.

    Thanks in advance,

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    link?
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #3
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    not actually got time to take a proper look atm but it seems ok at first glance.

    the splash page isn't really neccessary as it serves no real purpose as far as i can see and is just an extra link for me to click.

    Also do you think you could fill the content area with some dummy content instead of just writing 'content' so we can get an idea of what it will look like.

    try www.lipsum.com
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #5
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok i've got rid of the splash page and added some fake content. (thanks for the link )

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Whitespace, graphic

    Overall a nice and straightforward layout, which could easily be done without a single table, but hey.
    The main content area could really do with some more whitespace, mainly to free the body text from the surrounding border, and to reduce the somewhat high line lengths.
    The menu items need more seperation, either in the form of extra space, or using seperators; now, it just looks like one long - albeit meaningless - sentence which tends to somewhat obscure the fact that these are links.
    Lastly, the obvious banding in the header graphic is putting me off; see if you can reduce this by for example dithering (gaussian/motion blur).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not quite sure how to make more whitespace around the text. Do I change the HTML or CSS file?

  • #8
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone out there?

  • #9
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by chilipie
    Anyone out there?
    Yep But be patient, not all of us are on the computer all the time, and it's a holiday in the US, so I'm leaving for a day off here in about five minutes.

    First off, you can do this without frames, and I'd love to see it that way. You're causing more havoc for yourself; people won't be able to bookmark your pages properly and you'll have other issues. It's a good thing for you to get away from it.
    If you want to use tables, that's cool, but make sure your page validates:
    http://validator.w3.org/

    and your css if you have an external file:
    http://jigsaw.w3.org/css-validator/

    To learn CSS check out this tutorial that's free:
    http://www.w3schools.org

    Now for the look:
    1. I'd just get rid of 'welcome to shimmer central' and make that whole bar links only -- and it would look better to spread the links out more cleanly, they feel cramped.
    2. I think this would look better centered rather than to the left, but that's a personal opinion. I'd also like it better if all the table pieces butt up against each other, no black in between link menu and content, etc.
    3. In the content area, put more space between the box and the text -- something like ten pixels or more, it'd be easier to read and look cleaner.
    4. If you're going to use the pink, I'd stay with the pink all the way through -- drop the gray background on the link menu and footer and make it a light pink.
    5. When you butt everything together, a white background instead of black, or a really light pink pattern, may look a lot cooler.

    Now, whitespace is a design term -- to control whitespace is an art you tend to learn as you design for print and web... you learn about how to seperate little areas and add more white so it's easier to read and the design looks cleaner. This is something that can be learned through experience and lessons on design (search google for more about design techniques or check out local books at the library, I still do) -- so that cannot be accomplished by code alone; it's just as much a feel.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...


  •  

    Posting Permissions

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