随着近些年CSS与CSS3的发展，有些东西我们可以纯用CSS去实现，取代那些需要使用背景图片的老技术。在这篇教程中，我们将创建扁平化的面包屑导航链接，不再需要使用之前流行的“推拉门式的背景图片”。

我们将面包屑链接设计成类似雪佛龙的样式，表达向下获取内容的意思。过去我们用背景图片实现这一效果，现在我们将在边框border属性的帮助下，纯用CSS实现相同的效果。

移动设备上的邮件设计不仅仅是一个内容填充列表，它涉及诸多设计元素。

对于移动设备的设计从来不是一件简单的事情。人们采用不同的方式使用网络，我们需要考虑一个全面的方案，特别是在小屏幕上使用邮件。

让我们一起来探讨关于移动设备上的邮件设计需要考虑的问题，这些讨论并不意味着能够解答手机邮件设计上的所有问题，但这是一个好的起点。

1.保持简洁

严禁复杂—尤其是在邮件上。始终避免使用复杂的结构，否则在小屏幕上渲染时一定会失败。请记住许多设备是不支持媒体查询的（例如谷歌邮件），所以我们不能指望成熟的内容重排技术。

一个线性简单的布局在大多情况下都能表现良好。

邮件的整体大小也非常重要，如果它超过了预设的大小（大概100KB），你的邮件将不能完全加载。我在所有的客户端上都没有测试出这个问题，但是谷歌邮件和IOS设备出现了这个问题。

下面这张截图里，你能够看到用户是如何通过点击一个链接查看整个信息：这使得用户不必阅读全部邮件。

留白是艺术设计中需要遵循的重要视觉准则之一。网页设计中留白使元素之间保持距离，拥有呼吸的空间。下面放几招留白要点。

空白不代表无用

一些人可能认为页面上的空白越少越好，为了放尽可能多的文字，图片等信息，或者为了缩小整体版面。其实不然，页面上元素越多越容易混乱，让人找不到正确的阅读顺序（视觉流线）。所以页面需要充分的留白，当然过多留白也不好，需要找到一个平衡点。

一般来讲留白过多比留白过少要好一些。所以设计时多调整，看哪一种比较舒服。

网站内页的模式有时候不完全一样，做出精致的独特内页需要花费额外的精力。通常我们把首页作为基本模板，以模板做网页非常方便，尤其是当网页内容还会不断扩展增加时。

下面举例说明如何设计一个崭新的联系页面，可用于个人网站，也可用于大一点的公司网站。本文内容侧重于创建精美联系页面的特定的趋势和设计技术。

简化联系表格

来源：腾讯ISUX 

从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。