众妙之门——移动Web设计精髓(txt+pdf+epub+mobi电子书下载)

作者：(德)Smashing Magazine

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

众妙之门——移动Web设计精髓试读：

Steven Snell

Web设计师都深知这个行业包含了大量的变化和创新，为了始终保持在业内的领先地位，需要不断地适应和学习新的技术。在过去的几年中，该行业中变化最大的领域之一就是越来越多的网民通过手机和移动终端设备来进行网络浏览。因此，Web设计师必须不断学习和掌握更多、更新的专业知识，从而开发出更多、更好的移动网络应用以满足这一受众群体的需求。

因为设计应用于移动设备的网页存在一些特有的问题和挑战，所以这需要设计者和开发者用具有战略性的方法来对待。在本书中，我们将把移动Web开发作为一个整体来研究，包括移动网络的当前发展趋势，存在的挑战，以及开发小技巧和经典案例分析。本书中还包含了大量相关的文章和专业资料，学习资源丰富，如果你有兴趣学习更多的移动应用开发，在这里，你触手可及。

简化选项

如今的移动互联网出现了一个不得不让人注意的现象，那就是为网站访客提供的有效选项是按比例缩小的，但可用性是在增加的。例如向用户推荐的移动网站主页，页面上仅仅只有17项简单的标题和内容链接、一个登录链接按钮和一些最基本的导航选项。对于移动设备上Web设计，我认为简易直观非常关键。由于移动设备自身的因素，使得设备的屏幕较小，再加上移动网络浏览速度相对较慢，所以尽量减少页面中不必要的选项从而让访客能够直接浏览最关键、最重要的信息才是重中之重，而其他可有可无的链接则越少越好。

在这个Web页面异常拥挤的时代，简洁直观的移动Web页面能使访客眼前一亮。另外还有一点非常重要，显示的内容越多，被删减的可能性就越大。只要访客想进行的操作是被允许的，我们就要想办法简化页面，从而能使用户更加便捷、容易地操作和浏览。

页面留白

页面留白对于任何设计来说都是非常重要的组成部分。如何做好页面留白对于总是想呈现给访客更多信息的Web设计者来说的确是一件难事，因为这看起来很矛盾。由于移动设备屏幕的大小限制，页面留白也成为Web设计中不可或缺的重要组成。杂乱无章的网站和页面设计会大大降低用户体验，同样也很难让用户在移动环境中完成他们所想进行的操作。

正如你所看到的本书中所展示的页面图片，或者拿出你自己的手机看看上面的网页，你会发现很多页面设计中都包含了大量的留白设计，特别是那些我们经常使用和浏览的网页。

少量的图片

近年来随着高速网络的普及，Web设计者能够在宽带视频和图片等方面有更自由的发挥。由于电脑前的访客总是希望看到具有良好视觉效果的页面，所以导致Web设计者在Web设计中使用大量的图片。无论如何，对于移动Web设计来说，在页面上过度地使用图片往往会降低用户体验。

随着越来越多的手机用户使用高速轻便的智能手机，图片在网页中应用的机会已经显现。但是，目前仍然有大量手机用户并没有使用智能手机，所以很多移动网页依然选择尽量避免在网页设计中使用图片。

子域将取代.Mobi域名和单独域名

当移动顶级域名（TLD）最初得到应用的时候，在市场上得到了热烈的反响。当时有很多网站在移动设备网站中运用.Mobi域名，而时下更普遍的做法是，公司在他们主域中创建单独的文件夹或者创建一个新的子域。在决定使用该技术时，公司必然要有多方面的考虑，与发散性的域名容易混淆浏览者的特点相比，使用子域的主要优点是，所有的网站内容都在一个独立域名中，这样用户就不大可能晕头转向了。

仔细观察，我们会发现移动设备上的网站地址都是例如Mobile.xxx.com、m.xxx.com、xxx.com/Mobile，xxx.com/m等类似的形式。当然，我们对这种趋势抱有很大的期望，但是当你打开一些知名网站的手机版本时，你会发现子域名比.Mobi TLDs运用得更加广泛。

内容优先

由于Web页面的高度简洁和普遍偏少的选项，使得人们总是优先关注网页内容。当你在浏览移动网页时，你会惊奇地发现，网页内容总是被优先呈现给访客。网站“聚焦用户”是理所当然的，因为大部分的网站都依靠其商业用途来维持运营，所以网页中会有一些对访客来说并不是必需的组成成分，例如页面上方的横幅广告栏。虽然广告已经成为互联网公认的一部分，但是大多数移动网站仍然是没有广告的。尽管公司的利润来源是拥有更多有用的网站，但是移动Web所呈现的丰富实用的内容始终针对的是广大的移动用户，而非公司。1.1 移动Web设计的挑战

针对移动设备的Web设计由于其行业的特殊性会面临一系列特殊的挑战，那就是设计师必须克服各种困难来制作一个在移动设备上完美运行的网站。如果你决定尝试设计一个移动设备上网站，那么下面将讲到一些值得你注意的可能出现的问题。

1.屏幕尺寸多样化

尽管Web设计师经常处理由于不同的屏幕尺寸而产生各种问题，与处理电脑屏幕大小不一问题的方法相比，移动设备Web设计的处理方法有所不同。大多数Web设计师都能顺利解决由于台式电脑屏幕分辨率提高而出现的问题，但是如果之前你没有任何移动Web设计的相关经验，在实际操作中会变得比你想象的更加复杂。

因为移动网络技术始终在变化，所以移动设备的屏幕尺寸也在改变。对于设计师来说幸运的是，与过去的手机相比，如今移动设备的屏幕越来越大，分辨率也在不断提高，但是不容忽视的是旧手机还未退市。

说到移动设备的屏幕尺寸，这里向大家推荐两篇文章：《移动设备屏幕尺寸发展趋势》和《移动设备屏幕尺寸趋势研究》。上述学术文章所论述的结论是，在移动设备发展中，240x320分辨率将成为标准分辨率。近来很多最新的移动设备和智能手机都拥有大屏幕，小屏幕手机已然成为过去式了。屏幕尺寸发展趋势

2.缺乏理解

