Informative And Usable Footers In Web Design

Advertisement

Website designs have so many different elements that work together to convey information in a usable and organized manner. For a website to be effective, every element on the page, from the header to the footer, needs to add to its overall usability and readability.

In this article, we’ll take a look at the footer and see what exactly makes for a good website footer. Keep in mind that just because the footer is at the bottom of the page doesn’t mean you should slack off with good design practice.

We’ll look here at what to include in footers, the importance of site maps, usability practices and styling ideas and trends. We’ve also compiled almost 50 well-designed footers to give you ideas and inspiration for your own footer designs.

What To Include In Footers

Before we go over how exactly to design the footer, let’s talk about common elements to include in footers and the importance of each. Of course, you don’t need to include all of these items; just use this list to gather ideas.

Site Map

Usability is foremost in importance in Web design. Providing a site map in the footer, no matter how small, improves usability. It’s one of those small elements that often go unnoticed but are occasionally useful to some. One benefit of providing a site map is its convenience for users. A site map is simply a detailed list of the pages on a website, divided into categories. It tells a user exactly what pages and information can be found on the website and provide access to those pages.

In the site map below, visited pages show up differently than the other links. You can see here that the “Overview” page has been visited because the link has a different color and a check mark instead of a triangle. This is an excellent idea to improve the usability of your site map.

1

Quick “About” or “Contact” Information

This is a good idea for freelancer portfolios, business websites and other similar websites. Usually, when looking for information about a website, I often scroll to the footer. Putting such information there is a good way to provide easily accessible information on every page.

Be sure to make the information brief, though. Keep “About” content to a single paragraph, a brief few sentences describing what the website is all about. For contact information, include just an email address and phone number. Always be sure to include a link to the full “Contact” or “About” page.

A Simple Contact Form

Many take this last idea to the next level by including a contact form in the footer itself. This is an excellent idea, because it allows users to contact you without having to navigate to the contact page. Many users won’t actually use it, but it provides added convenience to some.

Look at the example below. In this footer, contact information is provided, along with a contact form. Notice that the form is simple, containing only fields for a name, email address and message.

2

Back to Top Links

Another usable element commonly found in footers is the “back to top” link. When a user scrolls down to find information in the footer, they don’t want to have to scroll all the way back to the top of the page. Yes, they can use the “Home” button on their keyboard (but which isn’t even included on all keyboards), but most users don’t know about that function. The “back to top” link is one of those small details that really go a long way in enhancing usability. The placement of this link is usually just above the footer or at the very bottom of the footer.

Link to Full Site Map

Sometimes you can’t fit links to all of your pages in the footer’s site map. In this case, you can display a condensed site map in the footer and then add a link beside it to the full site map.

Styling Footers

Good style is essential to any website design. It improves not only the look but the visualization of the website’s content. Here are a few styling tips to keep in mind when working on your footer.

Show Hierarchy

Don’t forget about the importance of good typography, either. A good footer not only is laid out cleanly but is scannable. A user should be able to quickly glance at the information without getting confused. The column layout improves scannability, but good typography helps, too.

Most importantly, show the hierarchy of the content. Look at the screenshot below. Notice that each column begins with a strong and unmistakable title. A bit of space follows the title, and then comes the content. The title is essential because it grabs the user and tells them what is in that column. This one small readability detail makes finding information easier and should not be overlooked.

UX Booth3 includes copyright information (a standard element) as well as links to other useful information. Each piece of information is separated as its own element.

4

Good List Styling

Like good typography, good list styling is important for site maps. Spacing has been a big theme in this article, so let’s start there. Adequately spacing out list items is essential in Web design because it improves legibility and focus. The same holds true for site maps and other lists in the footer. Also, be sure that column titles are given more white space than list items, to better convey the hierarchy.

Borders can be used to separate list elements. Take a look at the example below, in which bevels (two single-pixel solid lines) are used to cleanly separate list items. The bevels look nice and better define the list items. Another trend is to separate list items with dotted lines, as seen in the second screenshot (for Noupe) in the section titled “Simple Multi-Column Layout” below.

5

