2

It's extremely common on websites to see solid colors spanning some portion of the top and bottom of the website, much like can be seen on some of the stack sites. Stackoverflow is a good example, it even has the significantly expanded bottom that also seems common.

It's a simple feature and surely doesn't have a greatly complicated origin story, but still, at one point I didn't see see this motif and now I see it on about half of all websites.

What changed? Was there a particularly influential website that did this or a particularly influential document that suggested it? Or is it just a coincidence since it's simple and looks nice?

EDIT To clarify what I mean, here are some examples. They tend to have solid colors spanning the entire page, a larger different color block at the bottom, and navigation elements arranged horizontally. How I "feel things used to be" is that there was typically a menu to the left and a single solid color background.

https://stackoverflow.com/

http://webdesign.tutsplus.com/

http://www.gravitatedesign.com/

http://www.webdesignerdepot.com/

(I couldn't think of anything else so I just googled web design for the last few and picked ones that show the motif.)

Improve this question
4
  • Not sure if i get it. You mean headers and footers?
    – benteh
    Commented May 4, 2014 at 21:25
  • I don't believe there is an 'origin' story here. It's just a standard design element that's always existed--even before the web.
    – DA01
    Commented May 4, 2014 at 21:35
  • @RandomO'Reilly Do 'header' and 'footer' have specific meanings for websites or do you just mean stuff at the top and bottom? Either way, I added some examples.
    – Praxeolitic
    Commented May 5, 2014 at 6:22
  • Hm, I think DA01 is right; but these are navigational elements. You might say they have become more common because of smaller screens and responsive design. In that way they work more intuitively than a navigation sidebar.
    – benteh
    Commented May 5, 2014 at 7:38

1 Answer 1

Reset to default
2

The reason most websites now share a header and footer is probably familiarity as well as ease of use.

Top / Header / Menu

You could have a menu everywhere, but if the first thing you see when opening a site is the top part, it makes sense to have your navigation options there. It's the easiest, fastest way to access other pages. Sticky menus are an improvement over static ones, they can always be available regardless of where in the page you are.

Bottom / Footer

For quite a while 'we' thought it was better to have a website where the main elements fitted the screen space available, meaning the less scrolling the better. We were proven wrong, not in every case, but in most. What made long pages more successful than short ones as time passed? Maybe tapping on mobile screens, or social networks, even internet speed.

We know for a fact now long pages perform 'better' when it comes to conversions. They give more room for user engagement. Scrolling is used as a hook, scroll for more information > get familiar with the site > perform an action.

Now, once you reach the bottom, how do you keep users engaged? Well, a quick overview of what's available website-wide is quite useful. Therefore, footers with links, images, even maps offer a way to temp the user into not leaving the site.

Each page is different, and as such will have different requirements, but I think these reasons are a good start.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.