许多Web设计师所面临的最大挑战之一就是对于新设计形式的担忧，害怕自己做不好。如果在你之前的网页设计作品中没有考虑到移动网络浏览者和访客的想法，那么现在如果不进行一些相关的研究和学习，你是无法应对这个问题的。因为用户所处的浏览环境不一样，手机网络浏览者和电脑网络浏览者在行为上会有一定的差别，所以Web设计师需要增加对移动互联网的理解和认识。如果你是移动互联网开发新人，那么通过学习本篇文章中的知识要点，你会对移动互联网有一个基本的了解和认识。

3.快速的变化

与其他技术一样，快速的变化是互联网行业中的常态。Web设计师和移动Web设计师都需要始终站在本行业的前端。当行业技术与趋势发生变化，移动Web同样要适应变化。当然，变化的挑战对于设计师们来说已经是家常便饭，移动Web只是设计师需要搞定的一个新领域。

4.测试繁琐

在移动Web设计面临的最重大挑战之一就是终端的多样性。在设置桌面产品时我们已经有很多方法来应付不同种类的浏览器和不同尺寸的显示设备，但是在移动互联网中，我们根本不可能测试用户在某些特定环境下访问网站的情况。

当然，如果你进行适当的准备工作，移动网页测试还是能够完成的。在这种情况下，简单的网页测试会让整个测试过程更轻松一些，因为简单，所以不容易出错。当有了更加细致的设计和流畅的测试流程，移动网站的可用性还是可以让人接受的，这样就能运用到越来越多的移动设备中。

还有一些有用的测试资源，比如网页开发工具箱中就有一些专为移动Web设计的功能，比如一些用户禁用了CSS与图片，你就可以关闭这两项功能，看看这时你的网页是什么形态。虽然这个工具无法让我们将访问传统互联网的体验复制到手机上，但是它的确可以帮助我们去改进网页内容与导航的布局。

另一个有用的测试工具就是Opera浏览器。在Opera浏览器的工具栏中，点击“查看”，选择“小屏幕”，这样网页就会像你在手机上看到的那样以窄屏显示。

同样，你可以使用Opera WebDev工具栏，通过点击“显示”选项使用的标签工具浏览无格式的页面。禁用CSS后你可以以小屏幕的模式浏览网页，这样你就能体验并了解手机用户的感受了。下面的截图就是在小屏幕窗口显示的Smashing Magazine的无格式页面标题。

5.做减法

如果网页上只能容纳必需的元素，那么设计师和老板就要考虑什么内容才是最重要、最核心的。这话说起来简单，但当考虑到一个网站上所加载的内容、图片甚至视频时，如何对其做适当的精简却是个不小的难题。此外我们还必须充分了解用户的情况：他们正在做什么？他们为什么在这个时候访问这个网站？他们可能喜欢什么，可能讨厌什么？坐在台前设计程序与思考目标用户的需求压根不是一回事。1.2 对移动Web设计的思考

我们已经对移动Web设计的趋势和挑战进行了初步的了解，下面我们来重点检查一下设计师在过程中应该考虑的几个要点。

1.简明的语义标记

如果你想为一个优秀的移动网页打下稳固的基础，你最先要做的事情就是设立一套适用于网页的、简明的语义标记。这样在你设计移动网页的时候才会避免重复传统互联网设计中存在的重大问题。简明的标记能有效帮助浏览器正确显示网页页面。同样，由于避免了不必要的环节，简明的语义标记还将给用户带来愉快的体验经历。

2.CSS下内容与显示的分离

除了简明的语义标记，内容与显示的分离也是非常重要的。与桌面用户相比，手机网页用户更喜欢访问没有图片和禁用CSS的网页。手机网页用户更希望顺利地访问页面内容和链接——而不是看到华丽的页面显示。作为移动互联网网站，当其开始大量使用简明的语义标记，并用CSS实现内容与显示的分离时，这就是一个具有非凡意义的伟大的开端。

3.ALT标签

出于部分用户由于某些原因不能浏览网页上图片的考虑（或者用户选择屏蔽图片），ALT标签对于可用性来说显得非常重要。无论如何ALT标签在互联网中都有所运用，只是对手机互联网用户来说它更加重要而已。

4.表单域的分类

像ALT标签一样，表单域分类使得移动互联网变得更加实用。试想一下，如果没有对其进行了解就加以使用，那么一定不会得到你理想的效果。而处理好像ALT标签和表单域分类这样的细节问题就可以使你事半功倍。

5.标题的作用

由于移动Web浏览器所显示的内容文本格式常常是受限制和不协调的，所以标题在此处就显得格外重要。移动Web浏览器并不能将文字显示为你想让它呈现的那种效果，但是类似标题一、标题二、标题三这样的标签能帮助页面构造一个合理的用户视图，并凸显出页面的某些重点内容。

6.禁用漂浮链接

尽管移动Web浏览器也能通过使用漂浮链接来进行整个网页页面的布局，但是在小屏幕上恐怕并不会收到很好的效果。通常情况下，没有漂浮链接会使内容简单排列的网页整体看起来更舒服，用户也能得到更好的使用体验。

7.减少页边距和填充

一般情况下，和传统的网站相比，移动设备上的网页最好减少页边距和其他的填充。当然，这取决于你所设计的网站页面填充的实际情况和网页页边距的大小，但是过多的页面填充和过大的页边距并不能提升用户体验。

8.做好页面导航

很多页面的网站导航都设计在页面的最上方。这样的设计对于移动网页同样有用，但是值得注意的是，手机上的导航选项是按比例缩小的。在手机网页中，最好只提供最常用、最有用的链接选项，同时在设计时尽量让用户能够更加方便地接入其他的导航链接。

9.注重页面颜色对比

由于使用手机屏幕不能拥有电脑或笔记本屏幕一样的使用体验，所以在设计手机Web页面的颜色时，为了确保用户能够有良好的阅读体验，设计师们一定要注意页面背景颜色和文字颜色的协调搭配。1.3 Sitepoint（设计团队）的移动Web设计作品

Sitepoint出版了由布莱恩.苏塔撰写的《移动Web设计》，这篇文章对于学习移动Web设计的朋友来说很值得参考和学习。在文章中，布莱恩将移动Web设计分解为7个简要易懂的步骤。这篇文章的内容对于重申本人上述的Web设计要点非常有用。

