经过

如果你’ve驳回了自适应设计,再次思考。设计师和开发人员解释了为什么’对制作可用,可访问和未来的Web体验的关键

在决定是否接受自适应网页设计之前,它’必须定义它的意义。有些人认为这是一个‘rival’响应设计,更倾向于在流体方法中设置视口的特定布局。但 轻松设计 创始人Aaron Gustafson认为这只是描述了一些自适应布局;整个自适应网页设计是关于“设计网站和应用程序而不需要授予任何批准,拥有人们如何访问和消耗内容的固有变化”.

换句话说,它是关于上下文。布局可以形成自适应设计的一部分,站点在视口或一系列屏幕尺寸范围内自动转换;但同样它可以是关于调整网站的元素,以便更适当地解决使用情况,技术约束和设备类型,包括(但不限于):桌面与触摸屏;可变连接速度;和不同分辨率的显示。这意味着单个网站可以适用于旧的PC,尖端笔记本电脑,平板电脑,智能手机和互联网连接的手表。

老手将认识到这一点‘渐进式增强’,考虑的一个关键组成部分,质量网页设计。

“It’非常重要的是提供尽可能多的每个人,”热情的设计师劳拉·卡巴格(剩下). “使用自适应设计可确保特定视口或设备的优化在较少专业的基础上分层,仍然给出那些没有能力访问正面的— if more basic — experience.”

网络设计师Brad Frost补充说网站能够“适应设备,浏览器和用户的功能” is now “随着我们的网络创作越来越重要,被发送到智能手机,平板电脑,掠夺者,上网本,手表,电视,Phablets,笔记本电脑,游戏机以及更多更多。”

代码层

适应性和响应的aren’t rivals —响应是Adaptive Toolkit的一部分。

根据亚伦的说法,人和设备之间不同的制作经验需要考虑作为连续体验的经验,并考虑层数的代码。使用尖端元件或技术时,为旧设备和浏览器提供倒退;例如,在使用Ajax提交表单时,请确保它’如果没有Javascript仍然可以工作。

作为布拉德笔记,自适应布局背后的思考超出了布局和基本互动:“将变量因子加载到制备大量多设备Web体验中。如果用户处于缓慢连接,会发生什么?他们会发生什么’重新使用触摸而不是指针和键盘?我们如何适应大型数据表和小型屏幕的界面模式?”

答案,认为亚伦,是经常“检查界面并寻找改进基于设备体验的方法’S功能和功能”.

Web Developer Aaron Grogg说,从一个经历“普遍可接受的基线”可以在很多方面发生,包括“只需将不同的CSS文件发送到电话,平板电脑和桌面”通过发送更高级的决定,如发送a‘call us’仅当设备可以进行电话呼叫时才链接。随着Aaron Gustafson解释说:即使是布局基础知识要求仔细考虑:“那个选项卡式界面可能在大型桌面显示器上工作,但在小平板电脑上?没那么多。在一个小屏幕上,也许是’d更好地显示为手风琴或普通的旧文本。”

积极的经历

亚伦 Gustafson (剩下)也断言它’实现人们的钥匙可以在网站上有不同的经验,只要它们’重新积极。他建议最初映射出潜在的自适应设计体验作为流程图,识别用户可以体验界面的方式;这为人们开始设计并确保每个人来说都是编纂的想法’s on the same page.

接下来,专注于狭窄屏幕上的阅读体验,删除Cruft和Distract,并使用户能够专注于手头的任务。

然后看看如何提高经验,利用更多屏幕房地产和更好的设备功能。“整个,考虑您所做的决定的权衡。有图像,它们有多大,他们会增加多少页面重量?在下载时间和带宽中的用户有益于用户的好处吗?另一种选择可以更有效,实现设计目标吗?”

布拉德倡导遵守五个关键原则:无处不在,灵活性,性能,增强以及未来友好。他说网’s ubiquity is its “biggest superpower”并且灵活性意味着在任何屏幕尺寸上创建外观和功能良好的接口,“避免在任何一个视口中聚焦的陷阱,并拥抱网站’s inherently fluid”.

他认为,表现,这是必不可少的,但网站继续出现气球,为用户创造挫折:“我们需要将性能视为必不可少的设计功能,而不仅仅是技术最佳实践”.

利用声音渐进式增强技术(例如被视为堆叠列表)的增强意味着,如果JavaScript,则滚动到幻灯片中’可用的S,可以在支持触摸事件时添加基于滑动的交互。“That’s的经验可以访问所有,但为具有高级功能的用户提供增强。”

未来的设计

五个原则的最后一个原则尤为重要,因为支持Web的设备多样化。“自适应技术可以确保您的设计仍然灵活,以满足未知的未来设备,”劳拉说。而且,作为布拉德( 剩下)推荐,“为了拯救我们的理智,我们需要创建一个适应这些设备的经验,而不是每一个新的矩形三星吐出的专用体验。”

