移动网页设计** 佳技术与实践
根据预测,到2013年底,互联网互联网用户将超过17亿移动。有了这些数字,Web设计师和开发人员必须学习移动设备的** 佳开发和设计实践。
在大多数情况下,您不需要学习任何新的移动网站设计技术。但是你需要用一种新的方式来看待网站设计,这比标准浏览器的设计要严格得多。为了解决移动网站设计中的问题,获得与标准网站相同的方便和有用的结果,需要一些创造性的问题解决技巧。
移动熟悉可用硬件和软件的** 佳网页设计技能和实践
移动手机和移动设备平台在操作系统、屏幕大小、分辨率和用户界面上有很大差异。要决定您的站点需要哪个平台优化,熟悉可用的不同选项是很有帮助的。
** 常见的操作系统是Windows Mobile,iPhone平台,Palm OS,移动Linux,Symbian操作系统,黑莓平台和安卓(由于Verizon和谷歌之间** 近的协议,Android将变得更大)。还有其他针对特定手机的专有系统,例如一些Verizon手机和特定品牌的手机。你可以根据网站的受众类型来估计你的用户** 有可能使用哪些操作系统。如果访问者主要是业务用户,则需要优化Windows Mobile和黑莓设备站点。如果您的用户是年轻、时尚或具有更多技术知识,您希望您的网站是iPhone和Android设备优化。无论如何,确保你的网站至少在大多数移动平台上可用。
移动浏览器是另一个需要考虑的因素。一些常见的浏览器包括Safari浏览器iPhone、Android、Opera移动、WebOSbrowser(手持设备)、黑莓浏览器和Internet Explorer移动Windows移动设备。在诺基亚和其他移动品牌上也有更多的浏览器。一些浏览器基于专有代码,而其他浏览器则基于WebKit(Android、Safari)、gecko(Fennec、Mozilla浏览器)或其他通用平台。
** 后,您需要考虑网站访问者** 常见的屏幕大小和分辨率。你的网站应该使用访问者可能使用的** 广泛的移动设备。标准手机的常用分辨率包括101times;80像素(索爱手机),128像素times;128像素(三星手机),和120times);160像素(摩托罗拉手机)。智能手机iPhone320times还有很多工作要做;480像素屏幕HTCtouch pro有480times;640像素屏幕(有320Palm Pre和320times黑莓480像素屏幕风暴(times与360;480像素屏幕(HTC和times的金星已高达800times;480像素屏幕(这些屏幕可以轻松显示标准网站。
移动网页设计** 佳提示与实践简化!
在大多数情况下,你的移动网站应该比你的标准网站简单。唯一的例外是如果你的标准站点已经很简单了。从站点中删除图形元素通常是优化在移动设备上显示图形元素的有效方法。找到简化网站设计和功能的方法。这可能意味着重新调整您的菜单,消除图像,在多个页面上分解文本,或重新工作网站的布局和功能。
使用有效标记
考虑到可能访问您的站点的潜在操作系统和浏览器的多样性,Web标准变得更加重要。标准浏览器在很大程度上可以容忍糟糕的代码,但是使用移动浏览器浏览器,您通常不会有这样的余地。确保代码验证尽可能简洁明了。
用户访问选择标准网站
根据访问者使用的设备类型,他们可能只想使用您的标准网站。这对于许多性能更好的智能手机和iPhone来说尤其如此,它们在标准网站的出色发布上没有问题。让你的移动访问者选择访问一个标准站点,即使它只是一个通过页脚的链接(我们大多数人倾向于看到它)您还可以让他们选择返回移动站点而不必使用后退按钮。
使用单独的移动主题
同时优化你的手机主要用途网站有时也有道理,往往用一个手机主题就比较容易,而且可以做** 低移动的设备更换CSS。一个专门的移动主题意味着你可以真正考虑访问者将如何查看你的网站,并给予它优化。一些网站为普通移动设备和iPhone用户设计了优化。
限制滚动到一个方向
当使用标准浏览器时,在网页上向多个方向滚动确实很烦人。当您从移动设备访问时,这不会改变;事实上,情况更糟。使用触摸屏时,很容易意外地以错误的方式滚动(水平滚动而不是垂直滚动,反之亦然)。如果你的网站只向一个方向滚动,那么你就消除了这个问题的可能性。
不要使用弹出窗口或打开新窗口。
根据具体的平台,弹出的新窗口可能会影响浏览体验,所以不要使用它们。如果您确实需要在新窗口中打开某些内容,请务必提醒移动访问者它将打开。
移动** 佳网页设计技术和实践尽量减少图像的使用
只使用你需要传达信息的图片。标志很好,就像大多数图标一样。与网站内容无关的图片也不错。但要消除那些只为了好看的图像。它们在移动设备上通常不好看,为什么还要麻烦呢 有时他们只是让你的网站看起来更糟或导致奇怪的滚动或布局问题。
优化您的导航
许多移动设备有触摸屏界面,所以记住这一点。这意味着您的链接的可点击区域更大,使按钮更大,并为连接带来更多空间。尝试点击微小的、几乎看不见的链接是一件非常痛苦的事情,但这并不能让你每次想点击某个东西时都感觉更好。为改善这些导航问题,许多网站采用完全独立的移动导航设计,触摸屏或非鼠标输入设备优化。
不要依赖Flash或JavaScript
并非所有手机和移动设备都支持Flash或JavaScript。即使他们这么做了,也不能** 它是** 新版本。如果访问者使用iPhone,则忽略Flash。确保移动站点上的所有重要信息和功能都是正常的(x)HTML/CSS。否则,会有大量访问者无法访问重要内容。
包括尽可能多的内容从您的标准网站。
有多少次你从手机移动到** 喜欢的网站,然后意识到你无法访问你想访问的部分 总是这样。在移动网站上包含尽可能多的原始网站内容。除了使其可用外,还要确保到达它的导航路线保持相对不变。
移动网页设计的** 佳技能和实践确保正确的工作将得到执行
不要只发送移动用户主页。没有什么比点击一个链接更烦人的了,无论是在搜索引擎结果中还是在另一个网站上,如果你在移动设备上,它都会被重定向到主页。如果您的站点自动检测到访问者是否来自one移动浏览器,请确保将其设置为将访问者发送到他们试图访问的链接,否则他们可能会离开并且永远不会回来。