1.不要混淆标记

大多数网站都会忽视WmL，而是用大家更熟悉的XHTML语言来编辑标记，所以在进行设计时一定要使用适合的编辑语言，并建立简明的语义标记。

2.了解你的手机

我们不仅要满足手机不同屏幕尺寸和分辨率的需求，还要满足其变化多端的外观需求。从早期的时短时长的长方形到后来的“大哥大”，再从精密小个头发展到完美比例的方形，手机丰富多彩、日新月异的变化简直让人抓狂！

3.找准目标客户

传统的互联网用户大多是坐在电脑桌前面对着一台高分辨率大显示器。而移动Web用户的使用环境却大大不同。他们在浏览网页时可能正在等地铁、正在公交车或火车上，或是刚刚走出家门，又或是在深夜迷失在一个陌生的城市，任何情况都可能发生。

4.谨慎发布

虽然只有一个网站的概念，但是用户所使用的浏览介质很大程度上决定着网站的风格和形态，如今业内也流行着很多种不同的设计标准，但是一个独立的移动网页必须满足的一个条件，那就是要为用户提供优越的浏览体验。

5.选定响亮的域名

当你准备为一个移动选定一个域名的时候，我曾经工作过的公司和同事总是会选用子域名。创建一个子域名是设立一个网站时最简单的办法（前提是你拥有该域名），这意味着你不用把大把的时间花在改进和修改服务器上（而且还很有可能影响正常的Web设计进度）。

6.验证你的标记

移动Web浏览器的运行速度和容错性都大大低于电脑浏览器。在移动设备上运行的浏览器，并没有奢侈的电脑浏览器所拥有的2GHz处理器和高达200GB的存储空间。因此，你必须一次又一次地检查、验证、重复检查你的标记。

7.除了测试，还是测试

虽然在台式电脑上能够使用Web浏览器来测试你的移动网站，但是在其得到实际运用之前，它仍然只是一个模拟的移动体验。不容忽视的是，用这种方式还是无法精确地复制许多移动设备的使用感受。

布莱恩的文章对于移动Web设计与开发新手来说是一个非常好的开端。当你在检查、测试你的作品时能够正确运用文章中的知识点以确保你用正确的方式来完成工作，这是一个非常好的学习资源。第2章移动Web设计：要点和实践

Cameron Chapman

相关数据显示，2009年美国有超过6300万人通过移动终端设备访问互联网，而到2013年，全世界范围内的移动网络用户人数将超过17亿。比起这些数字，如今的当务之急是Web设计师和Web开发者要学习最先进的方法，来进行移动Web的设计与开发。

在通常情况下，你不需要去学习任何移动设计与开发的最新专业知识，但是你要去摸索一种全新的网站设计方式，一种比标准浏览器的设计更具有限制性的新方法。

通过围绕移动设计所出现的问题展开工作，你需要有一种具有创造性的解决问题的方法，你会发现注重用户友好度在你建立标准网站时是非常有用的。2.1 尽快使自己熟悉硬件设施相关的操作软件

涉及操作系统的时候，手机和移动终端设备的差别还是很大的，比如屏幕尺寸、屏幕分辨率还有用户界面。为了能够更好地了解哪些平台能帮你把网站优化到最好，深入了解不同的硬件和操作软件对你来说非常必要。

在平时使用中最常见的操作系统有Windows Mobile系统、iPhone的iOS系统、Palm OS、Linux移动操作系统、Symbian系统、黑莓操作系统和安卓系统（该系统的发展很大程度上得益于近期威瑞森和谷歌的交易）。当然市场上还存在许多为特定的手机而制作的专有操作系统，例如我们知道的部分威森瑞的手机和其他特定品牌的手机。根据你要建立的网站所瞄准的目标用户类型，你能大致地估计、确定哪个操作系统才是用户最有可能使用的。如果你的目标用户大多数都是商务人士，你最需要做的就是为那些使用Windows Mobile系统和黑莓系统的手机用户优化改良你的网站。如果你的目标用户是更年轻、更时尚、更青睐成熟技术的用户，那么你就要优化你的网站以使其能够更适用于安卓系统和苹果iOS系统。总之无论如何，你要确保你的移动互联网网站能够适用于市场份额最大或者市场前景广阔的那个操作平台。

StatCounter全球统计——移动操作系统前八名数据来源：htp://gs.statcounter.com/#Mobile_os-ww-monthly-200812-201010。

另一个需要着重考虑的因素是移动Web浏览器。一些较为常见的手机浏览器包括用于iPhone的Safari浏览器、安卓系统浏览器、Opera移动浏览器、WebOS浏览器（用于Palm设备）、黑莓系统浏览器和IE移动浏览器（运用于Windows系统手机设备）。当然还有很多其他的运用于诺基亚手机或其他品牌手机的浏览器。其中有一些浏览器是基于专有代码编写而成的，其他的浏览器有的基于开源搜索引擎WebKit（安卓浏览器、iPhone的Safari浏览器），有的基于Gecko代码（例如Firefox浏览器针对移动电话和非个人计算机设备推出的Fennec版本浏览器）或其他的公用平台。

StateCounter全球统计——移动设备浏览器前九名数据来源：htp://gs.statcounter.com/#mobile_browser-ww-monthly-200901-200910。

最后你需要考虑的是，网站的目标用户最常用的屏幕尺寸和屏幕分辨率。你的网站最好能够最大范围地显示在目标用户所使用的移动设备上。2.2 简明很重要

一般情况下，你所设计的移动互联网网站应该比你预想的方案更加简明。只有一种情况你可以不用再简化你的网站——那就是你所设计的方案已经是最简化的。通常去掉网站中的图形元素是优化移动设备网页显示效果的有效方法。不仅要从网站设计上寻找简化方法，网站功能的设置也是同样的道理。这可能意味着你将要重做网站菜单、去掉多余的图片、打乱多个页面文本或者用其他的方法给你的网站进行功能设置和页面布局。2.3 使用有效标记

