响应式设计有些人认为这是一种趋势。但它不仅仅是一种趋势。这是一个新的设计方案-它有助于解决与不同的决议和设备(台式机,笔记本电脑,平板电脑和移动设备)的设计问题。我将分享一个我觉得是很好的响应网站列表。我把这个列表分为两类:自适应和流体和响应。
适应性设计
下面的网站是自适应设计的例子。设计采用基于视窗的宽度。
IA
信息架构师是我最喜欢的网站之一。它是美丽的。我欣赏这样一个美丽的设计只使用两种颜色(黑色和红色)其实只是网页安全字体,没有纹理,没有花哨的JavaScript效果或自定义字体。将导航列表菜单为下拉菜单在较小的格式很聪明,因为它节省了很多空间,在头。
截图
伦敦伦敦
虽然伦敦的网站是不是流体,但它做了一个非常好的工作对响应的布局。布局始终放在每个视口布局。最敏感的网站使用最大宽度来创建流体图像(参考我的响应的设计教程),但在头部的图像被掩盖在全尺寸。
截图
食品感官
注意看食物感觉部位反应如何。它来自于详细的柱侧边栏1-column布局布局。随着设计变得越来越小,它变得越来越小。该滑块有2行导航文本在底部的大格式,然后从2行文本到一行,然后消失在小格式。导航菜单上有大格式的图标。菜单图标消失在较小的格式。
截图
叉细胞质雄性不育
到“叉”网站,调整您的浏览器窗口。注意到在水面上的视差滚动效应?那是有趣。然而,我不在隐藏的功能图标它小是因为小视口的读者会失去一些信息一致。
截图
伦敦和合作伙伴
设计明智的,我不是一个大风扇的这个网站,伦敦和合作伙伴。但响应的布局是非常好的计划-从大型四柱式布局的一个小1-column布局。最敏感的网站隐藏某些内容,因为它变小了,但这个网站保持它的所有。它表明,即使内容丰富的网站可以响应。
截图
流体与响应
现在让我们来看看流体和响应的网站。下面的网站不仅反应在视口宽基础,但布局和内容是流体/弹性。