Bottom Bar Dillema

December 28, 2011
Designers
LinkedInTwitterFacebookEmail

The Bottom Bar has become an important part of website design. But once you have a bottom bar in your design, what information do you include? The options are all over the map.

The Standard 3 Column Bottom Bar

3 column bar

The most popular type of bottom bar is the three column bottom bar. Realasponce.com adds basic links to the bottom area, instead of adding all those links to the top of the page – so they basically use the bottom bar as a catch-all for the links. The important thing to remember when doing this is to organize the links somehow (for example, using headers like Realasponce.com does). The last column has a quote from a happy customer and an award they earned – basically advertising for the company. Finally, the standard greyed-out line of text on the bottom with the two links that most people don’t look at (Site Map and Blog here, apparently they aren’t super big on their blog) and then the copyright information.

The 3 by 4

bottom bar 4 columns, then 3 columns, then one final bunch of information

A slight variation on the 3 column bottom bar is the 3×4 bar – 3 rows, 4 columns. You really have two options for separating bottom bars: a line or a different background color. On this one, the rest of the website is separated by only a 3-4 pixel line above this bottom bar, with the background color on the top two rows matching the background color on the rest of the site. The information that they included was: 1) hiring them information 2) addresses of stores and names of contacts 3) Social media connections 4) copyright information 5) who designed the site.

The Basic Info

3 column, header above

The Basic Info Bottom Bar is all about including the….wait for it….basic info! This one technically has two rows – the top row, “Work with me via…” is separated from the rest of the page with a dotted line. But the actual bottom bar only contains the most basic information for the website: The copyright information, a small explanation of the website, and social media connections.

The Linksbottom bar, 2 columns, 1 column

As with all parts of a website, you have to decide what your client is looking for when they go to the bottom of the page. Apparently, for Stuff and Nonsense, those things were the address and contact page, links for the website, and the copyright information. This one is a bit interesting because the copyright information, though normally located at the very bottom in a line (where the “If you need help…” line is), is instead inserted on the far right column to the right of a small logo. It works for their page because, if you view the front page of the website, the blog is actually completely to the left of that logo. To the right of the logo (above this bar) are links and social media connections. We haven’t seen this in the bars above, but this one includes help files and a help page in their bottom bar – again, any link that is not usually read can go at the bottom of the bottom bar.

The Simple Approachsimple bar

This is about as small as you can get a bottom bar, and still call it a bottom bar. And while it isn’t the normal height, it does include the important details we’ve come to look for. First, there is the contact information – a phone number. The other bottom bars we’ve looked at, at least the ones that included contact information, included a form or an email. But Trale, Inc. know that their customers would rather talk to them on the phone then email them and wait for a response. As designers, we always have to be thinking about what is needed according to the project we are doing, not only what the norm is. They added the copyright information, the website designer, and standard important website links.

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>