响应式设计现在已成为网页设计师工具包的标准组成部分。已经有足够长的时间,您可能会遇到麻烦,记住上次在项目中至少不包含一些响应能力。
随着时间的推移,响应式设计已经相当成熟。一开始,它只是提供一些东西来适应不同的屏幕 – 即使不是那么好。但是,现代化的响应式设计引发了很多创造力。许多设计师不是将小屏幕视为一种负担,而是寻找新的方式来接受创造美丽和功能的东西的挑战。
有了这个既定的历史,我们认为看一些真正处于良好反应设计前沿的几个网站将是有趣的。
在这里,他们是完整的响应意见和一些想法,他们带给了什么(或者我应该说,平板电脑?):
华盛顿邮报
响应式设计的巨大挑战之一是采用内容繁重的网站,并使其在较小的屏幕上工作。华盛顿邮报做了一个梦幻般的工作,充分利用了任何屏幕的房地产。
虽然桌面版本利用多列网格,但平板电脑(人像)和手机版本可以很好地处理压缩内容的挑战。为了便于使用,小屏幕上的简单滑出标题导航是值得赞扬的。经验针对移动设备进行了优化,同时仍然很熟悉。
99U
99U是Adobe的创意专业人士在线杂志。爱上这个网站的一个方面是它的布局在任何屏幕尺寸上的简单。
使用浅色背景和大型黑色排版使得从桌面到手机都能轻松阅读。要查找的一个独特功能是,在移动设备上,网站的页脚实际上被隐藏在汉堡包菜单中。这个小技巧可以节省一些空间,并保留它以保持对内容的重视。
Vox
Vox是一个新闻网站,采用移动导航的不同路线。
标准文本导航栏代替无处不在的汉堡包菜单,随着屏幕变小而缩小。但是,不要在小空间中挤压几个项目,而是从菜单中逐渐删除类别,并隐藏在“更多”下拉菜单中。
Etsy
也许没有人比Etsy更好地设计给观众。狡猾的市场也有回应。其中的移动亮点是一个标题,以令人难以置信的清晰简洁的方式为您提供所有的基础知识(标志,链接到卖,登录和购物车图标)。
他们的商店按类别部分从多列照片卡转换为干净,垂直的图标菜单。这是工作中渐进增强的一个很好的例子。
肯德基
肯德基,手指舔鸡的良好供应商,在他们的网站上做了一些杰出的工作。
UX在不同的设备和屏幕尺寸之间是非常一致的。在所有视口上使用汉堡包菜单和水平滚动都意味着用户将会精确地知道该做什么 – 无论用户浏览网站是什么。
本田
许多事情的创造者,本田有几个产品线和品牌用户可能会感兴趣。他们在每个交替的横幅中使用颜色,使其很简单,找到你想要的(这在平板电脑和手机看起来特别酷)。
再次,这是一个在不同视口上带来非常相似的体验的网站。
全国
独立摇滚民族国家大力使用屏幕房地产。事实上,他们的网格式的新闻和信息布局贯穿于高清屏幕的整个宽度。
这种类型的布局很适合在页面宽度上全部输出。较小的屏幕被处理为类似的氛围,新闻项目并排列出,并且仍然容易阅读。该网站提醒您,响应式设计还包括利用更高的屏幕分辨率,而不仅仅是确保一切适合较小的分辨率。