这意味着赠送亚伦格格格讽刺意味的是“magic numbers”你仍然看到针对iPhone等,而且“放开想法页面必须在所有浏览器中看起来都相同”.

AARON GUSTAFSON指出,这也可以带来经济利益:“自适应方法使我们能够为更少的钱达到更多客户。根据我们的研究,为不遵循渐进增强的产品添加新的浏览器或两个对支持矩阵可能会花费高达40%。但是,对于最初为三个设备构建的逐步增强的项目,我们最近增加了1,400个新设备的支持,以获得原始预算的15%。”

使用自适应技术也可能使其更简单地在设计上迅速迭代,并在发生时解决问题。然而,布拉德说是因为它’s now “在静态设计工具中不可能阐明每个环境,屏幕尺寸和变量,”您必须尽快进入浏览器。“通过更快地进入最终环境,您可以建立一个设计’忠诚随着时间的推移最终到达最终的经历。”

Laura建议在许多设备上用大量测试孪生,“不一定要满足任何特定的设备,而是找到您的设计可能会分解并提供差的经验”.

劳拉总结:劳拉的净结果应该是适用于每个人的网站“如果我们只为最流行或最低常见的浏览器迎合,我们’D从不有理由做任何有趣的事情,以推动我们可用的技术的界限。如果我们没有’我们关心其设备和浏览器从我们的设备和浏览器具有不同的能力,我们’D严重限制我们的触及。自适应设计技术是获得两个世界上最好的方法。”

自适应设计案例研究:尼科尔斯学院

轻松设计 Co-Owner Kelly McCarthy解释了自适应技术如何改进大学网站重新设计。

小型,动态商学院Nichols学院接近我们重新设计www.nichols.edu作为Bicentennial的品牌刷新的一部分。业务需求是让前瞻性学生查询,访问校园和申请。

我们的策略很简单:为较小的更小的设备设计,然后调整界面以利用屏幕尺寸和设备功能的变化。

现有网站’S的内容是巨大的,组织不佳。我们改变了架构,删除‘mystery meat’导航并将呼叫带到Forefront。我们削减了3,000页,不必要和/或过时的页面,并设计了一个内容策略,包括强烈关注富裕的策划图像伴随着‘just enough’ text.

识别移动用户的图像Laden网站的潜在陷阱,我们懒惰‘nice to have’图像,使用新的‘picture’元素用于为必要的Essential INERS提供适当的图像,并尽可能使用SVG图形(返回到旧浏览器中的PNG)。我们为每个主要页面类型创建了一个性能预算,并在CMS中强制执行这些限制。

我们使用JavaScript根据需要使用乏味和懒惰的Polyfills。我们还使用了我们开发的响应表技术(现在使用的BBC和NPR)将园区目录挤压到小屏幕上。

自适应设计案例研究:Indie Tech Summit

Designer Laura Kalbag通过自适应设计揭示了如何改进排版。

为了 Ind.ie/summit/,我们想要一个有影响的网站’T类似标准的会议票价。我们旨在让人想起历史权利的风格,但迄今为止并与我们的IND.IE品牌保持联系。使用Ind.ie成为一个渐进式公司,重要的是,该网站可以在尽可能多的平台,连接类型和视口大小方面访问。

对于装饰元素,我们使用Modernizr根据浏览器支持来切换PNG的SVG,但最明显的自适应技术涉及Web字体。在字体负载之前,我使用了类似权重,案例和尺寸的最相似的网络安全字体(佐治亚州),所以它’s尽可能接近Abril文本并显示Web字体。这意味着那里’■当转换Web字体负载和文本时,效果较少。它也意味着字体唐’t load — if JavaScript isn’t available —访客仍然具有类似的经验。

将Web字体与响应性的设计相结合,需要在不同断点的大量调整字体大小!我们使用媒体查询来优化内容在窄视口上更加消化。这包括更改字体大小如此线长度更容易读取,堆叠图像并在列中将它们安排,并将计划移动到单列布局中。

5自适应网络设计工具

browserstack.
真实设备的测试是必须的,但是Browserstack在真实浏览器和移动模拟器上提供了快速预览,以进行早期测试。

Fitvids.
视频可能会导致调整大小的布局中的各种问题。 FITVIDS是一种轻量级jQuery插件,用于流体宽度视频嵌入。

MOMITEST.
令人惊讶的是,令人惊讶的是,除了布局之外的任何东西都可以迎合手机。 MobiStest返回发送到它的站点的性能统计数据。

现代人
流行的功能检测库并被认为是最好的一个。主要用于浏览器以编写条件JavaScript和CSS。

模式实验室
一种鼓励建立声音界面系统的工具,使设计在任何环境中精美的设计和功能。

笔记: 我们可以在通过我们网站上的链接购买时赚取佣金,而不额外费用给您。这不会影响我们的编辑独立性。 了解更多.

阅读下一个......