考虑到网站用户可能通过各种不同的操作系统和浏览器来访问你的网站，标准页面的设计变得格外重要。通常情况下，标准浏览器对一些不良源代码有很好的兼容性，但是对于移动浏览器来说，情况并没有说的这么乐观。在建立移动网站时，一定要确保代码有效，并尽可能使其清晰简明。2.4 为用户提供访问标准网站的选项

由于网站访客所使用的设备不尽相同，部分用户可能只想访问无差异的标准化网站。尤其是市场上出现越来越多的iPhone和性能更卓越的智能手机，而且iPhone的完美运行也证实了标准网站的应用是完全没有问题的。即使你把标准页面链接放在网页页脚（这也是我们经常习惯性去寻找的标准页面链接的地方），我们仍然要为移动用户提供浏览标准页面的选项。另外，你也可以为用户设置不用他们使用“后退键”就能返回移动网站页面的选项。2.5 使用单独的手机主题

优化主网站对于手机使用来说有时候是可以的，一般情况下移动终端设备可用通过修改CSS来完成CMS，这样还能更简单地使用独立的手机主题。一个专有的手机主题意味着你能够真切地考虑和体会用户会如何看待和理解你的网站，从而你可以根据这些见解为他们进行细致的功能优化。有的网站会为所有的常规手机用户设计一套优化方案，再专门为iPhone手机用户设计另一套优化方案。2.6 在某方向限制滚动

在使用标准浏览器的时候，网页上各种方向的滚动功能让人感到很反感。在你的网页用户使用移动终端设备浏览网页的时候，这种反感同样存在。事实上，有时候情况甚至更糟糕。当你使用触屏手机的时候很容易一不小心就滚错了方向（想要水平滚动却弄成了垂直滚动，反之亦然）。如果你的网站只限定某一方向的滚动，那么你就可以消除这种潜在的麻烦。2.7 不要使用弹出窗口和打开新窗口

根据特定的平台性质，弹出窗口和新窗口会影响用户的浏览体验，所以建议不要使用这些工具。如果你的某项功能确实需要通过打开新建窗口才能完成，那么请确保在弹出新窗口之前你已经提示过用户。2.8 尽量减少图片的使用

尽量只在需要的时候才使用图片，其他情况下尽量减少图片的使用。像其他的多数图标一样，网站拥有一个易辨识的小商标就够了。网站中组成页面内容的图片也要尽量的精而小。同时要精简掉那些看起来虽然精美但是对页面内容没有任何帮助的图片。何况在手机上显示的图片一般并没有多精美，既然没有任何意义又何必留着它们呢？有时候这些不必要的图片只会让你的页面看起来更糟，还有可能导致页面显示卡顿。如果手机的分辨率不高，这些图片还会影响你整个页面布局的美感。2.9 优化网站导航

现在许多移动终端设备都采用触屏操作界面，这点在进行网页开发的时候要时刻牢记。这意味着在设计时指尖触动链接的可点击区域要大一点，点击按钮要大一点，链接指尖的空隙要留得开一点。总是点击又小又不明显的链接是很难受的，而且每次点击某链接都要通过放大页面来完成操作也不是一个好的解决办法。为了改善这些页面导航所存在的问题，许多网站都使用了一种专门为触屏手机或没有鼠标接入的移动设备开发的完全独立的移动设备导航。2.10 不要依赖Flash和JavaScript

首先你要明白，并不是所有的手机和移动终端设备都支持Flash和Java-Script。即使设备支持这些插件，也不能保证它们都是最新版本。如果你的用户使用的是iPhone，那么你就不用考虑Flash了。同时你要确定你所创建的移动网站所有重要的信息和功能都能在（X）HTML/CSS上运行和读取。否则你将要面临大部分用户无法访问网站主要内容的巨大风险。2.11 让你的标准网站拥有更多实用内容

回想一下，过去有多少次在你通过手机访问你最喜欢的网站时，发现不能浏览你最想看的内容？其实这样的事情一直在发生。还包括移动互联网上那些没有经过任何优化和改良的、总是充斥着大量内容的原始网站。除了要让其能够顺利被用户访问，还要确保它的导航和链接保持相对不变的位置。2.12 确保重定向工作顺利进行

不要只是简单地把手机用户链接到网站的主页上。在使用移动设备时，没有什么比通过点击某链接、从搜索引擎中自己找或者从别的网站重新返回主页更烦人了。如果你所设计的网站能够自动识别该用户是否使用移动浏览器访问网站，并且为用户罗列出他可能会浏览的链接，他们才会乐于使用，否则他们可能会不耐烦地离开而且再也不会来访问你的网站了。第3章如何建立一个移动网站

Jon Raasch

在过去的几年中，移动互联网的使用率已经高到Web设计师和开发者无法再忽视的程度。

在发达国家，移动互联网的转变正推动着速度更快的移动宽带连接服务和价格更便宜的数据服务的发展。在一些发展中国家我们同样看到，有大量的用户跳过个人电脑直接选择使用手机来体验移动互联网的便利与精彩。

很遗憾的是，移动互联网领域所采用的多是复杂的多层编写，这让许多开发者很难去适应。移动互联网领域的发展不仅仅是跨越浏览器，更是跨越不同平台的发展。想要大多数的移动终端设备进行深入全面的实用性能测试几乎是不可能，如果没有网络开发辛勤的钻研新技术，广大的用户就只能去使用老掉牙的IE6。

除了能在不同的操作平台上得以应用，每台设备还可以使用任意数量的移动互联网浏览器。例如，一位安卓系统用户不仅可以通过该系统自带的浏览器进行网页浏览，同样也可以通过Operamini浏览器或者Firefox Mobile浏览器实现网页浏览。只要为智能手机配备先进的网络浏览器（而且可以肯定的是，如今绝大多数的浏览器都是非常先进的），同样可以实现网络浏览，但是现在已经没有必要了。

此外，近来年对移动互联网重新提出的一些问题并没有引起人们足够的重视。第一，尽管现在已经研发出4G网络，但是移动网络速度还是手机消费者所面临的严重问题。第二，移动终端设备的屏幕尺寸在很大程度上会逐渐减小，自从实现了背投显示技术，手机屏幕的实际使用面积已经不再成问题了。

结合由于跨平台产生的兼容性问题，我们不难发现移动开发真的是在“倒退发展”。那么现在就让我们一次性地解决这些问题，并探索出一条全新的移动互联网发展之路。3.1 如何实施移动样式表

