How to Create An Effective Complex Footer: Content Design and Examples

How to Create An Effective Complex Footer: Content Design and Examples

In the past, copyright information and the website name were the main elements found at the bottom of a website. Sometimes, the most heavily used navigation links would be included as well. Users expect to get information from the internet faster and faster – and it’s only going to continue. By creating a complex footer on your website, you can cater to the individuals looking for specific information quickly.

How to Create An Effective Complex Footer: Content Design and Examples

The bottom of a website is more powerful than some might realize. The footer of a website is always there – vital information for your site is available on every single page, without crowding the sidebar or content area. By strategically deciding which information is the most effective, a strong footer can increase user activity on your website. This article will explain ways to incorporate relevant and user-friendly elements into your footer.

The Basics

A complex footer can include a number of items, but the most effective elements are navigation, contact information and social media icons. These are three heavily used sections of a website because they impact searching, communication and conversation for your service, product or information.

Navigation

Breaking out navigation is helpful to the user because he or she can quickly scan the pages of the website, as if they were looking directly at a site map. This is especially useful if the website has a dropdown navigation. It makes a search even quicker for the user when he or she can look at all the pages available at once.

One of the most important things to keep in mind when displaying navigation in the footer is to keep it organized. If you have a lot of pages on your site, you should pick and choose which pages will be most useful to your audience. Once they’re more interested in your service, product or information, they will be able to dig deeper into your site through other links. Separate the pages into different lists. For example, make the word “about” in all capital letters and bold, and anything that falls below that section, keep in a normal weight and lowercase. This will help users navigate more quickly.

Texture Lovers
Texture Lovers placed the most utilized sections of their websites in the footer. Users can quickly access the popular pages of the site.

Texture Lovers

Contact Information

The footer is a great place to put contact information because many times when a person comes to a website, they’re searching for a way to communicate. A user gets easily frustrated if it takes them more than a few seconds to find what they’re looking for.

If you have an office, display your address, phone number, email, fax number, etc. If the website is for online purposes only, display the information that you can. Users will appreciate the quick access to important information. Having your physical address also gives users a sense that your business is credible, especially in e-commerce situations.

Sunrise Design
Sunrise Design include their office address in their contact information so users can quickly communicate with them.

Sunrise

Social Media

If the website you’re working with isn’t on social media, you’re probably thinking about involving social media. Social networking sites are a popular marketing tool right now, so it’s important to allow people to find your different profiles quickly. You can put in one of the hundreds of icons already created, or you can create your own social media icons to fit the branding of your site.

Once again, remember to keep it organized. If you’re on 18 different social media sites, make them small or only include the top four or five icons you utilize. Too many outlets can be overwhelming for users.

Energy Cell
Energy Cell uses their twitter feed to keep users updated and current with their recent news and projects.

Energycell

Incorporate More Elements into the Footer

Blog Categories, Archives, and Tags

If your site is less service and more blog-based, you could remove the navigation and incorporate a list of the blog’s top categories, tags or archives. These three elements are useful to a reader because they can quickly move to a new section of your blog.

Viget Inspire Blog
The Viget blog uses categories and archives to fill its footer. The amount of archives compared to categories isn’t ideal because it leaves a lot of empty space beneath the categories. However, it’s a clean layout and it sticks to the grid.

Viget

Recent Comments or Recent Posts

Blogging platforms like WordPress give you the ability to incorporate plugins that display your most recent or most commented posts. Using these creates an opportunity to drive more traffic to your posts.

Punchnel’s
Punchnel’s utilizes the recent comments and recent posts elements to engage their readers. By also including emails for communication, it gives its readers the ability to easily get in touch.

Punchnel's

Call to Action Buttons and/or Links

The footer is a great place to link to important items on your site, such as an online store or a contact page with a form. If you have a client login, this is also helpful to your customers. Instead of having them dig around in the content or sidebar, direct people to your footer. It’s easy to get to and it never moves. If you plan to add a call to action, I would recommend having the link somewhere else on the site above the footer. As much as we hope users will scroll through the entire site, this isn’t always the case.

David Hellman Portfolio
David Hellman’s site uses a call to action with his portfolio samples. This gives his users another opportunity to take a look at his work.

David Hellman

Contact Form

Including a contact form in the footer saves users a step and allows them to submit their information immediately. As long as you don’t need an excessive amount of input fields, this is a helpful element to include.

Griffinabox
Griffinabox utilizes a small contact form in its footer. This allows quick communication for users.

Griffina box

Back to Top

To help users navigate to the top of a website, a ‘back to top’ button can be included. This button reduces scrolling and quickly gets the viewer where they want to go. This element is useful if you have a blog with a long feed.

Headscape
Headscape put a creative button into their footer that says, ‘The Only Way Is Up’ that leads users back to the top of their website.

Headscape

Design, Styling and Placement

Using An Artistic Design

One of the newer trends in web design is to create an illustrated footer. These aren’t necessarily complex footers on their own, but you can integrate the two and give a little more detail to your site.

InfinVision
InfinVision uses a great mix of elements, while keeping the footer layout clean. They used small, illustratrated elements to add detail to the footer. The contact form allows users to get in touch quickly and easily. They’ve also added a nice touch by creating their own personalized social media icons.

Infinvision

Grid

As you design your site on the grid, make sure to keep your footer on that grid as well. Keep your different information sections even, or make two large sections and one small section. Give each section even margins as well. The more organized your content is, the more user-friendly it will be.

Forty Seven Media
Forty Seven Media has several different elements included in the footer, but they stick to the grid to create a clean layout.

Forty Seven Media

Background Color

If you choose to use a solid color footer with no illustration, make sure your color has a strong enough contrast from the rest of your content. It can be confusing to your viewers they can’t decipher where the content stops and footer begins.

