10 JQUERY TAGGING AND TAG CLOUDS

<div dir="ltr"><span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px">A jQuery tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. Today we listed Most Desirable Collection Of powerful </span><strong style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;line-height:17px">jQuery and Ajax tag cloud </strong><span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px">. We obviously cannot cover all the best from the web, but we have tried to cover as much as possible. Have fun!</span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> </p><h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://cssglobe.com/post/4581/tag-clouds-styling-and-adding-sort-options" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">1. Tag-Clouds Styling and Adding Sort Option</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> This article consists of 2 parts: one is marking up and styling tags and the second is adding behavior to tag cloud using client-side script.<br><img alt="Tag-Clouds-Styling-and-Adding-Sort-Option.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/Tag-Clouds-Styling-and-Adding-Sort-Option.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://cssglobe.com/post/4581/tag-clouds-styling-and-adding-sort-options" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a><br> <span id="more-4182" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit"></span></p><h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-powered-tag-cloud/" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">2. Building a jQuery-Powered Tag-Cloud</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud. Aside from the actual links themselves, which give people an idea of the subjects that your site covers, they can also show how popular the different subjects are.<br> <img alt="Building-a-jQuery-Powered-Tag-Cloud.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/Building-a-jQuery-Powered-Tag-Cloud.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-powered-tag-cloud/" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://plugins.jquery.com/project/aptags" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">3. AP Tags</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> AP Tags is a simple to use tagging component that adds the ability to quickly create tags using a single text box. This component is very similar to the tagging component used in WordPress, but is a completely custom component.<br> <img alt="AP-Tags.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/AP-Tags.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://plugins.jquery.com/project/aptags" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://plugins.jquery.com/project/JTC" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">4. Jimpl Tag Cloud</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> A simple plugin to create tag cloud in your pages. It is based upon the jQuery framework. You just need to specify tag container and plugin will convert text from it to tag cloud. Easy to use and configure.<br><img alt="Jimpl-Tag-Cloud.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/Jimpl-Tag-Cloud.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://plugins.jquery.com/project/JTC" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://xoxco.com/clickable/jquery-tags-input" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">5. jQuery Tags Input</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data — your form just sees a comma-delimited list of tags.<br> <img alt="jQuery-Tags-Input.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/jQuery-Tags-Input.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://xoxco.com/clickable/jquery-tags-input" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://iplantideas.com/quicktag/" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">6. jQuery Quicktag</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> Quicktag is a tagging plugin for the jQuery JavaScript library.<br><img alt="jQuery-Quicktag.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/jQuery-Quicktag.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://iplantideas.com/quicktag/" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://chen.xianan.name/projects/tagto/" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">7. tagTo jQuery Plugin</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> A jQuery plugin for tags handling, <a href="http://del.icio.us">del.icio.us</a>' style.<br><img alt="tagto.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/tagto.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://chen.xianan.name/projects/tagto/" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://noupe.com/examples/tagcloud/tag-cloud.html" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">8. Hover Sub Tag Cloud</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> Using jQuery to reduce the size of the tag cloud that you have on your sites. A Sub Tag Cloud will appear when hovering over the main Tag links.<br><img alt="Hover-Sub-Tag-Cloud.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/Hover-Sub-Tag-Cloud.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://noupe.com/examples/tagcloud/tag-cloud.html" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-tag-cloud-using-the-google-web-toolkit/" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">9. Tag-Cloud Using the Google Web Toolkit</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px 0px 14px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> It is a form of visualizing the difference in importance or activeness of some predefined categories based on how large they appear in the cloud.<br><img alt="Tag-Cloud-Using-the-Google-Web-Toolkit.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/Tag-Cloud-Using-the-Google-Web-Toolkit.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://net.tutsplus.com/tutorials/javascript-ajax/building-a-tag-cloud-using-the-google-web-toolkit/" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <h2 style="margin:55px 0px 15px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:normal;line-height:34px;display:inline-block;width:500px;color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:22px!important"> <a href="http://ajax.phpmagazine.net/2005/12/ajax_tagcloud_and_much_more_in.html" style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-style:inherit;text-decoration:none;outline:0px;color:rgb(244,86,38)" target="_blank">10. Ajax TagCloud</a></h2> <span style="color:rgb(103,103,103);font-family:myriad-pro-1,myriad-pro-2,'Lucida Grande',sans-serif;font-size:14px;line-height:17px"></span><p style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px"> The idea is fit too much with the design of the website Pensaletes 3.0 by Fabio Mont Alegre, where the TagCloud is attached to the top and is loaded when someone hit the tab. The website is using Prototype and <a href="http://script.aculo.us">script.aculo.us</a> in addition to various scripts.<br> <img alt="Ajax-TagCloud.jpg" src="http://cdn.jquery4u.com/wp-content/uploads/2011/05/Ajax-TagCloud.jpg" style="margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; font-style: inherit; max-width: 100%;"><br> <a class="" href="http://ajax.phpmagazine.net/2005/12/ajax_tagcloud_and_much_more_in.html" style="margin:10px 10px 10px 0px;border:0px;border-collapse:separate;border-spacing:0px;font-weight:bold;font-style:inherit;font-size:17px;text-decoration:none;outline:0px;color:rgb(255,255,255);text-align:center;display:inline-block;background-color:rgb(255,74,11);text-transform:uppercase;padding:11px 19px!important" target="_blank">SOURCE</a></p> <p style="margin:0px;padding:0px;border:0px;border-collapse:separate;border-spacing:0px;font-size:14px;font-family:helvetica;color:rgb(103,103,103);line-height:17px">courtesy: <a href="http://www.jquery4u.com/plugins/10-jquery-tagging-tag-clouds/" style="font-family:arial;font-size:small;line-height:normal">http://www.jquery4u.com/plugins/10-jquery-tagging-tag-clouds/</a></p> </div>