为网站创建移动功能支持的第一步是建立一个专门适用于移动终端设备CSS的样式表。

1.服务器端方法及UA字符串

其中的方法之一就是把涉及检测用户代理字符串的移动样式表用像PHP这样的服务器端语言来进行编写。有了这项技术，网站将能检测出移动终端设备并提供合适的样式表，或者将用户重新定向到另一个移动网络的子域，例如m.facebook.com。

这种服务器端方法有以下几个优点：一是能够最大限度地保证网站的兼容性，二是它能允许浏览网站的移动终端用户查看一些权限较高的内容。

虽然这项技术能够完美应用于企业级的专业网站，但是其存在的一些实际问题使它很难在大多数普通网站上加以运用。

因为几乎每时每刻都在产生新的用户代理字符串，所以想保存当前的UA字符串列表是不可能的。

此外，这种方法依赖于设备本身接替其真实用户代理的能力，所以在互联网发展过程中很多浏览器都通过骗取用户代理的UA字符串来解决这种类型的检测。例如，在20世纪90年代，大多数UA字符串都以“mozilla”开头从而通过网景公司的检查，而近几年来，Opera浏览器又假装成IE浏览器，十分混乱。就像彼得·保罗·科赫所写的一样：“这简直就是一个军备竞赛，如果设备检测真的流行起来，那么浏览器开发者就会开始骗取他们用户的代理字符串来尽快结束这个检测。”

2.客户端方法及媒体查询

或者使用另外一种更简单的方法，那就是直接从客户端上对移动终端设备进行检测。

最早的检测所包含的移动样式表的方法还包括利用样式表的媒体类型来检测，例如：

＜link rel="stylesheet" href="site.css" media="screen" /＞

＜link rel="”stylesheet” href="mobile.css" media="handheld" /＞

在这里我们提到了两个样式表，第一个是sit.css，主要用于台式电脑和笔记本电脑所使用的屏幕媒体类型，而第二个Mobile.css则主要用于手持的移动终端设备。

虽然这的确是一个很不错的解决办法，但是设备支持与否又是另外一个问题。老一批的移动终端设备基本都支持手持媒体类型，同时它们在实施过程中也伴随着很多变化：有些手机禁用屏幕样式表，并且只加载手持媒体类型，而其他的两项都允许。

另外，如今大多数新推出的移动终端已经和手持数码设备没有明显的区分了，这样以便于网站开发者摈弃亳无生气的移动Web布局，从而为用户提供功能更加全面的网页浏览体验。

为了支持新设备，我们需要用到能够支持我们确定设备大小的媒体查询。自从移动终端设备使用了典型的小屏幕，我们就能通过检测设备屏幕宽度是否小于等于480像素来确定其是不是手持数码设备：

＜link rel="stylesheet" href="mobile.css" media="only screen"and （max-device width:480px）"/＞

由于之前较老的一些手机不支持媒体查询功能，所以这种方法只是用于新推出的部分手机，所以我们需要一个两全其美的解决方法来挖掘这个绝大的潜在市场。

首先，定义两个样式表：常规浏览器下无限制的screen.css，用antscreen.css覆盖所有你不想在移动终端设备上显示的格式。将这两个样式表组合成一个新的样式表core.css：

@import url（“screen.css”）;

@import url（“antiscreen.css”） handheld;

@import url（“antiscreen.css”） only screen and（max-device-width:480px）;

最后，用移动浏览器新增的格式来定义一个新的样式表handheld.css，再将其链接到页面上：

＜link rel="stylesheet" href="core.css" media="screen"/＞

＜link rel="stylesheet" href="handheld.css" media="handheld,only screen and （max-device-width:480px）"/＞

虽然这项技术占有移动终端市场很大的市场份额，但这并不意味着它就是完美的。像iPad这样像素宽度超过480的移动终端设备，这种方法是行不通的。换一个角度看，这些体积更大的移动设备也不需要简明的页面布局。

随着技术的不断发展，将会有越来越多的移动终端设备不再适用于这种检测模式。可惜的是，由于目前所谓的“标准”都是刚形成的，并未成为固定不变的条目，所以在未来想要推动更新移动设备的检测方法也是很有难度的。

除了设备检测有不理想的地方，媒体查询这种方法同样也存在一些问题。主要问题是，媒体查询只对具有差异性的网页内容样式有用，而且它不能控制网页文本的发送。

例如，用媒体查询的方法可以隐藏一个侧栏的内容，但是这并不能有效防止用户下载标记。出于对移动互联网宽带速度的考虑，新添加的HTML不能被人们忽视。

3.用户启动法

考虑到使用移动UA监测的各种困难和媒体查询的各种缺陷，像宜家等企业就让用户自己决定是否需要查看公司网站的移动版本。这是一种最容易实现，也是最能保证万无一失的办法，但是这种办法还有一个很明显的缺点，那就是产生了过多的人机互动，降低了用户的自主程度。

这样的网站一般在页面都有专门用于传送用户到其移动网站的链接，一般都这样表示“访问移动网站版本”。这种方法也有不好的地方，由于这个链接在页面是可见的，所以无论是使用什么设备，只要你在浏览网页，你就可能看见它，而很多移动用户很有可能没有注意这个链接，但是一些并不使用移动终端设备的用户又错点了那个链接，这叫人有点哭笑不得。尽管如此，这种方法还是有值得学习的地方的，那就是能够让用户自主决定是否访问移动网站。有些用户喜欢用他们的移动设备访问页面简洁的网站，而有些用户则更喜欢没有限制的页面布局，从而能够一下子浏览整个网站，因人而异。3.2 移动样式表的变化

如今我们已经对移动样式表进行了很多优化，是时候开始对我们想要改进的移动页面风格进行具体细节的讨论了。

1.屏幕实际使用面积的增加与改变

移动样式表的初衷是让网页在较小的屏幕上得到很好的显示。首先，这表示我们要将多列布局缩减为单列布局。大多数的手机屏幕都是竖直的，所有水平方向能利用的空间显得格外珍贵，而且手机的整体页面布局很难容纳超过一列的文本显示。

