用户使用移动设备的爆炸式增长给网络带来了革命。虽然为移动Web设计遵循与设计网站相似的原则，但我们必须考虑一些显著的区别。首先，目前的移动设备网络运行速度与宽带设备不一样。
此外，我们的移动网页设计也有无数种显示方式，从触摸屏到上网本，这使得即使是最小的桌面显示器看起来都像巨人。有些人可能会说，移动化还不是必要的，然而，没有人会不同意的是，这是网站制作和运营人员职业的一个不可避免的转变。如果你在考虑开发手机网页设计(或将现有的设计推广到移动Web上)，本文将帮助您掌握移动设计日益增长的趋势。
提供的设计
要制作一个适合移动设备的网站，需要考虑的早期元素之一是传递体验的方式。你想让你的网页设计是极响应．
分娩方式并发症
理想的情况是，每台设备都能简单地扩展和适应你现有的网站——有些设备，比如iPhone，能够做到这一点是因为它们内置的网络浏览器。但由于市场上的设备太多，跨设备的手机设计非常困难。如果你认为开发在大多数浏览器(如IE、Firefox、Chrome和Safari)上运行的网站是困难的，那么试试为iphone、黑莓、Palm Pres、android、摩托罗拉设备、诺基亚设备等开发一个网站吧!
对于基于桌面的网页设计，你只需要处理一种标记语言:HTML。但在移动Web上，也存在WML，以及苹果设备上的iOS和Android设备上的Android等平台。
WML过去限制了我们的设计创造力，但现在我们有了更多的灵活性。
调整网页设计以支持移动设备
将网站推向移动Web的一个选择是简单地创建或修改现有的代码和设计，使其在移动设备上很好地工作，或者考虑到移动设备，从零开始构建。使用一点CSS3(使用媒体查询)，例如，你可以根据用户的设备来调整布局的尺寸。问题是——你已经猜到了——不是所有的设备都支持CSS3。因此，您可能不得不求助于使用服务器端设备检测(例如。HTTP头来嗅出用户代理)或使用JavaScript(例如修改DOM以缩放布局)。
但是，有些设备可能不支持这些技术。
根据视口创建一个现有的布局规模就像CSS3的几行代码一样简单。
将移动用户重定向到网站的移动版本
交付移动设计的另一种方法是为手持设备构建特别优化的布局。您可以自己构建它，也可以使用Mobify等web服务。与第一种方法相比，这是更好的交付格式因为你可以在不影响桌面用户体验的前提下，专门为手机用户创造一种体验。
为此，您必须根据用户的浏览器代理对站点上的流量进行路由。例如，如果移动设备用户访问您的站点(yousitename.com)，那么他们将自动被重定向到mobile.yoursitename.com或m.yoursitesname.com。
一个独立的移动站点可能意味着为了更快的渲染而挤出额外的字节。
建议重定向
无论你决定走哪条路，重要的是:
- 访问者知道一个移动友好版的网站是可用的
- 游客可以可以选择介于手机版和普通版之间
虽然为最终用户强制重定向或更改布局似乎是个好主意，它会导致挫折，所以应该有方法让移动设备用户可以查看正常的网站设计，反之亦然。一个简单的解决办法就是提供一个链接到网站的任意一个版本。例如，在Six Revisions网站上，你可以在常规网站的页脚找到移动版的链接(m.sixrevisions.com)，反之，也可以找到正规的网站在移动版本的页脚提供。
无论你是移动设备用户还是桌面用户，你都可以访问这两个网站。
结构和代码
我们需要考虑的下一件事是在幕后进行的结构代码(标记和样式)。
- 您是使用WML之类的移动友好语言，还是XHTML移动配置文件?
- 你是先开发iphone应用，然后再开发Android应用?
- 移动设备网页浏览的成本和速度如何影响你的设计?
- 那么像HTML5和CSS3这样的现代标准呢?
这些只是我们在这个相对未知和未开发的领域工作时遇到的一些问题有效的web设计．
新设备可能不支持与旧手机相同的代码。
选择
为移动友好网站选择正确的语言是至关重要的;虽然智能手机革命之前的旧设备只支持WML(这是非常基本的)，但W3C开发了一个移动友好的XHTML版本(称为XHTML移动配置文件)．幸运的是，由于移动设备制造商提供完整而健壮的网络体验的速度很快，通常可以简单地使用常规HTML或XHTML-如果你不想被移动配置文件或WML阻碍。但是，需要强调的是，如果您觉得您的访问者使用的是旧手机，那么WML仍然值得考虑。
记住，你会添加更多网络僵尸我们总有一天要面对的。使用您的站点统计数据并执行一些网站分析帮你做出明智的决定。
每个浏览器都有自己的支持级别(这与设备本身无关)。
速度和成本(对用户而言)
最终，无论您选择哪种语言，您需要考虑的主要因素是速度和用户成本。众所周知，大多数移动互联网供应商都限制连接，因此带宽现在已经成为一种有限而宝贵的资源。更糟糕的是，在你居住的国家以外的漫游费可能会很贵，这是一个保持你的网站上所有东西的大小尽可能小的原因。
由于限额、成本和速度问题，需要尽可能保持标记干净、小且基于标准是很重要的。
移动网络提供商的漫游费可能会非常昂贵。因为采用新技术的速度，使用语言的能力和未来HTML5和CSS3并不是不可能的当然，要考虑到代码优雅地降级。
苹果等许多供应商提供固件升级，以改善设备的功能，这意味着较老的设备可能能够利用现代标准。但这种情况类似于IE6用户拒绝升级到像IE8这样的现代版本，因此，确保在实现之前总是进行研究测试，测试，再测试!
布局要点
如果说移动设备有一个明显的问题，那就是如何布局你的网页。移动设备中的设计布局是有问题的，因为:
- 移动设备有各种形状和大小
- 移动设备的不同的质量和分辨率
- 移动设备可能会，也可能不会支持缩放,其他的滚动内容
- 移动设备上的滚动会因为屏幕小而更困难吗
移动网页设计布局的目标是让用户找到(并快速阅读)他们正在寻找的内容的能力承受最小的负担。从本质上来说，你的布局对于你的手机展示的成功非常重要。
由于许多屏幕上的空间不足，可能需要单列设计。
简单
一个有效的移动网页布局的主要概念之一是简单。不用说，你在一个小空间里堆的信息越多，阅读就越困难，需要滚动的次数就越多。由于空间有限，多列布局常常会崩溃，因为满足内容需求所需的空间无法跨越视口的物理空间，除非被动缩放和缩放发挥作用。
因此，它是值得的使用单列布局。
避免滚动
一些移动设备，如iPhone和iPad，能够根据设备的方向(纵向或横向模式)调整网页的缩放，这减少了滚动的需要;但并不是所有的设备都有这种能力。
在手机上向下滚动一个内容丰富的页面并不是一种有趣的体验。我们都知道水平滚动不是一个好主意-特别是在iPad上，滚动条在你尝试滚动之前是不会显示的-所以在你的移动网页设计中要避免这种情况。
优秀的手机设计应该拥有简洁的布局和简单的导航选项。
导航和可点击对象的大小
另一个关键因素是导航和可点击区域的问题，这是触屏移动设备的主要问题。我相信，如果你们中有人的手很大，你们一定很清楚在手持键盘上打字有多痛苦，或者在不放大的情况下点击屏幕上的小东西有多困难。确保你的手机布局大型和易于按下的链接和可点击的对象将是简化经验的关键。
减少所需的点击量实现一个动作-这是一个很好的实践无论你是否在设计一个移动网站-在移动网站设计中都是非常重要的。
内容设计
随着浏览网页的成本和数据限额的出台(以及速度问题)，一个网站最昂贵的组成部分是内容。知道如何减少多余的图像、文本和媒体是50KB设计和2MB布局的区别所在。
在移动设备上，少即是多;少内容=更多的容易阅读。
文本内容
在一个网站的所有组成部分中，没有一个比文本扮演更重要的角色。但是，即使在手持设备上，内容也是王道——对滚动、小文件大小、快速可读性和带宽限制的需求意味着我们必须这样做重新设计我们的副本以确保它在这些设备上是有用的。如果你的设计只是对现有布局的修改/改编(第一种方法)，你可以决定隐藏不必要的文本、图像或媒体(即使它们仍然会被下载，这将提高可读性)。
真正的优势来自于一个独立的设计，你可以清除营销言论和过多的内容。
图片
当使用小屏幕，大CSS背景图片或字节重的时候信息图可能会有问题。虽然有些手持设备有更大的显示屏，这不是一个问题，虽然iPhone等设备上的图像放大能力不应该没有功劳，但不必要的视觉装饰肯定需要好好清理。
大图像会消耗大量带宽;考虑为更小的屏幕缩减它们。
降低分辨率和维度你的图像的大小可能在50KB和500KB之间——这是值得节约的带宽消耗。
视频/音频
在现代网络中，使用音频和视频是不可避免的。即使存在带宽问题，你也不应该停止使用这些更丰富的内容形式，因为它们可能很棒，特别是在拥有优秀视频/音频质量的手持移动设备上，如iPhone或iPod Touch。但就像其他事情一样，适度和明智的使用是关键。
在使用视频和音频时，你应该注意以下几点:
- 你使用的格式:注意Flash和其他在某些设备上不兼容的封闭格式
- 视频和音频文件大小:优化你的文件
- 不要自动下载视频/音频文件，除非有人要求:节省带宽的
- 不要自动播放”:这是恼人的;事实上，即使在移动设备之外也不要这么做
其他需要考虑的问题
最后，重要的是我们要解决最佳实践当涉及到脚本、插件(如Flash和Silverlight)和开发web应用程序时。知道什么该删减什么该保留将有助于提升你的手机用户体验，也能确保你的手机网站在大多数/所有设备上都能正常运行。
允许您的代码优雅地降级，因为您不能依赖任何技术的成功率。
移动设备与个人电脑的交互
需要指出的重要一点是，我们与手机设计屏幕的交互与普通电脑屏幕的交互是不同的。由于没有鼠标，我们的手也用手势来引导动作和反应，我们习惯的传统交互模式(例如在链接上方徘徊)就不一样了。必须考虑接口的更改如何影响这些功能。
专有技术和插件
苹果在其设备上屏蔽Flash的举动突显了依赖专有插件组件的问题——其他公司无法或不愿支持的封闭技术。
iPhone、iPad或iPod Touch不支持Adobe Flash，这是一个问题。苹果反对Flash的决定可能是未来的一个先兆，为移动设备制造商欢迎第三方技术融入自己的产品树立了先例。
其他技术，如Silverlight或Java可能不会像预期的那样工作-或者可能稍后也会被阻塞。虽然许多开发人员可能以此为借口不在这些平台上开发，但最好的做法就是这么做确保他们的手机网站优雅地降级。
如果无法上网(出于任何原因)，构建一个应用程序可能会很有用。
具有持久Internet连接的Web服务
尽管基于网络的服务的可用性非常好，但我确实担心，在当前移动设备网络的状态下，依赖于持续且可靠的网络连接将成为网页应用的一大问题。虽然已经有了一些进展本地存储目前，依赖于持续互联网连接的web应用程序可能会影响移动设备用户，因为它们的网络功能。例如，仍然存在“死区”——手机没有服务的地方——这一事实可能会影响用户的交互，比如他或她的信号在执行任务的过程中突然下降。
为你的服务开发一个既能离线又能在线运行的应用程序是值得考虑的阅读离线HTML5 iPhone应用程序教程)．
测试手机网站
如果你曾经去过一家卖手机的商店，你会完全震惊于屏幕、设备和合同计划的多样性。
有各种各样的模拟器可以模拟您的设计。未来将会有更多的移动设备加入到竞争中来，因为我们要听命于那些想要获得或维持他们的竞争优势,这些支持网络的设备不太可能实现标准化。
因此，我们的常识是尽我们所能，确保尽可能多的用户可以访问和使用我们的网站，以一种实用和愉快的方式。
使用移动设备模拟器进行测试
鉴于移动设备领域的多样性，毫无疑问，你应该在尽可能多的平台上测试你的设计。下面是一个模拟器列表，它们将模拟某些设备，以便您能够测试您的工作。
- Android模拟器
- 黑莓手机模拟器
- 点手机域名模拟器
- 移动版Firefox模拟器
- iPhone / iPad / iPod Touch模拟器
- 克朗代克河WML模拟器
- LG模拟器
- 微软设备模拟器
- 摩托罗拉模拟器
- Mozilla Fennec模拟器
- NetFront模拟器
- 诺基亚模拟器
- OpenWave模拟器(归档)
- Opera Mini模拟器
- Opera移动模拟器
- 棕榈模拟器
- Palm Pre / iPhone模拟器
- 三星Java模拟器
- 三星平台仿真器
- Windows Mobile模拟器
简单、小巧、快捷
虽然我在本文中讨论的大部分内容都是简单的建议，但常识是决定我们如何构建接口的主要因素。在56k的调制解调器时代，我们需要解决速度问题。我们也有分辨率和颜色有限的显示器。
许多isp限制了我们的带宽和互联网接入。如果你家里有电话打进来，一些互联网连接就会中断。所以对于老一辈的开发人员来说，你们应该很熟悉这个领域。
就目前而言——直到移动网络基础设施改善，连接广泛可用——简单、小巧、快捷是我们应该遵守的三大原则。
相关内容
- 手机网页设计:值得吗?
- 快速浏览手机网页设计
- 如何制作HTML5 iPhone应用
- 相关类别：Web开发而且网络技术
