谷歌：打造面向跨屏时代用户的网站

发布时间2014年3月，时隔近一年才看到，落后了。把自己觉得有用的信息摘录在这里。

您的跨屏策略应符合客户及业务的需求。您希望在自己的网站上实现什么样的目标?您的客户期望获得什么?

了解跨屏用户在您当前网站上的所见和所想。使用分析程序(如 Google Analytics(Google分 析))查看当前移动用户来自哪里、他们执行了哪些操作, 以及他们与桌面设备用户的行为有何不同 (例如按设备类型来比较网站搜索查询)。如果您运营的是电子商务网站, 您还可以检查转化率并按设备类型来进行渠道分析。

如果数据显示智能手机用户经常访问您网站上的某个内容区域, 您就可以将该区域置于移动网站上的显著位置。另一方面, 如果在您网站上某些版块的移动用户跳出率较高(即用户到达您的网站后马上就离开), 您就应在新设计中尝试修正相关问题。还需要注意的一点是, 对越来越多的人来说, 移动设备已经成为他们唯一使用的设备。因此, 请勿将移动设备视为“附加”的屏幕, 并确保移动网站拥有完整的功能。

1. 营造熟悉体验

一方面保留用户在桌面设备熟悉的功能，同时营造适合移动设备和平板电脑的使用体验。

2. 考虑用户所处的环境

智能手机的移动用户可能希望了解店铺位置或电话号码。还有一些用户可能就在您的店里，想要查看相关商品的评价，他们能轻松地在您的移动网站上找到这些信息吗？

3. 充分发挥移动的作用

如何用移动设备的特有功能（如GPS定位）来支持我们的价值主张？

针对所有屏幕设计网站的方法有许多。需要考虑的因素包括费用、所需的时间、可用的人力和基础架构,以及客户的需求。

无论选择哪种方法，最好遵循一条基本准则：所有网站都使用同一个域名，如：example.com 使用一个网域有助于在您的用户中树立品牌形象和提升网址影响力。

以下介绍打造面向跨屏时代用户网站的三种基本方法：

1. 自适应网站设计

简称RWD，是一种为所有平台使用一个HTML代码库的智能设计技术。用户浏览网站所用的所有设备都是读取同一网址上的相同代码。网站内容会根据预定义的断点和流体网格,自行调整大小以适应用户使用的屏幕。

优点：一个网址呈现所有内容，流畅一致的用户体验(一些设备专属的选项可通过服务器端程序添加)，灵活适应屏幕方向，无任何重定向（加载时间缩短）, 使用指定的断点和流体网格, 可轻松扩展到新平台和新设备

缺点：需要充分的前期规划，开始费用较高，但维护所需资源较少

注意: 常见错误是数据量膨胀。不要让移动用户下载适用于大屏幕和高网速环境的全尺寸图片。应尝试减少 HTTP 请求, 缩减 CSS 和 JavaScript。先加载看得见的内容, 推迟加载所有其他内容。

2. 动态内容投放

网络服务器会检测访问者使用的设备类型, 然后呈现专门为该设备设计的定制网页。

优点：量身定制用户体验，方便更改（开发者只需单独调整一种屏幕尺寸的内容或板式），更快加载（通过简化内容），同一个网址

缺点：使用多种定制网页意味着相同内容会有多套，难以保证所有设备专属网页上的内容更新。是一种较为耗费资源的解决方案，适合经常需要为一种设备调整显示方式的公司。

注意：服务器需要运行脚本以识别设备。如果脚本过时，就会导致一些错误，比如向平板电脑用户推送为手机设备优化的网址。或是错误的屏幕方向。

3. 单独的移动网站

在检测到移动访问者时，您的系统会将他们重定向到为移动设备优化的网址。

优点：量身定制用户体验，方便更改（变更仅限于移动版网址）

缺点：多个网址（必须在移动网站和非移动网站间小心进行重定向和集成，才能共用网页），多套内容

相对简单费用低廉，适合网站需求较简单的小型企业。

营造良好的用户体验

版式

1. 以方便触摸为原则， 对人的手指来说, 48dp(密度无关像素)是推荐使用的最小触摸目标,目标之间应留有至少8dp的间距

2. 最小的字号应达到12像素, 凡是小于此值的字体 都会让用户难以阅读。请确保选择简洁易读的字体。如果可能, 尽量避免以图片承载文字

3. 避免鼠标悬停，在平板电脑或智能手机等触摸屏上, 用户的手指无法像鼠标一样悬停， 建议使用按钮, 让用户可以通过点按来显示相应菜单

4. 不要使用弹出式窗口，不要使用插页, 而应将安装提示嵌入网站

5. 使用描述性按钮

内容

1. 不要将桌面版网页上的所有内容挤入移动版网页，善于缩减内容。

2. 不要削减核心内容，而应对内容进行重组，使其适应移动设备屏幕。

3. 不要隐藏关键操作， 确保让用户能快速找到他们希望使用的所有关键功能。如果您是零售商, 您应在显著位置提供产品搜索和购物车等关键功能(以及适合移动用户使用的工具, 如店铺定位工具)。 请添加完整版网站的链接, 以备有些移动用户喜欢使用完整版网站。

4. 确保跨屏网站上的媒体文件能够在您希望覆盖的设备上正常播放。

5. 简化结账流程

速度

速度通常可以提升访问者的参与热情, 留住更多客户并吸引他们转化。网站速度是 Google 搜索依据的排名指标之一。

1. 移动用户设备的处理能力是有限的。他们的带宽可能也不稳定。为帮助他们加快速度, 请减少网页上会导致额外的 HTTP 请求的元素

2. 虽然智能手机显示性能提高，但尺寸过大的图片不但会浪费时间, 还会浪费处理能力。请向每种设备投放合适的图片尺寸。

3. 应尽量缩减代码, 并考虑将 CSS 重新组织在一起。您应确保浏览器能缓存网页资源, 让访问者无需在每次加载网页时都重新提取这些资源。