本文讲的是响应式设计的真正挑战:RSS,

web 世界丰富多彩,去看看服务器日志吧。那里充斥着爬虫机器人以及运行着各种操作系统,有着各种屏幕尺寸的移动设备和用户代理。你很容易会因为自己使用 web 的习惯而忽略了大多数普通用户的体验。

比如我发现自己的网站有部分流量来自订阅了 Atom Feed 的阅读器。出于好奇,我决定看看用 Atom 阅读器看我的文章是什么样子。结果并不怎么好看。feed 的问题揭示了更深层次的可用性问题,而其解决方案还可以应用到更通用的 web 设计上。

在继续读下去之前你可能想要亲自试一试。如果你维护着 RSS 或 Atom Feed 服务,可以放到各种阅读器中看看是什么样子的。而访问过我网站的阅读器有:Newsbeuter, Newsflow, Sismics reader, Tiny Tiny RSS, Feedly, Feedbin, Akregator, Feed Wrangler, NewsBlur, FeedHQ, Feed Spot, Livedoor reader, Miniflux, Liferea, Readerrr 以及 Mozilla reader。

你会先注意到这些阅读器会删除 JavaScript 和 CSS 但是保留了图片。有时候它们会使用自定义的 CSS,甚至干脆不用 CSS。通过控制 CSS 阅读器软件可以提供流式排版以及各种可选的主题,比如深夜模式。你可能很久没有留意自己网站不用 CSS 时的样子,看过之后可能就觉得有必要去重新练习一下标记语言了。

下面几个建议可以让你的网站对大家更友好。

  • Font-Awesome 在需要平稳退化的时候并没有那么出色。可以转而使用没有 CSS 也能完美缩放的 SVG 图像。实际上用img 标签加载 SVG 的时候可以加上 alt 属性,可以提供给无图形和非可视的用户代理。使用内联 (inline) 高度和宽度这样 SVG 在没有 CSS 的情况下也可以保证正确的大小。这里有替换 Font-Awesome 成 SVG 的详细说明。
  • 手动为多媒体标签添加临时替代方案。比如我的博文中的 <video> 标签在 feed 阅读器上显示得非常糟糕。一些阅读器干脆把它删掉了!还有些阅读器把视频框的尺寸搞得非常巨大却没法播放。在没法播放视频的场景下,最好的解决方案是给出视频的链接,方便使用其他程序下载或播放。所以我会把视频文件的链接放到 <noscript> 标签里。我还删掉了标记语言 (HTML) 中的 <video> 标签,转而用 JavaScript 在页面加载之后加上这些标签。我没法保证这个元素在没有 JavaScript 的场景下的行为。
  • 不要在标记语言和元数据中重复使用标题和其他数据。与 HTML 的随意风格不同,feed 格式有指定的地方来指定文章的作者,摘要和时间。带时间戳的页眉页脚,标题甚至 email 联系方式都没有必要放到 Atom Feed 中。
  • 选择合适尺寸的光栅图像。我在一些博文中使用 CSS 压缩了较大的图片以达到更好的展示效果。如果没有 CSS 这些图片就会非常巨大看上去很不妙(更不用提传输速度也会差一点)。
  • 留心 Atom 中 summary 和 content 的区别。一些静态网站生成器(呃,比如 Hakyll)会把整个正文都丢到summary(摘要) 里面去。

这次尝试让我见识到了用户代理的作用。全功能浏览器和基于文本的浏览器或者阅读器之间并没有本质的区别。用户在浏览网站时未必会全部启用 JavaScript,CSS 以及图像,而一些简单的调整就能让大家更容易欣赏你的网站。





原文发布时间为:2016年09月19日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。