For comparison, look at the example below. Berliner-Philharmoniker.de6 uses a large footer to display various navigation options; however, the list styling is not good enough: the navigation is hard, because some links take up two lines and there is no clear visual separation between two adjacent links.

7

White Space is Key

We’ve mentioned white space several times in this article because it is crucial for the layout of footers. Let’s go a bit more into detail on the importance of white space.

Why use white space? In footers with column layouts, white space draws the reader’s eye to each block of content, improving focus and readability. Keep in mind that white space doesn’t have to be white; it just means empty space with no information or content.

Columns are not the only things that should be separated by white space. The top of footer and the footer’s content should have plenty of padding. And the space between the footer’s content and the bottom of the page should have a fair amount of padding. The screenshot below shows the Media Temple footer. We’ve labeled each area to make it clear how much is a fair amount of spacing and to show where to put the spacing.

8

Separate the Footer from the Content

One of the first things you’ll notice when browsing the screenshots in this article is that each footer appears distinct in some way from the rest of the website on which it appears. The footer is often a different color than the area above it. Take the screenshot just above, for instance. The color of the footer’s background is different than the color of the main content area’s background.

Footers are usually given a darker background. Some have a graphic or illustrated background. Kris Colvin9 (see the image below) makes sure that the content area is clearly separated from the footer area. A “torn-off” tiled wallpaper looks nice and perfectly fits to the atmosphere of the site.

10

Blog Footers

Including other kinds of information in the footer of a blog can be useful, too. Below are a few types of information that bloggers now tend to include in their footers.

Recent Posts

Blog footers commonly contain a list of 5 to 10 recent posts. When a reader finishes a post and wants to read another recent post, they can simply scroll down to the footer, instead of going all the way back to the home page.

Idea Foundry11 uses a grid layout to show the latest posts. It also contains subscription links, a photostream and more.

12

Tags

Tag clouds are excellent for blogs, too, especially ones with much and varied content. They provide another way for users to easily find information they are looking for. But tag clouds can take up a lot of space. Some put tags in the sidebar, but sidebars usually don’t have enough space to accommodate so much text, especially text in large font sizes. Putting tags in the footer may work better. This way, they can be accessed on each page, as they would in the sidebar, but are not in the way of other elements.

MacTalk13 uses a list of tags instead of a tag cloud to display the most popular tags on the site.

14

Latest Comments

Another trend in blog footers is to list recent comments. Not everyone wants to see a stream of comments, so putting it in a prominent location, such as the sidebar, doesn’t make much sense. Put it instead in the footer. The blog below follows this practice.

John Cow15 displays recent comments in the footer, together with an illustration of himself.

16

About or Contact Information

We’ve already talked about the importance of including “About” information in the footer of corporate and other similar types of websites, but what about blogs? This isn’t as common but is still done often. Below is a screenshot of Web Designer Wall, which has a quick paragraph about the blog in the footer.

17

Flickr Photostream

One popular element for personal blogs is a Flickr photostream. Again, the sidebar has no room for this, so the best place for it is the footer. You also see this on design blogs, where Flickr group photostreams are shown.

Links to Resources and Friends’ Websites

Finally, you will often see links to other resources and friends’ blogs in the footer of blogs. Again, they are out of the way of the content but easy to find.

The website shown below includes a list of interesting links, which some users will find very useful.

18

Footer And Site Map Layout

Layout shapes how information is presented and is always an important part of any design. In this section, we’ll go over a few key points to keep in mind when laying out the footer.

Simple Multi-Column Layout

The best way to set up a footer is with a simple multi-column layout. Most footers have three or four columns. The footer below is an excellent example of a column layout showing a site map. All of the links are categorized, and each category has its own column. Notice that the columns are well spaced, too.

Psdtuts+19‘s footer has a lot of information, including copyright information. Under the “Write a Tutorial” excerpt, a link takes the user to get more information on the topic. This footer shows good contrast, and its border separates it from the content well. This is how a nice simple multi-column layout looks like.

20

