21 Days

Day 11 – Headers and footers the iWeb way

In web design headers get all the attention, footers don’t get a look in. It’s hardly surprising as it’s the first thing a user sees when they visit a site so it is only fair that the web designer spends a lot of quality time preparing the header area of a web page. But the footer is also a valuable place off web real estate too, and it shouldn’t be forgotten.

iWeb does start the job for us with it’s traditional ‘Made with a Mac’ badge on every page but iWeb users can and should go further. In today’s lesson we are going to look at what makes good header and footer sections and what doesn’t, what we can do to improve ours and there’s even a few examples of really good ones too.

Headers

Starting at the top of the page would be logical so iWeb headers, as I said above, are normally the first thing a user sees when they visit your site and if you get it wrong they will click the back button faster than you can blink.

Your web site’s header section should contain all the necessary information to let a user know what your site is about instantly. I’m afraid ‘instantly’ is a key word here, you really don’t get much time at all to attract a visitors attention so don’t crowd your header with loads of confusing images, text or advertising that play no part in your overall site, save that for further down the page.

If you take a look at the header at the top of this page it ticks all the boxes required for good header section. The design is simple, you look at the logo and the sub-heading and you can instantly tell what the site is about and next to it is the navigation so you know straight away how to get around the site. Here’s 2 more sites you might recognize. Their headers contain the logo, navigation and in both case they are used to highlight the latest gadget on offer. You can tell in an instant what the sites do.

That doesn’t mean to say that you have to go with a design as simple as I have for AAi but the overall effect is what you are aiming for. If you are finding it hard to decide on your iWeb site’s header why not design a few and then test it on a few friends. See which one they think is easiest to read and grabs their attention. 9 times out of 10 it will be different to you but remember you are designing a web site for your visitors, not for you, so listen to them.

Footers

As I mentioned above the footer section of most iWeb sites are a neglected area, but this shouldn’t be the case. Designing a practical yet good-looking footer section can really make a page stand out.

Without doubt they are not seen as often as the header section but if even a small percentage of your visitors scroll down as far as your footer section then it is useful. So what sort of information should you be including in your footer? It is entirely up to you, but what seems to be common is text based navigation especially pages you don’t include in your main navigation bar, privacy policies, terms & conditions and of course your copyright information. Here’s the footers from the two sites we’ve already mentioned.

What you place in your footer depends on your type of iWeb site. Many blogs tend to include a snippet of information about the blog itself, as well as lists such as recent comments or most popular posts.

The two images above both show well laid out and organized footer layouts. Text based navigation is a good thing because screen readers, and more importantly search engines can read it. Having navigation at the bottom of a page also means you can do away with a complicated to code drop-down menu; if it’s good enough for Apple and Amazon why not use it? In iWeb all it takes is a few extra text boxes.

One little tip if you are having trouble dragging things into either your header or footer is remember to press the ‘Command’ button while you drag.

No doubt you haven’t neglected the header section of your site, there aren’t many web designers that do, but keep in mind that your footer section is also just as important so don’t just leave it as the default ‘Made on a Mac’ badge. It’s valuable web real estate that can help with your SEO so don’t let it go to waste.

Here’s a few inspirational posts for you to look at when you are planning your footer:

Footer Designs for your Inspiration – Noupe

Creative Footer Design – RedIce Designs

And here are some for your header:

Inspiring mega list of 450+ header designs – Mustified

45 Unique and Creative Blog Header Design – Superdit

You may also like

1 Comment

  1. Feeling like a bit of an idiot here. Are you telling me that I can create a single footer and have it appear on every page by default, without having to copy and paste it again and again?

Leave a reply

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

More in 21 Days