全球互联网设备56

无需加好友免费技术支持

随着网络设备尺寸的不断变化，通常的方法是剪切不相关的设计，以实现相同的体验。事实上，我们可以让我们的设计更好地适应渲染屏幕。

适应任何设备的网站可能是设计师和开发人员未来的工作内容。

八年后，响应式网页设计达到了很高的质量。现在创建一个标准的做法，让网页为每个设备量身定制，同时体验也是一致的。

但是什么是响应网页设计呢？有没有更好的响应式网页设计案例？

“ 全球互联网设备56.74%是移动手机和平板电脑。

响应网站是什么？

严格来说，响应网站有三个本质特征:

1.媒体查询

马克特解释说：媒体查询不是针对某些设备，而是在渲染我们作品时检查设备的物理特性。

因此，媒体允许开发人员根据用户设备的属性检查和使用条件来改变网页设计。这比简单地定义断点更重要，因为这是一种定制的用户体验。

2.流动布局

无论用户使用21英寸桌面计算机，13英寸笔记本电脑，9.7英寸平板电脑，或5英寸平板电脑.使用5寸手机CSS在创建灵活的网格时，列自动重新调整自己应屏幕大小或浏览器窗口。

“流体布局(…。)马克特解释说，将设计的主控权放在用户及其浏览习惯上。

这使得设计师能够在多个设备上保持一致的外观和感觉。此外，它还可以节省每个人的时间和金钱，允许设计师更新一个或多个版本的网站。

3.视觉效果灵活

马克特更喜欢使用代码来防止富媒体文件超过容器的大小。容器本身的大小是灵活的，他解释说，这可以确保网络不会溢出。

鉴于有超过8.48 B当今独特的设备存在时，该功能允许团队创建任何设备永不过时的设计，无论其大小或形状。

针对这三个功能特征，设计师往往倾向于设计响应性网站。

但马克特解释说，这只是一个开始。

移动布局、灵活的图像和媒体查询是响应性网页设计技术的三个组成部分，但它也需要不同的思维方式。我们可以使用媒体查询来逐步改进我们的工作，而不是隔离或在设备体验中呈现不同的内容。

下面，包括了11个例子超越基本响应标准网页设计。每个网站根据用户的独特背景打造了不同的经验。

响应网页设计的例子

1. Dropbox

Dropbox通过做大量的工作，优秀的响应网站采用流动布局和灵活的视觉设计。从桌面到手持设备，字体颜色不仅会随着背景颜色而变化，还会改变图像的方向。

根据具体实用情况，Dropbox为每台设备提供定制体验。例如，一个小箭头指示桌面用户浏览更多内容，以防止用户跳跃。但箭头不会出现在手持设备上，因为它假设用户和触摸屏设备自然会滚动。同样，他们的注册表也可以在桌面设备上看到。在平板电脑、移动设备等空间有限的设备上，注册表隐藏在call-to-action按钮里的。

2. Dribbble

Dribbble响应网页设计的网站功能是其特点之一：布局灵活，在桌面、笔记本电脑、平板电脑和手机上呈现两列。

为了防止不同设备造成的凌乱的感觉，Dribbble几个项目个项目。shots同时不展示作者和评论like并非每一部作品都常驻。此外，还隐藏了一边的汉堡包导航，移走了搜索栏。

3. GitHub

GitHub在每个设备的网站上提供一致的体验。但是，存在一些明显的差异：

1.从桌面到平板电脑时，上面的折叠区域从两列布局单列布局，复制上面的注册表，放在下面而不是旁边。

与台式机和平板设备不同，注册表是一个焦点，GitHub移动设备中只有一个Call-to-Action按钮。用户必须单之前，用户必须。

3.和Dribbble一样，GitHub搜索栏和隐藏菜单后面的汉堡包图标也被删除在手持设备上。这是一种常见的做法，因为它有助于减少移动设备有限空间内的杂物。

4. Klientboost

这是响应网页设计的另一个奇妙例子。他们的网站加载速度非常快，使用3G连接可在4秒内完成。更重要的是，Klientboost网站的外观和感觉在所有设备保持一致的，他们已经成功地调整他们的用户体验到每个设备。