Here’s another example of a clean grid layout, but not a site map this time. This footer is for a blog, so it contains tags, a list of recent posts and more. Again, notice the ample spacing used to achieve a clean layout.

21

Separate Columns

White space is the best way to separate columns, because it’s simple and forces the user to focus on a single column at a time. However, some designers like to make a bit more separation, such as with a single solid line, a bevel or a dotted vertical line. You can also add backgrounds to separate columns, using different colors or graphics to give them contrast.

Digg has a very content-heavy but well-organized footer. It uses white space and a single-pixel line to separate columns.

22

Separate Links Into Categories

This is very important when working on a large site map. If you don’t organize the links into categories, the site map will lack structure and be much too confusing to navigate with. You want your website to be usable, and a site map improves usability. But if the site map is laid out incorrectly, it becomes useless.

Apple does a perfect job of this. Actually, its website is so extensive that it divides its site map into large sections. Each section (or product) has its own individual site map in the footer. The screenshot below is of the Mac product page, and the site map shows all the links one could want for Mac products. Apple also does a good job of organizing the links into categories. Links are organized by product type. For example, Mighty Mouse is listed under “Accessories.” If these links were all in one big list, finding specific products would be much more difficult.

23

The White House website is a totally different type of website but employs the same principle. All of the pages of this website are organized into categories. If you’re looking for information on health care, you can quickly find it in the “Issues” category. Also, notice that each category has its own column, and the bigger categories don’t flow into the next column, thus improving readability and scannability.

24

Showcase Of Footers

CreamyCSS25
In its footer, CreamyCSS puts book covers on the shelf.

26

Orca Bay Cooking and Recipes27
Notice how well the content and the footer area are separated, even although they have a common motif and are designed very similarly. Here the newsletter box is placed in the footer – it may be not the optimal placement as footer is often overlooked or ignored.

28

Clearspring29
A good example of a site map on a corporate website: clear hierarchy, nice column layout and a lot of white space. The background of the footer is different than that of the rest of the website, giving it definition.

30

FortySeven Media31
Another standard blog footer layout, with columns and a list of recent posts. The footer background is darker than the content background, and a faint texture acts as a border.

32

Huxley Prairie Festival33
A nice retro design with a quite original footer design that fits to the motif of the site.

34

Blueprint Design Studio35
Blueprint Design Studio puts a “contact” box in its footer. You’ll find a nice hand-drawn “back to top”-link on the left side as well.

36

Nothern Classics37
Nothern Classics with a couple of vintage images, stick-it-notes, a sexy girl on a motocycle and a stamp.

38

Lineage II39
A gamer’s blog with a mysterious footer that perfectly fits the atmosphere of the site.

40

Thechantikl41
Here the footer has a rainbow, a cute dog and some flowers.

42

Agami Creative43
Sometimes footer is a nice place for some short and nice contact form.

44

Spout Creative45
Spout Creative has a large, colorful footer with a Twitter block on the right side.

46

Envira Media47
Envira Media has an original, beautiful layout and a nice footer with illustrations.

48

Mark McGall49
Mount Rushmark: George Washington, Thomas Jefferson, Theodore Roosevelt… Mark McGall?!

50

The Blizzards51
Sometimes it makes sense to put a “Share”-box in the footer, making it easier for readers to share and promote your site. It fits here: the site is the official web-site of the band “The Blizzards”.

52

Show And Tell Sale53
The footer here has 4 columns which are properly aligned and have a lot of whitespace. Simple, clean, attractive and beautiful.

54

Snopp.no55
Snopp.no with a huge illustration on a cardboard in the footer.

56

Aegir Hallmundur57
Some designers put some information about themselves in their footers.

58

MacAllan Ridge59
A very simple, yet nice moody footer design.

60

Kev Adamson61
You can be pretty sure that Kev Adamson’s footer is one of its kind. That what makes a unique and exclusive design. A very original, interesting footer design solution by Kev Adamson.

62

EdgePoint Church63
A nice visual footer with links to social networking sites (left side) and information about the site (right side).

64

Social Snack65
An interesting footer that perfectly combines social icons, a site map, an illustration and the Anti-IE6-icon in one single place.

66

