《Web前端工程师修炼之道(原书第4版)》——自适应Web设计

自适应Web设计
默认情况下,大多数的小型设备(如智能手机和平板电脑)上的浏览器可以缩小网页,使其适应屏幕大小,并提供放大页面、拖动浏览的机制。虽然如此,严格来讲,它不是一个良好的体验。在这些设备上,文字太小、阅读不便,链接太小、不好单击,而缩放和左右拖动浏览又增加了操作。
自适应Web设计的策略是根据设备上视窗的大小(浏览器窗口)来提供自定义布局。自适应Web设计的技巧是为所有的设备提供同一个HTML文档,但根据设备不同而应用不同的样式表,从而为不同设备提供最优化的布局。例如,当用智能手机查看页面时,内容只出现一列,并且将链接放大,以便于单击。但是当用桌面浏览器来浏览同样的页面时,内容重新排列为多列,并提供传统的导航元素。听起来就像个魔术!(但它实际上只是CSS。)
自从Ethan Marcotte在他的文章“自适应Web设计”中第一次创造了这个词汇后,Web设计社区就一直在热烈地讨论(Ethan Marcotte的这篇文章在2010年的A List Apart上www.alistapart.com/articles/responsive-web-design/。它已经成为应对未知视窗大小的主要工具之一。
图3-3显示了一些例子,表现了自适应网页在典型的桌面显示器、平板电脑、智能手机上的显示。在媒体查询库网站(mediaqueri.es),你可以看到许多更鼓舞人心的例子。你可以尝试打开浏览器,然后将窗口调整到很窄、很宽,可以看看随着窗口大小变化,网页布局的变化。

自适应Web设计有助于布局,但它并不能一劳永逸地应对所有移动Web设计的挑战。事实上,为用户和他们所选择的设备提供最好的体验需要的优化可能不只是调整外观和感觉。通过使用服务器来检测设备及其功能,然后作出决定发送什么可以更好地解决一些问题。通过逐步提高,你可以为大多数的浏览器和设备提供一个基本的体验,对于更好的设备,可以发送增强的选项。
对于一些站点和服务,为移动设备单独建立一个站点(见侧栏“移动专用网站”)是一个更好的选择,单独建立的站点可以有专门的界面和功能,并可以充分利用手机的功能,如地理位置等。这就是说,虽然自适应设计不会解决一切问题,但是如果要为大多数浏览器提供令人满意的体验,它是一个不可或缺的组成部分。

时间: 2024-09-17 17:57:13

《Web前端工程师修炼之道(原书第4版)》——自适应Web设计的相关文章

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

移动专用网站 自适应网站的替代方案,是建立一个完全独立的网站.一个单独的网址来为移动设备提供服务.移动网站的网址常用的前缀是m.或mobile.对于某些类型的网站,如果你知道手机用户和台式电脑用户具有不同的行为模式,建立移动专用网站是最好的解决办法.在移动专用网站上,最常用的功能需要在第一个屏幕上突出显示,而台式电脑网站上的一些额外功能(如促销)就被移除了.(这也会使你思考这些额外功能究竟为台式电脑网站提供了什么样的价值.) 图3-4对比了2012年中期Walgreen公司主网站和移动网站.你可

《Web前端工程师修炼之道(原书第4版)》——Web设计师是做什么的

Web设计师是做什么的 多年来,术语"Web设计"已经成为包罗万象.包含许多不同的学科的一个学科,包括用户体验设计.文档标记和编程等.本节介绍最基本的一些东西. 如果你正在设计自己的一个小网站,你会需要多个头衔.当然你可能没有注意到.想一下,日复一日的家居生活,需要你既是兼职厨师.清洁工.会计师.外交家.园丁,还得是建筑工人,但对你来说,都只是你的生活而已.同样,作为一个Web设计师,你需要是一名兼职平面设计师.作家.HTML作者和信息架构师,但对你来说,它都只是 "网页制作

《Web前端工程师修炼之道(原书第4版)》——我需要购买些什么

我需要购买些什么 毫无疑问,专业的Web设计师需要很多工具,包括硬件和软件.我的学生最常问的一个问题是:"我需要购买些什么呢?"我不能告诉你去买什么,但是我可以介绍一下这个行业的典型工具. 虽然在这里我列出的是最受欢迎的商业软件,但是它们同时都有免费软件和共享软件,你可以下载这些软件(试试看CNET的网站Download.com).稍做一些努力,不必花很多钱,你就可以完全创建一个网站. XML简介 如果你经常接触Web设计,你肯定听过XML(eXtensible Markup Lang

《Web前端工程师修炼之道(原书第4版)》——第3章 Web设计基本概念

第3章 Web设计基本概念 随着Web的成熟和设备访问数量的成倍增加,作为Web设计师和开发人员,我们的工作变得更加复杂.坦率地说,我无法在一本书中涵盖所有的内容.在本章接下来的部分,我将专注于介绍Web设计的基本部件:HTML元素.CSS样式.小试一下JavaScript和Web图像制作,这会为你的进一步发展奠定坚实的基础. 但在我们实质学习之前,我想介绍每一个Web设计师都需要知道的一些重要概念.我们将看到促进当代Web设计环境优化的一些思想和观念.本书后续的部分中,我会经常提到本章介绍的术

《Web前端工程师修炼之道(原书第4版)》——提供你的信息

提供你的信息我们先详细地讲述组成互联网的电脑.因为它们可以根据请求来"提供"文件,所以这些电脑被称为服务器.更准确地说,服务器是一些可以让电脑彼此通信的软件(而不是电脑本身):然而,通常用"服务器"这个词来代替电脑.服务器软件的作用是等待请求信息,然后尽快取出并发送这些信息.电脑本身并没有什么特殊之处高性能的Unix机器和普通的个人电脑都一样.真正使电脑成为服务器的是服务器软件.要想使一台电脑成为Web的一部分,就必须在电脑上运行特殊的Web服务器软件来处理超文

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

目录 前言 第一部分 开始起步 第1章 我从哪里开始 我该从哪里开始呢Web设计师是做什么的 我需要学习哪些语言 我需要购买些什么 你学会了什么 自我测验 第2章 Web是如何工作的 互联网与Web 提供你的信息 关于浏览器 网页地址(URL) 网页结构 小结 自我测验 第3章 Web设计基本概念眼花缭乱的设备 与标准一致 逐步提高 自适应Web设计 可访问性--所有用户,一个网站连接速度的要求(站点性能)自我测验

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

移动Web你可能听设计师说过移动Web这个术语,但事实是(就像Stephen Hay 2011年在Twitter上所说的那样,见图3-2)没有什么移动Web.桌面Web或平板Web或者诸如此类的Web.Web就是Web,它可以通过不同设备访问.截至写本书时,"移动Web"是一个统称,它囊括了所有适应于不同使用场景的设计的技术.而且我们发现有多种方式来解释它. 阅读他的后续文章可访问www.the-haystack.com/2011/01/07/there-is-no-mobile-we

《Web前端工程师修炼之道(原书第4版)》——第1章我从哪里开始

第1章 我从哪里开始 Web的存在已经有20多年了,先后经历了令人兴奋的早期扩张.网络泡沫的破裂.创新的重生.有一件事情是肯定的,那就是网络作为沟通和商业的工具正在成为现实.而且不仅如此,网络也在影响着智能手机.平板电脑.电视等.懂得如何设计网页的程序员迎来了前所未有的机会. 通过教授Web设计课程和工作的经历,我可以满足所有对Web设计感兴趣的人的需求,无论这些人拥有什么样的背景.在此,请允许我介绍一下: "我有17年的印刷设计师从业经验,现在我所有的客户都需要Web设计服务." &

《Web前端工程师修炼之道(原书第4版)》——自我测验

自我测验 每章的最后都有一系列的问题,你可以通过回答这些问题来检查是否已经掌握了重要的信息.答案在附录A中. 1. 把下面这些Web专业人士和他们负责制作的产品匹配起来. A. 图像设计师 _ HTML 和 CSS文件 B. 产品部署者 _ PHP脚本 C. 用户体验设计师 _ Photoshop草图 D. Web程序员 _____故事板 2. W3C负责什么工作? 3. 把下面的Web技术和相应的工作匹配起来. A. HTML _____检查表单输入,以确保输入有效 B. CSS _____创