《移动优先与响应式Web设计》一1.3 未来方向

1.3 未来方向

令我兴奋不已的是,建筑师在尝试克服自古以来的限制。然而,网页设计师正面对日新月异的设备和环境,故被迫要克服自设的限制(网页本应非常灵活)。

我们需要放开限制。

不同版本的网页,设计不应断续,不应只配合指定设备或浏览器,不同版本应当成同一体验的不同表面。换句话说,设计的网站不只要更灵活,还需配合使用媒介。

概括说来,我们需要“响应式网页设计”。网页本来就是灵活的,应好好加以利用,无需依赖设计师所需的限制。实现响应式设计,只需要在我们的作品中嵌入基于标准的技术,并稍微改变网页的设计哲学即可。

因素
到底创造响应式设计需要什么?只针对前台界面,设计需要3种核心因素。

  • 灵活的网格界面。
  • 灵活的图像和媒体。
  • 媒体查询,CSS3设定中的组件。

接下来我们会逐项探讨灵活网格、灵活图像和媒体,以及CSS3媒体查询,创造更灵活、更好的响应方法来设计网页。在此期间,创作的设计能配合浏览器或设备的限制,响应用户需要。

不过,在这这前,看来我应事先声明:我也算是科幻小说迷,喜欢雷射枪、机器人、飞行车以及这类型的电影和电视节目。老实说,我不太在意这些电影和电视节目的质量。无论是由斯坦利·库布里克执导,还是小成本电影,我都会看。只要里面至少有一只火箭飞船,我就满意了。

看过那么多科幻故事,不论好坏,有一种东西,众多作似品乎都情有独钟,那就是秘密机器人。开始时,永远都是有一群探险家,志向坚定,决心要击败那些妖魔鬼怪。带队的都是那些可敬的英雄。船队某处会埋伏着秘密机器人。(播悬疑音乐。)这部机器人心狠手辣、凶狠邪恶、冷血无比、机关算尽。纵使看似人类,奸诈目标只有一个:从内部击倒这群英雄。

故事最紧张的情节就是发现秘密机器人。当然,观众知道谁是英雄,谁是机器人内奸。然而,观众会继续不断地思索:其他角色中,谁是机器人,谁不是机器人?

个人而言,从来都不明白为何如此难猜。我很挂念Johnny 5和C-3PO,因为一看就知道是机器人,它们都不会“披着合成皮肤掩饰自己”,如此荒谬。因此我着手解决这个问题。为了理清混淆因素,我设计了简短的网站,名为“Robot or Not”(见图1.7),用以协助认定究竟谁是机器人,谁不是机器人,协助辨别有血有肉的朋友和铁皮坏蛋。

好吧,或许我是唯一一个有此疑惑的人。

不论网站是否真的有用,这个实而不华的设计会用作例子以示范如何构建响应式网页。接下来的章节会带领大家一起,利用灵活网格、灵活图像和媒体、媒体查询,开发“Robot or Not”。

好了,或许你不喜欢紧张,更有可能你已经听腻了我的连篇废话,只想看到完成品。如果没错,请浏览http://responsivewebdesign.com/robot/ ,尽情尝试。

你还在这里?太好了。我们开始吧。

时间: 2024-09-16 05:38:31

《移动优先与响应式Web设计》一1.3 未来方向的相关文章

《移动优先与响应式Web设计》一上册 序

上册 序 移动优先与响应式Web设计 路克·弗罗布莱夫斯基(Luke Wroblewski)喜欢用数据说话,所以我们也用数据来看他的往绩.他写过1372篇文章,发表过190场演讲,写过3本书,以此来阐述移动平台和网页的可用性.互动和设计.现在你手上的这本就是他最重要的著作.并且,他只不过是在空闲时间写作,他的正职是在互联网公司做数字产品设计主管,并且还经营着自己的公司. 近年来,他一直在研究移动平台.他很幸运,因为移动平台现已掀起了一股淘金热,吸引了网络世界里的所有人.我们则更加幸运,因为路克不

《移动优先与响应式Web设计》一第1章 响应式网页

第1章 响应式网页 移动优先与响应式Web设计 "有一样东西,它大概是不喜欢墙--" --罗伯特·弗洛斯特<修墙> 在开始写这本书时,我就能意识到无法确保你会拿着这本小小的书,阅读印刷版.你或许会在台式计算机屏幕阅读电子版:或许会在坐车上班时,在手机上翻页:或在平板电脑上滑动页面:或许根本不会阅读这段文字,而是由计算机为你朗读此书. 总之,我并不了解你,不知道你如何阅读这本书,根本没可能知道. 出版业终于承袭了网页的一大特色--灵活性.图书设计师和出版人克雷格·莫特认为出版