其次，通过设置页面布局来减少整体的杂乱感，除了必要的显示内容和文本，其他的内容一律不留。

最后，通过缩减页边距和页面填充来节省额外的像素以保持整个页面结构的严谨和简洁。

2.降低带宽

修改移动样式表的另一个目的就是通过降低带宽来保证访客在低速网络环境下仍然能够正常使用网页。首先确保你已经移除或替换了所有的页面背景图片，特别是那些一进入网站页面就能看到的背景图片。然后再设置显示成不显示任何不必要的图片。

如果你的网站使用了图片作为行动按钮和导航图标，请考虑将这些图片更换为纯文本或者与CSS想匹配的代码。如果你一定要强制浏览器使用图片替代文字的话，你可以选择使用下面的代码（使用JavaScript来为图片添加类文本代码并且保证alt属性在你的标记中是正确定义的）：

img.as-text { content: attr（alt）; }

3.其他修改

除了解决屏幕尺寸和带宽的问题，对于移动样式表还有一些方面需要进行相应的修改。

首先通过放大那些中等偏小的字体和文本来提升页面的可读性。相反的是由于粗体字往往容易使人有手持设备变笨重的错觉，所以建议删除多余的粗字体：

h1, h2 {

font-weight: normal;

}

接下来，由于手指在移动设备上的点击往往不够精确，所以尽可能地增加主要的选项按钮和链接的可触面积。

此外，浮动等元素往往会影响移动页面的整体布局，所以你也要考虑删除任何没有明显作用和需要的浮动元素。你一定要牢记手机的水平显示实际面积特别珍贵，所以你一定要尽量在网页中添加垂直滚动而不是水平滚动。

最后，悬停状态并不是对所有的移动终端设备都有效，所以你要做好对这一动作的正确定义：活动状态。同样，有些情况下从已经被定义的内容中再申请定义也是有用的：由悬停状态定义到活动状态。当用户点击该条目时这些伪类就会显示，然后在移动终端设备上运行。当然这些功能只是起到增强用户体验的作用，并不依赖于页面的重要组成部分，例如下拉导航选项。在这种情况下，最好能让你的移动终端设备一直显示这些链接选项。3.3 超越样式表

除了移动样式表，我们还可以通过标记来增加许多特别的移动网络功能。

1.可触电话拨号

很明显的，手持设备中的一大部分指的就是手机，那么让我们使手机拨号变得更加简易：

＜a href="tel:15032084566" class="phone-link"＞（503） 208-4566

通过以上设置，你就能呼叫这个电话号码了，同时也有一些事情要你了解。

第一，因为电话网络是国际通用的，所以前提是你所输入的电话号码必须以数字“1”开头（而且“1”是美国的电话代码）。

其次，不管这个号码是否能拨通，你必须使用手机来打。由于上述方法，我们并没有通过服务端法来讲解，最好的办法就是隐瞒这串数字链接是通过CSS来实现的事实。所以在你的屏幕样式表上要使用手机连接类禁用这些链接格式，然后在手机上也要做相同的设置。

2.专有输入法

在使用移动Web浏览器的时候，另一个值得注意的事情是标准的全尺寸键盘很难很好地完成输入。但是我们可以利用一些特殊的HTML5输入编码来帮助我们的用户更好地完成输入。

＜input type="tel" /＞

＜input type="email" /＞

这类输入方式能够让像iPhone这样的移动设备在进行文字输入时实现上下文的联想跟踪显示。例如，当你输入“tel”时，就会触发数字键盘，然后使你能马上输入一串电话号码，还有当你输入“email”时，键盘会自动跟踪显示@xx.的各种地址选项。

HTML5输入类型在移动和非移动浏览中都提供了有效的系统自带浏览器验证和专门的输入菜单。此外，由于不支持浏览器自发的降级区浏览，诸如＜input type="text" /＞这样的特殊输入类型，所以现在在移动互联网网站里普遍使用HTML5输入类型也是行不通的。

3.定义视窗大小

当今的移动终端设备在呈现一个网页页面时，它们通常都会通过压缩页面内容来使他们更适合设备的视口或者可视面积。虽然默认的视窗定位通常都能与页面布局和谐搭配，但是有时候对视窗进行适当的调整也是很有必要的。苹果公司最先推出一种通过使用＜meta＞标签的办法来完成视窗定义，而且其他的设备制造商也开始使用这种方法。方法如下：在文档＜head＞中包含下列编码：

＜meta name="viewport" content="width=320"/＞

本例中，我们把视窗宽度设置为320，意思是你所使用的设备屏幕能显示宽度为320像素的视窗。

相同的，视窗元标签也可以用来禁用页面尺寸的改变，做如下操作：

＜meta name="viewport" content="width=320, userscalable=false"/＞

无论如何，类似于禁用滚动条这样的技术只应该在需要的时候，而不能让用户任意使用。

此外，我们还可以在移动终端设备定位的基础上添加不同的页面样式。这意味着根据用户的使用情况——竖直使用手机或者横屏使用手机——他们的设备总有不同的页面布局。

还可以通过使用前面讨论的类似于客户端设备检测的媒体查询方法来检测设备定义。这里要在你的样式表中添加以下内容：

@import url（“portrait.css”） all and（orientation:portrait）;

@import url（“landscape.css”） all and（orientation:landscape）;

在这里portrait.css将在设备上增加垂直参数，而landscape.css将增加设备的水平参数。

但是并不是所有的终端设备都能使用媒体查询定义，所以在这里我们最好使用另一种方法，那就是用媒体查询检测最大屏幕宽度。根据你想要定义的不同宽度，只需要查询不同的最大屏幕宽度就可以了。由于不同的屏幕宽度会有不同的视窗定义标准，所以这种方法还是比较靠谱的。3.4 对于iPhone和iPad的思考

iPhone如今占有相当大的市场份额，而且据估计有高达50%的网络浏览是通过iPhone产生的，这让Web设计师们不得不对这个移动巨头留有特殊照顾。

1.不支持Flash

不管苹果自身是出于何种原因不支持Flash，事实上只要iPhone不越狱就不支持Flash。值得庆幸的是，目前有可以替代Flash的插件，所以iPhone的这项技术问题对于大多数网站来说并不构成影响。

