逐步增强Web设计的最佳实践

发布时间:2020-07-01 10:57:44 | 作者:神秘网友 | 本教程技术重点:逐步 增强 Web 设计 最佳 实践 逐步 增强 Web

逐步增强Web设计的最佳实践

Web设计社区的目标是减少复杂性 ,并减少在创建过程的每个阶段出现错误的可能性

建立网站的技巧非常复杂,其中包含许多快速变化的部分。

这个概念有其自己的Wikipedia页面 ,该页面将其解释为一种完全可访问的内容的方法,仅当浏览器支持时才呈现增强功能。

渐进式增强是Web设计中的一种想法,旨在减少错误提供全面的一致用户体验

我想介绍一些在实际项目中逐步增强的最佳实践,帮助设计人员更可持续地考虑其工作流程

渐进式增强很容易理解,但将其直接应用于设计工作并不容易。

1.了解渐进增强

然后尽可能添加功能。

渐进增强理论建议从一个简单的网站开始,该网站可在所有浏览器中使用,并使每个访问者都可以访问

这与优雅降级相反,后者默认情况下包括所有功能,然后在某些功能不起作用时降级。

没有任何CSS,此信息将显得乏味无味,但可以访问。

每个网络浏览器都可以支持文本(通常是图像)。

渐进增强功能对于整体用户体验更好,因为它的核心仅加载必要的元素

语义HTML中的内容应首先交付。

List Apart文章认为,渐进式增强是内容优先的后来添加样式和动态组件

我们今天使用的高级CSS和JavaScript得到了广泛支持,但是如果我们要遵循逐步增强的原则,则应将它们视为奢侈品。

这是渐进增强的主要功能的一般概要,您应考虑以下几点:

  • 所有内容的语义标记
  • 需要尊重用户的浏览器首选项
  • 内容和基本功能应对所有用户可用
  • 不打扰JavaScript仅在可以支持它的环境中加载

从那里,您可以计划更多高级功能 ,例如CSS3属性。

渐进式增强功能使您回到基本概念上,思考最简单准系统网页的外观。

前端开发中的技术限制主要取决于浏览器的兼容性。

您应该决定哪些功能值得实施,并根据您网站的目标受众做出判断。

这就是“ 我可以使用”之类的网站发挥作用的地方。

但是不支持现代CSS3的浏览器呢?

2.样式表中的生存

但是, 高级CSS3仍然是遗留用户的问题 ,而逐步增强功能可以提供解决方案。

如今,大多数浏览器都支持您需要的所有基本属性。

与其寻找保持这些新功能的后备方法,不如先考虑一下自己的布局结构

编写可在尽可能多的活动浏览器中使用的语义HTML和CSS标记 (无需支持IE5等古老的浏览器)。

逐步增强Web设计的最佳实践

如果删除所有CSS,然后重新运行代码,您会注意到所有内容都与第一列,第二列,最后一列很好地堆叠在一起。

以这个JSFiddle为例 ,它使用带有两个侧边栏( .fixed )和一个流体含量区域( .fluid )的.fluid

逐步增强Web设计的最佳实践

这是渐进增强功能发挥作用的地方,并且替代CSS解决方案变得可行。

一些开发人员希望在HTML中首先显示内容列( .fluid )。

HTML的两个主要目标如下:

  • 完整的语义和有效代码
  • 所有人的一致体验

达到这些目标的最直接方法是从无到有努力工作,就像大多数渐进增强主义者所建议的那样。

微软已经放弃了对IE6的主要支持 ,因此运行该浏览器的用户可能不值得您花时间。

同样值得考虑的是, 在什么时候放弃对某事的支持

但是仍然存在一个大问题:如果浏览器不支持我的现代CSS,该怎么办?

这就是渐进增强方法的优点。

您只需编写不使用它的代码 ,然后将现代CSS视为逐步的增强。

您不需要回退,因为您基本上假设默认情况下不支持任何内容

渐进式增强方法是关于使站点即使在不支持某些内容的情况下也可以使用,但如果支持,那就更好了。

例如,当我在Transmit网站上禁用CSS时,内容仍会自然地向下流到页面。

您需要考虑在没有CSS的情况下内容实际上如何流动

