At this point we’re just about done with the homepage of our responsive website. We’ve got our navigation in place, our background images resize nicely, and our other elements are able to resize and adjust to various screen resolutions.
Today we’re going to focus on tying the page off with a footer. I’ve always admired sites that put some thought in to the bottom of their page design. There are certainly times when a footer requires nothing more than some basic contact info and maybe a copyright claim.
But I think it’s a good idea with any site requiring a fair amount of vertical scrolling to go ahead and add a smaller version of your main navigation in to your footer. This allows the viewer to reach the end of your page and quickly jump to another page on the site. We’ll put the icing on our footer by feeding in our latest tweet with a little jQuery script and then sprinkle in some contact info. Before we dive in to it, let’s take a quick peek at what we’re working towards.
Much like a website’s header, I like to use a separate file for my footer and dynamically pull it in to each page with a php include.
This makes for quick and easy updating if a link is added or contact info changes. Go ahead and open your idex.php file and include your footer, mine is sitting just above the close of my body tag and looks like this.
<footer>
<?php include('footer.php') ?>
</footer>That’s it for our index.php page, go ahead and save it then close out of that file. Next up we’re going to want to create our footer file and enter all of our content, so open a new document and save it as “footer.php”. The first tag we’re going to want to drop in our footer.php file is our container id.
This will keep our footer content centered on the page and aligned nicely with the rest of our main content above. You’ll notice in the image of our footer above that it’s broken down in to three sections, so we’re going to want to include a “footerLeft” class right after we open the container.
We then populate our “footerLeft” class with a miniature version of our main navigation, and then icons linking to our social media pages. At this point my code looks like this.
<div id="container">
<div class="footerLeft">
<ul>
<li><a href="#">Home</a></li><li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li><li><a href="#">Blog</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul><img src="images/blogger.png" />
<img src="images/linkedin.png" />
<img src="images/facebook_icon.png" />
<img src="images/twitter.png" />
</div><!--end div "footerLeft"-->
</div><!--end div “container”-->Our middle section is our Twitter feed and is only three simple lines of code, an image wrapped in a div class I named “twitter”. Our content is populated by jQuery and is set to recognize our “twitter” class as the appropriate location to place our latest tweet. We’ll dive in to this in our next tutorial.<div class="twitter">
<img src="images/twitter-preview.png" />
</div><!--end div "twitter"-->Lastly we have some contact info, which I aptly named “contact”. From there simple paragraph and line break formatting displays our contact info.<div class="contact">
<p>Developer Drive<br>123 Fake St.<br>
Cupertino, CA 95014<br>
P: 650-555-1212<br>
F: 650-555-1213</p>
</div><!--end div "contact"-->That does it for our footer.php file. Feel free to check your work against my full footer.php code or save your work and close out of this page.<div id="container">
<div class="footerLeft">
<ul>
<li><a href="#">Home</a></li><li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li><li><a href="#">Blog</a></li>
<li class="last"><a href="#">Contact</a></li>
</ul><img src="images/blogger.png" />
<img src="images/linkedin.png" />
<img src="images/facebook_icon.png" />
<img src="images/twitter.png" />
</div><!--end div "footerLeft"--><div class="twitter">
<img src="images/twitter-preview.png" />
</div><!--end div "twitter"--><div class="contact">
<p>Developer Drive<br>123 Fake St.<br>
Cupertino, CA 95014<br>
P: 650-555-1212<br>
F: 650-555-1213</p></div><!--end div "contact"-->
</div><!--end div "container"-->Now that all of the content is entered in to the appropriate files, we can begin to style it. Our regular HTML5 footer tag sets the height, color, and font style for our footer. I also put a thick top border to help separate our footer from our portfolio slider above.footer {
height:250px;
background-color:#C15007;
border-top:10px solid #EDEAE5;
color:#fff;
font-weight:bold;
font-weight:.8em;
}The .footerLeft class gets a little tricky as there’s quite a bit going on in there with our mini main navigation list elements and images. Most of this is basic styling, but there are a couple things worth pointing out.Since we don’t have too much room to make our mini navigation bar fluid and keep it on the same line with decent spacing, I made its width specific. We’ll rely on the Twitter and contact sections for our minor width adjustments.Also, it’s worth pointing out that the inline display under our list element is important to maintain the same horizontal appearance of our page links..footerLeft {
color:#fff;
float:left;
width:380px;
height:150px;
border-right:1px solid #fff;
margin-top:5%;
padding-top:2%;
}.footerLeft ul li{
display:inline;
text-transform:uppercase;
list-style:none;
margin-right:2%;
}.footerLeft ul li a {
font-size:.8em;
color:#fff;
text-decoration:none;
font-weight:bold;
}.footerLeft ul li a:hover {
text-decoration:underline;
}.footerLeft img {
float:right;
margin:5% 2% 5% 0;
}Next up we have our Twitter section, notice how we’re back to a percentage based width. We’re also able to style the time stamp of our tweets to subtly pronounce the time of our last tweet..twitter {
width: 35%;
height:150px;
float:left;
margin-top:5%;
padding:2% 2% 0 2%;
border-right:1px solid #fff;
color:#fff;
font-weight:bold;
font-weight:.8em;
}.twitter img {
float:left;
margin-bottom:100px;
margin-right:5%;
}.twitter .tweet a {
text-decoration: none;
color:#6BA5BD;
font-weight:bold;
font-weight:.8em;
}.twitter .tweet a:hover {
text-decoration: underline;
}.twitter .tweet .time {
font-size:10px;
font-style:italic;
color:#FFD08C;
}Lastly, we’ll add some spacing to our contact section for an evenly spaced look..contact {
float:left;
margin-top:5%;
padding:2% 2% 0 2%;
}Next week we’ll finish off the styling to make our footer fully responsive as well as discuss the jQuery Twitter feed. In the mean time, test your responsive skills and see if you’re able to make your footer responsive. Click here to download the source code.