Obsessable67
Obsessable has a colorful footer with a nice, well-structured site map. Well done!

68

Fiveruns69
Fiveruns uses 6 content blocks in the footer; however, spacing and alignment help to keep the blocks scannable and readable.

70

Fatburger71

72

Mr Vector73
Putting the supported payment options in the footer works quite well for some online-shops…

74

The First Twenty75
…and a donation-button may work for some charity organizations. Please notice how much spacing is used in the footer which height is overall over 700px.

76

Games For Her By You77
An interesting idea: this online-shop has a ribbon with “Money-Back-Guarantee” written on it in the footer. Will it make user more confident and comfortable in purchasing the product?

78

Ecto Machine79
A large, stylish footer with Flickr entries, recent blog entries and a Twitter/RSS-box.

80

Ryan Keiser81
Ryan has put a daily color inspiration block on its footer – a color scheme is updated every day.

82

Vocino83
Another great blog footer. Here you can see columns with lists of recent blog posts and comments. The lists demonstrate good hierarchy and nice typography. And single-pixel lines separate list items.

84

graffina[box]85
In this footer, a small contact form is included for the convenience of users. Also, the background graphic and border help separate the footer.

86

Seed Hunter87
Greetings from Indiana Jones – a nice, original footer design.

88

eSpace89
Another excellent example of a small contact form in the footer. This one is cleverly designed in the style of a handwritten letter, but it is still easy to use.

90

We Are Not Freelancers91
The hand-drawn illustrations in this footer visually support the different categories in the columns. A list of recent comments and further resources appears also.

92

Mozilla Firefox93
A simple but readable and scannable site map, with plenty of space and good colors. The texture above acts as a good border.

94

Grooveshark Features95
This footer has a dramatically different background to show that the content is finished. Notice how each footer element has its own box, with a clean semi-transparent background. A bevel separates the links as well.

96

Jason Santa Maria97
A content-heavy footer, with a well-structured grid layout. The grid is divided by solid lines and plenty of padding.

98

Abduzeedo99
Abduzeedo packs a lot of content into its footer, including blog post titles, a large but organized tag cloud, sponsors and a few important links.

100

Future of Web Apps101
Here, a texture is used for the footer background, and a ridged border is used to set off the footer. The column is well laid out, and standard elements, such as contact information, are included for easy access.

102

SamRayner.com103
Another perfect example of a border and contrast that add definition to the footer. The content area is cut off by a brush texture, which acts a border for the footer.

104

Checkout App105
In this footer, each element is enclosed in a light-gray container, providing clear separation from the white background of the rest of the website.

106

MailChimp107
A drop-shadow and color contrast is used here for definition. The small site map is organized into separate columns, and each column has a nice heading punctuated by a subtle single-pixel line.

108

Six Apart109
A site map helps users navigate this corporate website. Generous white space and padding are used, creating a very readable layout.

110

Miro111
No color contrast here, but a border sets of this footer.

112

Good Barry113
This website has a minimalist site map with little detail, but it still works well. A thin gray line sets off the footer, and a “back to top” link appears above the footer.

114

Last Click

YackFou115
Well, what about placing a foot in the footer? That’s exactly what this site does. The footer contains a foot with the link to “Making Of”. That’s unusual and creative: even if the footer link leads to a 404-error-page.

116

Further resources

(al)

