Most websites are pretty generic. There’s a header, text in two or three columns, and at the bottom of that text there’s a footer. That footer is something you’ll only see if you scroll down the page to the bottom of the main text content. All well and good, and there’s lots of good design and great imagery that you can incorporate into such a setup. Yet the use of fixed position footers, which stay at the bottom of the page while the text content scrolls under them, can provide a website with a strong visual punch.
Form And Function
A strong fixed footer provides an excellent visual focus to a site, acting as a foundation for the view. It can also be used to provide functionality – navigation menus, copyright information and external links can all be highlighted. The advantage is that such functionality isn’t “below the fold” of the webpage, but is always visible to the user.
A good footer design like that on strawpollnow.com incorporates seamlessly into the site. It makes the information look much more attractive, without detracting from the ability to view the content. In one of my most recent designs for The Anime Network the fixed footer was an important factor. It allowed me to incorporate a cityscape theme that strengthened the “Tokyo at night” theme for the site.
Not Style Over Substance
A fixed footer has to be implemented carefully. If the footer is too large then it can obscure too much of the content. Remember that more and more people use widescreen views, and smaller laptops have limited resolutions. When I first designed for The Anime Network the footer was larger, but feedback suggested it was taking up too much of the screen real estate.
It’s also important to be aware that Internet Explorer 6 doesn’t cater for the position : fixed CSS attribute that allows for the placement of an unmoving footer. My preference in that situation was simply to remove the footer graphic, and add a conditional stylesheet that set different properties. This allowed me to cater for the weaknesses of IE6 without having to undermine the visual impact I could achieve with the majority of browsers.
Making Sites “Softer”
Fixed footers allow for a more organic look to many websites. You can create curved borders, or use natural shapes, rather than being overly limited by the squared shape of the screen. They’re not suitable for all designs, but with all browsers bar the archaic IE6 catering for the position : fixed attribute that allows implementation, they’re something that more sites should look at as an option.
One Comment
Nice example of a fixed footer site.