移动Web界面构建最佳实践

　　自从智能手机问世以来，移动市场可谓是突飞猛进，这是大家有目共睹的。大多数技术型的站长都明白，没有他们珍爱的iPhone或Android设备，他们就不会赚到钱。我们曾给大家介绍过如何设计一个简结的移动互联网站，Web站点需要按照这些规范不断地进行调整，才能满足移动市场的需要。

　　移动风格的Web站点的需求的增长让站长们疲于奔命。为了满足移动设备的需要，Web站点的布局不得不进行更新，同时，样式也需要做一定的调整菜可以。下面，我会谈到一些最佳实践，以及如何重构你的站点，让它对移动设备来说更加友好。

　　让简单性贯穿始终

　　无论你使用什么设备，相对桌面平台来说，所有的移动硬件都不是按照某些标准来制造的。简单性是至关重要的，它可以决定你是留住了你的移动访问者，还是完全失去了这个市场。

 
Web站点想成功必须占领移动互联网

　　巨大的图形，视频，和过宽的页面内容一定会让访问者们望而却步的。当本次任务可以获得某些类型的信息的时候，访问者才会停留在你的Web站点上。他们希望可以在干扰较少的情况下，尽快地找到他们需要的信息。

可以尝试重新设计你的页面菜单的结构，然后为你的内容设计一个不同的布局。通常，对于一个优秀的移动界面的布局来说，一个单一的列就已经足够了。商标和重要的链接应该放在页面的最顶部，因为这是最经常访问的区域。

　　实现移动样式表

　　CSS是一门伟大的语言，主要用于编辑和添加新样式。字幕“C”是“cascading”的缩写，这意味着你可以在一个文件里应用样式，你也可以通过一个新文件导入或反复地更新一些属性。这为详细的定制提供了一个环境，同时，还提供了一些强大的模板。

 
手机上的CSS语言

　　设计新样式规则的过程并不是很复杂。实际上，它只要和重新设计整个HTML结构的任务配合的恰到好处就可以了，在这方面，无需花费过多的精力。下面是一个CSS导入代码的例子，它应用了2个不同的样式表。

   
   
   
   

    
    
    
    
       
    
    
    
    1
    
    
    
    . @
    
    
    
    import
    
    
    
     url(
    
    
    
    "
    
    
    
    /css/styles.css
    
    
    
    "
    
    
    
    );  
   
    
    
    
    2
    
    
    
    . @
    
    
    
    import
    
    
    
     url(
    
    
    
    "
    
    
    
    antiscreen.css
    
    
    
    "
    
    
    
    ) handheld;  
   
   
   
   

　　如果你打算提供一个可以适用于所有设备的，完整的移动页面，那么这种方法可以很好地发挥作用。它支持Windows Mobile 和 Symbian 操作系统 ，以及 iOS ，Android，BlackBerry和其他设备上的最古老的浏览器。虽然这种方法的向后兼容性很不错，但是，如果你希望获得更多移动用户的青睐，最好为特定的场合定义专用的CSS文件。

　　使用Media Queries

　　这个全新的功能集是和CSS3和HTML5一起发布的，它已经被添加到CSS库中了。通过对嵌入外部样式表的HTML代码的仔细观察，我们可以通过CSS选择器来操作“Media”属性。

 
使用Media Queries

　　这似乎有点令人困惑，因为这种方法从来没有在语义网中使用过。看看CSS的语法，我们可以打破HTML中的media queries只能输入数值参数的规定，这些参数通常用于确定如何显示页面的样式。我通过下面的例子证明了这种可能性。

　　通过定义“max-width”属性，解析引擎可以检查用户在其上显示一组相应的样式表的那个设备的宽度。

   
   
   
   

    
    
    
    
       
    
    
    
    1
    
    
    
    . 
    
    
    
    <
    
    
    
    link href
    
    
    
    =
    
    
    
    "
    
    
    
    /css/mobile.css
    
    
    
    "
    
    
    
     rel
    
    
    
    =
    
    
    
    "
    
    
    
    stylesheet
    
    
    
    "
    
    
    
     type
    
    
    
    =
    
    
    
    "
    
    
    
    text/css
    
    
    
    "
    
    
    
     
media
    
    
    
    =
    
    
    
    "
    
    
    
    only screen and (max-width: 767px)
    
    
    
    "
    
    
    
     
    
    
    
    />
    
    
    
     
   
   
   
   

 
手机上的互联网

　　上面的这个例子是一行代码，你可以使用这行代码来让iOS设备（例如iPhone 和 iPod Touch）包含一个样式表。“max-width”属性会检查整个屏幕的尺寸，只有当条件满足的时候，才会加载这个样式。“767px”是iOS设备在横向模式下的特定屏幕尺寸。这意味着我们可以把这些改变应用到所有屏幕宽度小于或等于这个尺寸的设备上。

　　虽然不是必需的组件，但是，你可以考虑把下面这个“meta”标签添加到你的“header”中。

   
   
   
   

    
    
    
    
       
    
    
    
    1
    
    
    
    . 
    
    
    
    <
    
    
    
    meta content
    
    
    
    =
    
    
    
    "
    
    
    
    width=device-width
    
    
    
    "
    
    
    
     
    
    
    
    />
    
    
    
     
   
   
   
   

　　在iOS设备上，Safari有一个伟大的“缩放”功能，它会破坏大多数版本的样式表。如果你想要设置动态的页面宽度，让内容动态地进行调整，这行代码可以防止样式被破坏。这行代码可以告诉浏览器，全屏的时候，应该一直在这个页面上应用我们的样式表。

　　总是提供一个“正常”模式

　　经过长时间的使用，一些访问者会把一个移动界面搞得混乱不堪。当这种情况发生的时候，开发者总不能去拜托每个访问者，让他们自己去整理这个界面吧！

 
手机访问FaceBook

　　最好的解决方案是提供一个可以把页面布局恢复到默认状态的链接。在大多数应用程序中，这个链接位于页面的最下方。放在那个地方不会产生不良的影响，而且，对于访问者来说，可以更容易地找到那个链接。Facebook 和 Digg就是这样做的。

　　很多Web服务都会实现的一种神秘的技术是把移动设备重定向到一个子域名——其中包含可供选择的各种版本的移动页面布局。例如，在Web 2.0应用程序中，“m.domain.com”是一个常见的域名。这样做，可以带来一些好处——例如：可以在独立的目录下存储配置文件。这是一种清晰的隔离，可以让Web应用程序的结构更加清晰。

 
Web应用程序

　　我们看到有越来越多的消费者开始使用移动数据和移动电话了，实际上，这个时代才刚刚开始。iPhone和Adnroid的销售额已经直冲云霄了，而且，并没有停下来的迹象。我们可以假设，在这个假期中，全球会卖出大量的移动设备，随之而来的就是移动网络的用户数量的迅猛增加。

　　这些技巧是进入移动开发领域的“敲门砖”。如果你想继续深入研究的话，还有很多其他的工具，可以用来检查“移动友好性”。随着市场的变化，一些趋势也会不断地进行变化，但是，个人用户的核心价值通常是不会改变的。真正成功的站长会按照这些核心价值来调整他们的运营方式，以适应他们的用户群。

　　原文名称：Best Practices for Mobile Web Interfaces

　　原文地址：http://webdesignledger.com/tips/best-practices-for-mobile-web-interfaces