渐进增强技巧[关闭]

StackOverflow https://stackoverflow.com/questions/1148522

题

设计一个适合每个人的网站是一门真正的艺术，而渐进式增强对我来说实际上是一个咒语......

所以我想知道，您使用过哪些使网站正常运行的最佳技巧 每个人 无论浏览器、操作系统、javascript、flash、屏幕分辨率、禁用用户可访问性等？

（我了解很多关于 javascript 和浏览器技巧的知识，但我承认对 flash 等一无所知。）

编辑:我并不是真正谈论 1% 的 RIA 网站，如果没有 javascript 或 flash 就无法运行。我不是问如何在没有 js 的情况下编写 Google Docs。我想知道人们对以下网站做了什么 能 做很酷的事情但实际上并没有 需要 到。

我将提供一些我自己的答案......

有帮助吗？

解决方案

我尽量避免曼陀罗，除了曼陀罗，世界是一个混乱的地方。

我想了很多的桌面功能将Web功能所取代，这将是一个棘手的过渡，将最终在浏览器真正的应用程序。实际应用意味着JavaScript或Flash或Silverlight或Java或C＃或目的-J编译成JavaScript。

要我的唯一诀窍是确定人民和浏览器谁也不能有效地使用应用程序，并为他们提供一些可供选择的内容。

和包括移动检测，并提供适当的内容。有很多网站，只是下降到iPhone上的作品，因为他们是如此的Flash-重和依赖于广泛的电脑显示器。

我不认为这是确定需要使用JavaScript的网站，这是一个网站，但我认为这是正常的网页这是一个应用程序。 我不认为这是确定只服务于960像素宽的页面。 我不认为这是确定可以在Flash格式的视频只。

其他提示

一些漂亮的技巧我用基于Ajax的网站工作的：

1）写整个页面，并使用正常的一个标签，即可进入到正确的页面禁用了javascript，然后“hijax”所有链接他们基于类似“相对=外部”。

2）添加非脚本标签与替代内容的任何地方，其中JavaScript的否则将插入动态内容。

3）隐藏的JavaScript将在DOM负荷控制用JavaScript代替隐藏它们在样式表中的元素和后来的表示他们用JavaScript，因为用户可能永远不会看他们是否有开启JavaScript关闭。

请查看统计信息（或安装谷歌分析如果你没有数据），并确定您的用户将会和他们实际上做什么。

e.g。

1）你的用户经常使用搜索，因为他们无法找到的东西？如果是的话，也许可以使搜索工作做得更好？

2）你的404页面是否提供了一些快速选项来搜索相关的术语或尝试与“猜测”他们在寻找什么呢？

3）您的网站有一个网站地图，提供快速访问您的网站的有意义的部分？

4）。如果一切都失败了，没有用户有一个简单的方式与您取得联系/技术支持，帮助他们找到他们需要什么？

5）不知道，如果你“推销”网站上的东西，但类似的，当你在任何重大的砖ñ灰浆零售商到达收银台......他们问你，如果你找到你要找的今天的一切。考虑提供一个选项，用户可以提出建议......也许你有一个未挖掘的市场等待我们去征服。

6）在可用性，一定要浏览您的网站在IE（6,7,8），Safari浏览器等，并确保它的工作原理无处不在，你所关心的。

7）有一个叫做伟大的书“不要让我觉得”这是现实的可用性的重要资源。如果你还没有读它...去抓住一个副本。

此外，确保所有的其它小事得到照顾...例如你好好使用缓存（JS，CSS，图像）

通常我做的是写整个网站没有任何的JavaScript。一旦这是功能性的，可以通过“标记它。”

这就是说，有一些很好的出发块：

通常是良好的可达必不可少的PRG模式

您要确保有你的HTML附近开始启用jumplink菜单。如果你不确定，尝试下运行的链接你的网站，或类似的文本或语音基于浏览器。如果你生气，所以将你的访问用户。

确保涂抹alt标签到你的图像只有当他们是有意义的。它是合法的，得到图片的alt =“”时，它仅仅是为设计目的。同样，设置标题=“”将满足你的Firefox用户希望悬停提示，没有恼人的访问用户。

希望这些简单的技巧帮助！无障碍环境是每个人的责任！

尝试使用插件或其他内容可能是困难的时候，使可访问的，以提供后备内容。把页面上的视频，例如。如果你去了HTML5的方式：

<video>
    <source src="video.ogv" type="video/ogg" /><!-- OGG for Mozilla/Opera -->
    <source src="video.mp4" type="video/mp4" /><!-- h.264 for Apple/Google -->
    <object><!-- Fall back to Flash/h.264 for older browsers -->
            <!-- And in the event the UA can't handle any of those, all you can do is provide a link to the media -->
            <p><a href="video.ogv">Download the video</a>.</p>
    </object>
</video>

[伪代码，但你的想法]

有关更全面的解决方案，以特定的问题，看看克罗克卡门的视频为大家的。

逐步增强是不是复杂的。

考虑的三个主要关切的问题：

  • 内容(HTML)
  • 介绍(CSS)
  • 行为(JS)

你开始的内容和工作方式，通过关注确保每一个新的关切并不妨碍先前的一个或试图模仿的另一个关切的问题；JavaScript不应该发生的内容；CSS不应该处理的行为；HTML不应该处理的呈现等等。等等。

好吧，当谈到网站类型应用程序时，最好的是始终支持多种格式，以一种 宁静的 方式 ...HTML、XML、JSON、RSS、Atom（有意义的地方）以及为什么不是其他......为此，您需要在服务器上建立一个干净的 MVC 架构......好吧，它不需要是 MVC，但是可以说，渲染层应该像面包一样愚蠢，并且在下面运行一个编写良好的业务逻辑......您的前端控制器应该选择正确的格式来返回以响应请求，然后您就可以了...检索/更新数据、进行分页等的整个业务逻辑。实现一次，然后您只需将其渲染为 HTML 模板，或将其转换为 JSON，或执行任何操作...

现在的一个想法是，制作一个视图实现，它将返回坚如磐石的、语义的和纯 HTML ......并制作一个，它将大量使用 javascript ...使它们可以在不同的路径下访问，并使 javascript 无法爬行...在主 HTML 模板的开头放置一行 javascript，这将导致重定向到该网站的 javascript 版本...你也可以对闪光灯做同样的事情......ETC。...然后，在应用程序的“肮脏”版本中，您可以做任何您喜欢的事情......按 HTTP 加载模板，然后加载 JSON 中的数据，并在客户端上进行渲染，创建持久的有状态客户端 javascript 应用程序...为什么不？

我个人认为，这比从漂亮而清晰的 HTML 开始，也比填充大量的 javascript 更好，这甚至不适用于所有用户......

格雷茨

后退2dos

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top