宁波建设制作网站：网站设计中渐进增强的最佳实践

建设网站的工艺是非常复杂的,有许多快速变化的部分。 网页设计社区的目标 降低复杂性 , 减少潜在的错误 在每个阶段的创建过程。

渐进增强 就是这样一种想法在网页设计中,旨在吗 减少错误 和 提供一致的用户体验 整个董事会。 这一概念有其 自己的维基百科页面 这也解释了它的方法吗 完全可访问的内容 ,使增强功能只有在支持的浏览器。

很容易理解渐进增强,但是不容易直接应用到你的设计工作。 我想介绍一些 渐进增强的最佳实践在实际项目 来 帮助设计师更可持续地思考他们的工作流程 。

1. 理解渐进增强

渐进增强的理论建议 开始用一个简单的网站 在所有的浏览器,使它 可以为每一个客人 。 然后尽可能添加特性。

这是相反的 优雅降级 其中包括所有功能在默认情况下,然后降低当不起作用的东西。

渐进增强整体用户体验更好,因为其核心 只加载必要的元素 。 每一个web浏览器可以支持文本(通常图像)。 没有任何CSS信息会平淡无味,但它将访问。

这 除了列表 文章 认为渐进增强 内容 与 后来添加的风格和动态组件 。 内容语义HTML应该交付什么之前。

我们宁波建设制作网站今天使用先进的CSS和JavaScript的广泛支持,但如果我们想要遵循渐进增强的原则,他们应该被认为是奢侈品。

这是一个一般破旧的渐进增强的主要特点,,你应该考虑:

• 语义标记 的所有内容

• 用户的 浏览器的偏好 需要被尊重

• 内容和基本功能 提供给所有用户

• 低调的JavaScript加载 在环境可以支持它

技术限制在前端开发主要是由浏览器兼容性。 渐进增强让你回到最基本的思考方式 简要简单的网页 可能的样子。 从那里,你可以 计划更高级的功能 ,就像CSS3属性。

但是现代的浏览器不支持CSS3呢? 这是网站的地方 我可以用 发挥作用。 你应该决定哪些特性是价值实现,并作出判断的基础 在你的网站的目标受众 。

2. 生存在样式表

今天大多数浏览器支持所有你所需要的基本性质。 但 先进的CSS3遗留用户仍然是一个问题 渐进增强,提供了一个解决方案。

而不是寻找回退的方法来维护这些新特性,首先关心自己 适当的布局结构 。

写 语义HTML 和 CSS标记 工作在尽可能多的活跃的浏览器(支持古代浏览器像IE5支持是没有必要的)。

举个例子 这JSFiddle 使用浮点数与两侧边栏( .fixed )和流体内容区域( .fluid )。 如果你删除所有CSS,重新运行代码你会注意到所有栈与第一列好,然后第二个,最后的最后。

一些开发商宁愿内容列( .fluid )第一次出现在HTML。 这就是渐进增强进场, 交替CSS解决方案成为可行。

HTML的两个主要目标如下:

• 完全 语义和有效 代码

• 一个 一致的体验 对每个人来说

最简单的实现这些目标的方法是 从什么开始 和 工作了, 因为大多数渐进增强倡导者建议。

如果您的代码看起来不错用CSS禁用和启用,然后为每个人都提供了合理的解决方案。

它也是值得考虑的 什么时候你将支持的东西 。 微软已经下降了 主要支持IE6 ,所以用户运行,浏览器可能不值得你的时间。

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

你只是 写代码 没有 它 ,并考虑现代CSS渐进增强。 这是美丽的渐进增强的方法。

你不需要回退,因为你 基本假设默认不支持 。

渐进增强方法对网站有用的甚至在案件时并不表示支持,但如果是支持,所有的更好。

您需要考虑 没有CSS内容如何流 。 例如,当我禁用CSS 传播的网站 ,内容仍然流有机的页面。

是的,这是丑陋的,是的,感觉我们已经失去了20年的进步… 但它的工作原理 。

3. 处理JavaScript

值得一提的是,每一个JavaScript问题你可能撞到在开发过程是复杂的和独特的。 与渐进增强建立一个新项目的时候,你应该列出所有你需要JS-based特性,并考虑如何 没有JavaScript 。

这将需要大量的在线研究寻找有效的解决方案。 亚伦Gustafson写一个伟大的 博客 解决各种各样的问题,比如Ajax和替换 meta刷新 内容在iframe。

同样,当您创建JavaScript的标签,这是一个好主意 使用锚与真正的ID值 。 这样,当JavaScript被禁用,你仍然可以锚定值的标签可见和可访问。 亚伦写了另一块 一个列表 覆盖一个更一般的概述你应该如何看待这些问题。

这是另一个例子。 假设你有一个链接,动态加载内容。 的 href 值是空的,因为一切都通过JavaScript的负载 preventDefault () 方法。

相反,它将是明智的 href 财产 指向一个不同的页面 自然,内容可以加载,但 时页面的访问者只能看到JavaScript被禁用 。

渐进增强是关于 超过JavaScript 每年,但web开发进一步推进,毫无疑问,JavaScript中起着重要作用。

在假设下运行 一切都被禁用 , 从那里规模 。 这可能包括嵌入式部件问题的控制, < noscript >标记是一个可行的解决方案。

也想想JavaScript功能 缺乏全面的浏览器支持 。 这包括 获取API , 推动API , 箭头功能语法 ,甚至浏览器不支持现代图书馆 jQuery 。

每一个功能需要 个人测试 个人的解决方案。

逐步增强JavaScript的本质 构建函数的内容,没有任何脚本 。 这可能会导致一个基本的用户体验,但是没关系,只要网站是可用的,和内容是可访问的。

如果你想做测试,你可以一般 在所有主要浏览器中禁用的CSS和JavaScript 看到你的网站如何执行。 值得考虑使用扩展 一个测试人员 为 WCAG 遵从性。

JavaScript和渐进增强是一个巨大的话题。 这里有一些文章来帮助你挖掘深层次的原因:

• 渐进增强! =“没有JavaScript”

• 交互是关键:渐进增强和JavaScript

• 渐进增强:它的内容

• 如何应用渐进增强JavaScript时似乎是一个要求吗

渐进增强不足在哪里

尽管渐进增强是一个好主意对几乎所有类型的现代网站,它只是可能 不适用的项目旨在推动网络技术的极限 。

例如,这种方法并不是一个好的解决方案只在Ajax调用web应用程序功能。 可访问性是一个很好的选择吗? 不,当然不是。 但如果这是大部分的情况 Codrops的教程 甚至不存在。 你必须 记住目标受众 。

一个商业网站可能没有观众关心的新的CSS3 视角特性 ,但web开发人员可以完美的观众等高级特性。

渐进增强只有不足为web应用程序 根本不关心回到过去 。 我意识到这些web应用程序是少之又少,但开发人员喜欢进步,和在某些情况下,可以合理的开拓进取和新技术背后的流浪汉。

宁波建设制作网站支持渐进增强(甚至优雅降级,你的选择),一般web项目。 但是我也意识到这不是一个完美的解决方案。 事实上,没有完美的解决方案。 这一切都归结为观众需求和项目目标。

进一步的阅读

如果你不断地构建web项目,你应该考虑应用渐进增强您的工作流。 这是容易得多比乍一看,似乎这一切从基础开始。 大多数主题围绕渐进增强只是需要练习和测试。 从本文尝试的建议,看看最适合您的工作流。