逐步增强Web设计的最佳实践
图像: 发射

是的,这很丑陋,是的,感觉就像我们已经失去了二十年的进步…… 但它确实有效

3.处理JavaScript

在构建具有渐进增强功能的新项目时,应列出所有必需的基于JS的功能,并考虑它们在没有JavaScript的情况下如何运行

值得一提的是,您在开发过程中可能遇到的每个JavaScript问题都是棘手且独特的。

亚伦·古斯塔夫森(Aaron Gustafson)写了一篇很棒的博客文章,其中提出了各种问题的解决方案,例如将ija中内容的元刷新替换为Ajax。

这将需要大量的在线研究来找到有效的解决方案。

Aaron在A List Apart上写了另一篇文章,其中涵盖了有关如何考虑这些问题的更一般的概述。

这样,当禁用JavaScript时,您仍然可以通过定位值看到和访问选项卡。

另外,在创建JavaScript标签时,最好将锚链接与真实ID值结合使用

href值为空,因为所有内容都通过JavaScript使用preventDefault()方法加载。

假设您有一个动态加载内容的链接。

这是另一个例子。

相反,将href属性设置为指向可以自然加载内容的其他页面是明智的,但是访问者仅在禁用JavaScript时才能看到该页面

渐进式增强功能远不止JavaScript ,但随着Web开发每年都在不断发展,毫无疑问JavaScript发挥了重要作用。

这可能包括无法控制的嵌入式窗口小部件问题,在这里, <noscript> tag是可行的解决方案。

一切都已禁用的假设下进行操作,然后从那里扩展

这包括fetch API , push API , 箭头函数语法 ,甚至是不支持jQuery之类的现代库的浏览器。

还请考虑缺少全面的浏览器支持的 JavaScript功能。

每个功能都需要使用单独的解决方案进行单独的测试

这可能会导致基本的用户体验,但是只要网站可用且内容可访问就可以。

逐步增强JavaScript的本质是构建无需任何脚本即可运行的内容

同样值得考虑使用扩展程序(例如A-Tester)以符合WCAG 。

如果要进行实时测试,通常可以在每个主要的浏览器中禁用CSS和JavaScript,以查看网站的性能。

以下是一些有助于您深入了解的帖子:

具有渐进增强功能JavaScript是一个巨大的话题。

  • 渐进增强!=“没有JavaScript”
  • 交互是关键:渐进增强和JavaScript
  • 渐进式增强:与内容有关
  • 当JavaScript看起来像需求时如何应用渐进增强

进步不足的地方

尽管渐进式增强对于几乎每种类型的现代网站来说都是一个绝妙的主意,但它可能根本不适用于旨在突破网络技术极限的项目

您必须记住目标受众

但是,如果真是那样,大多数Codrops的教程甚至都不存在。

不,当然不。

这是可访问性的好选择吗?

例如,对于仅在Ajax调用上起作用的Web应用程序,此方法不是一个好的解决方案。

商业网站可能没有那么多的对象关注那些新颖CSS3 透视图属性 ,但是Web开发人员可以是此类高级功能的理想选择。

我意识到这些Web应用程序很少而且相差很远,但是开发人员喜欢进步,在某些情况下,随着新技术的发展而前进,将落后者抛在后面是明智的。

渐进增强仅对于根本不在乎时光倒退的 Web应用程序来说不足。

一切都归结为观众的需求和项目目标。

实际上,没有完美的解决方案。

但我也意识到,这并不是解决所有问题的完美解决方案。

我是一般Web项目的渐进增强(甚至可以选择降级)的支持者。

进一步阅读

尝试本文中的建议,并了解最适合您的工作流程的方法。

围绕渐进增强的大多数主题仅需要实践和测试。

这比乍看起来要容易得多,而且一切都始于基本原理。

如果您一直在构建Web项目,则应考虑将渐进式增强应用于工作流程。

如果您想了解有关渐进增强的更多信息,请查看以下相关文章:

  • 了解渐进增强
  • 渐进增强:它是什么,以及如何使用?
  • JavaScript依赖反弹:神话般的逐步改进

翻译自: https://www.hongkiat.com/blog/progressive-enhancements-web-design-best-practices/