码迷,mamicode.com
首页 > 移动开发 > 详细

在移动设备上优化SharePoint 2013站点

时间:2014-12-18 22:23:07      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:sharepoint   device channels   

在移动设备上优化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,搜索引擎只需要爬网一次就足够了,而且能够满足每一个设备的搜索结果都是一样的。

如果你从最开始就开始计划,那么在一个面向公共的网站上实现响应式设计是相对容易的。除了上面说的,响应式设计还有一个很大的好处就是,你只需要维护网站一次,就可以满足不同的设备。

下面的图片很清晰的显示出, ContosoElectronics 网站在不同的设备上,通过响应式设计呗显示。第一张图是显示在电脑桌面上,第二张图是显示在不同的移动设备上。

bubuko.com,布布扣

图片一

bubuko.com,布布扣

图片二


SharePoint 2013 device channels

SharePoint 2013中的一个新的功能是device channels. 你可以使用device channels 在优化一个站点在不同设备上的显示。通过制定不同的channels并且关联不同的设备,你可以通过使用不同的masterpage,来优化在不同设备上的显示。可以查看 How to: Createdevice channels in SharePoint 2013获取更多信息。下面的图显示了在SharePoint 2013中,对一个面向公共的网站,对device channels做的设置。

bubuko.com,布布扣

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 功能,你可以很容易的发布统一管理的内容到主站点和移动站点。使用Search REST API,你可以发布内容到你的移动app,如果你在寻找在不同设备上显示优化过的站点,SharePoint 2013提供了很多功能可以帮助您。

取决于你想要达到的目标,在这些所有的技术里面,选择最适合你的一个或者一组功能。在你对在独立的app里支持一些复杂的流程的同事,保证使用任何设备的人能够访问网站上的所有信息仍然是有价值的。

在大多数情况下,判断特定的优化技术是否有价值很简单。但是稍稍难一点的选择(一部分是因为这两个技术相似点很多),是使用响应式设计还是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

 

在移动设备上优化SharePoint 2013站点

标签:sharepoint   device channels   

原文地址:http://blog.csdn.net/spfarm/article/details/42011535

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!