10 JQUERY TAGGING AND TAG CLOUDS

A jQuery tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. Today we listed Most Desi...

Read more »

Designing your website's footer is as important as designing the header. Nathan Leigh Davis explains why, and reveals 16 websites that get it right.

<div dir="ltr"><p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">When starting any website project, it's natural to want to concentrate your design efforts on the homepage and the header. As a result, the footer often becomes an afterthought - relegated to a poorly designed dumping ground for copyright information, legal disclaimers and spammy SEO links. But it shouldn't be this way.</p> <h4 class="" style="margin:0.5625em 0px 10px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:18px;font-weight:400;line-height:22px;vertical-align:baseline;color:rgb(51,51,51)">Advertisement</h4><div id="dfp-ad-advert_mpu_body_1" class="" style="margin:0px;padding:0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:27.421875px;vertical-align:baseline"> </div><p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">The footer of a website is as important as the header, if not more so. Why? Because the footer is the last port of call for many visitors. The point at which they'll sign up for service, want to read another article or simply require your contact details. Ask yourself - what do you want your visitors to do when they reach the bottom of the page? The answer you come up with will be a great starting point for designing your website footer.</p> <h4 style="margin:0.5625em 0px 10px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:18px;font-weight:400;line-height:22px;vertical-align:baseline;color:rgb(51,51,51)">Strategic approach</h4><p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> That answer will, of course, change from project to project, depending on the nature of the website and the desired outcome. For instance, if you're designing a blog, then keeping users on the site is all-important, so it will be often be wise to place links to the most recent and popular posts within the footer. However if the site is intended to promote a product, then either a call-to-action or small signup form will usually be a better choice.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">Carefully consider what content to place within the footer. While it's tempting to utilise it as a space to place various odds and ends, this will weaken its potential. Designing a great footer is not about finding the best way to layout a lot of unrelated content, but the ability to prioritise and disregard unnecessary or superfluous information.</p> <h4 style="margin:0.5625em 0px 10px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:18px;font-weight:400;line-height:22px;vertical-align:baseline;color:rgb(51,51,51)">Remember conventions</h4><p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> It's important to remember however that some conventions exist and to be mindful of them when designing website footers. For instance, many users who are trying to obtain contact details for a business will scroll to the bottom of the page. However you can still prioritise more important information by using design elements such as scale to create a strong sense of hierarchy within your site's footer.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">The following showcase is intended to demonstrate different ways in which website footers can be utilised - we hope you find it useful.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">01.</span> <a href="http://www.jaradjohnson.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Jared Johnson</a></h3> <a href="http://www.jaradjohnson.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/12/jaredjohnson.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Jared Johnson prioritises his contact information to make it easy to find<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> While including contact information in the footer has become something of a convention, there are many cases when this information is not only required, but should be prioritised. This is particularly true for service providers such as freelance designers and businesses who have a physical address.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">Freelance designer Jared Johnson has prioritised the contact information on his single-page folio site. The way in which he utilises colour and scale to differentiate his email address and telephone number from the rest of the footer ensures they are easy to find, which is essential if you're a freelance designer.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">02.</span> <a href="http://www.cantilever-chippy.co.uk/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Cantilever Fish & Chips</a></h3> <a href="http://www.cantilever-chippy.co.uk/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/12/cantiliver.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>It's easy to find the opening times for Cantilever Fish & Chips in its site's footer<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Cantilever Fish & Chips' single page website uses the bottom of the page to display their location, contact details and opening hours. By doing so they've stuck to the convention of placing this information at the bottom of the page - but what makes this site stand out is the innovative and attractive way in which it is presented.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">03.</span> <a href="http://www.jasonmayo.co.uk/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Jason Mayo</a></h3> <a href="http://www.jasonmayo.co.uk/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/jasonbio.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Jason Mayo's footer provides a brief bio, as well as some offbeat statistics<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Placing a short piece of text-based information such as a profile, biography or testimonial in the footer is an effective way of providing an insight into the entity that the website represents. For many sites, placing the author's profile in the footer is a great way of not only promoting them, but adding credibility to the site's content too.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">The statistics at the top of the footer on Jason Mayo's website enhances his brief profile and provides an insight into his character and skills, while also adding a touch of individuality.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">04.</span> <a href="http://ministryoftype.co.uk/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">The Ministry Of Type</a></h3> <a href="http://ministryoftype.co.uk/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/theministryoftype.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>A profile of The Ministry of Type's creator adds credibility to the content<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> The footer on The Ministry Of Type includes a short profile about creator and author, Aegir Hallmundur. The presence of his profile adds credibility to the site's content, as well as promoting the author's portfolio and freelance activities to readers.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">05.</span> <a href="http://monocle.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Monocle</a></h3> <a href="http://monocle.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/monocle1.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Links to less important areas of the Monocle site appear in the footer, helping to reduce the complexity of the main nav<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Placing secondary navigation to less important areas of a website is also a great way to utilise the footer, as it can help declutter the main navigation, which in turn aids usability. This is a particularly good approach for large websites.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">Monocle place links to less important areas of their website within the footer, helping to reduce the complexity of their main navigation. A search bar is also included so users can search for additional information without having to scroll back to the top of the page.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">06.</span> <a href="http://www.ditto.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Ditto</a></h3> <a href="http://www.ditto.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/ditto.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Ditto has moved its navigation from the top of the page to the footer<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Eyewear retailer Ditto takes the idea further, moving its navigation from the top of the page to the footer. By doing so, they limit the options available to casual users, meaning they can easily lead customers through their product selection process. Users with specific goals, however, will naturally scroll to the bottom of the page to find the information they require.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">07.</span> <a href="http://siteinspire.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Site Inspire</a></h3> <a href="http://siteinspire.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/siteinspire1.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>The Site Inspire blog's footer encourages readers to keep reading<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> For blogs and news websites, keeping the user on the site is of primary importance, as many of these sites rely on maximising page views to generate revenue. Offering links to popular or recently posted content within the footer is a good way of achieving this.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">The footer on Site Inspire is beautifully simple, containing only a short profile and links to recently posted content. Such an approach offers readers the option of accessing more content when reaching the bottom of page, meaning that they're more likely to continue browsing the site.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">08.</span> <a href="http://webdesignerwall.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Web Designer Wall</a></h3> <a href="http://webdesignerwall.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/webdesignerwall.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Web Designer Wall's footer links to recent reader comments<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Web Designer Wall provides links to recent posts and user comments within their footer, in addition to a short profile. Linking to recent comments is a particularly good strategy if the blog has a strong community behind it who have intelligent, but varied opinions, which are likely to attract the interest of other readers.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">09.</span> <a href="http://www.rdio.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Rdio</a></h3> <a href="http://www.rdio.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/rdio.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Rdio's footer prioritises social media<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> For many individuals and businesses developing a strong social media presence is a cornerstone of their digital strategy, so prioritising social media links within the footer is an effective way of driving users to their various social media outposts once they're done browsing the site.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">The footer on Rdio's homepage prioritises their various social media services by leaving plenty of empty space around these elements to draw the attention of users.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">10.</span> <a href="http://www.seesparkbox.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Spark Box</a></h3> <a href="http://www.seesparkbox.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/sparkbox.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Spark Box runs feeds from Twitter, Dribbble and Flickr in its footer<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Ohio studio Spark Box takes this idea one step further by placing feeds from services such as Twitter, Dribbble and Flickr within its playful footer. This further advertises their presence on these social networks to potential followers.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">11.</span> <a href="https://yourkarma.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Karma</a></h3> <a href="http://yourkarma.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/karma.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Karma has a secondary call-to-action in its footer<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Websites for products or services tend to contain clear calls-to-action within the site's header, but adding a secondary call-to-action within the footer is an effective way of enticing more cautious users who want to find out more before signing up.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">'Social bandwidth' service Karma complements the primary call-to-action on its website with a secondary one located within the footer of each page. The call-to-action button is large, friendly and not likely to be missed.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">12.</span> <a href="http://scriptogr.am/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Scriptogr.am</a></h3> <a href="http://scriptogr.am/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/scriptogram.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>Scripto.gram encourages signups by a clear call-to-action in its footer<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Web publishing app Scriptogr.am has adopted a similar approach. Like the call-to-action button on the Karma site, the call-to-action button contained within its footer is designed to ensure it definitely attracts the attention of users.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">13.</span> <a href="http://thenounproject.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">The Noun Project</a></h3> <a href="http://thenounproject.com/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/thenounproject.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>The Noun Project prioritises newsletter signup by a playful use of scale<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> While placing large friendly call-to-action buttons in the footer is an effective strategy, many sites take this concept a step further by including forms within the footer, allowing users to perform a variety of tasks, such as subscribing to newsletters or initiating contact, on every page.</p> <p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline">The footer for icon service The Noun Project prioritises its newsletter signup by a playful use of scale. Capturing user details in this way allows them to market themselves to potential customers long after they have visited the site.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">14.</span> <a href="http://nationallgbtmuseum.org/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">The National LGBT Museum</a></h3> <a href="http://nationallgbtmuseum.org/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/nationallgbtmuseum.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>The LGBT Museum's website footer features a large, friendly contact form<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> The footer on The LGBT Museum's single-page website contains a large friendly contact form, which invites users to contact them. Such an approach minimises any hesitation users may have about contacting the organisation.</p> <h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"><span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">15.</span> <a href="http://www.newbabylon.com.au/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">New Babylon</a></h3> <a href="http://www.newbabylon.com.au/" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(255,90,20)" target="_blank"><img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/babylon1.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;"></a>New Babylon's footer uses colour to clearly separate itself from the main body of content<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> For websites promoting events displaying sponsors and supporters within the footer can help make the event appear credible, particularly if those sponsors are relevant and well-known.</p><p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> Art festival New Babylon's single-page website utilises the footer to display sponsorship information, clearly separating it from the main body of content by varying the background colour.</p><h3 style="margin:0.5625em 0px 15px;padding:0px;border:0px;font-family:Oswald,Arial,sans-serif;font-size:28.6px;vertical-align:baseline;color:rgb(51,51,51);clear:both;letter-spacing:0.06em"> <span class="" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;color:rgb(255,90,20)">16.</span> <a href="http://www.kikk.be/2012" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;background-color:transparent;color:rgb(51,51,51)" target="_blank">Kikk Festival</a></h3> <img alt="" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/01/kikkfestival.jpg" style="margin: 0px 0px 5px; padding: 0px; border: 1px solid rgb(227, 227, 227); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; vertical-align: middle; height: auto; width: 535px; display: block; max-width: 615px;">The Kikk Festival website's footer promotes event sponsors and supporters effectively<p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> The footer on the Kikk Festival website is also very well designed and a great example of how the footer can be effectively utilised to display event sponsors and supporters.</p><p style="margin:0px 0px 20px;padding:0px 25px 0px 0px;border:0px;font-family:Georgia,'Times New Roman',Times,serif;font-size:18px;line-height:30px;vertical-align:baseline"> courtesy: <a href="http://www.creativebloq.com/web-design/10-superb-website-footers-take-inspiration-1131597" style="font-family:arial;font-size:small;line-height:normal">http://www.creativebloq.com/web-design/10-superb-website-footers-take-inspiration-1131597</a></p> </div>