《移动优先与响应式Web设计》一2.2 速度

2.2 速度 移动优先与响应式Web设计 人们不论身在何处,都会尝试使用移动设备,但并不是到处都有移动网络,就算有也会很昂贵(视乎用什么套餐),并且不稳定,以致网速更慢,等待更久. 设计移动体验时,必须接受这个现实,并施展浑身解数,设法提高速度.应减少文件的发送,采用好的浏览器和服务器技术,尽量提升传送速度,减少用户每月的上网费用. 传送文件时,尽量降低文件大小,减少文件数量,要求移动用户减少下载量.可是,由于有移动网络延迟,发送HTTP要求可能会耗时更多.因此请确保做到如下几点. 将多幅图片压

《移动优先与响应式Web设计》一导读

前 言 移动优先与响应式Web设计 这本书所讲的内容真的算不上什么大学问.即使不是大学问,仍包含了深层的意义.这本书改变了个人计算机的定义,也改变了我们上网的方式.虽然看来很复杂,但我们可以步步为营,循序渐进. 移动优先 长久以来,大部分网页设计团队的产品和信息都是为台式和笔记本电脑而设计的.移动平台对他们来说只不过是后话,他们甚至干脆忽略了这一市场.很可惜,好长一段时间,这个态度曾经广受认同.以前用手机上网非常痛苦,运营商控制了网络接入,移动网络的速度也并不是非常理想.那时候很少人用手机上网(

《移动优先与响应式Web设计》一第1章 增长

第1章 增长 移动优先与响应式Web设计坐地铁,逛商场,或经过任何一所中学时,你都会看到人类近期的变化.你会看到在街上每个人手上都会长着一个小小的发光屏.幸好,这不是什么基因异变,只不过是我们的老朋友-手机.它无处不在. 如果你不了解最近趋势,让我给你简述一下:移动设备增长得像疯了一般(得专业,我知道).近年来,分析师都预测移动设备会成为"下一件大事",他们的预言终于成真了,真的很大.想知道有多大,以下就是近年的数据. 曾有人预测,2012年时,智能手机的销量会超越手提电脑.台式计算机

《移动优先与响应式Web设计》一1.1 变了什么?

1.1 变了什么? 移动优先与响应式Web设计要解释移动平台为何突然爆发,我们就要回到2006年,上一堂美国历史课.若你想象不到当年是怎样的情境,就让我跟你重新介绍一下摩托罗拉的Z3-当年大热当红的RAZR的后继者(见图1.2). 2006年,Z3在美国是一台高端的移动电话.功能包括短信.电邮.实时通信.200万像素镜头.音乐播放器.全彩屏幕和WAP 2.0/XHTML网页浏览器:能联机至AT&T的EDGE高速数据网络.用来上网,体验完全是-糟透了. 到底有多糟?由开启浏览器到完全加载网页(页面

《移动优先与响应式Web设计》一上册 移动优先

上册 移动优先 移动优先与响应式Web设计 本文仅用于学习和交流目的,不代表异步社区观点.非商业转载请注明作译者.出处,并保留本文的原始链接.

《移动优先与响应式Web设计》一下册 序

下册 序 移动优先与响应式Web设计语言具有魔力."glamour"(美色)一词古时意指魔术或咒语,源自"grammar"(文法)一词.语言功能甚多,但命名这个功能却是最强大,最具魔力的. 网页设计的历史甚短,但是已经显出语言的转变能力.杰弗里·齐曼创造了"网页标准"一词来支持网页设计.杰斯·詹姆士·卡列特创造了"Ajax"一词,改变了网络交互的本质. 当伊森·马可特(Ethan Marcotte)创造出"响应式网页

《移动优先与响应式Web设计》一下册 响应式Web 设计

下册 响应式Web 设计 移动优先与响应式Web设计响应式Web 设计 本文仅用于学习和交流目的,不代表异步社区观点.非商业转载请注明作译者.出处,并保留本文的原始链接.

《移动优先与响应式Web设计》一1.4 事不宜迟

1.4 事不宜迟 移动优先与响应式Web设计设备更好,网速更快,移动网络正在爆发.移动优先不但让你大放异彩,还可替你抓紧机遇,接触用户. 移动优先不只是指开发移动版应用程序,而是指你应把握机会,提升整个用户体验. 以社交网站Facebook为例.Facebook约有2.5亿个活跃用户使用移动版.他们的使用量比非移动版用户高2倍. 结合移动和计算机平台的体验,用户会比预期用得更多.Facebook没有把移动体验当成计算机版的一部分,反而专注于移动体验,提升整体体验. Facebook前任首席.iP