優化移動設備上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