COMPAREX AG
Responsives Design mit SharePoint - Ein Erfahrungsbericht

Responsives Design mit SharePoint - Ein Erfahrungsbericht

Bisher war SharePoint mit einem responsiven Design nicht einfach umzusetzen, doch seit dem Release von SharePoint 2013 ist es nun endlich möglich, CSS 3 und HTML 5 Elemente im Browser zu verwenden. Dies erlaubt den Einsatz von CSS-Frameworks wie Twitter Bootstrap zur Implementierung eines echten responsiven Designs. Wir haben uns die Vorgehensweise bei der Entwicklung eines responsiven Designs genauer angeschaut. So hat es unser SharePoint-Architekt gemacht…

Ein Beitrag von Daniel Koszior, Software Architect Team Portals & Collaboration

Im Rahmen eines Projekts wurde ich mit der Implementierung eines responsiven Designs auf Basis eines HTML-Mockups bei einer Web-Design-Agentur für SharePoint 2013 Enterprise On-Premise konfrontiert. Das bereits zu Projektbeginn vorliegende Mockup wurde unter Zuhilfenahme von Twitter Boostrap 3.3.5 realisiert. Es wurden zwei eigene Schriftarten für Text sowie zwei Glyphen-Schriftarten verwendet, die ebenfalls in SharePoint eingebunden werden mussten. Es lag also nahe, Bootstrap weiterhin zu verwenden.

Erstellen eines SharePoint Themes

Bei der Annäherung des SharePoint UI an das vorgegebene Mockup bestand die Problematik darin, möglichst viele Standard-Funktionalitäten für die Anpassung von SharePoint zu verwenden. Deshalb war der erste Schritt die Erstellung eines SharePoint Themes, welches die Farbwelt und die Schriftarten der HTML-Vorlage bereits übernahm. Ein solches Theme besteht aus einer Master Page (und der dazugehörigen Vorschau-Datei), einem Farbschema (*.spcolor) sowie einem Schriftschema (*.spfont). Durch die Verwendung eigener Schriftarten, mussten diese in den verschiedenen Formaten für unterschiedliche Browser in der Schriftartdatei verlinkt werden. Diese und auch alle anderen Dateien wurden in der Farmlösung paketiert und in der Formatbibliothek oder auch im SharePoint Layout-Verzeichnis abgelegt.

SharePoint Color Palette Tool
Abbildung 1: SharePoint Color Palette Tool (Quelle: Microsoft)

SharePoint Schriftart Schema (XML)
Abbildung 2: SharePoint Schriftart Schema (XML)

Einbinden von Styles (CSS) und JavaScripts (JS)

Die Einbindung von Twitter Bootstrap erfolgte ebenfalls über die Paketierung in der Farmlösung. Die benötigten Verknüpfungen zur CSS- und JS-Datei wurden zentral in der Master Page eingefügt. Hierbei ist darauf zu achten, dass die SharePoint Controls CSSRegistration sowie ScriptLink verwenden und die benötigten Dateien an der richtigen Position abgelegt wurden, um eine automatische Prüfung von Änderungen an der Quelldatei durch SharePoint zu erreichen. Die entstehenden Verknüpfungen erhalten dabei automatisch den URL-Parameter rev, der den Dateihash enthält. Bei Änderungen an den Quelldateien werden diese durch die Änderung des Dateihashs vom Browser neu geladen. Die Reihenfolge beim Laden von CSS und JS-Dateien ist außerdem wichtig, um später keine Probleme bei der Anpassung des Aussehens und Verhaltens durch das Überschreiben von CSS-Klassen und JS-Variablen zu bekommen. Bootstrap wurde in der Master Page vor dem SharePoint CSS und JS eingebunden, eigene CSS- und JS-Dateien jedoch danach.

Registrierung von CSS- und JS-Dateien per CSS Registration und ScriptLink in der Master Page
Abbildung 3: Registrierung von CSS- und JS-Dateien per CSS Registration und ScriptLink in der Master Page

Anpassung der HTML-Ausgabe von SharePoint Controls