完整的菜单包括我们被提议招聘！Call-to-Action按钮显示桌面、笔记本电脑和平板电脑的压缩菜单。从平板电脑用户访问他们的网站，显示汉堡包和菜单图标，从手机访问菜单Call-to-Action按钮。

5. Magic Leap

魔法飞跃设计了一个简单的插图，尝试网站和视差滚动，给生活带来惊人的插图。考虑到移动电话和平板电脑的全国利用率是56.他们的方法74%有意义。

魔法飞跃在所有设备中的用户体验是一致的，但有一个例外：在台式电脑和平板电脑中引导用户滚动。但在移动设备中使用滚动是很自然的。

即使3G连接，他们的网站加载在17秒低于全球22秒的平均水平。对一个网站做出反应的动画有点太冷了。

6. Shopify

Shopify跨所有设备的用户体验是一致的。只有桌面端和移动设备CTA按钮和插图之间的变化。

在个人电脑和平板电脑上，CTA按钮右侧的表单字段。位于移动设备下方。

同样，插图是在移动设备的下部复制个人电脑和平板电脑的右侧。

手持设备就像大多数网站一样Shopify用汉堡包图标代替菜单。

尽管他们使用轮播图像向客户展示，但他们试图确保页面加载速度低于5秒，这是令人印象深刻的。

7. Smashing Magazine

Smashing Magazine此外，为每个设备提供定制的体验。他们的网站功能显示在两列布局中，完整的菜单、桌面和组合标志，但在平板电脑和移动设备中，它们变成了单列布局和使用lettermark浓缩菜单。

Smashing Magazine该网站也是包容性设计的一个辉煌例子。菜单显示桌面用户特征标签和图标。他们选择了一个带有菜单字样和搜索图标的普通菜单图标CTA按钮。使用数字原生代导航网站在手持设备中没有问题，但其他几代人可能不知道汉堡图标代表什么。

他们的网站也在3G到2020年，网络环境只需2秒加载设备，GSMA70%的手机网络。这使得它的流失率低，可以防止用户越来越沮丧。

8. Slack

Slack品牌简单人性化。毫无疑问，他们的网站遵循同样的指导方针。

移动布局更容易适应窗户的大小和形状。例如，虽然客户商标在台式机和笔记本电脑上提出了三列布局，但它显示在手持设备的单列布局上。

Slack网站也很容易使用。例如，在平板电脑和手机上，CTA按钮横跨整个列，避免用户误操作到登录下的超链接。

9. Treehouse

Treehouse跨所有平台提供无缝体验。通过调整菜单，它们变得越来越小。横跨台式机和笔记本电脑的菜单、两个选项的菜单和汉堡图标，而手机只有一个选项的菜单和图标。

表单字段也发生了类似的变化。他在台式机和笔记本电脑文本两列中显示，在平板电脑和手机文本一列中显示。

10. WillowTree

和其他公司一样，WillowTree桌面上有完整的菜单，但手持设备上有浓缩的菜单。但与其他人不同的是，他们引入了静态页面顶部的导航栏，为手持设备用户创造了更愉快的体验。他们还在移动网站上添加了它CTA更方便。

和其他响应网站一样，采用客户标识灵活的网格结构。它从台式电脑的五列到笔记本的四列，再到手机的两列。

类似于Treehouse，笔记本上有两列折叠区，手持式移动设备上有一列。同时，将CTA复制到移动终端的下半部分。

11. WIRED

WIRED桌面设备上网站的动态布局有几列和一个侧栏，但手持设备是单行的。

从平板电脑到移动设备，他们的菜单收缩到只包括图标、单图标和链接订阅。为了简单起见，移动设备不能使用搜索功能和过滤功能。

WIRED亮点是使用灵活的图像。图像可以随平台而变化。在台式机和笔记本电脑中，图像随设备在矩形和方形之间切换。然而，手持设备使用16:9的剪切比。

你最喜欢的响应网站是什么？留言告诉我。