June 10th, 2011

Web Footer Trends


Web design has changed enormously in the last 10 years. CSS has now been broadly accepted. That wasn’t the case back in 2005 when sites such as CSS Zen Garden were trying to gain attention to CSS. When CSS Zen Garden appeared they showed impressive and motivating examples of using CSS. The examples no longer pop or look impressive. They look standard or even plain compared to HTML5/CSS3 websites. The web has progressed and adopted CSS so that CSS Zen Garden is no longer impressive. Sites with CSS always had a distinctive look to them that netizens took time to accept. Today non-CSS pages are unacceptable.

The web has undergone many fashion trends usually driven by the technology feature explorers. When tags were all the rage so where tag clouds. Useless fashion statements that were rarely interacted with by users but great for showing off the host’s hipness to the latest web 2.0 key words. Gradients are popular today but almost overly used. Thankfully readability seems to be a growing trend with larger text, better spacing and less crowded content.

A trend I have recently noticed is the ever expanding footer. Footers at the bottom of the page have historically been used for copyright then a few important links such as jobs, about, etc… but it has now blown into a full shelf of miscellaneous links or a site map.

Some examples:

A variety of the fat footer and with a different purpose is the sticky footer. Typically one line thick, the footer sticks to the bottom of the browser much like a toolbar. These are being used for donation campaigns, registration, login, administrative and account tasks. They are sometimes sticky to the top of the page appearing much like a temporary toolbar. WordPress has a great top sticky header for administrators when browsing the site content. These should be ephemeral since they use up a valuable portion of the browsable real-estate that cannot be regained by scrolling up or down. Providing an option to remove, hide or toggle the sticky bar should be made available.

Here’s the bare bones code to make a sticky header or footer:


<div id="stickyfoot">
    Register! Donate!


#stickyfoot {
    position: fixed;
    bottom: 0;
    /*top: 0; */

It needs a little more code than the above to make it appealing and user friendly. Remember that these can be extremely annoying if they are too thick or permanent. Use wisely.

Below is a simple example using JSFiddle. Click the [Result] tab below or go to my full size example:

Tags: , ,

Comments are closed.