Sharepoint 2013 Feature-Fokus “Mobile Devices” - Teil 1: Contemporary View und andere integrierte Mobile-Features

Mobile Views at a GlanceMit der rasanten Verbreitung von Smartphones und Tablets kommen unterschiedlichste Displaygrößen, aber auch neue Browser-Typen als Sharepoint-Clients ins Spiel. Sharepoint 2010 bot hierzu den Mobile View – eine für durchschnittliche Smartphones optimierte, abgespeckte Darstellung von Sites und Listen. Mit Sharepoint 2013 baut Microsoft die Anbindung von nicht-PC-Endgeräten massiv aus und liefert gleich mehrere neuen Techniken, mit denen eine möglichst breite Palette an Geräten unterstützt wird.

Die Maßnahmen und Strategien zur Anbindung mobiler Geräte in Sharepoint 2013 lassen sich sich in folgende Themenbereiche gliedern:

I. Mobile Browsing Redirection
II. Mobile Views Out-of-theBox
III. Responsive Designs
IV. Device Channels – angepasste Mobile Views
V. Mobile Apps

I. “Mobile Browser Redirection” – Smartphone-Weiche

Mobile Browser Redirection - hier in den Site-Settings müssen sie für jede Site aktiviert werdenDie neue Funktion “Automatic Mobile Browser Redirection” in Sharepoint 2013 bildet die Voraussetzung für eine bessere Unterstützung verschiedener mobiler Endgeräte – ob mit Android, iOS, Windows Phone, Blackberry und andere. Aktivieren lässt sie sich  über die Site Features in den jeweiligen Site Settings (siehe Screenshot). Ist die Umleitung aktiviert, dann läuft gemäß dem Flussdiagramm rechts der Entscheidungsprozess für das adäquate Rendering der angeforderten Seite.

Mobile Browser Redirection erkennt Smartphone-TypÖffnet ein Besucher eine solche Site mit seinem Smartphone, dann prüft der Server also zunächst, ob die Redirection aktiviert ist. Falls ja, wird der Browser auf HTML5-Fähigkeit abgefragt. Falls auch das zutrifft, wird die Site im Contemporary View ausgeliefert. Andernfalls kommt der simplere Classic View zum Einsatz.

II. Mobile Ansichten Out-of-theBox

Sharepoint 2013 bietet drei unterschiedliche Darstellungen für mobile Geräte: den alten Classic View, den neuen Contemporay View (zu deutsch: ‘zeitgemäße Darstellung’) und den klassiscen PC View.

1. PC View (Full Screen UI)Mobile Browser - PC View zeigt Sharepoint-Sites in der Originaldarstellung

Der PC-View stellt Seiten im Originallayout dar – also genau so, wie sie ein PC-Browser anzeigt. Zwar passt hier immer nur ein Ausschnitt der Seite auf den Bildschirm, doch diese Darstellung ist in manchen Situationen erforderlich, wenn zum Beispiel Navigationselemente im Classic oder Contemporary View fehlen. Der PC-View lässt sich auch über den Command-Button des Contemporary View aktivieren.

2. Classic View

Den Classic View gab es bereits in Sharepoint 2010, und er bildet auch in Sharepoint 2013 den kleinsten gemeinsamen Nenner. Er kommt immer dann zum Einsatz, wenn ein Smartphone-Browser nur HTML (oder CHTML, WML und ähnliche Markups) rendern kann. Charakteristischer Nachteil des Classic View sind seine kleinteiligen Navigationselemente, die als fingerunfreundliche Textlinks erscheinen.

3. Neuer Contemporary View

Mobile Views - Classic versus ContemporaryDer neue Contemporary View ist optimiert für die Seitendarstellung in Mobile-Browsern aktueller Smartphones. Charakteristisch dafür sind die fingeroptimierten, großen Navigationselemente, welche Microsoft ‚Tap-open-links’ nennt.

Der Contemporary View ist bei folgenden Seitenvorlagen (Site Templates) automatisch aktiviert: Team Site, Blank Site, Document Workspace, Document Center und Project Site.

