优化移动设备上SharePoint 2013网站

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

本文由SPFarmer翻译自Waldek Mastykarz的文章

移动市场在持续的增长。在不远的将来，使用移动设备浏览站点将会超过电脑。为了保证用户友好的体验，我们必须优化站点，以便在不同的设备上展示。

SharePoint 2013
提供了一系列的选项来优化在移动设备上訪问面向公众的站点。依据你的实际情况，你能够选择一个或者一系列组合的选项。

年，使用移动设备訪问站点会超过电脑。移动设备有不同的尺寸和功能。

由于电脑的体验对于移动用户来说并不好。要想提升你的站点对移动用户的体验，有哪些选项能够使用呢？

提高跨设备用户体验

为一个站点优化跨设备的用户体验是一个复杂的过程。不不过你要考虑不同设备的屏幕尺寸，你还要考虑他的功能(比方是触摸的还是用手写笔)和大小(1024x768
英寸的屏幕上可能就显示的非常糟糕).

当你计话提高你的站点在移动设备上的用户体验的时候。这里没有一个放之四海而皆准的过程能够遵循。你不得不研究你的用户是谁。他们使用什么样的设备，他们在你的站点上要做些什么。你还须要对你的站点要达到的效果有一个清楚的目标，它怎样能引导你的訪问者成为你的客户。

要提高一个面向公共的站点的用户体验有非常多办法。你选择哪一个取决于可以适用于你的状况的不同的因素。

适用于移动设备的网站

In the past, 过去。站点技术不像如今这么丰富。一种常见的做法是为移动用户提供一个单独的适用于移动设备的站点。来添加他们的体验。由于被提供在单独的URL,
比如 http://m.contoso.com,
移动站点的用户体验得以得到优化。在一些情况下，组织甚至更进一步的优化移动站点。当一个user訪问站点时，主站点会检測从移动设备訪问用的用户，自己主动重定向到移动版本号的站点。

不难想象。建造和维护两个全然不同的站点。不仅花费巨大，并且也消耗时间。每个更新都要分别运行。即便如此，当今的移动设备多种多样。问题还是没有得到解决。一个单独的移动站点，可以满足全部不同尺寸的移动设备吗？

移动apps

移动市场中，apps正在迅速增长。通过使用设备自带的功能。你能够制作丰富的移动apps来支持不同的用户需求。

使用移动设备自带的功能能够提供最好的用户体验。能够通过訪问 Buildmobile
apps for SharePoint 2013继续了解。

为全部的不同尺寸的移动设备制作一个独立的apps是非常现实的一件事情。可是，即使移动apps对于支持特定的用户使用有非常大的价值，可是仍然有须要在移动设备上訪问站点时候，有良好的用户体验。

响应式网页设计

不同于为不同的移动设备制作不同的站点，我们做一个可以自己主动适用于不同设备的站点怎样？

响应式站点设计，是一个把设计和内容分开的概念。通过使用浏览器的查询media的功能，再基于不同设备的屏幕分辨率，你能够载入不同的css，来满足站点能够友好的展示。由于css有局限，你能够使用JavaScript
进一步优化界面和用户交互，能够訪问Implementingyour responsive
designs on SharePoint 2013获取很多其它信息。

从搜索引擎优化(SEO)
的角度看,响应式网页设计是一个推荐的方式来优化面向公共的移动站点。

毕竟，由于全部的设备都使用相同的html，搜索引擎仅仅须要爬网一次就足够了。并且可以满足每个设备的搜索结果都是一样的。

假设你从最開始就開始计划，那么在一个面向公共的站点上实现响应式设计是相对easy的。除了上面说的。响应式设计另一个非常大的优点就是。你仅仅须要维护站点一次，就能够满足不同的设备。

以下的图片非常清晰的显示出， ContosoElectronics
站点在不同的设备上。通过响应式设计呗显示。

第一张图是显示在电脑桌面上。第二张图是显示在不同的移动设备上。

图片一

图片二

SharePoint 2013 device channels

SharePoint 2013中的一个新的功能是 device channels .
你能够使用device channels
在优化一个网站在不同设备上的显示。

通过制定不同的channels而且关联不同的设备，你能够通过使用不同的masterpage，来优化在不同设备上的显示。

能够查看 How
to: Createdevice channels in SharePoint 2013获取很多其它信息。以下的图显示了在SharePoint 2013中。对一个面向公共的站点。对device channels做的设置。

Figure 3. Devicechannels configured for a public-facing website built on SharePoint 2013

然后响应式设计使用设备的屏幕尺寸来决定显示层。SharePoint 2013通过使用设备上的浏览器的标识来决定使用哪个显示样式。

取决于你站点訪问者所使用的设备，管理不同的设备和体验也会变得复杂。可是使用device
channels,在控制不同设备的显示时候。你能够得到更大的灵活性。

使用device channels的另外一个优点是，你能够对不同的设备公布不同的内容，而对于响应式设计来说，它是对不同的设备公布同样的内容。通过使用device channels,你能够加入其它的优化到你的站点。比方使用renditions功能在又一次定义图片和视频的大小。从而临沂不提升了你的站点的对应速度和用户体验。

跟多信息请查看 Howto:
Manage image renditions in SharePoint 2013.

