Grow your CSS skills. Land your dream job.

Designing the DZone Cross-Promotional Footer

Published by Chris Coyier

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:

footer-engadget.jpg

 

footer-b5.jpg

 

footer-popsugar.jpg

 

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:
block-java.png

 

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:

block-blank.png

 

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:

block-blank.jpg

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:

version1.png

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:

future-footer.jpg

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.

Comments

  1. Nice work Chris.

  2. Permalink to comment#

    I hadn’t realised you working with Rick and co nice one, Dzone is still one of my favourite social media haunts :)
    Quick question, your using a fixed background, so that white box will always be a certain width it might not be a huge thing but what if the text was longer then the background.

    I know that its a bit hypothetically but would you reduce the text size? or split the box to allow it to expanding with a repeating background?

    Also is using one of the list options as a header i.e the logo really all that semantic? ;)
    Surely if you want to go down that route it would be a definition with a list inside?

  3. @Tim: The gradient of the background fades into a very light gray background color (or maybe it’s even white, now that I think about it). The background uses that image I showed, but you can also declare a background-color. If the text gets larger and expands out of the area of that image, it just fills in with that background color and the look is maintained. You can go ahead and try it on the live site, it works pretty well.

    It does have a weakness though, like you said, if you bump the text size down a few notches, you can sort of see a weird stop to the gradient. But at that point, the text is so microscopic you can barely see it so I’m not so concerned.

  4. Edwin
    Permalink to comment#

    Thanks :) very inspiring!

  5. Yeah I really like what you have done hear!
    Look very good, keeps it all together but also at the same time separate!

  6. Permalink to comment#

    Chris: beautiful post :)
    ¿that script beam used to add the post by feed?

    PS: beautiful redesign ^ _ ^

  7. art.stk
    Permalink to comment#

    I’m currently building a new design for my blog and I’m going to use similar kind of footer. But I don’t like the idea of putting the text ‘CSS Zone’, ‘AJAX Zone’, etc. in list items. I think it is kind of header, which should be placed before the list. Or maybe even build it using a definition list. What do you think?

  8. @art.stk: Go nuts, I have no particular problem with doing it “before the list” or as a part of a definition list. As they say, “It’s a big web, there are room for all of us” =)

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".