Well Done Marketing
Well Done Marketing uses a black, textured background next to a light, graph paper background to differentiate between content and the footer.

Well Done Marketing

Examples

Here are a few more examples to show different ways complex footers can be used effectively in web design.

Tulsa Tough
Tulsatough

Biola University
Biola

Carsonified
Carsonified

Cool Tribe
Cool Tribe

Ecto Machine
Ectomachine

Fubiz
Fubiz

Obox Design
Obox

Productive Dreams
Productive Dreams

Rubbik
Rubbik

Sohtanaka
Soh tanaka

Conclusion

A complex footer can be a useful addition to your site design. If you include relevant information and easy access to popular information, you can give your users a better experience. The more user-friendly your site, the better chance you have to get returning visitors. Do you prefer complex footers or simple footers when you design websites?

Stephanie Bane is a web designer and developer working at Well Done Marketing in Indianapolis. She is also the art director at Punchnel's, an online magazine. Stephanie has experience in web and mobile design and development. If she doesn't have her nose in front of the computer, she enjoys backpacking, live music, reading and cooking.

Comments

    • Rana mukherjee,
    • September 7, 2011
    / Reply

    Hi!Stephanie,you discuss nice topic.In my openion,every body like this type of topic.

      • Stephanie Bane,
      • September 8, 2011
      / Reply

      Thanks, Rana. I wanted to write about something that would interest people, but also discuss a topic that sometimes gets ignored during the web design process.

    • Damien,
    • September 7, 2011
    / Reply

    I always feel that footer is a very important part of a successful website however many designer has overlooked it. It’s a great challenge to create an effective yet practical without irritating the visitors.

    This is a good article which has demonstrate pointers on how a good site footer should be with concrete case studies.

    Thanks for the article and I liked it!

  1. / Reply

    The way a footer is designed can make or break a site, I hate when a site looks really nice and then you reach the bottom and feel really disappointed with the lack of effort and thought put into the design, it shouldn’t be party on top all business at the bottom! The footer is not limited to just copyright statements, it’s apart of the site so should still hold informative elements for the user. My favourites from the collection are Carsonified and Rubbik.

  2. / Reply

    it is interesting to see what different sites use their footer for, even if there is a clear presence of: menus, blog rolls etc. Personally, when it comes to the design aspect, I’m a 100% sucker for the personalized designs, can’t manage to hate it. Thank you for this nice read!

  3. / Reply

    Completely agree with this article, there’s some nice point’s in it!

    I still think that many webdesigners still think the footer is just that, something that lays on the bottom of the page. But is much more than that, is where people end the navigation, and many times they don’t want to scroll all the way up to go whatever they like on the website.

    • Andy,
    • September 8, 2011
    / Reply

    Great article – I love “Phat Footers”!
    I think we have incorporated most of your ideas already. I should add the ^TOP link in though – good idea. How would you grade our footer? — http://www.tyndale.ca

    I think along with the address it is great to provide a link to an interactive map as well – especially if your business has people coming directly to it (like ours – a University)

      • Stephanie Bane,
      • September 8, 2011
      / Reply

      Hi Andy!

      I think your footer looks great. Your use of social media and address give the viewers quick access to some of the most important things on your site. Adding the ‘share’ button was also a great idea – now people can use more social media outlets to connect with your university, but you don’t have to cram them all in the footer. This helps your site look clean and organized.

      Your map link is better than I expected: you’re keeping people on your site. Before I clicked it, I was expecting to go to maps.google.com, like most websites. Keeping people on your site is the most important aspect of successful website strategy (which I’m sure you already know!). Nice job!

        • Andy,
        • September 9, 2011
        / Reply

        Thanks Stephanie – adding the share links in the footer is a great way to have it easily included on each page/URL in a consistent manor and encourage social sharing.

        I agree with the map on your site comment – it is so easy to embed maps these days – worth doing for any site!

        Thanks for the feedback.

  4. / Reply

    I run Thesis on my blog. I have been contemplating widgetizing my footer. Your article has just about convinced me to go ahead and do it.

    Thanks for the tips and ideas.

  5. / Reply

    Great articel, talent out there is outstanding :-)

    Check out the new blog on our site, for some more great web related stuff…

    • Peter,
    • September 13, 2011
    / Reply

    I’ve experimented with the complex footer on my new blog design, it was a pain in the ass to implement as I was learning CSS at the time, I think it came out well but can definitely use this post to help me improve my site footer. The link back to the top is a good idea!

      • Stephanie Bane,
      • September 13, 2011
      / Reply

      Hi Peter – 

      Your footer has a lot of information, but it’s organized really well. Nice work. I think a ‘back to top’ button will be great for your site since you have several blog entries per page. 

    • web design,
    • September 15, 2011
    / Reply

    thanks for the post .. it is really awesome!

  6. / Reply

    Stephanie, Thanks for the footer tips. Do you know by chance a good wordpress plugin form for using a small contact form like the one above? A lot of the ones I know of won’t fit in the small space of a footer widget. Thanks.

  7. / Reply

    The form plugin I usually use is Formidable. But, you don’t get much control over the input fields that’s quick and easy. Whenever I need to create a contact form in the footer, I usually just create my own form instead of using a plugin. I just find that it’s faster and I have a lot more control.

  8. / Reply

    Realy nice exemple. Thanks

    • Lisa Bruce,
    • September 20, 2011
    / Reply

    I really like the examples and potential uses. One concern that I have, and I wonder if you have any testing/usability information about, is if users actually make it to that section of the page. Are they going to find those things? Do they see them? We’ve been discussing more heavily utilizing this area in my office (we do large, institutional sites in higher ed), but I want to be sure the effort is worthwhile (typically we do standard contact info/copyright and some other legalese required in our environment).

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.