自适应设计：打开最佳框架的包装

网站流量正在发生变化。用户正在远离桌面和笔记本电脑来接受移动设备 - 现在智能手机帐户所有Web流量的52％虽然传统笔记本电脑和桌面占45％。

来源

客户的日子已经过去了，是接受对移动平台翻译不当的全功能桌面网站的限制。不正确地翻译成智能手机，平板电脑，其他移动设备将访问其他网站的网站。

毋庸置疑，对您的业务的成功表示您提供的设计，这使您的网站能够在各种设备类型和屏幕尺寸方面无缝工作。

这是哪里自适应设计无论您的访客都使用哪种设备，也可以帮助您创建令人愉快的体验。在本指南中，我们将挖掘自适应Web设计的Ins-uts-uts - 它是什么，它使用的地方，以及它如何堆叠响应的Web替代品。

什么是自适应网页设计？

自适应设计有助于通过提供基于屏幕尺寸的图形用户界面（GUI）来介绍设备之间的差距和交付。设计人员以不同的尺寸创建多个GUI模板 - 然后，当访问者到达您的网站时，选择最合适的大小并显示，以提供最佳的用户体验（UX）。

基于此定义，很明显，自适应网络设计识别今天访问者使用的屏幕尺寸越来越多的屏幕尺寸 - 它确认了移动设备中特定屏幕尺寸的普及。

结果是一个最适合的框架：虽然可能存在具有罕见屏幕尺寸的异常值，但在自适应模型下不提供最佳UX，绝大多数站点访问者将看到对其特定观点定制的形式和功能。

适应性的关键方面

适应性的Web设计依赖于设备屏幕尺寸的一般共性，以提供可用内容和上下文功能。通常，自适应开发人员为六个屏幕像素宽度创建固定的设计布局：

• 320.
• 480.
• 760.
• 960.
• 1200.
• 1600

设计人员使用关键的功能，链接和功能创建这六个GUI模板，以确保在新访客到达时可用。当用户访问您的网站时，选择最合适的大小并在其设备上显示。

值得注意？While differing sizes will have similar design, there’s no requirement that they’re identical — depending on screen width and key functionality, developers may choose to add, remove, or shift key features around to ensure the overall experience remains consistent (even if the form changes slightly across design interactions).

需要一个类比？想想服装尺寸。满足最广泛的市场可能意味着创造一系列适合的标准尺寸最多顾客。有些是在规模结束时的异常值，而其他人则占据尺寸边界之间的中间地面。然而，通过选择一个最合适的方法，公司可以适应最广泛的客户需求。

响应与自适应设计

响应设计作为自适应设计的替代品，并侧重于在任何尺寸上容纳任何设备。通过移动设备使用中的快速上升引发，响应设计使用单个固定的GUI布局，积极响应用户屏幕尺寸。

理论上，这允许每个用户按预期体验网页或其他图形元素 - 无论其设备的大小。许多CMS系统提供响应性设计功能，以支持网站上越来越多的移动设备用户。

但是哪种方法出现在上面？让我们分解每个解决方案的一些大益处和潜在缺点。

自适应设计专业人士

适应性设计的最大好处？一种量身定制的方法。而不是缩放桌面网站以上或降低以满足用户设备需求，因此自适应计划让开发人员为唯一设备观点创建最适合的体验。

例如，可以使更小的宽度设计更简单并简化以减少屏幕尺寸，而更高分辨率的产品可以包括更多内容和更大的控制来提供理想的UX。

适应性设计缺点

适应性设计的最合适性使其比响应设计替代品更柔软。开发人员必须根据标准宽度创建多个设计模板，但如果屏幕尺寸略微超出规范，用户可能仍可能遇到形式或功能问题。

时间也是一个关注的 - 公司必须拥有现有的员工资源，或者愿意在外面的帮助下度过，识别关键的GUI元素，设计多个实例，并按比例部署它reybet雷竞技下载们。

响应性设计专业人士

谈到响应性设计时，成本是一个关键因素。公司不能为六个独立的站点模板开发，测试和迭代，而是可以设计一个自动缩放或按需缩放的单个版本。这也是Empowers Speedy Delivery - 响应解决方案可以在站点后端快速部署，以提供按需GUI调整大小。

反应缺点

响应设计时应该无论其设备大小，问题都有，为用户提供量身定制的体验CSS.或者HTML.标记可能导致响应屏幕尺寸的问题。另外，诸如广告之类的外部元件可能无法正确加载，并且视觉元素响应于不同的屏幕尺寸而受到屏幕上的屏幕移动的风险。

值得注意的是，许多响应设计都是简单的桌面网站版本的版本，这意味着它们可能需要更长的移动设备加载而不是最适合的自适应产品。

自适应设计例子

适应性设计在实践中是什么样的？我们收集了一些审查的例子。

1.亚马逊

亚马逊在线零售巨头选择自适应网络设计，以加快装载时间，并为其大规模，全球客户群提供一致的UX。此外，如果他们更喜欢外观，移动用户可以轻松从App View切换到全站点视图，并且感谢强大的自适应模板。

2.美国今天

易用性和直接导航对于美国今天的网站至关重要。用户必须能够找到他们想要的东西，否则，否则，由响应设计引起的可能的屏幕和广告转移可能会使页面看起来混乱，并将用户发送给竞争对手的网站。

3.家居仓库

Home Depot的移动应用程序与其桌面网站明显不同，提供设备用户在线购物时的精简体验。自适应设计使其成为可能，因为他们的开发人员具有创建匹配特定设备类别的模板的自由，而不是将完整的桌面体验缩小到更小的屏幕上。

在您的网站上实施自适应设计

Adaptive Web Design提供了一种最适合数字内容交付和最终用户体验的方法。虽然响应性解决方案承诺一定尺寸适合所有方法，但自适应设计的分段结构使开发人员可以自定义和策划全面，上下文敏感的GUI。