Origin of solid color banner at top and bottom of websites motif

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?

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.





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


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.

Source : Link , Question Author : Praxeolitic , Answer Author : Yisela

Leave a Comment