Above The Fold

It has come to my attention that some people don't quite understand what "above the fold" and "below the fold" means as far as website design is concerned. Some WordPress theme designers are apparently guilty of not using "the fold" to an advantage as well.

Simply put, the fold is at the bottom edge of the browser window when maximized. It's in a different position based on which browser you use, how many toolbars you have on your browser, and what your screen resolution is set at. At one time, 640×480 was the optimal resolution to design for. Then it became the 800×600 resolution and now it's 1024×768. We can thank better monitors for the increase.

Since the fold is in a different place depending on so many different variables, you want to place the things you want to be seen first as far above the fold as possible. If you get the viewer interested in the items above the fold, you don't have to worry about the items below the fold. Remember to take into consideration what some of your readers are using to view your pages. They could be desktop monitors, notebook monitors, PDAs, and even cell phones.

I am not a website designer in any meaning or variation of the term. My design skills are atrocious. I read and I learn from others who are much better at it than I am. The only reason I even mention this bit of design information is because I see a LOT of blogs that put things above the fold that make no sense whatsoever. Why would you put your "recent posts" below the fold and put a useless widget above the fold? I can only assume that the person who did it had no idea what the fold is all about.

June 9th, 2007 By RT Cunningham | Categories: Website Design | Tags: browsers, monitors, resolution |

Full Article Feed |

Summary Article Feed |

Comments Feed |

Full Articles by Email | Respond | Trackback URL

Gabriel on June 9th, 2007 at 2:56 pm (Reply)

Deciding where to place "Recent Readers Widgets" and "Recent Post/Recent Comments Widgets" was one of my problems when I designed my blog. For one, the design didn't allow a place for widgets in the sidebar. Secondly, I want to "visually" tell my viewers to scroll down as much as possible (because everything in it is important).

But I guess it's a matter of priorities. We all know that the header and the navigation menus should be above the fold. But what about these "add-ons"? Yeah, Recent Posts/Comments would be nice to have above the fold. However, too much texts could also be distracting. In the case of Recent Readers, too much images could bog down your blog.

I think "whitespace" in blogs is also important above the fold.

I haven't thought of designing for PDA's or cell phones though. I'll have to ask, does the XHTML tag media="screen" involve PDA or cell phone screens as well?

RT Cunningham on June 9th, 2007 at 2:59 pm (Reply)

I don't know the answer to that. If I had a PDA or cell phone to browse with, I'd definitely be testing for it.

MrCorey on June 9th, 2007 at 9:56 pm (Reply)

You can test out what your site would look like on small screens with the Opera browser. I've emailed you a jpeg of what your site looks like on a small screen.

RT Cunningham on June 9th, 2007 at 10:08 pm (Reply)

Thanks, Corey!

I looked at it and it looks a lot better than I expected it to. I'm going to have to install Opera so I can check it out when I start messing with the layout again.

Mike on June 10th, 2007 at 6:11 am (Reply)

Generally speaking, I tend to regard the fold as coming at around 600px. It differs from one site to the next (i.e. a site about shoes is likely to be viewed by people with no toolbars and a higher percentage of users with a screen res of 800×600) but keeping 600px in mind for prime screen real estate works well for me. If they're browsing at a higher screen res then great - I've still got my prime content above the fold.