除了视频之外，通常情况下最好使用JavaScript来完成简单的功能编辑。像jQuery这样的JavaScript程序库能够在没有Flash的情况建立丰富的交互应用程序。不论你是否支持iPhone，这些JavaScript应用程序比Flash的替代品拥有更多明显的优势。

最后，还有某些应用程序很难通过HTML5和JavaScript来进行重新编译。所以iPhone的用户们不得不放弃使用这些程序的念头。即使这样，仍然要保证你的应用中包含部分可替代的内容。

2.不容忽视的缺点

除了不支持Flash，如果你想开发iPhone和iPad网络应用，这里还有一些说明是你要了解的。

首先，因为iPhone没有支持访问内部文件的结构，所以它并不支持＜input type="file"/＞的编写方式。虽然大多数移动终端设备都是以外部硬盘驱动器的形式连接电脑的，但是苹果的产品为了确保其内部文件结构不公开，在连接电脑的时候都采取了一定的措施。

其次，iPhone只能缓存25KB或更小的数据，所以在此情况下尽量保存所有你可能需要重复使用的数据或文件。乍一听你可能觉得这很不能理解，但是这种做法能把大图像和JavaScript分解为更小的数据块。不过在iPhone上使用数据和功能的时候一定要注意，否则很有可能在其他浏览器里产生额外的HTTP访问请求。

最后，iPhone的内置移动浏览器Safari并不完全支持@font-face格式，而是支持SVG的文件格式。由于只有Chrome浏览器、Opera浏览器和iPhone浏览器支持SVG格式的字体，所以我们要采取合并改良的方法来使其能在任何浏览器上顺利使用。除了SVG，我们还需要用于Firefox浏览器和Safari浏览器的.ot和.ttf，格式，同样还有IE浏览器（不管你相不相信，其实从IE4开始的时候IE浏览器就已经支持支持@font-face格式了）的嵌入开放式字体格式（EOT）。

在获得所需要的文件后，将它们与适当的CSS项合并：

@font-face {

font-family: ‘Comfortaa Regular’;

src: url（‘Comfortaa.eot’）;

src: local（‘Comfortaa Regular’）,

local（‘Comfortaa’）,

url（‘Comfortaa.ttf’） format（‘truetype’）,

url（‘Comfortaa.svg#font’） format（‘svg’）;

}

3.iPhone和iPad的增强功能

尽管iPhone有不少缺点，但是通过开发者的各种优化和设计，iPhone还是为广大用户提供了老式移动终端设备无法比拟的丰富用户体验。

第一，iPhone里各种丰富的JavaScript程序库使得用户能通过iPhone体验更多更先进、更强大的功能。例如你可以使用Sencha Touch、IQTouch和iui来进行程序编写。上述三种程序库能让你更好地美化iPhone界面，并且适用于使用安卓系统的设备。与此同时，还要密切关注最近刚刚发布的备受期待的用Alpha数据库系统语言开发的jQuery移动系统版本。

第二，App Store并不是获取iPhone应用图标的唯一方法，还有一个更简单的办法，那就是直接把网页页面添加到浏览器书签里，并设置为在主屏幕上显示。不过，一般默认的图标只是一个简单的屏幕，看起来并不是很正式，下面让我们来学习如何创建一个专有的iPhone图标。

在你的网页需要保存截图的地方截取一个大小为57x57像素的区域，然后开始添加＜head＞标签片段：

＜link rel="apple-touch-icon" href="/customIcon.png"/＞

同时，iPhone会自动添加圆角和镜面效果。3.5 总结

随着全球范围内移动终端设备网络热潮的掀起，应用程序或网站要支持移动数码设备的功能变得越来越重要。希望本章能带给你思维的启发和开发上的帮助，使你能够顺利地开发出完美支持移动终端设备的程序和应用。

虽然移动Web浏览在全球网页浏览中有着举足轻重的地位，但是移动网络技术在很大程度上仍然处于起步阶段。就像标准电脑桌面浏览器的出现一样，能够统一移动桌面浏览器的标准浏览器也正在孕育之中。这意味着，在这篇文章中所描述和介绍的技术都只是暂时性的，作为移动网络技术的推动者，Web设计师的责任和义务就是不断学习新的知识，让自己和日新月异的技术始终保持同步，不能掉队。

事实上，不仅是对网页开发，还包括生活中所有的事物，都是学无止境的，这是一条真理。第4章iPhone和iPad的Web应用发展：已经开启

Nick Francis

根据Admob的调查显示，iPhone的操作系统是占全球智能手机操作系统份额最高的手机操作系统，高达40%，而排名第二的安卓系统所占比例为26%。在苹果发布iPad的第一年，其世界各地的销售量均突破100万台，最高达到400万台。无论你是喜欢还是反感，iOS和Safari现在已经成为移动互联网开发的一个不容忽视的角色。如果你对iOS还不熟悉，那我劝你最好先静下心来，好好学习和熟悉iOS网络应用开发与iOS环境下移动网站优化所需要的要点和工具。

幸好iPhone内置的Safari浏览器是一个优秀的浏览器。像用于电脑的Safari一样，iPhone内置的Safari也支持CSS3和HTML5。Safari浏览器也有一些非常独特的光滑界面元素设计，这些设计在iPhone和iPad上有着不同的显示效果。因为iOS已经趋向成熟并拥有大量的用户，所以该系统可利用的资源非常丰富。

我们知道大家讨论的焦点就是iOS平台上的原生应用程序。但是你仍然可以通过使用HTML、JavaScript和CSS来开发类似于系统原生程序的强大应用。本文将重点讲解创建和优化网站的三个重要阶段：设计理念、编写代码、功能测试。

在开始讨论上述三个重要步骤之前，让我们先来看一看网络应用程序与原生应用程序相比较所存在的一些优点和不足。

开发网络应用程序的优点：（1）不用经历苹果公司繁杂的审批程序，特别是现在那些复杂冗长的服务纠纷条款。（2）用相同的程序代码优化运用于像安卓系统和黑莓系统等其他主流操作平台的网络应用程序时更方便也更容易。（3）不用另外学习Objectve-C。（4）如果你开发的是收费应用程序，你不用和苹果公司共享你的收入。（5）你对用户支付手段、费用分配和产品促销有着完全的控制权，同时这也可能有负面影响，关键在于你如何对待。