Contemporary View funktioniert auch auf dem iPadSystemvoraussetzungen: Der Contemporary View verlang folgende Ausstattung am Endgerät: Internet Explorer 9 (ab Windows Phone 7.5), Safari 4.0 (iOS 5.0) und Android-Browser ab der Version 4.0.

Anpassung an Tablet-Browser: Obwohl auf Smartphones hin optimiert eignet sich der Contemporary View auch sehr gut für viele Tablet-Plattformen, wie im Bild rechts zu sehen ist. Hier ist ein und dieselbe Teamsite zu sehen – links im Contemporary View auf dem iPad, rechts im PC-View im Firefox. Ob der Contemporary View tatsächlich auf einem Tablet funktioniert, hängt von der Identifizierung des Browsers über den User Agent String ab. Falls ein Tablet-Browser nicht akzeptiert wird, kann das Rendering im Contemporary View auch erzwungen werden. Dazu muss am Sharepoint Server lediglich die Mobile View Redirection angepasst werden, eine Anleitung dazu liefert folgendes Technet-Dokument: Configure the browser definition file in SharePoint 2013

3. Die Highlights des Contemporary View

Neu im Contemporary View - Interaktion mit dem Command Buttona. Command Button: Als Interaktionsmöglichkeit steht immer ein Command-Button rechts oben bereit. Er ermöglicht folgende Befehle:

  • Switch to PC View schaltet auf den Desktop-Browser-Modus um
  • Sign in as Different User erlaubt die Anmeldung mit einem anderem Konto
  • Sign out führt die Abmeldung des Benutzer durch
  • Close schließt das Command Button Menü und kehrt auf die Sharepoint-Seite zurück

Neu im Contemporary View - Navigations-Funktionenb. Navigation-Fenster: Erscheint beim tappen auf den linken Bereich der Titelleiste und präsentiert Navigationshilfen wie ‘Breadcrumbs’ (Navigationspfad), Top-Navigation und Quick-Launch-Navigation aus der Desktop-Ansicht der Site. Ebenfalls enthalten ist der Menüpunkt ‘All Site Content’ für die Anzeige des gesamten Seiteninhalts.

Neu im Contemporary View - Einfachere Bedienungc. Listen-Paginierung: Auch die Darstellung von Listen wurde im Contemporary View überarbeitet und präsentiert sich seitenweise mit jeweils 20 Elementen in Form einer Seitennavigation. Damit entfällt bei lange Listen mit Dutzenden Elementen das lästige Scrollen.

 

III. Responsive Design: Automatische UI-Anpassung

Responsive Designs - ein Seitendesign, drei unterschiedliche DarstellungenWährend die bisher gezeigten Optionen auf geräteabhängig vordefinierte Seitendarstellungen beruhen, eröffnen sich mit dem ebenfalls neuen “Responsive Design” von Sharepoint 2013 flexiblere Möglichkeiten der Seitendarstellung. Bei dem aus dem Webdesign her bekannten Responsive Design handelt sich um Methoden einer adaptiven Seitengestaltung, bei denen sich die Inhalte dynamisch an die Größe des Bildschirms am Endgerät anpassen.

Responsive Designs - dynamische Anpassung des Designs an die aktuelle BildschirmgrößeDie Basis dafür liefern HTML5 und CSS3. Beim Rendern der Seite im Browser wird ständig die Größe des Bildschirms gemessen, das auf CSS basierende Design reagiert darauf und passt die Darstellung entsprechend an. Somit ist es möglich, mit einem einzigen Site-Template alle denkbaren Endgeräteformaten zu bedienen. Das rechte Bild zeigt Codebeispiele, die zwischen vier verschiedenen Darstellungen unterscheiden – eines davon zum Beispiel ist speziell auf das iPhone 4 optimiert.

Artikelübersicht:

  1. Sharepoint 2013 Feature-Fokus “Mobile Devices” – Teil 1: Contemporary View und andere integrierte Mobile-Features
  2. Sharepoint Feature-Fokus “Mobile Devices” – Teil 2: Device Channels für geräteoptimierte Ausgabe, BI, Push & Location
wm@sharepoin