响应式设计的真正挑战:RSS相关推荐

  1. 绿色数据中心空调设计 书评_书评:响应式设计工作流程

    绿色数据中心空调设计 书评 Responsive design has many challenges. Performance. Tables. Images. Content. Testing. ...

  2. 复杂产品的响应式设计【知识篇】

    文/乐乘 [导读] 收到后台若干听众反馈,能否有一些设计或交互相关的资料分享.面对此类听众的需求,结合内容编排顺序.技术嘉年华特别准备了一个交互设计&前端的系列文章,预计发文7篇左右,本文是第 ...

  3. 复杂产品的响应式设计【流程篇】

    都说2013年将是响应式设计爆发的一年.一淘设计团队在去年一淘首页改版时初步尝试了响应式,最近在一淘"玩客"项目中有了更加深入地应用,第一次在复杂产品中实现了全站响应式.中间积累了 ...

  4. 响应式设计中怎样布局?

    多栏布局中最大的挑战之一就是确保它能在各种各样的屏幕尺寸下正确工作.为此,提出了响应式网页设计.简单来说,就是开发一个其文本.图像和其他的媒体能够适应任何移动设备.桌面计算机或一些未来设备的浏览器体验 ...

  5. HTML5CSS3笔记:响应式设计中的 HTML5

    所有现代浏览器都能够正确理解常见的 HTML5 新特性(新的结构元素.视频和音频标签), 而对老版本的 IE 则可以使用腻子脚本来弥补我所遇到过的所有缺陷. 什么是腻子脚本? 腻子脚本(polyfil ...

  6. 响应式设计之媒介查询

    你必须像水那样无形:当你把水倒进杯子中,水就变成了杯子的形状:当你把水倒进瓶子中,水就变成了瓶子的形状:当你把水倒进茶壶中,水就变成了茶壶的形状. - 李小龙 之前读<响应式Web设计实践> ...

  7. 前端设计 响应式设计_如何响应式设计

    前端设计 响应式设计 This guest post about responsive design comes from Krasimir Tsonev! 这个关于响应式设计的来宾帖子来自Krasi ...

  8. 响应式设计时代,我们该如何设计网站?

    摘要:随着各种屏幕尺寸设备的兴起以及交互方式的多样性,之前采用的网站设计方法已不再适用.我们需要更新设计方法,更新设计观念,更新设计工具.该文从分析Web发生了哪些变化入手,引出我们该采用的新的设计理 ...

  9. 响应式设计时代,我们该如何设计网站? 发表于2013-05-25 11:44| 13874次阅读| 来源Smashing Magazine| 38 条评论| 作者Vasilis van Gemert

    响应式设计时代,我们该如何设计网站? 发表于 2013-05-25 11:44|  13874次阅读| 来源 Smashing Magazine|  38 条评论| 作者 Vasilis van Ge ...

最新文章

  1. IDT 信息设计工具使用
  2. ACM《数据结构》顺序表
  3. 【AI产品】你我当年的老照片,如今修复了可还行?
  4. SpringMVC-获得Restful风格的参数
  5. 2019第十届蓝桥杯C/C++ B组省赛 —— 第四题:数的分解
  6. ECMAScript 6:更好的 Unicode 支持
  7. 【报告分享】2021中国中高端人才趋势报告.pdf(附下载链接)
  8. Spring Boot(3) Web开发(1)静态资源处理
  9. PCL_OpenNI安装报错 解决办法
  10. Android学习笔记一:Android基本组件和Activity生命周期
  11. Atitit 剪贴板数据类型 DataFlavor 目录 1. HtmlFlavor 1 1.1. allHtmlFlavor 1 1.2. selectionHtmlFlavor 1 1.3. fr
  12. 304 Not Modified 的意思 (Web的Cache问题)
  13. CIC滤波器的设计与仿真
  14. macbook视频格式转换_如何将Mac视频格式转换
  15. 微信小程序-image标签
  16. 显示风场的某一局部区域,实现多分辨率
  17. zabbix 参数 脚本_zabbix 自定义脚本短信报警
  18. 【ibokan】好的用户界面-界面设计的一些技巧
  19. 爱一个人,爱到八分最相宜
  20. css中好看常用的中文字体

热门文章

  1. 鸿蒙智慧屏电视,鸿蒙os全面推送,立刻买了一台华为智慧屏电视s pro65
  2. 机器人学习--Mobile robotics 国外大牛及实验室
  3. 北斗导航 | NED(北东地)转ECEF(地心地固)或ECEF转NED(Matlab源代码)
  4. 光流 | 视频中物体检测的研究现状
  5. 海南工会云会员认证_好消息!海南农民工春节返乡最高有300元补贴!申请条件和流程→...
  6. linux c段错误,Linux C中段错误
  7. python精要(82)-wxpython(3)-静态文本控件与状态栏
  8. C指针原理(46)-C应用技巧(1)
  9. C指针原理(38)-C快速入门
  10. 【机器学习】那些决定模型上限的操作