开发网络应用程序的缺点：（1）你的应用不会出现在App Store中。（2）在设备上安装该应用程序可能会有点麻烦。（3）不能拥有一些原生iOS应用程序的功能，例如推送通知和GUI控件。4.1 设计理念

其实设计一个iOS平台上的网络应用程序和设计原生iOS应用的理念大同小异，首先你要具备必要的操作工具。无论你是准备用笔和纸来勾勒网站的框架，或是用电脑软件来完成，你都要做好充足的准备。

1.迸发灵感

没有多少人知道在苹果网站有“网络应用程序”这个链接，这一部分专门展示一些网站优化的案例。苹果网站上的网络应用页面。

2.图纸

在设计网站和构思线框的时候，图纸一直是表达思想和理念的首选工具。因为它们能为设计构想的事物提供既定的空间和透视图的效果。你必须全神贯注才能顺利完成用于iOS平台的网络应用程序。建议使用下述的其中一种工具进行设计，然后建议用美观的线框保留最简明的设计。

3.数码软件

一旦你知道这些软件是如何使用的，我们就可以直接把设计搬到电脑桌面上，利用这些软件来完成。可以用OmniGraffle来绘制线框，不过有时候直接用Photoshop也是可行的。总之，这些数码软件对你绘制线框还是很有帮助的。Teehan+Lax的iPad桌面预览。4.2 编写代码

当你开始为iOS系统上的Safari浏览器编写代码的时候，理解浏览器的运行原理是非常重要的。同样，iPhone和iPad的浏览器在使用上还是存在着一些细微的差别，例如表单框的选取就不一样。还有一点非常重要，因为Sa-fari支持CSS3和HTML5，所以你可以放心地使用现在的代码而不用担心跨浏览器兼容问题。

学习资源

iOS系统确实对于Safari的优化下了很大的功夫，并且做得很好。我个人认为唯一不足的地方就是没有做好窗口定向，还有就是缺乏辅助浏览器检测功能。读了下面的文章你就会对浏览器代码编写有一个全面细致的了解。

iPhone网络应用程序的人机交互手册

https://developer.apple.com/library/safari/#documentation/InternetWeb/Con-ceptual/iPhoneWebAppHIG/Introducton/Introducton.html

该文章全面地总结了Safari浏览器是如何在iOS系统上运行的。虽然文章里没有具体的程序编码案例，但是给读者提供了许多很好的意见，所以还是值得去深入学习了解的。

iPad人机交互手册

htps://developer.apple.com/library/iOS/#documentaton/General/Conceptual/

iPadHIG/Introducton/Introducton.HTML

这篇文章则详细描写了iPhone和iPad的细节差别。因为这篇文章里收录了一些有对iPad设计有重大参考价值的建议，所以也建议你花时间来读一读。

Safarl网页内容指南

htps://developer.apple.com/library/safari/#documentaton/AppleApplicatons/

Reference/SafariWebContent/Introducton/Introducton.HTML

这篇文章详细介绍了Safari包含视窗、网络收藏图标、独特的元标签和事件处理在内的很多内容。同时文章中还提供了代码示例。建议读者能把这本书从头到尾一字不漏地完整看一遍。

定义浏览器

大卫·沃尔什在他的博客上列举了很多正确定义iPhone和iPad浏览器的例子。这其中也包含了使用JavaScript和PHP。

检测iPhone窗口定义

http://net.tutsplus.com/tutorials/tools-and-tps/learn-how-to-develop-for-the-iPhone/Netuts的iPhone开发教程为如何根据iPhone的定义来改变样式表提供了一个非常好的例子。

检测iPad窗口定义

相比之下，检测iPad的窗口定义要容易得多。下面是编译代码（不需要用JavaScript）：

JQTouch移动网络框架

虽然iPhone有一些已经发展成熟的移动网络框架，但是jQTouch无疑是最好的。jQTouch所提供的功能能让你的移动网络应用做得像系统原生应用一模一样。4.3 功能测试

开发一个适用于iOS系统的网络应用软件或者网站最关键也最难搞定的部分就是功能测试。在手机上进行浏览器测试比在电脑上进行浏览器要更有难度，但是只要你熟悉测试工具和测试流程，测试一般还是可以顺利进行的。

1.实时显示

如果你的应用程序还正在设计当中，或者正处于编码的初始阶段，那么实时显示是一个非常有用的工具。它可以通过电脑连接你的手机并获取手机里的显示图像，让你对手机内的程序进展一目了然。由于有时候通过Photoshop来显示手机里的图像是很麻烦的，所以用实时显示能有效协助你调整页面文字的大小和一些显示细节。

2.使用iPhone模拟器

那些能用的iPhone和iPad模拟器没有一个是好的，用这些模拟器简直就是在浪费时间。与其如此，还不如下载最新版本的SDK，或者在苹果官方网站上下载同时支持iPhone和iPad的iOS模拟器。

通常设定SDK和本地测试环境要花上一段时间，不过和依靠并不准备的模拟器来测试，多花上几分钟等待环境建立好还是很值得的。本地测试有一个最大的好处，那就是不仅不知道链接网络完成工作而且测试的速度也很快。如果你准备进行功能测试的话，更推荐你使用这种方法。4.4 两全其美的PhoneGap

PhoneGap对于网页开发者来说是一个制胜法宝。如果你想用HTML、CSS和JavaScript来开发网络应用程序，但又想让这些程序能进入App Store并在设备上完美运行，那么你就需要PhoneGap。PhoneGap是一个开源的开发工具，通过使用PhoneGap不仅能让你的代码在iOS系统下自如使用，同样还可以在安卓系统、Palm系统、塞班系统、Windows移动系统和黑莓上实现运用。4.5 忙到晕头转向

如果你感到有些忙得不知所措，那么一些好的托管服务可以帮助同时在多个平台下对你的网站进行优化，这样你就不用挨个从头开始做了。它们能在各种运行环境中给你提供灵活的优化方式，但所有的服务都是使用类似于所见即所得编辑来帮助你动态地创建移动网站。

试读结束[说明：试读内容隐藏了图片]

下载完整电子书