设计 DZone 跨推广页脚

DZone 最近在其新的“Zones”中推出了一个页脚，我为他们设计和编码了这个页脚。如果您想查看实际效果，可以在任何区域查看，例如 CSS 区域。我想分享一些我们所经历的思考过程和代码。

 

我们查看了其他跨推广页脚。

第一步总是环顾四周，看看其他人之前做过什么。我首先想到的是查看一些 Gawker 博客，因为这是一个相当大的网络，你会认为他们会做这种跨推广。我敢肯定他们以前是这么做的，但现在看来他们已经取消了页脚跨推广。不过我们确实发现许多其他主要的博客网络都有跨推广页脚。看一下

 

 

 

我们设计了我们需要的

页脚需要从“块”构建，每个块代表不同的区域。每个块都需要

1. 区域徽标
2. RSS 链接
3. 最近条目的列表

这是单个块的结果

 

我们让它动态化

因为区域太多，无法在每个页脚中列出所有区域，所以我们要确保能够通过对标记的简单更改来交换不同的区域。这意味着任何特定于区域的图形或文本都不能是 CSS 的一部分。结果是块的背景为空白

 

我们让它灵活

我们也不确定究竟需要多少个块才能在任何给定的区域内看起来不错或必不可少，因此能够添加和删除块非常重要。由于设计的原因，最合理的方式是按两组进行，所以两个块构成一行

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

这样，很容易使用尽可能多或尽可能少的行。因为它们彼此堆叠，并且使用了渐变，我确保了一件事

只要块的顶部和底部的颜色相同，颜色就会优雅地相遇，不会出现微妙渐变的突然结束。

 

我们让它语义化

每个块的标记在有序列表中很好地分组在一起。

<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>

从语义上讲，将每个块的代码包装在一个列表中是最好的做法。请注意，即使徽标和 RSS 链接也是列表的一部分。通过为该特定列表项提供一个唯一的类，我们有了将它移动并与其他列表项进行不同处理的钩子。这对于 :first-child 选择器也是一个理想的候选者，可惜它还没有得到更广泛的支持。

还要注意，链接中的第一篇文章仍然从 #1 开始，即使从技术上讲徽标项应该是 #1。这被开头的 ol 标记中的 start=”0″ 覆盖。我认为 start 属性可能已弃用，但这是 唯一 的方法。没有 CSS 等效于“start”。

 

我们修改了它

刚推出时，它看起来是这样的

我们喜欢这个设计的一些方面。就我个人而言，我最初很喜欢大的文本和黄色的悬停背景，但后来我越看越觉得它不适合 DZone。问题是我单独设计了页脚，所以我没有足够地关注它下面的内容。没有真正理解设计的上下文是一个致命缺陷。

最终，我们最终取消了蓝色（从主要内容过渡太突兀），添加了 RSS 链接，并切换到列表格式中的较小文本。现在看起来好多了，我认为。

未来。

这个页脚有一个尚未释放的设计功能。请注意，上面 ol 元素的开标签中有一些类名。其中一个是 left- 或 right-list，另一个是颜色。这个类名可以控制该块中所有文章链接的颜色。看看

问题是如何让这个类名与其他所有内容一起动态地传递过来。我不是真正的程序员，所以我不知道是否有任何简单的方法可以做到这一点，所以我不确定它是否会得到实现。或者，事实上，它是否真的适合 DZone。

那么，你觉得怎么样？你喜欢吗？讨厌它吗？反馈是我 设计流程 的最后一步，也是至关重要的一步。