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

初发布于 24 Apr 2015 | in HTML, CSS

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

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

了解跨屏用户在您当前网站上的所见和所想。使用分析程序(如：Google Analytics)查看当前移动用户来自哪里、他们执行了哪些操作，以及他们与桌面设备用户的行为有何不同 (例如按设备类型来比较网站搜索查询)。

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

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 重新组织在一起。您应确保浏览器能缓存网页资源，让访问者无需在每次加载网页时都重新提取这些资源。