开发者社区> 华章计算机> 正文

《Web前端工程师修炼之道(原书第4版)》——移动Web

简介:
+关注继续查看

本节书摘来自华章社区《Web前端工程师修炼之道(原书第4版)》一书中的移动Web,作者Jennifer Niederst Robbins,更多章节内容可以访问云栖社区“华章社区”公众号查看

移动Web
你可能听设计师说过移动Web这个术语,但事实是(就像Stephen Hay 2011年在Twitter上所说的那样,见图3-2)没有什么移动Web、桌面Web或平板Web或者诸如此类的Web。Web就是Web,它可以通过不同设备访问。截至写本书时,“移动Web”是一个统称,它囊括了所有适应于不同使用场景的设计的技术。而且我们发现有多种方式来解释它。


a6df9dc324b11de307583bff609b7758ac841177

阅读他的后续文章可访问www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
进一步阅读
Scott Jensen在他的文章“The Coming Zombie Apocalypse”中思考了廉价网络设备的冲击(designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small- cheap-devices-will-disrupt-our-old-school-ux-assumptions.htm)。本文非常值得一读。
Luke Wroblewski所写的Mobile First(书的一部分)。Luke是在变革时首先坚持站点要良好地适应移动设备的人,而且在本书中,他分享了他许多富有创见的观点。
未来友好站点(futurefriend.ly)汇聚了当今许多最具才华的手机设计师。他们认为,环境的变化如此之快,我们不能确保设计在未来也是良好的,但我们可以让它们“对未来友好”。为了这样做,他们收集了一些提示和资源。
与标准一致
那么我们该如何处理这种多样性?首先要做的是遵循由万维网联盟(W3C)提供的HTML、CSS和JavaScript标准。坚持与Web标准一致是确保你的站点在所有符合标准的浏览器显示一致的主要工具(当前使用中的几乎99%的浏览器都符合标准)。它也有助于使你的内容与Web技术和浏览器的发展前向兼容。另一个好处是,你可以告诉用户你的站点符合标准,这样他们会更喜欢你的站点。
符合标准的概念可能乍看起来毫无理由,但是每个人,包括浏览器厂商,都在快捷和轻松地使用HTML和脚本。我们付出的代价只是需要把站点再创建一次来适应不兼容的浏览器。我在这本书会多次谈到Web标准,所以在这里我不会讲太多的细节。我只想说,Web标准是你的朋友。你在本书学到的一切,将带你走向正确的方向。
进一步阅读
Jeffrey Zeldman的《Designing with Web Standards》是一本关于遵循标准和如何使站点更有商业感觉的“圣经”。去看看吧(当然你得先看完本书)。
逐步提高
随着时间流逝大量浏览器面世,它们都为Web标准提供了不同程度的支持。事实上,没有浏览器能够完全符合标准,同时还有新的技术在不断地引起关注。此外,用户可以设置自己的浏览器偏好,所以他们可能有一个支持JavaScript的浏览器,但选择将其关闭。这里的要点是,我们面对的浏览器提供的功能很多,从基本的HTML支持到其他的一些附加的功能。
面对浏览器的未知功能,逐步提高是一种策略。当使用逐步提高的方法来设计时,你开始时只有一些使内容和功能在基本的浏览器和设备上可用的基本经验。然后,你会利用浏览器能处理的更先进的特性。你可能会使用一些“好”的效果,如动画或圆角框,来提升使用最先进浏览器的用户体验,虽然这些对于品牌和内容来说并不是最重要的。
逐步提高的方法是与页面设计和创建的各个方面都有关的方法,包括HTML、CSS和JavaScript。
创建策略
当按照逻辑顺序编写HTML文档,并且使它的元素用有意义的方式标记时,创建策略对于所有的浏览器环境都是有用的,包括最古老的浏览器、未来的浏览器与移动设备和辅助设备。它可能不会长得一模一样,但最重要的事情是内容是可用的。这也保证了像Google这样的搜索引擎可以正确地采集内容。准确、完整地编写一个HTML文件,是确保站点可访问的重要基础。
样式策略
你只需利用浏览器解析样式表规则的方式来创建体验分层。无须太多的技术细节,你就可以编写一个样式规则使元素背景为红色,只要浏览器支持,也可以用一个样式,使背景色彩渐变。或者也可以使用尖端的CSS选择器为浏览器提供某些样式。了解浏览器会简单地忽略它无法解释的属性和规则,你就可以大胆地创新,而无须担心浏览器会出现什么问题。你只需要牢记:优先使用基本的样式,然后一点一点地改善。
脚本策略
JavaScript是可以使创造互动网页和动态网页(在使用中更新)的脚本语言。如果没有它,Web就只能是静态页面。与其他Web技术一样,浏览器处理JavaScript的方式也存在差异,而且有的用户倾向于不使用JavaScript。逐步提高的第一规则是即便关闭JavaScript,也要保证基本的功能(如在页面间相互链接,通过表单完成数据的提交等重要功能)可以使用。通过这种方式,你可以确保基本的用户体验,而且在可以使用JavaScript时,进一步增强效果。
进一步阅读
《Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement》是介绍逐步提高方法最好的书,作者是Aaron Gustafson(Easy Readers出版)。Aaron是本书的技术评审者,但是即便不是,我也会优先推荐他。可以在easy-readers.net/books/adaptive-web-design/看到更多详细信息。
如果你有了更多的开发经验,Todd Parker、Patty Toland、Scott Jehl和Maggie Costello Wachs所著(New Riders出版)的《Designing with Progressive Enhancement》是一本深入技术和最佳实践的优秀作品。可以在filamentgroup.com/dwpe/读到更多信息。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
最近这个 GitHub 项目,增长有点猛
今天给大家分享一个 GitHub 刷题项目,也是目前我们 Doocs 成员们在积极维护的一个项目。
4 0
Vue入门 基本使用 与 事务管理【1】
Vue入门 基本使用 与 事务管理【1】
9 0
手撸一款简单高效的线程池(一)
线程池大家应该都用过,不过如何从 0 到 1 的设计一款简单好用且性能较好的线程池?我们在接下来的几篇文章中,为您一一介绍。
4 0
SpringMVC 视图解析器 方法返回值 异常处理器
SpringMVC 视图解析器 方法返回值 异常处理器
7 0
8 月份 GitHub 最火的 6 个 Java 开源项目
8 月份 GitHub 上最热门的 Java 开源项目排行新鲜出炉,一起来看看~
7 0
比赛-以企业为服务目标的政策大数据应用
比赛-以企业为服务目标的政策大数据应用
4 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载