11个响应式网页设计案例
早在2010年,Ethan Marcotte就开始鼓励设计师和开发者实践“响应式网页设计：与其将每个越来越多的网络设备定制为不连贯的设计，我们可以将它们视为相同体验。使我们的设计更方便呈现它们。
Ethan Marcotte认为，通过设计就完全可以适配到任何的网站，而设计师和开发人员是可以对他们的工作进行验证的。
八年后，响应式网页设计已达到技术高峰。现在，标准做法是在每种设备上创建一致，量身定制，包括那些尚未发布的设备。
但什么是响应式网页设计？在实践中，响应式网页设计最好的例子是什么？
什么是响应式网站？
严格地说，响应式网站有三个明确的特征：
1. 媒体查询
“媒体查询使我们不仅可以定位某些设备类别，而且还可以实际检查我们工作的设备特征，”（Marcotte的解释）
因此，媒体查询允许开发人员使用查询条件，检查用户设备的属性更改网页设计。它为用户提供了更加个性化的体验。
2. 流体网格
当使用CSS创建灵活的网格时，无论用户使用的是21英寸台式计算机，13英寸笔记本电脑，9.7英寸平板电脑还是5.5英寸的手机。
“流体布局将我们设计的控制牢牢掌握在我们的用户和他们的浏览习中，”（Marcotte的解释）。
这使设计师能够在多个设备上保持一致的外观和感觉。此外，允许设计人员更新网站的一个版本或许多版本，可以节省每个人的时间和金钱。
3.灵活的视觉效果
Marcotte提到：使用代码，防止丰富的媒体文件从超过其容器的尺寸。其中的视觉也是如此。
鉴于目前存在超过8.48b的独特设备，该功能允许团队创建永恒的设计能够适应任何设备，无论其大小或形状。
这三种类型的功能一起使设计人员能够制作响应式网站。“流动网格，灵活的图像和媒体查询是响应式网页设计的三大技术要素
下面，我们列出了11个超出响应式网页设计基本标准的例子。每个网站都提供了适合用户的独特体验。
响应式网页设计示例
1. Dropbox
Dropbox利用流畅的网格和灵活的视觉效果来设计出色的响应式网站方面做得非常出色。从桌面切换到移动设备时，不仅字体颜色会随着背景颜色的变化而变化，而且图像也会改变方向。
考虑到上下文，Dropbox为每款设备提供量身定制的体验。例如，为了防止用户反弹，一个小箭头指示桌面用户向下滚动以查看更多内容。但箭头没有在移动设备中存在，因为根据习惯，用户会在具有触摸屏功能的设备上滚动。同样，他们的注册形式在桌面设备上是可见的，但它隐藏在平板电脑和移动设备上的号召性用语按钮后面，因为移动设备的空间有限。
2. Dribbble
Dribbble的网站拥有一个响应式网页设计的特点：灵活的网格，它可以从台式机和笔记本电脑上的五列到平板电脑和手机上的两列。
为了防止他们的网站在移动设备上感到混乱，Dribbble已经删除了多个项目。例如，作品不再归因于作者，视图，评论和数目不再嵌套在每一项。他们还将菜单隐藏在汉堡图标后面，并删除了搜索栏。
3. GitHub
GitHub的网站为所有设备提供一致的体验。但是，有一些明显的差异：
从桌面平板设备切换到平板设备时，从两列布局更改为单栏布局的区域，副本位于注册表单上方而不是旁边。
不同于台式机和平板设备，在他们的注册形式为焦点，GitHub只提出一个叫移动动作按钮。用户必须单击动作调才能显示表单。
和Dribbble一样，GitHub也删除了搜索栏，并将菜单隐藏在手持设备上的汉堡图标后面。这是一种非常常见的做法，因为它有助于减少空间有限，防止移动设备上的混乱。
4. Klientboost
这是响应Web设计的又一个极好的例子。他们的网站在四秒内使用3G连接的速度非常快。更重要的是，外观和感觉的网站保持一致klientboost跨所有设备，并且已经成功的把每个设备量身定制其用户体验
虽然桌面和笔记本电脑可以查看包括“Get Proposal”号召性用语按钮和“We're hiring！”的完整菜单，但平板电脑和移动设备可以看到菜单的精简版本。从平板电脑访问其网站的用户会看到一个汉堡菜单图标和标注，而从手机访问的用户可以看到菜单图标和号召性用语按钮。
5. Magic Leap
Magic Leap设计了一个简单移动网页，并带有视差滚动功能，为他们带来了惊人的插图。鉴于手机和平板电脑现在负责全球互联网使用量的56.74%，他们的方法是有道理的。
Magic Leap的用户体验在所有设备中都是一致的，但有一个例外：引导用户滚动的显微镜，是包括在台式电脑和平板电脑，但不包括移动设备，用户可以自然滚动。
即使有3G连接，他们的网站也会在7秒内加载 - 远低于22秒全球平均值。对于一个具有响应式动画的网站来说，这是非常棒的体验。
6. Shopify
Shopify的用户体验在所有设备中都是一致的。只有号召性用语按钮和插图在桌面到移动设备之间发生了变化。
在个人电脑和平板电脑上，号召性用语按钮位于表单字段的右侧。在移动设备上，它在下面。
同样，插图位于个人计算机和平板电脑上的副本右侧，而它们位于移动设备上副本的下方。
像大多数网站一样，Shopify的菜单也被移动设备上的汉堡图标取代。
尽管使用图像轮播来炫耀他们的客户，但他们已经设法将他们的页面加载速度保持五秒以下。
Smashing Magazine,为所有设备提供量身定制的体验。他们的网站在桌面上采用了两列布局，全部菜单和组合标记，可将其转换为平板电脑和移动设备上带有字母标记的单列布局和浓缩菜单。
Smashing杂志的网站也是一个包容性设计的榜样。显示给桌面用户的菜单同时具有标签和图标。不是使用普通的菜单图标，而是选择了带有“菜单”一词和搜索图标的号召性用语按钮。数字原生态从移动设备导航网站没有问题，但其他几代人不一定知道汉堡包图标代表什么。
他们的网站加载在3G网络设备上也只有短短2秒内与3G网络设备，GSMA说将手机连接到2020年的70%可以防止用户因等待过久而离开。
8. Slack
Slack的品牌以简单和人性而著名。毫无疑问,他们的网站遵循相同的指导方针。其灵活的网格很容易适应各种尺寸和形状的视口。例如，尽管客户标识在台式机和笔记本电脑上的三列布局中显示，但它们在移动设备上以单列布局显示。
Slack的网站设计也被称为易于使用。例如，他们的号召性用语按钮覆盖平板电脑和手机上的整个专栏，这有助于用户避免点击下面的“登录”超链接。
9. Treehouse
Treehouse提供跨所有平台的无缝体验。他们的菜单在各种设备上逐渐变小 - 台式机和笔记本电脑具有四项菜单，平板电脑具有两项菜单和汉堡包图标，手机提供单项菜单和图标。
他们的表单域经历了相同的变化。它们在桌面和笔记本电脑上以两列显示，在平板电脑和手机上显示为一列。
10. WillowTree
与其他公司一样，WillowTree在桌面设备上包含完整菜单，在移动设备上包含精简菜单。但与其他人不同的是，他们在页面顶部引入了一个静态导航栏，为使用手持设备的用户带来更愉快的体验。他们还在其网站的移动版本上添加了基于文本的号召性用语，以增加便利性。
与其他响应式网站一样，他们为展示客户标识而构建的网格非常灵活。它从台式电脑上的五列折叠到平板上的四列到手机上的两列。
与Treehouse类似，折叠区域上方的区域从桌面上的两列转换为手机上的一列，并且号召性用语按钮从副本旁边转移到下方。
11. WIRED
WIRED的网站具有动态布局，在桌面设备上具有多列和侧栏，可在移动设备上转换为单列。
从平板电脑切换到移动设备时，它们的菜单会缩小，仅包含其标识，菜单图标和订阅链接。为了保持简单，搜索功能和按部分筛选WIRED新闻源的功能在移动设备上不可用。
WIRED最厉害的一个领域是使用灵活的图像。他们的功能图像可以跨平台变化。在台式机和笔记本电脑上，图像在正方形和长方形之间变化，让用户可以充分利用自己的眼睛去探索。然而，在移动设备上，所有特征图像都以16：9的比例裁剪。
