SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ecommerce table-less designs

    Please take a look at the following templates for an upgrade to an existing e-commerce site and let me know what you think.

    I'm trying to go the web-standards route here as much as possible. I was able to remove the tables from everything but collection.php.

    The navbar drop downs work but none of the links go anywhere.

    http://www.boringguys.com/ea/home.php - home page
    http://www.boringguys.com/ea/line.php - Sub-category page
    http://www.boringguys.com/ea/collection.php - Product listing in sub-category

    Thanks.
    -Rich
    Last edited by boringguy; May 11, 2004 at 18:19.

  2. #2
    SitePoint Addict
    Join Date
    Jun 2003
    Location
    Barrie, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not exactly sure what I'm reviewing here, but it is a very impressive tableless design. I think it would work very well as an e-commerce site.

    The colours are very appealing. They're soothing yet sort of perk you up in a way.

    I main piece of advice for you would be to try centering the site and see how it looks. I think that might be a little better.

    Other than that, keep at it and I'm sure you'll have a really cool looking e-commerce site in no time.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    on centering: the current site uses really terrible javascript drop downs... I've pruned them here in these templates to a css-based design... but in so doing had to pin the navigation bar to absolute positioning, that's why it's in the top-left. I'd love it if someone could show me how to get that same functionality with the navbar in a centered design without the use of a ton of javascript.

    -Rich

  4. #4
    SitePoint Addict
    Join Date
    Jun 2003
    Location
    Barrie, Ontario, Canada
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out this article for css dropdowns. May help out a bit.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks but no way man... those suckerfish dropdowns are fish food. There are so many bugs in them its ridiculous. They're terrible on Macs... This drop-down that I've written works the same for every browser that supports getElementyById with only 10 lines of javascript...

    I'm really looking for simplicity with this site design. My philosophy with this site so far is that if I have to do a great deal of jumping thru hoops to get a certain design feature, I'm dropping that feature.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    more centering fun...

    I tried to center the whole design again this morning. Gave up. There seems to be something weird in IE (all versions)... when you use {margin: 0 auto; } on elements in css, you cannot use javascript a la

    Code:
    left = document.getElementById(category).offsetLeft;
    The offset.Left should be where the element is, here in my case it's a div with an unordered list inside. But when the margins are set to auto, this gives the value in relation to the margin. My whole navigation system is based on knowing that offset.Left value.

    So, then I'd have to calculate where the div is on the page using old school dhtml methods... and I'm not gonna do that. The design looks pretty good in the top left I think.

    I'm still looking for more feedback....

    Thanks.
    -Rich

  7. #7
    SitePoint Member amirdavies's Avatar
    Join Date
    Apr 2004
    Location
    Coventry, UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With regards to the navigation drop-down...

    I feel you should maybe make the hover state a slightly darker colour. This increase in contrast will aid usability.

    Also, if it is possible, try increasing the space between each navigation item (in the vertical drop-downs). A couple of pixels should do the job. This will prevent users accidentally clicking on the wrong item (which can increase frustration). Saying that, it does go against Fitt's Law... :P
    Amir Davies
    Solutions Developer
    Pro Enviro Ltd

  8. #8
    SitePoint Enthusiast wlh's Avatar
    Join Date
    May 2004
    Location
    Las Vegas
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think is looks great for using web standards. Keep it up

  9. #9
    SitePoint Enthusiast MadDog31's Avatar
    Join Date
    Nov 2003
    Location
    Wilmington, NC
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that is a great tableless design. I've been wanting to get into the tableless thing more now anyhow, and it's good to see that it's possible to achieve excellent results with the method. It's clean, I like the colors, the pictures are perfect for the situation and everything is spelled out clearly.

    Great work!

    Ian
    "It's way better to have 100 idiot clients than to have one idiot boss."

  10. #10
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by amirdavies
    With regards to the navigation drop-down...

    I feel you should maybe make the hover state a slightly darker colour. This increase in contrast will aid usability.

    Also, if it is possible, try increasing the space between each navigation item (in the vertical drop-downs). A couple of pixels should do the job. This will prevent users accidentally clicking on the wrong item (which can increase frustration). Saying that, it does go against Fitt's Law... :P
    Amir, thanks for the input. I've spaced the text in the drop down nav menus a little bit. I'm still working on the hover color. I've also mostly finished up the product detail page here (again, no tables)
    http://www.boringguys.com/ea/3/product.php

    This is the first site that I've really tried to forgo using tables where css could be applied. It's working out even better than I had hoped.

    Thanks.
    -Rich

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks maddog, wlh... I've now logged over 120 hours on these 4 templates. That includes a lot of learning and digging thru books and websites but I think it's worth it in the end.

    -Rich

  12. #12
    SitePoint Enthusiast MadDog31's Avatar
    Join Date
    Nov 2003
    Location
    Wilmington, NC
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    BoringGuy, (I hate typing that...haha...sounds like I'm making fun of you ro something!)

    Did you use like a Fireworks mouseover technique for the top and then used CSS to define the color of the mouseover on a link?

    Ian
    "It's way better to have 100 idiot clients than to have one idiot boss."

  13. #13
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fireworks? Ick. I'm a VI text-editing snob.

    I stole that basic nav menu from espn.com. Each menu (shoes, handbags, acc) is basically an absolutely positioned div with two lists inside it. It validates and it creates nice nav lists when the styles are turned off. You just have to position each menu next to each other on the same line. Here's the SHOES menu.

    Code:
    <div id="SHOES" class="n2" onmouseover="rollout('SHOES');" onmouseout="rollin('SHOES');">
            <ul>
                    <li><a href="">SHOES</a></li>
                    <li id="rolloutSHOES" class="roll">
                            <ul>
                                    <li><a href="">Evening</a></li>
                                    <li><a href="">Dress / Career</a></li>
                                    <li><a href="">Casual</a></li>
                                    <li><a href="">Boots</a></li>
                                    <li><a href="">Sandals</a></li>
                            </ul>
                    </li>
            </ul>
    </div>
    and the styles:

    Code:
    #SHOES {position: absolute; top: 76px; left: 10px; margin: 0; padding: 1px 0 1px 4px; width: 120px; }
    .n2 {font: 12px Arial, Verdana, sans-serif; color: #FFFFFF; background-color: #BCD48C;
            margin: 0; padding: 0; }
    .n2 A {text-decoration: none; color: #FFFFFF; font-weight: bold; }
    .n2 A:hover {text-decoration: none; padding: 0; margin: 0;}
    #rolloutSHOES {display: none; background-color: #FFFFFF; width: 100px; z-index: 1000; padding: 2px 4p
    x 2px 8px; margin: 0; border: 1px solid #BCD48C; }
    #rolloutSHOES UL, #SHOES UL {list-style-type: none; margin: 0; padding: 0; }
    .roll {font: 12px Arial, Verdana, sans-serif; color: #000000;
                    background-color: #ffffff; line-height: 1em; padding: 0; margin: 0;}
    .roll A {text-decoration: none; color: #336699; font-weight: bold;}
    .roll A:hover {text-decoration: none; color: #D7B5CF; }
    .roll LI {padding: 0 0 3px 0; }
    and the super minimal javascript:

    Code:
            function rollout (category) {
               if (document.getElementById) {
                    document.getElementById('rolloutSHOES').style.display = 'none';
            
                    document.getElementById('rollout'+category).style.position = 'absolute';
                    left = document.getElementById(category).offsetLeft;
                    document.getElementById('rollout'+category).style.left = '0px';
                    document.getElementById('rollout'+category).style.top = '16px';
                    document.getElementById('rollout'+category).style.display = 'block';
               }
            }
    
            function rollin (category) {
               if (document.getElementById) {
                    document.getElementById('rollout'+category).style.display = 'none';
               }
            }
    NOTE - I took out the other menu info from both the CSS and javascript for readability.

    Overall, this menu looks pretty cool and works great across all browsers that support getElementByID (not NN4.x which will get an unstyled version of my pages). There are also no crazy javascript or css hacks. It just plain works. The only drawback is the absolute positioning. There's really no way around that. Lord have I tried.

    -Rich

  14. #14
    SitePoint Enthusiast MadDog31's Avatar
    Join Date
    Nov 2003
    Location
    Wilmington, NC
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rich,

    Thanks for the extensive explanation. I actually looked at ESPN's menus at one point and really liked how they did that. I like the fact that no matter if the styles are on or off, you're still able to have some menus there. The problem I have with Fireworks and the like is what if someone has images turned off or something...it just won't work right unless you set up other stuff.

    I appreciate you didn't use any hacks, and that you've shown it can be done straight up using the RULES. Very nice work! I'll have to give this a try on some pages and play around with it some. I want to start to inch my way towards CSS and away from tables unless I need tabular data.

    Ian
    "It's way better to have 100 idiot clients than to have one idiot boss."

  15. #15
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate you didn't use any hacks, and that you've shown it can be done straight up using the RULES.
    For me, if we're all just replacing table hacks with css hacks, than what's the point? The only hack I use is to fix the IE box model problem because that is a really huge problem for layout. I ran into a whole list of problems with these layouts but instead of trying to find complicated hacks around them, I just changed my approach to the problem.

    When you don't use all the hacks, it speeds up testing and should make ongoing maintenance of the site easier.

    -Rich

  16. #16
    SitePoint Enthusiast MadDog31's Avatar
    Join Date
    Nov 2003
    Location
    Wilmington, NC
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly...

    Well this site has inspired me to wanna do some more CSS work here very soon. I'll probably be posting them in here for reviews...haha...

    Ian
    "It's way better to have 100 idiot clients than to have one idiot boss."


Bookmarks

Posting Permissions

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