Footnotes

  1. 1 http://creativecurio.com/graphic-design-glossary/
  2. 2 http://www.bcandullo.com/
  3. 3 http://www.uxbooth.com/
  4. 4 http://www.uxbooth.com/
  5. 5 http://www.istokpavlovic.com/blog/
  6. 6 http://www.berliner-philharmoniker.de/en/concerts/kalender/datum/2009-05/
  7. 7 http://www.berliner-philharmoniker.de/en/concerts/kalender/datum/2009-05/
  8. 8 http://mediatemple.net/
  9. 9 http://kriscolvin.com/
  10. 10 http://kriscolvin.com/
  11. 11 http://ideafoundry.info/
  12. 12 http://ideafoundry.info/
  13. 13 http://www.mactalk.com.au/
  14. 14 http://www.mactalk.com.au/
  15. 15 http://www.johncow.com/
  16. 16 http://www.johncow.com/
  17. 17 http://www.webdesignerwall.com/
  18. 18 http://boagworld.com/
  19. 19 http://psd.tutsplus.com/
  20. 20 http://psd.tutsplus.com/
  21. 21 http://www.noupe.com/
  22. 22 http://digg.com/
  23. 23 http://www.apple.com/mac/
  24. 24 http://www.whitehouse.gov/
  25. 25 http://creamycss.com/
  26. 26 http://creamycss.com/
  27. 27 http://orcabayseafoods.com/cooking-recipes
  28. 28 http://orcabayseafoods.com/cooking-recipes
  29. 29 http://www.clearspring.com/
  30. 30 http://www.clearspring.com/
  31. 31 http://fortysevenmedia.com/
  32. 32 http://fortysevenmedia.com/
  33. 33 http://www.huxleyprairiefest.com/
  34. 34 http://www.huxleyprairiefest.com/
  35. 35 http://blueprintds.com/
  36. 36 http://blueprintds.com/
  37. 37 http://www.northern-classics.de/
  38. 38 http://www.northern-classics.de/
  39. 39 http://lineage2.fansite.cz/
  40. 40 http://lineage2.fansite.cz/
  41. 41 http://thechantiki.com/
  42. 42 http://thechantiki.com/
  43. 43 http://agamicreative.com/
  44. 44 http://agamicreative.com/
  45. 45 http://spoutcreative.com/
  46. 46 http://spoutcreative.com/
  47. 47 http://enviramedia.com/
  48. 48 http://enviramedia.com/
  49. 49 http://www.markmcgall.com/index.html
  50. 50 http://www.markmcgall.com/index.html
  51. 51 http://theblizzards.ie/
  52. 52 http://theblizzards.ie/
  53. 53 http://www.showandtellsale.com/
  54. 54 http://www.showandtellsale.com/
  55. 55 http://snopp.no/
  56. 56 http://snopp.no/
  57. 57 http://ministryoftype.co.uk/
  58. 58 http://ministryoftype.co.uk/
  59. 59 http://macallanridge.com/
  60. 60 http://macallanridge.com/
  61. 61 http://www.kevadamson.com/
  62. 62 http://www.kevadamson.com/
  63. 63 http://edgepointchurch.com/
  64. 64 http://edgepointchurch.com/
  65. 65 http://socialsnack.com/
  66. 66 http://socialsnack.com/
  67. 67 http://www.obsessable.com/
  68. 68 http://www.obsessable.com/
  69. 69 http://www.fiveruns.com/
  70. 70 http://www.fiveruns.com/
  71. 71 http://fatburgr.com/
  72. 72 http://fatburgr.com/
  73. 73 http://www.mrvector.com/vector-packs.html
  74. 74 http://www.mrvector.com/vector-packs.html
  75. 75 http://thefirsttwenty.com/
  76. 76 http://thefirsttwenty.com/
  77. 77 http://www.gamesforherbyyou.com/?what-are-these-games-im-making-for-my-girlfriend-or-wife
  78. 78 http://www.gamesforherbyyou.com/?what-are-these-games-im-making-for-my-girlfriend-or-wife
  79. 79 http://www.ectomachine.com/
  80. 80 http://www.ectomachine.com/
  81. 81 http://ryankeiser.net/
  82. 82 http://ryankeiser.net/
  83. 83 http://vocino.com/
  84. 84 http://vocino.com/
  85. 85 http://www.griffinabox.co.uk/
  86. 86 http://www.griffinabox.co.uk/
  87. 87 http://www.seedhunter.com/
  88. 88 http://www.seedhunter.com/
  89. 89 http://www.espace.com.eg/
  90. 90 http://www.espace.com.eg/
  91. 91 http://www.wearenotfreelancers.co.za/
  92. 92 http://www.wearenotfreelancers.co.za/
  93. 93 http://www.mozilla.com/en-US/firefox/firefox.html
  94. 94 http://www.mozilla.com/en-US/firefox/firefox.html
  95. 95 http://grooveshark.com/features
  96. 96 http://grooveshark.com/features
  97. 97 http://jasonsantamaria.com/
  98. 98 http://jasonsantamaria.com/
  99. 99 http://abduzeedo.com/
  100. 100 http://abduzeedo.com/
  101. 101 http://events.carsonified.com/fowa/2009/miami/content
  102. 102 http://events.carsonified.com/fowa/2009/miami/content
  103. 103 http://samrayner.com/portfolio/
  104. 104 http://samrayner.com/portfolio/
  105. 105 http://www.checkoutapp.com/
  106. 106 http://www.checkoutapp.com/
  107. 107 http://www.mailchimp.com/
  108. 108 http://www.mailchimp.com/
  109. 109 http://www.sixapart.com/
  110. 110 http://www.sixapart.com/
  111. 111 http://getmiro.com/
  112. 112 http://getmiro.com/
  113. 113 http://goodbarry.com/
  114. 114 http://goodbarry.com/
  115. 115 http://www.yackfou.com/
  116. 116 http://www.yackfou.com/
  117. 117 http://www.webdesignerwall.com/trends/modern-sitemap-and-footer/

