Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

SharePoint wird Responsive - mit nur wenigen PowerShell-Befehlen

Den SharePoint Server auf allen Geräten in einem kla­ren und struk­tu­rier­ten Design dar­zu­stel­len, war bis­her nur ein­ge­schränkt mög­lich. Microsoft hat zwar eine mobile Ansicht für den SharePoint bereit­ge­stellt, jedoch war diese nicht immer im Sinne der Anwender.

Durch die Arbeit eini­ger flei­ßi­ger PnP Entwickler (Patterns and Practices) kann der SharePoint mit weni­gen PowerShell-Befehlen jetzt mit einem Responsive Design ver­edelt wer­den.

Was bedeutet überhaupt Responsive Design?

Ein Responsive Webdesign ist der gra­fi­sche Aufbau einer Seite, wel­che sich an die Anforderungen des jewei­li­gen Gerätes anpasst, mit dem die Seite betrach­tet wird. Bei dem ange­pass­ten Aufbau der Seite wird beson­ders auf die Navigation, die Seitenspalte sowie die Texte geach­tet. Wichtig dabei ist, dass alle Elemente auf dem Gerät dar­ge­stellt und ver­wen­det wer­den kön­nen.

Wo besteht der Unterschied zwischen einem Responsive Design und einer mobilen Seite?

Mobile-Ansicht einer Dokumentenbibliothek
Mobile-Ansicht einer Dokumentenbibliothek

Der Hauptunterschied zwi­schen einer mobi­len und einer Responsive Darstellung ist die Anzahl der vor­han­den Templates für den Webauftritt.

Typischerweise wer­den bei einer Mobilen-Ansicht ein oder meh­rere Templates ver­wen­det, um die Darstellung auf den ver­schie­de­nen Geräten zu gewähr­leis­ten.

Bei einer Responsive Darstellung ist das Ziel, mit einem Template alle Geräte bedie­nen zu kön­nen und Inhalte dar­zu­stel­len.

Der Vorteil liegt klar auf der Hand: die Pflege von meh­re­ren Templates ent­fällt. Alle Anpassungen müs­sen nur an einer zen­tra­len Stelle durch­ge­führt wer­den und sind somit für alle Geräte ver­füg­bar.

Die Technik hinter einem Responsive Design

Als tech­ni­sche Basis die­nen die Webstandards HTML5, CSS3 (Media Queries) und Javascript. Durch die in CSS3 ein­ge­führ­ten Media Queries ist es mög­lich, das Zielgerät abzu­fra­gen und das Design direkt auf das Gerät anzu­pas­sen.

Mögliche Eigenschaften, wel­che abge­fragt wer­den kön­nen, sind:

  • Breite und Höhe des Browserfensters
  • Breite und Höhe des Gerätes
  • Orientierung (Quer- oder Hochformat)
  • Bildschirmauflösung

Wie kann ich meinen SharePoint ein Responsive Design verleihen?

Wie in der Einleitung schon beschrie­ben, hat eine Gruppe von Entwicklern sich dem Thema ange­nom­men und für den SharePoint ein Responsive Paket erstellt. Dieses Paket ermög­licht die Darstellung des SharePoint auf ver­schie­de­nen Geräten mit nur einem Design, das der Masterpage.

Aktuell sind in die­sem Responsive Paket fol­gende Elemente umge­setzt:

  • Home Page
  • Web Part Pages
  • Wiki Pages
  • Document Libraries
  • Lists
  • Site Contents
  • Site Settings

Welche Abstufungen sind aktuell berücksichtigt?

Im Responsive Design wer­den soge­nannte "ren­de­ring models" ange­ge­ben. In dem aktu­ell vor­han­de­nen System sind fol­gende Modelle hin­ter­legt:

  • Desktop: screen width above 768px
  • Tablet: screen width bet­ween 481px and 768px
  • SmartPhone: screen width lower than or equal to 480px

Die Modelle geben an, wie sich die ein­zel­nen Elemente ab der ange­ge­be­nen Größe ver­hal­ten und plat­zie­ren.

 

SP-Standard
Standard Desktop SharePoint Design

 

sp-tablet
SharePoint Design auf einem Tablet – das Menü wird auf der lin­ken Seite als auf­klapp­ba­res Element ange­passt.

 

sp-mobile
Mobiles SharePoint Design – Das Menü rückt auf die rechte Seite und die obere Navigation wird auf ein Minimum redu­ziert

Installation des Designs

Die Installation des Designs ist ein­fach über wenige Powershell-Befehle ein­ge­spielt. Es kann genauso ein­fach auch wie­der ent­fernt wer­den.

Die Installation wird in einem bereit­ge­stell­ten Video sehr gut erklärt und lässt sich damit gut nach­voll­zie­hen.

Einschränkungen der Lösung

Leider gibt es einige Einschränkungen, wenn diese Lösung ein­ge­setzt wer­den soll.

Masterpage

Die Lösung erlaubt es nicht, eine ange­passte Masterpage zu ver­wen­den und diese dann mit Hilfe der Lösung in ein Responsive Design zu ver­wan­deln. Soll hei­ßen: der SharePoint muss im Standard genutzt wer­den, ohne Customizing.

TeamSite Template

Als SiteCollection Template muss die Teamsite (STS#0) aus­ge­wählt wer­den. Nur die­ses SharePoint Template kann aktu­ell durch ein Responsive Design erwei­tert wer­den.

Für welche Versionen steht das Design bereit?

Aktuell kann das Design für den SharePoint Server 2013 und die kürz­lich erschie­ne­nen Vorabversionen des SharePoint Server 2016 ver­wen­det wer­den.

Analog fin­det die Lösung eben­falls für den SharePoint Online Anwendung.

Mein Fazit

Durch das Responsive Design kann der Anwender mit einer ein­heit­li­chen Oberfläche auf allen Geräten kom­for­ta­bel arbei­ten. Die Umgewöhnung zwi­schen den Geräten ent­fällt und man ver­wen­det eine Anwendung, wel­che über­all erkannt wird. Durch die stren­gen Einschränkungen wer­den jedoch wohl wenige Unternehmen die SharePoint-Seiten in ein Responsive Design ver­wan­deln kön­nen.

Trotzdem kann ich der Lösung viele posi­tive Aspekte abge­win­nen. Es wird auf­ge­zeigt, dass der SharePoint mit weni­gen Kniffen respon­siv wer­den kann. Unternehmen haben die Möglichkeit, neue SiteCollection in einem Standard Design Responsive anzu­bie­ten. Neukunden kön­nen direkt mit einem Responsive SharePoint star­ten und somit die Benutzer auf allen Geräten für die neue Anwendung gewin­nen, ohne zwei oder drei Apps instal­lie­ren zu müs­sen.

Quellen und Download

Für wei­tere Informationen zu dem Thema "Responsive Design" und eine aus­führ­li­che Beschreibung zur SharePoint Lösung, habe ich nach­fol­gend die Informationen als Links zusam­men­ge­fasst.

Sie haben Fragen oder möch­ten sich mit uns über SharePoint und die Möglichkeiten des Responsive Design unter­hal­ten? Dann kom­men Sie bitte auf uns zu. 

 

Pin It on Pinterest