移动web应用程序是移动设备原生应用的有效替代方案。如今，基于android的产品以及iPhone和iPad等iOS设备都配备了非常棒的移动浏览器(分别是移动Chrome和移动Safari)， Opera的粉丝也可以安装他们喜欢的浏览器。从桌面的角度来看，这些产品使浏览成为最愉快的体验。
CSS3过渡，制作精美HTML5而修饰意味着他们的用户可以获得最高的浏览体验(假设正在浏览的内容是经过精心设计和考虑的)。他们的手机同行同样没有让人失望。快速加载的JavaScript，结合同样令人印象深刻的CSS3和HTML渲染，意味着你的移动浏览器可以为你提供与原生应用一样丰富的体验。
由于是移动和基于网络的，显然会有性能方面的问题。与基于web的手机应用相比，原生应用的一个优势是，你在最初下载应用时就下载了大部分界面，所以你只有在使用它们时才真正加载了相关数据。此外，原生应用可以利用平台的集成开发功能(如标准ui)，这可以进一步提高性能。
基于web的移动应用程序的工作原理与网站相同，即当用户请求查看某个页面时，您将加载该页面的内容。我们可以使用浏览器缓存，让拥有预置缓存的用户速度更快，但所有的图形、图像、脚本和数据都是从web服务器加载的，而不是在客户端设备上(对于大多数原生应用来说)。
移动Web应用vs.移动网站
如今，越来越多的在线产品都附带了移动版，这通常是为小屏幕优化的主网站的轻微缩小版亚马逊，推特,英国广播公司主页,例如)。网站的移动版本通常获取网站的内容并输出，以便在移动设备上更容易地使用这些信息。
CSS媒体查询和其他特征检测技术可用于确定设备或浏览器视口的某些特征，这使开发人员可以选择使用相同的代码以最佳状态呈现内容。
手机网页应用在某些方面也很相似，因为你希望内容能够被尽可能容易地享受和消化。但我认为，手机网页应用不同于手机版网站，因为它是为手机平台量身定制的。UI通常会更加定制，并将包括更多以移动设备为中心的用户界面，如下面的示例所示。
快速浏览一下上面的手机网页应用，你会发现用户界面是如何更适合手机平台的。他们使用更大的打击区域为指尖优化，使他们更容易使用。YouTube和iPlayer的例子使用了更多基于网格的按钮布局，以与原生手机应用类似的方式在应用中呈现控件。
如下图所示，通过比较YouTube和iPlayer的网页应用，以及iPhone上的天空体育新闻原生应用，你可以看到两种应用形式及其UI元素之间的相似性。
移动平台
如今，我们都拥有移动设备——无论是像iPhone这样的智能手机，还是像iPad这样的触摸屏平板电脑——行业中的大多数人都会出于不同的目的使用移动设备的许多不同功能。现在，越来越多的人可以更容易地访问移动Web，当你决定在这个领域发布产品时，这应该是一个重要的考虑因素。移动设计和数据交付与传统桌面环境不同;我们接下来再讨论这个。
桌面和移动
以下是桌面和移动平台之间的巨大差异:
- 移动设备硬件更小，通常比台式机/笔记本电脑拥有更少的硬件资源。
- 较小的屏幕带来了不同的设计考虑和挑战。
- 触屏技术引入了与传统输入设备(键盘和鼠标)不同的新交互概念。
- 对于移动设备，互联网连接并不总是像硬有线宽带连接那样可靠，这意味着互联网连接是一个问题，数据传输可能会明显变慢。
尽管这些听起来似乎是需要克服的障碍，但仔细思考和考虑一下，它们没有理由是需要克服的。触屏技术令人兴奋。更小的屏幕设计将促使你思考如何让用户以最令人满意的方式与手机网页应用进行互动。
我们真正应该做的是看看上面列出的不同之处，寻找以不同方式传递内容的机会。开发移动网页应用将是传统网页开发和网页设计的范式转变。移动平台是人们可以随时随地使用的平台。
这是一个令人兴奋的概念。在下一节中，我们将讨论开发/设计的考虑因素，以及构建移动web应用的概念和技术。
保持小文件大小
当你没有足够的WiFi覆盖时，数据连接通常会变慢或不存在。对于任何移动产品——无论是依赖于数据传输的原生应用程序、移动web应用程序，还是网站的移动版本——对于互联网连接的担忧意味着你应该尽量减少用户必须下载的数据量。更快的体验通常更令人满意，因此更有用。
我们可以通过保持较小的文件大小和减少我们提供给用户的文件数量来加快速度。记住:
- 较慢的下载速度=较长的加载时间
- 更小更少的文件=更快的加载时间
平衡上述等式是我们的责任，这样我们才能创造出外观漂亮、功能灵敏的产品。
处理图像性能
我们想要尽可能多地去掉图像。对于我们保存的图像，我们希望它们尽可能地轻量级。如果图像对于你的移动网页应用设计的特定部分是必要的，那么我们可以使用几个额外的步骤来从你的文件中删除任何多余的脂肪。
使用Adobe Fireworks制作透明png
我必须承认，这些天我真的不怎么使用Fireworks，因为Illustrator和Photoshop已经超过了我的设计要求，但Fireworks确实有一个强大的王牌。如果你想使用alpha透明度的png，那么不幸的是，Photoshop只允许你导出24位的png (PNG-24)，这比8位的png更重。使用Fireworks，我们可以保存为8位PNG格式，即使图像需要alpha透明度。
根据我的经验，这可以减少20%或更多的文件大小，几乎没有质量损失。你所要做的就是打开你的24位PNG，然后，在Fireworks的PNG压缩设置面板中，将其设置为8位alpha透明度，然后导出。瞧，您可以使用更小的图像了!
使用ImageAlpha
如果Fireworks听起来太麻烦，那就去看看吧ImageAlpha．安装之后，您所需要做的就是将图像拖到它的主窗口中，然后调整导出设置以从图像中删除多余的数据。
这两种技术都非常容易实现。
我建议在所有项目中使用它们，而不仅仅是在移动设备上，因为它们会加快速度网页加载时间为您的用户，由于减少文件大小。要了解更多关于在网页设计中使用PNG格式的信息，请参见《网页设计师PNG图片格式指南》。
利用CSS3
如今的移动网络浏览器相当先进。安卓设备使用移动版的谷歌Chrome浏览器，而iPhone也使用苹果的Safari浏览器。一些移动设备自带移动Opera，而另一些则允许你安装自己选择的浏览器，比如移动Firefox。
所以我们谈论的是一些在CSS3和HTML5特性支持方面相当不错的浏览器。CSS3允许我们通过代码渲染东西，以前需要一个图像。我们可以使用颜色渐变、绘制圆角、创建阴影、向HTML元素应用多个背景等等——所有这些都有助于提高性能和减少开发时间。
如果您通过智能手机查看一个典型的应用程序界面，几乎可以肯定您会发现使用了CSS3。通过使用CSS3，我们可以减少数据传输——特别是图像和可能的多余HTML标记。我们让浏览器和设备来更快地呈现界面。
想要上面突出显示的苹果式工具栏吗?你所需要的是以下样式规则(使用CSS3)，而不是创建和加载一个CSS背景图像(这是我们使用CSS2的传统做法)。
.toolbar{宽度:100%;高度:44 px;background - color: # 000000;border-top: 1px solid #4B4B4B;background-image: -moz-linear-gradient(top， #2F2F2F， #151515 50%， #000000 51%， #000000);background-image: -o-linear-gradient(top， #2F2F2F， #151515 50%， #000000 51%， #000000);background-image: -WebKit-gradient(linear, 0% 0%， 0% 100%， from(#2F2F2F)， color-stop(50%， #151515)， color-stop(51%， #000000)， to(#000000));背景-图像:线性渐变(顶部，#2F2F2F， #151515 50%， #000000 51%， #000000);｝
这是当它被应用到div在Safari(桌面)中查看的元素:
现在，不是一个不能很好地缩放的图像——例如，如果工具栏的高度需要增加，CSS背景图像将不能随它缩放——我们有一个设备渲染的HTML元素，它具有一个渐变，可以很好地缩放并适应不同的设备方向和大小。
确实，Windows Mobile设备上的IE等老式浏览器不一定会呈现渐变，但我们可以通过使用背景颜色在相同的CSS规则中作为回退机制。这意味着所有能够显示渐变的浏览器都将显示渐变，但那些不能显示渐变的浏览器将显示纯色(我们将其设置为黑色，# 000000)．所有用户仍然可以享受你的移动web应用程序界面，但老设备只是去掉了额外的光泽层。
这种技术叫做渐进增强．
HTML帆布
如果你想多干点活，那就可以提高速度进一步使用画布元素．虽然使用CSS渐变消除了物理图像的加载，但这种方法仍然会导致设备的渲染引擎在浏览器中构造图像，这可能会导致性能下降，具体取决于设备和浏览器。通过使用帆布元素和一些JavaScript，我们可以让浏览器绘制渐变，而不像图像那样渲染它。
这种技术在某些浏览器上可能更快，即使我们需要使用JavaScript。至少，使用帆布如果在CSS3中无法完成绘图，或者如果您发现它是性能更好的选择，则可以使用另一个工具。要创建上面相同的工具栏，首先我们需要创建一个帆布元素在HTML文档中像这样:
<帆布id = "工具栏" > < /帆布>
然后，通过JavaScript，我们可以使用以下脚本在画布上生成所需的渐变:
var canvas = document.getElementById("toolbar");var context = canvas.getContext("2d");Var gradient = context。createLinearGradient(0,0,0,44);gradient.addColorStop (0, ' # 2 f2f2f ');gradient.addColorStop (0.5, # 151515);gradient.addColorStop (0.51, # 000000);gradient.addColorStop (1 # 000000);上下文。fillStyle =梯度; context.fillRect(0, 0, 300, 44);
上面的代码看起来是这样的:
硬件加速
说到移动网页应用，苹果移动设备是我们需要考虑的主要因素，因为iPhone和iPad目前非常流行。Safari 5(适用于所有平台)带来了硬件加速。如果你不熟悉这个功能，苹果是这样描述它的:
“Safari支持Mac和PC上的硬件加速。
通过硬件加速，Safari可以利用图形处理单元来显示计算密集型的图形和动画，因此HTML5和CSS3等标准可以在浏览器中流畅地提供丰富的交互式媒体。”
从本质上说，这意味着Safari可以使用额外的硬件设备功能来增强图形和过渡的呈现，从而保证更快的用户界面性能。
其他浏览器也增加了对硬件加速的支持——包括火狐4、Chrome 10和Opera 11——所以希望我们能很快看到它们集成到移动版本中，为我们所有人提供流畅的过渡和闪电般的快速图形渲染。
小心CSS3渲染性能
作为尽管CSS3很出色在美国，某些属性会降低网页的速度。例如，基于webkit的浏览器似乎确实如此斗争与阴影特别要注意的是，在问题解决之前，不要在界面的元素中应用过多的这些元素。
另一个例子是不透明度属性也会导致Safari的硬件加速渲染出现问题，因此可能值得避免过度使用该属性。的一个解决方法不透明度属性性能问题是在现代浏览器中使用RGBa值表示法来声明CSS颜色属性的能力;这其中的重要因素是一个在RGBa代表α．通过使用RGB值声明颜色，然后再追加一个值，我们可以完全控制元素的透明度，而不必使用不透明度CSS属性。
而不是:
.myElement {background-color: #000000;透明度:0.75;｝
我们可以使用:
.myElement {background-color: rgba(0,0,0,0.75);｝
通过使用RGBa值，我们可以为HTML元素实现同样的结果，因此，当您希望向HTML元素添加任何透明度时，请确保您使用的是最合适的方法。
考虑离线用户体验
最后，让我们简单讨论一下HTML5离线数据存储．
使用本地数据存储意味着一旦我们的数据下载到设备，我们可以使用清单文件，它允许我们在本地缓存某些文件。这意味着，当用户没有连接时，我们可以继续在客户端保存数据。
离线存储带来了很多机会。例如，我们现在可以尝试在互联网连接中断的情况下维持用户的体验，而不必为可能出现的互联网中断所带来的问题辩护。我们不允许在没有连接的情况下从服务器下载数据，但至少我们可以在客户端存储选项和用户决策，一旦网络连接恢复，我们可以将这些选项和用户决策同步回服务器。
结论
希望本文向您展示了一些最佳实践、技巧和技术，可以用于设计和构建快速加载和美观的程序用户界面为您的移动网络产品。如果你还在观望，我也希望这能鼓励你开始手机网页应用开发。有些人可能会认为手机网页应用不如iOS或Android上成熟的原生应用那么吸引人。
然而，移动web应用的最大优势是我们能够将它们构建成平台独立的——我们可以保持独立于设备和操作系统。我们可以在不需要额外的开发工具包和平台专用sdk的情况下制作网页应用，因此我们仍然可以使用日常开发工具。
进一步的阅读
- 2011年开发网络应用
- 如何制作HTML5 iPhone应用
- 10个在移动设备上测试网站的优秀工具
- 手机网页设计:值得吗?
- 移动网页设计:最佳实践
相关内容
- 为iPad设计网页应用程序
- 网页情境设计
- 相关类别:Web开发而且用户界面