Gerade bei der Anpassung der SharePoint-Gestaltung auf Basis einer HTML-Vorlage kommt es darauf an, möglichst gleiches HTML beim Rendern von Seiten zu erzeugen. Die Änderungen an dem vorgegebenen CSS sollen damit nicht zu groß ausfallen und weniger Arbeit bei der Aktualisierung der Vorgaben erzeugen. Besonders bei SharePoint Page Layouts werden die verwendeten Felder (z. B. Rich Text Editoren, Bilder, Verknüpfungen) in Form von WebControls in die Seitenvorlage eingebettet – der perfekte Ort zum Austausch dieser Elemente. Viele der SharePoint WebControls lassen sich mit einer eigenen Klasse im C# vererben, um die Basisfunktionalität zu übernehmen. Gerade im Edit-Mode der Seite will man die komplexen Editoren der Felder nicht anpassen. Im Display-Mode, also der reinen Anzeige der Feldwerte, kann ganz simpel die Render-Methode des Controls überschrieben werden. Sie zeigt für die Bearbeitung die Basisklassenfunktionalität, im Anzeigemodus jedoch eigenes - an die Struktur der HTML-Vorlage angepasstes - HTML-Markup. So lässt sich mit relativ wenig Aufwand ein perfekt auf die Design-Vorlage zugeschnittenes HTML für die Anzeige erzeugen.

Anpassung der HTML-Ausgabe durch eigene WebControls

Es existieren einige SharePoint WebControls, die sich entweder nicht überschreiben lassen oder aber so komplex sind, dass eine Anpassung keinen Sinn ergeben würde. Für die Anzeige einer Hauptnavigation mit komplett steuerbarer HTML-Ausgabe, kann beispielsweise ein UserControl erzeugt und im SharePoint ControlTemplates -Verzeichnis ausgerollt werden. Dessen Datenquelle kann dabei unberührt bleiben, sodass ein Umschalten der Menüart per Websiteeinstellungen > Navigation in einer Veröffentlichungswebsite weiterhin funktioniert. Mit Hilfe von verschachtelten Repeater-WebControls lassen sich selbst komplexe Menüaufbauten mit nur sehr wenig eigenem Quellcode schnell entwickeln. Dieser Ansatz zieht sich durch die gesamte Struktur von SharePoint Webseiten und führt zu einem perfekten und schnell erreichbaren Ergebnis.

Eigenes UserControl für die Hauptnavigation
Abbildung 4: Eigenes UserControl für die Hauptnavigation

Das sollten Sie beachten

Twitter Bootstrap kann genauso verwendet werden, wie man es von Websites „auf der grünen Wiese“ kennt. Sämtliche Inhalte werden mit Hilfe von Wrapper-Divs und CSS-Klassen in geeignete Zeilen und Spalten eingeteilt. Das funktioniert ohne Probleme. Einige Regeln sind jedoch im SharePoint-Kontext störend. So wird beispielsweise für alle HTML-Elemente das Box-Modell auf border-box umgestellt, was gerade im Menüband und anderen Menüs zu einer falschen Platzierung von Icons führt und sehr hässlich aussieht. Für die Korrektur solcher Störfaktoren empfiehlt es sich, eine eigene CSS-Datei zu erstellen (z. B. bootstrap.fixup.css). Dies gilt ebenso für die SharePoint-CSS-Klassen, die in jedem Fall massiv angepasst werden müssen, um mit einer vorgegebenen HTML-Vorlage arbeiten zu können (z. B. core_v15.fixup.css).

Abschließender Überblick

Die grundsätzliche Vorgehensweise bei der Implementierung eines eigenen responsiven SharePoint Designs mit Hilfe von CSS-Frameworks wie Twitter Bootstrap kann in die folgenden Schritte eingeteilt werden:

  • Erstellung eines SharePoint Design-Themes mit Master Page(s), Farb- und Schriftart-Schemen
  • Einbinden von CSS und JS in die Master Page(s) in geeigneter Reihenfolge
  • Anpassung der HTML-Ausgaben von SharePoint Controls (On-Premise)
  • Erstellung eigener Controls für schwer anzupassende SharePoint Controls (On-Premise)

Sie wollen auch ein responsives SharePoint Design nutzen?

Sind Sie neugierig geworden? Dann melden Sie sich bei uns. Wir können auch bei Ihnen ein responsives SharePoint-Design erstellen.

Jetzt mehr erfahren »

Diesen Artikel teilen

Artikel vom:
08.11.2016

geschrieben von:

TAGS:
Design, Erfahrungsbericht, SharePoint

Thema:

Kommentieren sie diesen Artikel...

© COMPAREX AG
Zurück nach oben