优化移动设备上SharePoint 2013网站

优化移动设备上SharePoint 2013网站

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

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

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

在过去的几年里，使用移动设备浏览站点获得了极大的增加。

据一些研究者说。到2015年，使用移动设备訪问站点会超过电脑。移动设备有不一样的尺寸和功能。

因为电脑的体验对于移动用户来讲并很差。要想提高你的站点对移动用户的体验，有哪些选项可以使用呢？

提升跨设备用户体验

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

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

要提升一个面向公共的站点的用户体验有很是多办法。你选择哪个取决于能够适用于你的情况的不一样的因素。

适用于移动设备的网站

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