Designing the DZone Cross-Promotional Footer

DZone has recently rolled out a footer on their new “Zones” that I designed/coded for them. If 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 this 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 result of one block:

 

We made it dynamic

Because there are too many zones to list every single zone in every single footer, we wanted to make sure 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 result is a blank background for the blocks:

 

We made it flexible

We also weren’t sure exactly how many blocks would look good or be necessary on any given zone, so the ability to add and remove blocks was important. Because of the design, it made the most sense to do this in groups of two, so two blocks make 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. Because they stacked up right on top of each other and they made the use of gradients, I made sure of one thing:

As long 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>
			// Article Title #1
		</li>
		<li>
			// Article 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>
			// Article Title #1
		</li>
		<li>
			// Article Title #2
		</li>
		...
	</ol>
</div>

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

Also notice that the first article 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, this is what it looked like:

There were things about this that we liked. Personally, I liked the large text and the big yellow rollover backgrounds at first, but then 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 enough at the content 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 links, and moving to the smaller text in the list format. Much nicer now, I think.

The future.

There is a design feature of this 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. This class name can control the color of all the article links in that block. Check it out:

The problem is how to get that class name to come over dynamically with everything else. I’m not the real coder, so I’m not sure there is any easy way to do that so I’m not sure if this will ever get implemented. Or, in fact, if 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.