Bloggerrific

Half the websites out there have what is called a footer, or a block at the bottom of the page with quick links. For example, my website has a footer at the bottom of the page if you scroll down with links to major sections of my site. When I was looking into implementing this on my site, I ran into some problems. On some pages, the content didn’t fill the whole screen (which also varies with different screen resolutions, so the footer would be in the middle of the screen. Obviously, on pages where the content went past the bottom of the screen, this wouldn’t be a problem because the footer would be pushed to the bottom. So clearly, I needed a footer that would “stick” to the bottom of the screen if the content wouldn’t push it, but if there was enough content, then it would be below the screen bottom. I searched and searched for solutions, and I found one which I adapted just a little bit into my own implementation (in thanks, here is a link to his site, ryanfait.com.

Ryan’s solution was fantastic. However, I did still have some problems with it, probably because of my wrapper div that I used to center my content. So below, I have implemented my fix which I have tested in Firefox 2 and 3, Internet Explorer 6 and 7, Safari, Opera, and Chrome. The footer sticks to the bottom of the screen when content doesn’t push it that far, but goes to the bottom of the page when content goes below the fold. Below is the CSS and HTML for the footer with a wrapper as well. The sticky footer combined with a wrapper allow you to account for pretty much any screen resolution) too, which is fantastic! However, there is just one downside to this sticky footer, you absolutely MUST know the height of your footer. Luckily, there are not many cases where you’d be putting dynamic content into your footer.

First, the CSS:

html{
   height: 100%;
}
body{
   height: 100%;
}
div.wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -100px auto;
   The -100px mentioned above needs to be the exact height of the footer.
}
div.footer{
   height: 100px;
   clear: both;
   position: relative;
}
div.nudge{
   height: 100px;
   clear: both;
}

And now the HTML:

To see a working example of this footer, obviously you can look on this page (because I have one implemented here), or you can check out this example page that I made.

So yeah, it works pretty simply, though I must stress that every line of that CSS is important. You must declare a 100% height for the two parent elements of html and body (and if you have any other tags between those and the wrapper div, then you need a 100% on that as well). This forces the browser to use the whole screen. The three separate height declarations for the wrapper div are each individually important, including the !important addition. !important is a statement which makes that lines declaration take precedence over declarations that come after it. This however does not apply in IE, but that’s okay, because we want it that way for this Sticky Footer. Then most important is how the margins work. By putting a negative margin of the footer’s height on the wrapper, we allow whatever comes after the wrapper to overlap with it. The nudge div creates empty space inside the main wrapper so that when the footer overlaps exactly with the wrapper, nothing is blocked out. If you theoretically wanted a margin between the wrapper and the footer then make your negative margin on the wrapper 100px, your footer div would be 70, and give the footer a 30px margin on top. The nudge div would also still be 100px again to make space for the footer and its margin.

As a last suggestion, I usually put another div inside the wrapper div and the footer div, give them both a width of 990px and make them float left. The float with the full width will make sure that nothing (such as padding or a margin) manages to creep outside the edge of the wrapper or footer div. This is a safety precaution, but one that I highly suggest. If you notice a problem when you try to implement the sticky footer, this is the first thing that I would suggest.

Got any questions? Need help troubleshooting? Critiques are welcomed too! Post a comment.

800×600 or 1024×768 or 1280×800 or 1280×1024? I could keep going, but that won’t do any of us much good. One of the first questions you should be asking yourself when you set out to design a website is what screen resolution are you shooting for? The easy answer as of December 6th, 2008 is 1024×768 (that is width by height for those who are confused).

However, it does get a bit more complicated than that. There are two things you should consider, your target audience, and your future website. Based on the age and demographics of your target audience, the distribution of screen resolutions will change. Young and hip audience? Targeting upper class users? Assume that a larger percentage of your audience will be using larger screens. As for your website, you may have a dire need to shoot for a larger screen size because you need the space. Or perhaps you think you can sacrifice screen size because you really don’t have much content and you’d rather accommodate everyone. These are all things you should think about.

However, the bottom line is, around 30-40% of your users (again, as of December 6, 2008) are using 1024×768. Another 30-40% will be using 1280×800 or 1280×1024. Those are your two to pick from, but again, unless you want to inconvenience 30% of your users, 1024×768 is your sweet spot. You’ll have about 5% of your users still with a 800×600, but honestly, they need to upgrade. By the time a group drops to around 5%, it is worse to inconvenience 95% of your users to help the other 5%. Lastly, whatever is remaining in your percentage will be even larger resolutions.

Keep in mind that these things change over time. Within a few years, 1024×768 will be outdated, and we’ll be shooting for 1280×1024 or something else. Always track your users. I highly advise using Google Analytics. This tool allows you to gather information on everything to enhance your user experience. There will be another post on this topic in the next few weeks.

Now, another quick lesson. With 1024 as your target width, you actually need to be designing for about 990px. At least, that’s what I’ve always shot for. This is to take into account a scroll bar when your content goes below the fold. Also realize that 768px is a huge overestimate. After you factor in a windows bar, browser title bar, menu bar, URL bar, bookmark bar, and tab bar you’ve lost anywhere between 100 and 200 pixels. I’ll be writing another post on wrapper divs and sticky footers to help center your content regardless of screen resolution, as well as a post on sticky footers, which will keep your footer at the bottom of the screen unless content pushes it down further.

Thanks for reading, stay tuned!