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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    css page layout patterns

    I read three two css books over the weekend (CSS Missing Manual and CSS Mastery). Both covered the topic of page layuout but used the entire chapter to discuss the traditional boring two and three-column layouts. As you all know, today's compelling sites can't be so basic. I'm looking for a reference that delves into the design patterns of engaging ecommerce site layouts. Anyone can lead me in the right direction?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    The only design pattern for an e-commerce website can be usability. The layout doesn’t matter as long as the site is usable and user friendly (and engaging). And the thing is that traditional two- or three-column layouts have proven very well in terms of usability, that’s why they have become a “tradtition”. Every website that is engaging and user friendly without having traditional layout can be regarded as (positive) exception from the rule, but there are few I know of (and you’re welcome to show some reference layouts you are thinking of), and they are all custom made for the specific purpose or context.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by VIPStephan View Post
    The only design pattern for an e-commerce website can be usability. The layout doesn’t matter as long as the site is usable and user friendly (and engaging). And the thing is that traditional two- or three-column layouts have proven very well in terms of usability, that’s why they have become a “tradtition”. Every website that is engaging and user friendly without having traditional layout can be regarded as (positive) exception from the rule, but there are few I know of (and you’re welcome to show some reference layouts you are thinking of), and they are all custom made for the specific purpose or context.
    Check out this site:

    http://www.newegg.com/

    You are saying that's a two or three column layout? Scroll through the page and you will see a lot of variety. Sometimes columns on left, sometimes columns on right, sometimes no column on left or right - and all that is on a single page.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    The overall layout is two-column: you have the navigation on the left and the content on the right. All the other things you see is sub sections within the content column. And they seem to have a very simple grid system where they put classes on elements to influence the layout (e. g. class “w66” is floated left and width 66%, which goes along with a “w33” class for the rest of the width).

    And the interior pages (like http://www.newegg.com/Home-Outdoors/...=Home-Outdoors) are all a “traditional boring” three column layout: menu on the left, content in the middle, and additional offers on the right.

    Edit: A really slick online shop (and an exceptioin of the rule as mentioned) was the one of Panic, Inc., but it’s closed now. But you can get an idea on the internet archive: http://web.archive.org/web/201303022...nic.com/goods/. It was a pretty small shop, though, where they didn’t sell thousands of items. If you have thousands of items you’ll get back to traditional layouts pretty quickly, just because it’s most feasible for the task.
    Last edited by VIPStephan; 04-29-2013 at 06:11 PM.

  • Users who have thanked VIPStephan for this post:

    johnmerlino (04-29-2013)

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by VIPStephan View Post
    The overall layout is two-column: you have the navigation on the left and the content on the right. All the other things you see is sub sections within the content column. And they seem to have a very simple grid system where they put classes on elements to influence the layout (e. g. class “w66” is floated left and width 66%, which goes along with a “w33” class for the rest of the width).

    And the interior pages (like http://www.newegg.com/Home-Outdoors/...=Home-Outdoors) are all a “traditional boring” three column layout: menu on the left, content in the middle, and additional offers on the right.

    Edit: A really slick online shop (and an exceptioin of the rule as mentioned) was the one of Panic, Inc., but it’s closed now. But you can get an idea on the internet archive: http://web.archive.org/web/201303022...nic.com/goods/. It was a pretty small shop, though, where they didn’t sell thousands of items. If you have thousands of items you’ll get back to traditional layouts pretty quickly, just because it’s most feasible for the task.
    So this site is using a grid system. I've heard of the Blueprint and 960gs grid system, but I'm not sure when and when not to use them. ANd how do you know that site is using a CSS grid system?
    Last edited by johnmerlino; 04-29-2013 at 07:22 PM.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    ok I read up on the grid system and I understand a lot more now. But one question remains. What if you have a long column that needs to span multiple rows, are you forced to use the same number of columns for that bottom row just to make sure that all the columns on that second row are of equal width?


  •  

    Tags for this Thread

    Posting Permissions

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