Creating a Responsive Website: The Footer Part 2

We’re going to pick up where we left off in our last tutorial on creating our responsive web design footer.

In the last tutorial you may recall that we laid out the large version of our footer and inserted a Twitter feed as well. In this tutorial we’re going to finish off our footer by making it responsive and plugging in the jQuery necessary to make our Twitter feed work.

If your dog ate your work up until this point, you can download the source code here. Before we get started, let’s take another quick look at what we’ll be finishing up today.

We’ll begin with our Twitter feed and break it down in to three parts. The first thing we’re going to need to do is retrieve our tweets and set it up so that we can easily change the account name, how many tweets we want displayed, and what element we want it to look for to display our tweets. To do this we’re going to utilize AJAX to call the Twitter API in JSON format and then process it. My code looks as follows.

Next we’re going to want to create a dynamic calculator that can tell us how long ago we posted the tweet. We’ll start by getting the time it was posted, which will require having to make an exception for IE as it can’t handle the screwy Ruby dates. After that we’ll create a series of if statements to give our time stamp a relative time like “seconds ago”, or “about 1 hour ago.”

That does it for our index page. Go ahead and close that and let’s finish up in our main.css file by making our footer a little more responsive.

Open up your main.css file and scroll down to our first media query for tablets in landscape mode. We’re going to switch our mini main navigation to a vertical list and give our .footerLeft class a percentage width so that it’s able to shrink fluidly. This is also where our .stackIcons class will come in to play. This is how I styled my elements to make them responsive. We’re also going to want to post this exact same bit of code under the next media query for tablets in portrait view. This is the code I plugged in to both of my landscape and portrait tablet layout media queries.

Now that we’ve got our tablet layout taken care of we can finish things up under our mobile media query. Since things get even skinnier on mobile devices I set the three sections of our footer to stack on top of each other rather than sitting next to each other, which means we’ll need to make our footer a little taller. You’ll notice that I also got rid of the right border and swapped it for a bottom border to separate each section. Aside from that it’s just basic styling, centering text and our social icons.

Scott Stanton has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer. Hang on Scott's every word @TheScottStanton.