SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 49
  1. #1
    SitePoint Guru SG1's Avatar
    Join Date
    Jul 2005
    Location
    Virginia, USA.
    Posts
    877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trend in design: distinct above the fold & below the fold

    I was browsing around some of the CSS gallery sites.

    I'm starting to notice a trend in design whereby a site has a distinct above the fold look and a distinct below the fold look.

    For example, these sites;
    http://www.aprilzero.com/
    http://www.bartelme.at/
    http://www.christopher-scott.org/
    http://www.renegadezen.com/


    The top half of the page has one set of colors along with information.

    And then the bottom half is filled with info such as latest blog entries, photos, etc...

    Is this a pleasant UI scheme? I'm so used to the typical layout where the navigation is either left or to the right or laid out horizontally.

    But in these sites, there is none and the designer tends to fit the info at the bottom half.

    Thoughts?


  2. #2
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SG1
    I'm starting to notice a trend in design whereby a site has a distinct above the fold look and a distinct below the fold look.

    The top half of the page has one set of colors along with information.

    And then the bottom half is filled with info such as latest blog entries, photos, etc...

    Is this a pleasant UI scheme?
    Seems silly to me since we have no way of controlling just where the fold is. Also futile and pointless.
    Ed Seedhouse

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse
    Seems silly to me since we have no way of controlling just where the fold is. Also futile and pointless.
    I agree wholeheartedly. The best thing to do is to put the most important content on the page as close to the top as possible, and then put the additional information further down the page. If there is a lot of information on a page, then it would be best to break the content down into individual page. Examples of this would be the articles found on Wired.com and the New York Times Online.

  4. #4
    SitePoint Guru SG1's Avatar
    Join Date
    Jul 2005
    Location
    Virginia, USA.
    Posts
    877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this is one of those fads that will eventually go away. Because I'm just not use to seeing content displayed this way.


  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I believe Derek Powazek was one of the first who explained why such an information architecture could be useful.
    It's shortly after this article when these type of designs exploded.

    Embrace your bottom


    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SG1
    I think this is one of those fads that will eventually go away. Because I'm just not use to seeing content displayed this way.
    Who knows, maybe you'll get used to it eventually? Personally, I quite like it. It can keep all of the cruft and metadata out of the way nicely, so the user can get straight into the meat of the important content.
    Olly Hodgson
    thinkdrastic.net

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the big boys clearly do it - if you check out Amazon or Ebay they seem to have put some thought into what goes above and what below - I guess they use monitor sniffing scripts to tailor positioning?
    Check out my copywriting blog at www.billhilton.biz!

  8. #8
    SitePoint Guru SG1's Avatar
    Join Date
    Jul 2005
    Location
    Virginia, USA.
    Posts
    877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek
    I believe Derek Powazek was one of the first who explained why such an information architecture could be useful.
    It's shortly after this article when these type of designs exploded.

    Embrace your bottom


    Nice article, but I'm still not convinced from a usabilty perspective. It's a known fact that most of us have formed a habit of looking to the sidebar for our navigation. I don't see the point of placing links and navigation at the bottom


  9. #9
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SG1
    It's a known fact that most of us have formed a habit of looking to the sidebar for our navigation.
    Mmm, I wouldn't use the footer for primary navigation. For secondary/meta content though, I like the idea. Not perfect for every scenario, obviously, but it's another tool for the palette...
    Olly Hodgson
    thinkdrastic.net

  10. #10
    SitePoint Zealot cpiwc's Avatar
    Join Date
    Aug 2003
    Location
    NJ
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SG1
    Nice article, but I'm still not convinced from a usabilty perspective. It's a known fact that most of us have formed a habit of looking to the sidebar for our navigation. I don't see the point of placing links and navigation at the bottom
    Working with what people are used to can be a good thing but it shouldn't stop us from trying something new, especially if it can be potentially better. Yes, there would be a period of adjustment but sometimes forward progress requires that.

    Depending on the situation, this newer layout idea can be more useful if the user has just scrolled through the main text and now wants to see more. If the "related" information is in the side menu, the user may potentially have to scroll back to the top as opposed to having it as the next item on scroll down to the next part already in logical order. Changing the color would highlight the section as being something different from the main text the user just read.
    Cara

  11. #11
    SitePoint Enthusiast newdaynewdawn's Avatar
    Join Date
    Aug 2003
    Location
    Central KY
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek
    I believe Derek Powazek was one of the first who explained why such an information architecture could be useful.
    It's shortly after this article when these type of designs exploded.

    Embrace your bottom


    If you have to design for a corporate cause or something STRICT... okay put everything in the "excepted/expected" fence per se.

    Personally, I like seeing the creativity of the different design ideas as to the canned we got to do it cause that's what people are use to ideas. Again, I'd say it depends on the site and the content--what are you trying to achieve.

    As the article mentions...
    It's those engaged users we should be optimizing for. Because by creating a web experience that's encouraging and engaging to the people who actually want to read your site, you create more of them! Pretty soon, that's all you have.

    We may even wind up with a web of people who actually like to read.
    .... I couldn't argue with his logic or idea to create something DIFFERENT and attempt to come up with a creative means to achieve his objective. He's having fun, his way,... if you've got a particular INCOME objective or whatever then okay you might have to do some more "normal" stuff!

  12. #12
    SitePoint Zealot chrissyb's Avatar
    Join Date
    Apr 2006
    Location
    Greece
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally credit where credit is due.

    I think these are all really attractive designs, as a relatively novice graphic/web designer they provide a lot of food for thought. I never questioned the usability, because I was drawn in - I wanted to spend some time with these sites.

    However, it is very noticeable that many sites are now being built round blog software - even professional sites - which generally tend to give them a similar feel.

    Right, I'm off to redesign my site that I've just spent six months building...

    There and back to see how far it is...

  13. #13
    SitePoint Guru
    Join Date
    Jun 2002
    Posts
    616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS seem to be allowing designers to try out all sorts of new ideas, not a fan of this one in particular but it's good to see what they come up with. Whenever I need to write a new website, it's always nice to browse through the latest wacky designs to get inspiration.

  14. #14
    I Love Licorice silver trophybronze trophy Datura's Avatar
    Join Date
    Aug 2006
    Location
    Florida USA
    Posts
    5,774
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I actually quite like it, there is sort of a natural progression when you click to go on, you are at the bottom and have read the stuff above - Datura
    Ulrike
    TUTs: 1 2 3 4 5 6 7 8 9 10

  15. #15
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't like it.

    It's wasting a lot of valuable penthouse real estate in my opinion. The site's do look nice but I credit CSS rules, not the site "fold" design. Don't just look at the "design", figure out what the sites are promoting also.

  16. #16
    SitePoint Addict dannyh's Avatar
    Join Date
    Mar 2005
    Location
    BC, Canada
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think its wrong to think this design trend has much more to do with "above and below" the fold other then sometimes being a coincidence.

    How can displaying information that is less important (flickr images, links, old blog posts, etc.) below the more important items (navigation, main blog posts, etc.) possibly be bad for usability?

    How would it be any different, if these 'less important' items still had the same hierarchy, but were not styled differently from other page items?

    So long as the information is meant to be an afterthought, visually styling it as so will help the user quickly understand what they should look at first.

    I dont know about you all, but when I go to a webpage I usually don't feel looking at their flickr images is very important. Thatís just me though.
    Last edited by dannyh; Sep 11, 2006 at 13:08.

  17. #17
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I kinda like it... it allows users to see other information and related items that would otherwise be completely overlooked. And since the design is completely different then it doesn't confuse the user... theres a clear disitinction between the main content and the "extras"

  18. #18
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe Derek Powazek was one of the first who explained why such an information architecture could be useful.
    It's shortly after this article when these type of designs exploded.

    Embrace your bottom
    I think, the fact that users look for "what's next?" when they reach the bottom is true, and yes footer/bottom is as important as the rest of the layout. But this does not mean it is a replacement for the main navigation.

    Quote Originally Posted by from the article
    ...Everything in the sidebar just makes it harder to focus on your content.
    I think this idea is wrong.
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter

  19. #19
    SitePoint Guru Nick Carlson's Avatar
    Join Date
    Aug 2003
    Location
    Denver
    Posts
    644
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've never liked that type of design.

    To me, it's a disruptive design method that takes the focus away from content. If you're designing a site to push the boundaries of css, then sure, go for it. But if content delivery is important, then I'd stay away from such abrasive designs.
    ncarlson.net - a programmer's dystopia

  20. #20
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by glenngould
    I think, the fact that users look for "what's next?" when they reach the bottom is true, and yes footer/bottom is as important as the rest of the layout. But this does not mean it is a replacement for the main navigation.
    Bang on!

    Quote Originally Posted by glenngould
    I think this idea is wrong.
    That's the best argument I've ever heard ;-) Why do you think it's wrong? Personally I think it depends on the sidebar - some of them (especially those with flashing banner ads) can be very distracting.

    Quote Originally Posted by optimus prime
    To me, it's a disruptive design method that takes the focus away from content.
    I'm not sure that I follow. The way I see it, with this sort of design, the content is the primary thing on the page, sat there right above the "fold". It's the first thing the user sees. Once the user has read the content, they'll arrive at a rich footer complete with links to all sorts of other content.
    Olly Hodgson
    thinkdrastic.net

  21. #21
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the best argument I've ever heard ;-) Why do you think it's wrong? Personally I think it depends on the sidebar - some of them (especially those with flashing banner ads) can be very distracting.
    This is why: it depends on the sidebar
    Tweep List adds an avatar menu to Twitter (open source)
    Word Stats shows your most used words on Twitter

  22. #22
    SitePoint Enthusiast agentolivia's Avatar
    Join Date
    Jul 2003
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SG1
    I'm so used to the typical layout where the navigation is either left or to the right or laid out horizontally.

    But in these sites, there is none and the designer tends to fit the info at the bottom half.
    In all of the sites mentioned in the original post, the main navigation is laid out horizontally at the top of the page (one of the 3 places one would expect it to be). So I'm not quite sure why some are stating that the navigation is in an unexpected place.

    As for the rest, it seems to be a content priority decision. At the top is the most important or newest item, the rest follows. Makes sense, given that in the case of the referenced site, the newest item is probably the one (and only) most important item. Having that content rotate down and out as time passes also makes sense. Since the main navigation and newest content is in a very predictable and accessible place (right in front of your nose), what's the harm in digressing from the "default styles" of a personal site/blog, which is all this really is about. So you can't get to an archived post from 2001 until you scroll down to the bottom of the page. Big deal. But check out cnn.con. Global nav up top, main article, everything else, "below the fold" (though not in contrasting colors). Not so far-fetched, really.

  23. #23
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now that I've viewed all the links provided by the OP, I can honestly say, I don't remember what any of those sites was about.

    Oh wait, one was a designer. That would be the site with the bright colors?

    Otherwise the rest of them were dark, dreary, and completely lost on me. None of them "stuck" in my head.

    Whatever they're trying to accomplish -- they're failing -- at least with me.

    Bailey

  24. #24
    SitePoint Zealot brakai295's Avatar
    Join Date
    Oct 2005
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't mind the idea of using the footer more efficiently for further links of the related articles or for general information on the site/author. I think http://www.powazek.com/ uses this technique very smartly.

    However, I absolute opose attempts like http://www.aprilzero.com/, not because it give you the impression that the footer is bigger (has more importance) than the actual top part, the switch from dark text on white background to grey text und black background is too abrupt for your eyes and it takes a few seconds to adjust. It puts unnecessary strain on my eyes... I don't appreciate that

  25. #25
    SitePoint Zealot DonTino's Avatar
    Join Date
    Nov 2001
    Location
    Germany
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that article Embrace your bottom makes complete sense.
    But it depends on what type of site you are running and to really get a clear result you should do some testing on what type of layouts your visitors stay longer and are more active on the site. Also if your trying to sell stuff on your site you should make testing regarding your sales.

    I like the idea for actual content pages a lot but I agree it's not something for everyone and every project.

    Tino
    Discover the Divine Truth - NOW blogging
    tino-designs.com integrates the usability of the internet
    with the illustration and style of design


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
  •