Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    May 2006
    Posts
    1
    Member #
    13292

    Current Rating

    Visual Appeal:
    0.0 out of 5

    Accessibility:
    0.0 out of 5

    Website Speed:
    0.0 out of 5

    Compatibility:
    0.0 out of 5

    Overall Rating:
    0.0 out of 5

    Rate This Site


    Advertisement (login to hide this!)


    You must be logged in to view this site

    Hi,
    I wondered if anybody who is good with CSS would look over my new index.html page at: http://www.kitchen-worktops-complete.co.uk and let me know what you think. I'm new to CSS and don't want to mess it up.:nervous:

  2.  

  3. #2
    Senior Member jameskeeler's Avatar
    Join Date
    Feb 2006
    Location
    Chattanooga, TN
    Posts
    181
    Member #
    12621
    I had a lengthy review typed up and something happened to WDF...

    Anywho, I'll hit the main points again.

    The Good
    I like the design of the site. It's simple and liquid. The use of, or lack of, colors is nice, it lends to a very straighforward feel.

    The Bad
    You have 3 styles of nav links along the left side, another at the top of the page, and another along the right edge. You need to consolidate these into a single design and be consistent with that design across the entire site.

    The pics along the right side are links to anchors in the main page. Get rid of those along with the blurbs on the main page. Move that content to where it should be: pages specific to each manufacturer or material, e.g. corian.html would have ALL the info for Corian worktops that the visitor might be looking for. All the links on the site that deal with Corian would then point back to this single page. KISS (keep it stupidly simple).

    As for the links at the top, remove them entirely.

    The links to the left need be the only nav links on the site, aside from some at the bottom of the content area so that the visitor doesn't have to scroll up to move around the site. Make those nav links by using a simple unordered list and CSS. Then organize the links into a logical fashion so that the visitor is guided through the site and can find what they are looking for. Your goal is to get the visitor to the information that they are looking for in as few mouse clicks as possible.

    Remove everything that is product specific on that main page. It's too busy right now. The main page should be a simple description of the site, its purpose for existing, and list of the items and services offered. Don't try to make your entire site exist on a single page.

    Remove the "Kitchen Worktops in Granite, Corian, and other solid surfaces" that resides just above the logo. It's not neccessary and it's repetitive, because you'll place that description in the new content on the main page.

    Move the logo into the extreme top left corner, removing all margins and paddings.

    If you must have links between your logo and the content, make them for the services that are common to all the products: login, price quote, warranty terms and conditions, contact info, view cart, checkout, etc...

    Your site, while having a CSS stylesheet includes WAY too much presentation in the HTML code. You need to use the CSS stylesheet to stylize the elements, not a bunch of inline styles. Trust me, using an external stylesheet will save you enormous amounts of work down the road.

    What the hell is this:
    HTML Code:
    <h3><span class="style21"><span class="style19"><span class="style49">This is Kitchen Worktops Complete</span></span><span class="style49">...</span></span></h3>
    You need to spend some quality time with your code and clean it up. Take my advice above and make the CSS work for you, not the other way around.

    FYI, you need to remove that W3C graphic from the bottom of your site. Not only does it look out of place, but your site doesn't validate either.

  4. #3
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Is it absolutely necessary to have all of those definitions on the front page? That is a super long page.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  5. #4
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    The whole point of CSS is to keep your styling information totally seperated from your markup.

    Your site does not accomplish this.

    That <h3> tag that jameskeeler pointed out is a classic example of this. If you define all your headings properly in CSS, this should not be the case.

    Look at the site I've put up for review on here:
    http://www.rooflineuk.com/dans/index3.htm

    It may not be perfect but because I've kept all stye information out of my markup, and really paid attention to this fact, my code is clean and tidy ....AND it validates.

    Although it's tempting to get your site to look great and then tidy up your code, this is the WRONG way to do it. It takes way longer and you'll never get it 100% how you want it.

    My suggestions.

    Get a pencil and paper and draw, in blocks, your site. "Header", "Main content", "Navigation", "Images" etc...

    Then write basic markup like this:

    Code:
    <body>
         <div id="container">
             <div id="header">
             </div>
             <div id="navigation">
                   <ul id="navlist">
                        <li><a id="active" href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Info</a></li>
                    </ul>
             </div>
              <div id="maincontent">
                   <h1>Title</h1>
                   <p>blah blah blah blah</p>
              </div>
              <div id="footer">
                   <ul id="footernav">
                        <li><a id="active" href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Info</a></li>
                    </ul>
              </div>
         </div>
    </body>
    Then start doing your style sheet to make that look about right in terms of layout. You have the main areas defined in your markup so you can see it take shape as you modify your CSS.

    In the CSS I always start with any fonts and headings before I define any divs.

    So, I set up <p>, <h1>, <h2>, <h3>, a:link, a:visited, a:hover before I do anything else. Then, I set up styles for all the divs I defined in my markup.

    Then I just play around til I like the result.
    No ma'am, we in IT don't have a sense of humor we're aware of.

  6. #5
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Not much more left to say after that :knockedout: Agree with ALL comments posted above.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:37 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com