在这么多选项里。我们应该使用哪一个来获取更好的结果呢？

在SharePoint 2013里，提升面向公共的站点的用户体验

首先，知道SharePoint2013支持上面所说的提升移动设备用户体验的全部方法非常重要。无论是你想为移动制作一个单独的网站。还是在一个apps里支持特定的用例，还是响应式设计，还是device
channels, 在SharePoint 2013里都能够基于你的站点实现。

比方。使用cross-sitepublishing
功能,你能够非常easy的公布统一管理的内容到主网站和移动网站。使用Search REST API,你能够公布内容到你的移动app，假设你在寻找在不同设备上显示优化过的网站，SharePoint
2013提供了非常多功能能够帮助您。

取决于你想要达到的目标。在这些全部的技术里面。选择最适合你的一个或者一组功能。在你对在独立的app里支持一些复杂的流程的同事，保证使用不论什么设备的人可以訪问站点上的全部信息仍然是有价值的。

在大多数情况下。推断特定的优化技术是否有价值非常easy。可是稍稍难一点的选择(一部分是由于这两个技术相似点非常多)，是使用响应式设计还是device
channels 来优化你的站点在移动设备上的显示。

响应式设计和device channels对照

在怎样优化一个站点可以在多个设备上友好的显示这个角度上来说，响应式设计和Device Channels非常相似。在同样点之外，另一些重要的点不同,以下的表是对两个方式的对照：

Device channels	Responsive web design
Device management	Property management
不同的channel使用不同的HTML	全部的设备使用相同的HTML
很多其它管理工作 (支持新设备)	适应未来 (设备尺寸)
更灵活	受限于CSS 和设备功能
须要自己定义的 Vary-By User Agent response	搜索引擎更倾向于这样的

Table 1. device channels 和响应式设计的对照

应用用户体验

首先。device channel
和响应式设计在检測哪个体验应该被展现给用户的时候。方法是不一样的。响应式设计界使用屏幕的石村来决定怎样渲染内容和布局，Device channels,使用还有一种方法,
通过浏览器的标识来显示适合的channel。

响应式设计能够通过浏览器尺寸的大小来决定怎样展示内容。而device channels在同一种设备上。无论浏览器尺寸怎样。都显示同一样的内容。使用device channels
会有非常大的优点。比方，无论屏幕分辨率怎样，浏览器窗口大小怎样。用户和系统支持人员都能看到相同的界面。

Page markup

Device channels 和响应式设计的还有一个差别是页面的内容是怎样被解析的。

响应式设计仅仅改变显示层.尽管你能够用css来隐藏页面的一些部分。当页面载入的时候。它们仍然显示在页面的代码里。当使用device
channels时,你能够使用不同的master pages。来确保仅仅有须要的部分被显示给用户。

除此之外，你能够使用device
channel panels t来一进步需控制页面上显示的元素。

尽管device channels
在同意控制显示的html上更有优势。并因此给站点带来更好的对应速度，须要更大的工作量来使因特网上的搜索引擎来正确树立一个站点针对不同的设备的不同的版本号。你能够通过使用Vary-By UserAgent response header来达到目的。可是这个须要手动的做设置。

预防未来的问题

响应式设计通过使用浏览器的大小来区分不同的体验。这事一种健壮的做法。并且会使市场上出现一个新的设备时显示的非常糟糕的情况非常低。即使显示不好。也是由于一些那些新设备的一些特定的功能。可是。反复一遍，这样的几率非常低。

SharePoint 2013 device channels
基于浏览器来打开站点。

这个方式有两个挑战：首先,
有时候，非常难区分安装在不同功能的设备上的同样的操作系统的同样的浏览器。

然后,假设一个新的设备出现了，你还须要验证你的站点在这个设备上被分配了正确的device channel
。

为优化用户体验选择正确的途径

尽管响应式设计和device channels非常相似,他们的功能。以及对站点在移动设备上优化显示的时候的影响不同。由于它俩非常相似，因此选择起来会非常困难。

为什么不把他们连个的有点结合在一起使用呢？

组合使用响应式设计和device channels

一个有意思的值得考虑的场景是。把响应式设计和device channels组合在一起使用，来获取两种方法的长处。

当把响应式设计和device channels组合在一起使用时，你能够使用响应式设计创建主要的跨设备的体验。使用响应式设计能够完毕80%甚至90%的优化。剩下的，基于特定的设备的功能的，—应该使用device
channels 和 device channel panels来实现。

About the author

Waldek Mastykarz is a MicrosoftSharePoint Server MVP and works as a SharePoint consultant at Mavention. Waldekshares his enthusiasm about the SharePoint platform through his blog, articlespublished in online and
off-line magazines and on MSDN SharePoint Forums. He isalso a speaker at community events such as the SharePoint conference in London,SharePoint Connections Amsterdam, and SharePoint Saturday. In addition to hisjob at Mavention, Waldek is a Virtual Technology
Solutions Sales Professionalfor Microsoft Netherlands. In this role he helps answer customer questionsaround SharePoint Web Content Management (WCM).

Blog: http://blog.mastykarz.nl

Twitter: http://twitter.com/waldekm

Mavention: http://www.mavention.com