渐进增强技巧
设计一个适合每个人的网站是一门真正的艺术，而渐进式增强对我来说实际上是一个口头禅……
所以我想知道，您为使网站适合而使用过的一些最佳技巧是什么每个人，无论浏览器、操作系统、javascript、flash、屏幕分辨率、禁用用户辅助功能等如何？
（我了解很多有关 javascript 和浏览器技巧的知识，但承认对 flash 等一无所知。）
编辑：我并不是在真正谈论 1% 的 RIA 网站根本无法运行无需 JavaScript 或 Flash。 我不是问如何在没有 js 的情况下编写 Google Docs。 我想知道人们对那些可以做很酷的事情但实际上不需要的网站做了什么。
我将提供一些我自己的答案......
There's a real art to designing a website that works for everyone, and Progressive Enhancement is practically a mantra to me...
So I'm wondering, what are some of the best tricks you've used for making websites work for everyone regardless of browser, OS, javascript, flash, screen resolution, disabled user accessibility, etc.?
(I know lots about javascript and browser tricks, but will admit to being clueless about flash, etc.)
EDIT: I'm not really talking about the 1% of sites that are RIAs that simply cannot function without javascript or flash. I'm not asking how to write Google Docs without js. I'd like to know what people do for sites that can do cool things but don't actually need to.
I'll offer a couple of my own as an answer...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
我尽量避免咒语，除了“世界是一个混乱的地方”的咒语。
我认为很多桌面功能将被网络功能取代，这将是一个棘手的过渡，最终将在浏览器中出现真正的应用程序。 真正的应用程序是指编译成 JavaScript 的 JavaScript、Flash、Silverlight、Java、C# 或 Objective-J。
对我来说，唯一的技巧是识别无法有效使用应用程序的人和浏览器，并为他们提供一些替代内容。
这包括检测移动设备并提供适当的内容。 有许多网站在 iPhone 上就崩溃了，因为它们大量使用 Flash 并且依赖于宽屏计算机显示器。
我不认为对于作为网站的网站来说要求 JavaScript 是可以的，但对于作为应用程序的网络来说是可以的。 我不认为只提供 960 像素宽的页面就可以了。 我不认为仅以 Flash 格式提供视频是可以的。
I try to avoid mantras, except the mantra that the world is a messy place.
I think a lot of desktop functionality will be replaced by web functionality, and it's going to be a tricky transition that will end up with real apps in the browser. Real apps means JavaScript or Flash or Silverlight, or Java or C# or Objective-J compiled into JavaScript.
To me the only trick is identifying the people and the browsers who can't usefully use the apps and providing them with some alternative content.
And that includes detecting mobile and providing appropriate content. There are many websites that just fall to pieces on the iPhone because they are so Flash-heavy and dependent on wide computer monitors.
I do not think it's OK to require JavaScript for a website that's a website, but I think it's OK for a web that's an app. I do not think it's OK to serve only 960px wide pages. I do not think it's ok to serve videos in Flash format only.
我在使用基于 ajax 的网站时使用的一些巧妙技巧：
1）使用正常的 a 标记编写整个页面和所有链接，这些标记将转到禁用 javascript 的正确页面，然后基于“rel”之类的内容“hijax”它们=外部”。
2) 在 javascript 插入动态内容的任何地方添加带有替代内容的 noscript 标签。
3) 在 DOM 加载时使用 javascript 隐藏 javascript 将控制的元素，而不是将它们隐藏在样式表中，然后使用 javascript 显示它们，因为如果用户关闭了 javascript，则永远不会看到它们。
Some of the nifty tricks I use to work with ajax-based sites:
1) Write the whole page and all links using normal a tags that will go to the right page with javascript disabled, then "hijax" them based on something like "rel=external".
2) Add noscript tags with alternative content anyplace where javascript would otherwise insert dynamic content.
3) Hide elements that javascript will control at DOM load with javascript instead of hiding them in the stylesheet and later showing them with javascript since the user would never get to see them if they have javascript turned off.
检查您的统计信息（如果没有统计信息，请安装 Google Analytics）并确定您的用户在哪里他们正在做什么以及他们实际上在做什么。
例如
1.) 您的用户是否因为找不到某些内容而经常使用搜索？ 如果是这样，也许你可以让搜索工作更好？
2.) 您的 404 页面是否提供一些快速选项来搜索相关术语或尝试“猜测”他们在寻找什么？
3.) 您的网站是否有站点地图，可以快速访问网站中有意义的部分？
4.) 如果所有其他方法均失败，用户是否可以轻松联系您/技术支持以帮助他们找到所需的内容？
5.) 不确定您是否在网站上“销售”某些东西，但与您在任何大型实体零售商处结账时类似……他们会询问您是否找到了您今天想要的所有东西。 考虑提供一个选项，让用户可以提出建议……也许您有一个未开发的市场等待被征服。
6.) 关于可用性，请务必在 IE (6,7,8)、Safari 等中浏览您的网站，并确保它可以在您关心的任何地方正常工作。
7.) 有一本很棒的书，叫做“别让我思考”，这是一本很棒的书关于实际可用性的资源。 如果您还没有读过……那就去拿一份吧。
此外，确保所有其他小事情都得到照顾...例如，充分利用缓存（JS、CSS、图像）
Check your stats (or install Google Analytics if you don't have stats) and determine where your users are going and what they are actually doing.
e.g.
1.) Do your users constantly use search because they can't find something? if so maybe you can make the search work better?
2.) Does your 404 page provide some quick options to search for related terms or try and "guess" what they were looking for?
3.) Does your site have a sitemap that provides quick access to meaningful parts of your site?
4.) If all else fails, does the user have an easy means to contact you/technical support to help them find what they need?
5.) Not sure if you "sell" something on your site, but similar to when you reach the checkout at any major bricks n morter retailer... they ask you if you found everything you were looking for today. Consider providing an option where users can make suggestions... maybe you have an un-tapped market waiting to be conquered.
6.) On usability, be sure to surf your site in IE (6,7,8), Safari, etc. and make sure it works everywhere you care about.
7.) There's a great book called "Don't make me think" which is a great resource on realistic usability. If you haven't read it already... go grab a copy.
In addition, ensure all the other little things are taken care of... e.g. you make good use of caching (JS, CSS, Images)
通常我所做的就是编写整个网站，而不使用任何 JavaScript。 一旦它起作用，您就可以“标记它”。
也就是说，有一些很好的起点：
PRG 模式通常是必不可少的良好的可达性。
您需要确保 HTML 开头附近有一个启用跳转链接的菜单。 如果您不确定，请尝试在链接或类似的基于文本或语音的浏览器下运行您的网站。 如果您感到恼火，那么您的可访问用户也会如此。
确保仅在图像有意义时才将 alt 标签应用于图像。 当图像仅用于设计目的时，给予图像 alt="" 是合法的。 同样，设置 title="" 将满足您的 Firefox 用户对悬停工具提示的需求，而不会打扰您的无障碍用户。
希望这些简单的提示有帮助！ 无障碍是每个人的责任！
Normally what I do is write the entire website without any javascript. Once this is functional, you can "mark it up".
That said, there are some good starting blocks:
The PRG pattern is usually essential to good accessibility.
You want to ensure that there is a jumplink-enabled menu near the start of your HTML. If you are unsure, try running your website under links, or a similar text or speech based browser. If you get annoyed, so will your accessible users.
Ensure that you apply alt tags to your images only when they are meaningful. It is legit to give an image alt="" when it is only for design purposes. Similarly, setting title="" will satisfy your Firefox users desire for hover tooltips without annoying your accessible users.
Hope these simple tips help! Accessibility is everyone's responsibility!
在使用插件或其他难以访问的内容时，尝试提供后备内容。 例如，将视频放在页面上。 如果您要采用 HTML5 方式：
[伪代码，但您明白了]
有关该特定问题的更全面的解决方案，请查看 Kroc Camen 的 适合所有人的视频。
Try to provide fallback content when using plugins or other content that can be difficult to make accessible. Putting video on the page, for instance. If you were to go the HTML5 way:
[Pseudocode, but you get the idea]
For a more comprehensive solution to that particular problem, check out Kroc Camen's Video for everybody.
渐进增强并不复杂。
考虑三个主要问题：
您从内容开始，然后逐步解决问题，确保每个新问题不会妨碍前一个问题或尝试模仿另一个问题； JavaScript 不应该生成内容； CSS 不应该处理行为； HTML 不应该处理演示等。
Progressive Enhancement is not complicated.
Consider the three main concerns:
You start with the content and work your way through the concerns making sure that each new concern does not impede the previous one or try to mimic another concern; JavaScript shouldn't be generating content; CSS shouldn't be handling behaviour; HTML shouldn't be handling presentation etc. etc.
好的，当涉及到网站类型应用程序时，最好的是始终支持多种格式，RESTful 方式... HTML、XML、JSON、RSS、Atom（有意义的地方）以及为什么不是其他方式...为此，您需要在服务器上有一个干净的 MVC 架构...好吧，它不需要是 MVC，但是可以说，渲染层应该像面包一样愚蠢，并且在下面运行编写良好的业务逻辑......您的前端控制器应该选择正确的格式来返回以响应请求，并且就这样...您检索/更新数据、进行分页等的整个业务逻辑已实现一次，然后您只需将其呈现为 HTML 模板，或将其转换为 JSON，或执行任何操作...
现在我的想法是，制作一个视图实现，它将返回坚如磐石的、语义的和简单的 HTML ...并制作一个，它将大量使用 javascript ...使它们可以在不同的路径下访问，并使 javascript 无法爬行。 .. 在主 HTML 模板的开头放置一行 javascript，这将导致重定向到该网站的 javascript 版本...您也可以对 flash 执行相同的操作...等等...然后，在应用程序的“脏”版本中，您可以做任何您喜欢的事情...按 HTTP 加载模板，然后加载 JSON 中的数据，并在客户端上进行渲染，创建持久的有状态客户端 javascript 应用程序... 为什么不？
我个人认为，这比从漂亮而清晰的 HTML 开始，也比填充大量的 javascript 更好，这甚至不适用于所有用户......
greetz
back2dos
ok, when it comes to the web-site type application, the best is, to always support a multitude of formats, in a RESTful way ... HTML, XML, JSON, RSS, Atom (where it makes sense) and why not others ... to do so, you need a clean MVC architecture on the server ... well, it does not need to be MVC, but let's say, the rendering layer should be dumb as bread, and a well written business logic running underneath ... your frontend controller should choose the right format to return in response to a request and there you go ... your whole business logic to retrieve/update data, make pagination, etc. is implemented once, and then you just render it into an HTML template, or convert it into JSON, or do whatever ...
now an idea would be, to make one view implementation, that will return rock-solid, semantic and plain HTML ... and make one, that'll heavily use javascript ... make them accessible under different paths, and make the javascript uncrawlable ... put one line of javascript at the beginning of your main HTML-template, that will cause a redirect to the javascript version of that site ... you can do the same thing for flash as well ... etc. ... then, in the "dirty" version of the apps, you can do really anything, you like ... load templates per HTTP, and then the data in JSON, and do the rendering on the client, creating a persistent stateful clientside javascript app ... why not?
i personally think, it is better, than starting with nice and clear HTML, and than stuffing in tons of javascript, that won't even work for all users ...
greetz
back2dos