↑ Back to topShare on Twitter

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

Advertising
  1. 1

    Andrew Butterworth

    June 17, 2009 3:08 am

    Great article -lots of examples. Cheers. First

    0
  2. 2

    Gooood article. Thank you, Matt.

    0
  3. 3

    Some cool footers indeed…

    I’m not sure, but I’m guessing that blogging has made footers standout. Or I never noticed it before…

    -1
  4. 4

    Nice one. A lot of good examples.

    -1
  5. 5

    Footers are kinda tricky – you have to take care and display the exact amount of information. Otherwise you can end up with an unbalanced design.

    Nice collection – Cheers!

    -1
  6. 6

    Really nice article. I especially loved the part about whitespace – it always works like a charm.

    0
  7. 7

    Great list of nice footers. Thanks!
    And I prefer to use footer like sitemap. It’s very useful and realy looks nice.

    -1
  8. 8

    great… like usually

    -1
  9. 9

    Great tips, though I do find it ironic that you the Top of Page link is listed but you don’t use it yourself. That’s often one of my pet peeves as I scroll down lengthy articles or tutorials and have to scroll back up to reach other links or, as you said, hit the home button.

    -1
  10. 10

    Very interesting!
    Thanks.

    -1
  11. 11

    You switched the images for Orca Bay and Clearspring.
    Other than that, I like this list very much. Will definitely take some of these tips into consideration.

    -1
  12. 12

    Excellent article, once again.
    However, should have shed more light on legal requirements, too.

    -1
  13. 13

    Eacht time I think the list of sites is going to end, there’s more! So much content.

    Thx!

    -1
  14. 14

    Johannes Leuchovius

    June 17, 2009 5:51 am

    Great article! =)

    -1
  15. 15

    Thanks for featuring! ;)

    -1
  16. 16

    Great ideas…I will try to implement in my next site design.

    -1
  17. 17

    Great variations of different ways to add that something extra to your footer design. I always like to include information about the company on my designs such as company number and address. I always include the W3c validation links as well.

    Good Article.

    -1
  18. 18

    Great ideas, the footer can actually be useful sometimes. I prefer to add something that can help “convert” readers like some sort of “action” or Adsense ads at the end of blog posts and in the footer…after they read your web page and scroll down they have something to do, which helps conversions.

    -1
  19. 19

    I enjoyed the examples, but I don’t think a fancy footer is an absolute requirement for every site.

    0
  20. 20

    Great Article!!

    Gopal Raju,
    ProductiveDreams
    @ gopalraju

    0
  21. 21

    Such a footer is also called a doormat.

    -1
  22. 22

    Good analysis and roundup on footers design. I’ve always like a footer design that matches the header.

    0
  23. 23

    I just finished a design for the Saint Louis Review after seeing a similar article on this topic a few months back. Footers are definitely making a stand in terms of importance and styling! I used to stick a copyright notice, and maybe a few links in there. Now I’ll put a basic site map, some neat elements, and maybe a graphic or two!

    -3
  24. 24

    alejandro siete

    June 17, 2009 10:20 am

    Excelente recopilacion y me gustaria ver mas ejemplos de formularios modernos y con buen estilo.

    more modern and style form .

    -2
  25. 25

    Christopher Anderton

    June 17, 2009 11:06 am

    Blueprint Design Studio looks A LOT like macthemes2.net. Great article BTW.

    -1
  26. 26

    I absolutely love the UX Booth footer. so nice looking and useful.

    -1
  27. 27

    good examples..nice article

    -1
  28. 28

    Love this awesome showcase of usable and informative footer collections!

    -1
  29. 29

    Mine contains the “About” part and quick links:
    Geek and Hype

    Maybe I should add more stuff?
    Dunno. :/

    -1
  30. 30

    Nice collection of examples, but I thought you were just rambling at the start…

    -1
  31. 31

    Nice article on footre…love to this kinda work.

    (some of them are already have been posted though.)

    0
  32. 32

    Thanks for these Infos :)

    -2
  33. 33

    Nice collection….

    but u guys forgot to include this to site with huge informative footer…

    http://hiddenpixels.com/

    http://wb4d.com/

    -2
  34. 34

    a never ending article, like the article I love ;)

    Thanks!

    -1
  35. 35

    I think the thing that defines a footer (besides its location) is that it gives a clear visual marker that there is no more content beyond that point. To do this it needs to be the same or very nearly the same on every page of the site, compact and brief to avoid becoming content in its own right.

    Personally I would describe a lot of the examples given as sidebar material placed at the bottom of the page, a “bottom-bar” if you like. Just above the footer for sure, but not really part of it.

    -1
  36. 36
  37. 37

    More than great list ! love it good work!

    -1
  38. 38

    I really think you provide to much stuff.

    -1
  39. 39

    Beautiful collection of great footers!! Thanks for sharing! :)

    0
  40. 40

    @Chetan The footers on those sites are terrible. They didn’t forget to add them, they steered clear like it was swine flu.

    -1
  41. 41

    Thanks for the feature in an great write up. Definitely the most informative post on footer info I have been in or read. Excellent information here!

    Brad

    -1
  42. 42

    Great examples! For some reason I just love footer designs, it is what grounds the page and gives designers an area to really be creative have some fun.

    Thanks

    -1
  43. 43

    Good article. Know what, sometimes, I start the design of homepage by its footer. lol.

    -1
  44. 44

    i am very happy to read it. this is very informative post

    -1
  45. 45

    I always add much whitespace at the footer’s bottom. I do this so the text in the footer is not at the very bottom of the user’s display, but more to the center. This makes it more readable.

    -1
  46. 46

    Great post! You missed http://www.limina-ao.com ;-)

    -2
  47. 47

    Great list! (Though should say it’s griff, not graff, ina[box].)

    -1
  48. 48

    These are some really great tips, thanks a lot. A really inspiring selection of designs also. I tend to keep my footers rather minimal – with optimised links, contact details and a smaller version of the company’s logo, which I think makes a big difference.

    -1
  49. 49

    Tag clouds? Does anyone actually click them? I’m also struggling with Twitter updates. Most updates are cryptic and/or irrelevant. I have seen no clicks by displaying these Twitter updates on websites. Just because you can put it in a footer doesn’t mean you should put it in the footer.

    -1
  50. 50

    This is a great solution for deep linking, since more people search and land on an interior page than they do a home page.

    -1
  51. 51

    Is usually blogengine much better than hubpages somehow? Has to be since it is becoming more popluar these days.

    -2
  52. 52

    Good article, you gave me some ideas…

    0
  53. 53

    What about the link conventions themselves? Should they have an active, hover, and selected state as in traditional web standards? Depending on the type of fat footer, should the section under which it really resides should be selected in the main navigation?

    -1
  54. 54

    Great article, thnx

    0
  55. 55

    Very Informative and interesting! Love this article!

    0

↑ Back to top