DZone has recently rolled out a footer on their new “Zones” that I designed/coded for them. whether you want to check it out live, you can see it at any of the zones like the CSS Zone. I thought I would share some of the thought process we went through and the code.

 

We looked at other cross-promotional footers.

A good first step is always to take a look around and see what other’s have done before you. My first thought was to check out some of the Gawker blogs since that is a fairly large network you would think does that kind of cross-promotion. I could have sworn they did, but it looks like they have gotten rid of the footer cross-promotion. We did find that many of the other major blog networks do have cross-promotional footers though. Take a look:

 

 

 

We designed what we needed

The footer needed to be built from “blocks”, with each block representing one of the different zone. Each block needed:

1. The Zone Logo
2. An RSS Link
3. A list of recent entries

Here is the outcome of one block:

 

We made it dynamic

Because there are too many zones to list every one zone in every loner footer, we wanted to construct certain to have to option to swap out different zones with just simple changes to the markup. That means that none of the graphics or text that is zone-specific could be part of the CSS. The aftereffect is a blank background for the blocks:

 

We made it flexible

We plus weren’t certain precisely how many blocks would look good or be essential on any given zone, so the ability to add and remove blocks was crucial. considering of the design, it made the most sense to do that in groups of two, so two blocks form up one row:

<div class="footer-row">
       // LEFT Block
       // RIGHT Block
</div>

This way it was easy to use as many or as few rows as needed. considering they stacked up right on top of each other and they made the use of gradients, I made certain of one thing:

As faraway as the color at the top and the bottom of the blocks were the same, they color would meet gracefully and not have an abrupt end to the subtle gradient.

 

We made it semantic

The markup for each block is nicely grouped together in an ordered list.

<div class="footer-row">
	<ol class="left-list red" start="0">
		<li class="logo">
			// Linked logo image here
			// Linked RSS image here (just a fully 

transparent GIF)
		</li>
		<li>
			// spread Title #1
		</li>
		<li>
			// spread Title #2
		</li>
		...
	</ol>

	<ol class="right-list blue" start="0">
		<li class="logo">
			// Linked logo image here
			// Linked RSS image here (just a fully transparent GIF)
		</li>
		<li>
			// exposition Title #1
		</li>
		<li>
			// exposition Title #2
		</li>
		...
	</ol>
</div>

Having the cipher for each block wrapped up in one list, semantically speaking, is really the way to go. Notice that even the logo and RSS hyperlinks are part of the list. By giving that specific list item a different class, we have the hook we need to get it moved by and treated differently than the other list items. that would additionally be an ideal candidate for the :first-child selector, too poor that isn’t more universally supported yet.

Also notice that the first exposition in the link still starts at #1 even though technically the logo item would be #1. That is over-ridden by the start=”0” in the opening ol tag. I think the start attribute might be deprecated, but it’s the only way to do that. There is no CSS equivalent to “start”.

 

We revised it

Right when it was rolled out, that is what it looked like:

There were things about that that we liked. Personally, I liked the large text and the big yellow rollover backgrounds at first, but soon after the more I looked at it the more it just didn’t seem right for DZone. The problem was that I designed the footer all by itself, so I wasn’t looking ample at the substance it was underneath. Not really digesting the context of a design is a fatal flaw.

Ultimately, we ended up getting rid of the blue (just too startling of a transition from the main content), adding the RSS urls, and moving to the smaller text in the list format. Much nicer now, I think.

The future.

There is a design feature of that footer that has yet to be unleashed. Notice in the above opening tag for the ol elements there are some class names. One of them is left- or right-list, but the other is a color. that class name can control the color of all the write-up urls in that block. Check it out:

The problem is how to get that class name to come by dynamically with everything else. I’m not the real coder, so I’m not certain there is any easy way to do that so I’m not certain whether that will ever get implemented. Or, in fact, whether it’s really right for DZone.

So, what do you think folks? Do you like it? Hate it? Feedback is the last step in my design process and a vital one.

Orginal post by Chris Coyier