Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    •  
      CommentAuthormas_ab
    • CommentTimeJan 5th 2006
     permalink
    First, I'm a new member here so I'd say hi to all. I'm from Indonesia.

    Second,
    I'm working on this site http://ibshastautama.com.23.masterwebnet.com/ . The actual address is www.ibshastautama.com but I'm still waiting for the ns to refresh (maybe in Saturday, it'll be active).

    I'd like to have your comments and suggestions. Thanks in advance.

    Oh, only the "Home" and "Kontak" are available so please don't bother clicking the rest of the links. :)
    •  
      CommentAuthornifkin
    • CommentTimeJan 5th 2006
     permalink
    I think it looks good. The only thing that bothers me (and it's strictly a personal thing) is the a:hover making the navigation links bold so the other nav items shift around.
  1.  permalink
    <div id="container">
    <div id="head"></div>
    <div id="leftcolumn">
    <div id="nav">

    Div abuse. It looks ok, I suppose. I don't have much of an eye for design. I shall comment on the code in detail tomorrow - I'm tired.
    •  
      CommentAuthormas_ab
    • CommentTimeJan 5th 2006
     permalink
    To nifkin,
    Yeah, that shifting a:hover bugs some people but it looks funny to me so I'll keep it that way ;)

    to nick1presta,
    What do you mean div abuse?
  2.  permalink
    Good job.
    Just a couple comments.
    1. Top image too big take too much space on a page.
    2. space between line too big
    3. Again space between words too big
    4. Navigation Icons no clear enought what they are. They looks fine in a group but hard to understand what they represent.

    I have not looked at the code only on design part.

    Cheers, DS
    I hope this helps.
    •  
      CommentAuthormas_ab
    • CommentTimeJan 6th 2006
     permalink
    To dmitry,
    Yes, the top image is too big I'm working on it. And the space too.

    Thanks,
    • CommentAuthorGustavs
    • CommentTimeJan 6th 2006
     permalink
    Sorry, but I don't really like anything in that menu. Not the icons not the text separated with "|". And not the hover which moves the whole menu.
    Also, in the header image you can't really read the slogan clearly. It should be clearly visible.
    I think you should add some images with align="left/right" becouse mostly people doesn't like to read so solid text.
    •  
      CommentAuthormas_ab
    • CommentTimeJan 6th 2006
     permalink
    Gustav,
    I got your point. I'll work on that.

    This is the first time someone says that they hate my design .... LOL
    It's a good thing because in another group I always got "nice design","beautiful", and some other boring stuff ;)

    Thanks,

    Nick, I'm waiting for your comments on my code :)
    •  
      CommentAuthorbenjitastic
    • CommentTimeJan 6th 2006 edited
     permalink
    I was surprised to find that the page was fixed-width. I would recommend making it variable width for screen compatibily sake.

    Also on the navigation bar I think you should make the images themselves links and not just the text below them

    The right and left border images on the page are barely visible on my LCD screen.

    On the "kontak" page the middle deviding green line (border) is sticking up about 10 pixels into the banner image.

    Although I am a lover of fast loading images, your banner image could be a little higher quality (it is only about 24k), I can see jpeg artifacting.

    I do like the envelope scheme.
    • CommentAuthorGustavs
    • CommentTimeJan 6th 2006
     permalink
    mas_ab, I just try to be honest as "it looks awsome" or "it sucks" is totally unusefull. Hope I can help.
    •  
      CommentAuthortsk
    • CommentTimeJan 6th 2006
     permalink
    to dmitryseliv and mas_ab

    I don't think the space between the lines or the one between the words is excessively large. On the contrary i think it's just right. Currently people may be tempeted to say it's uncomfortable to read that probably because there is a congestion of text right there.

    Making good use of some whitespace, inputing some images (with plenty of margin around them) and chosing shorter rows for text display (probably in the 8-10 words) would definately improve your design and make your context more friendly to the visitor. From my experience, crowded text gets visitors too bored to keep reading on, this way risking to 'scare off' people.

    It is probably your decission but justifing text gives you that uncontrollable space between words that dmitryseliv and probably many others didn't like. It is a personal prefference, but I rather keep my text left-aligned.
  3.  permalink
    The design is good - I like it.

    Code wise:

    [***] You're usually abusing divs if you have a division following the body tag. Style the body:

    body { width:986px; margin: 0 auto; text-align:justify; background: #fff url("images/bgrepeat_y.jpg") repeat-y; font: 0.75em/1.5em Verdana,serif; }

    /* This covers the #container and the body. */</li>

    [***] I also suggest you use the global selector: * { margin: 0; padding: 0; border: 0; }

    [***] Too many divisions for things that you don't need divisions for.

    <div id="leftcolumn">
    <div id="nav">
    <ul>

    <li id="home">| <a href="#">Home</a></li>
    <li id="layanan">| <a href="layanan.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Layanan</a></li>
    <li id="klien">| <a href="klien.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Klien & Proyek</a></li>
    <li id="forum">| <a href="forum.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Forum</a></li>
    <li id="kontak">| <a href="kontak.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Kontak</a> |</li>

    </ul>
    </div>
    <div id="content">
    <h1>PT IBS HASTA UTAMA</h1>
    ....
    </div>

    This can easily be:

    <div id="left">
    <ul id="nav">
    ...
    </ul>
    <h2>PT IBS HASTA UTAMA</h2>
    <p>.......
    </div>

    div#left { float: left; width: ... }
    ul#nav { whatever... }
    ...

    You don't such so many divisions. Then just float one division right.

    [***] You could easily make this design fluid which I suggest you do. It would be extremely easy and would benefit most of the web as people with a resolution less than 1024x768px would get horizontal scrollbars.

    [***] div#footer should be a simple paragraph with a footer ID.

    [***] Your top header image should be a heading.

    <h1>IBS Hasta Utama | IT & Business Consulting</h1>
    h1 { text-indent: -5000em; height: 230px; background: #fff url("images/header.ext") no-repeat; }

    This way, people who don't have CSS enabled can see get a header for what the site is about. Change all other h1 tags to h2 tags...




    Everything else is just minor.
    •  
      CommentAuthormas_ab
    • CommentTimeJan 7th 2006
     permalink
    Thanks to all of you guys! You're the best!

    Finally, I learned some things by requesting a sitecheck :)

    Nick, your pointer is much appreciated!
  4.  permalink
    I would make the seperating green lines in a lighter shade.
    •  
      CommentAuthormas_ab
    • CommentTimeJan 7th 2006
     permalink
    Thanks Sebastien, I'll think about it ;)
Add your comments
    Username Password
  • Format comments as (Help)