Designing your website's footer is as important as designing the header. Nathan Leigh Davis explains why, and reveals 16 websites that get it right.

When starting any website project, it's natural to want to concentrate your design efforts on the homepage and the header. As a result, ...

Read more »

25 Examples of Footers in Web Design

<div dir="ltr"><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">As a user I really like to find a well designed footer in a website. I think it is nice to know that the designer was thinking about everything when putting the layout together, I feel happy to find a beautiful design "from header to footer." And by that I don't mean that the layout must be fancy, I just mean that is nice to find a nice image, illustration or simply well organized info and maybe some nice and elegant icons. So based in all that, today we decided to gather a list showing a few examples of footers in web design. And I have to say that this time around – we already showed footers here twice: <a href="http://webdesignledger.com/inspiration/35-inspiring-headers-and-footers" style="text-decoration:none;color:rgb(43,141,192)">nov/2010</a> and <a href="http://webdesignledger.com/inspiration/headers-and-footers-that-grab-you-coming-and-going" style="text-decoration:none;color:rgb(43,141,192)">dec/2009</a> – it was harder to find interesting examples to show. Guess footers are being forgotten lately, what do you think?<span id="more-11043"></span></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://meandoli.com/#!/2/1/0/6/6" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">me & oli</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://meandoli.com/#!/2/1/0/6/6" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers01.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://labubbly.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">La Bubbly</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://labubbly.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers02.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.poogansporch.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Poogan's Porch</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.poogansporch.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers03.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.giftrocket.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">GiftRocket</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.giftrocket.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers04.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.lindadong.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Linda Dong</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.lindadong.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers05.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://insite.net/home/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Insite</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://insite.net/home/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers06.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.madebyvadim.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Made by Vadim</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.madebyvadim.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers07.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.ericpaulsnowden.com/blog/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Eric Paul Snowden</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.ericpaulsnowden.com/blog/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers08.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.studiochirpy.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Studio Chirpy</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.studiochirpy.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers09.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://sproutlet.io/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">sproutlet.io</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://sproutlet.io/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers10.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.headlampcreative.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Head Lamp Creative</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.headlampcreative.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers11.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://upperdog.se/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">upperdog</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://upperdog.se/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers12.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://deda.me/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Deda</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://deda.me/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers13.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://1minus1.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">1minus1</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://1minus1.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers14.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://studionudge.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Nudge</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://studionudge.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers15.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.sohofixed.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Soho Fixed</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.sohofixed.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers16.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.ggmusicandaudio.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Guy Gyngell/a></a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.ggmusicandaudio.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank"></a></p> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.ggmusicandaudio.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank"></a><a href="http://www.ggmusicandaudio.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers17.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://corkcicle.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Corkcicle</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://corkcicle.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers18.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://wearepandr.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Pandr</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://wearepandr.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers19.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.bristolarchiverecords.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Bristol Archive Records</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.bristolarchiverecords.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers20.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://yuruinspires.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">yuru</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://yuruinspires.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers21.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.underconsideration.com/brandnewconference/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Brand New Conference</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.underconsideration.com/brandnewconference/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers22.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://touchtech.co.nz/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Touchtech</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://touchtech.co.nz/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers23.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://elpassion.pl/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">El Passion</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://elpassion.pl/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers24.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://www.i-am-tiago.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">I am Tiago</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://www.i-am-tiago.com/" style="text-decoration:none;color:rgb(43,141,192)"><img alt="Inspiring Footers" class="" src="http://webdesignledger.com/wp-content/uploads/2011/08/footers25.jpg" style="margin: 0px auto 12px; border: none; clear: both; display: block;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)">Source:</h3><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"> <a href="http://www.thebestdesigns.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">The Best Designs</a><br><a href="http://www.awwwards.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">Awwwards</a><br> <a href="http://www.unmatchedstyle.com/" style="text-decoration:none;color:rgb(43,141,192)" target="_blank">unmatchedstyle</a></p><div class="" style="margin-bottom:15px;color:rgb(76,76,76);font-family:Arial,sans-serif;font-size:13px"> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px">About the Author</h3><img alt="" class="" height="80" src="http://1.gravatar.com/avatar/b269f31b359aa6f6959e789581a4e4a1?s=80&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&r=G" style="margin: 0px 15px 10px 0px; float: left; border: none;" width="80"><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px"> I love communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr</p></div><h2 class="" style="margin:45px 30px 0px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:35px;color:rgb(76,76,76)"> Related Posts</h2><p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif">Here's some other articles that you will definitely find useful.</p><h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"> <a href="http://webdesignledger.com/inspiration/creative-and-inspiring-print-ads" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to Creative and Inspiring Print Ads">Creative and Inspiring Print Ads</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/inspiration/creative-and-inspiring-print-ads" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to Creative and Inspiring Print Ads"><img src="http://webdesignledger.com/wp-content/uploads/2013/09/ads_cover1.jpg" style="margin: 0px; border: none;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://webdesignledger.com/inspiration/13-beautiful-examples-of-bold-colors-in-web-design" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 13 Beautiful Examples of Bold Colors in Web Design">13 Beautiful Examples of Bold Colors in Web Design</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/inspiration/13-beautiful-examples-of-bold-colors-in-web-design" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 13 Beautiful Examples of Bold Colors in Web Design"><img src="http://webdesignledger.com/wp-content/uploads/2013/09/color_cov1.jpg" style="margin: 0px; border: none;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://webdesignledger.com/inspiration/18-minimalistic-home-offices-to-inspire-you" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 18 Minimalistic Home Offices to Inspire You">18 Minimalistic Home Offices to Inspire You</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/inspiration/18-minimalistic-home-offices-to-inspire-you" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 18 Minimalistic Home Offices to Inspire You"><img src="http://webdesignledger.com/wp-content/uploads/2013/09/offices_cover1.jpg" style="margin: 0px; border: none;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://webdesignledger.com/inspiration/15-fresh-examples-of-clean-and-minimal-web-designs" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 15 Fresh Examples of Clean and Minimal Web Designs">15 Fresh Examples of Clean and Minimal Web Designs</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/inspiration/15-fresh-examples-of-clean-and-minimal-web-designs" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 15 Fresh Examples of Clean and Minimal Web Designs"><img src="http://webdesignledger.com/wp-content/uploads/2013/09/white_cover1.jpg" style="margin: 0px; border: none;"></a></p> <h3 style="margin:35px 30px 15px 0px;font-family:Georgia,'Nimbus Roman No9 L',serif;font-weight:normal;line-height:1.1em;font-size:30px;color:rgb(76,76,76)"><a href="http://webdesignledger.com/inspiration/30-stunning-website-designs-inspired-by-nature-and-landscapes" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 30 Stunning Website Designs Inspired by Nature and Landscapes">30 Stunning Website Designs Inspired by Nature and Landscapes</a></h3> <p style="line-height:1.6em;margin:0px 10px 20px 0px;font-size:14px;color:rgb(76,76,76);font-family:Arial,sans-serif"><a href="http://webdesignledger.com/inspiration/30-stunning-website-designs-inspired-by-nature-and-landscapes" rel="bookmark" style="text-decoration:none;color:rgb(43,141,192)" title="Permanent Link to 30 Stunning Website Designs Inspired by Nature and Landscapes"><img src="http://webdesignledger.com/wp-content/uploads/2013/09/nature_cover1.jpg" style="margin: 0px; border: none;"></a></p> <div><br></div></div>

25 Examples of Footers in Web Design

As a user I really like to find a well designed footer in a website. I think it is nice to know that the designer was thinking about everyth...

Read more »