SharePoint Branding leicht gemacht

Mein Freund der (HTML-)Editor
Kommentare

Zum Thema SharePoint 2013 Branding findet man umfangreiche Einführungsliteratur. Es gibt dabei so viele unterschiedliche Methoden und Technologien, dass man leicht von der Fülle der Möglichkeiten erschlagen wird und aufgrund der Informationsflut schon am Versuch, SharePoint ein besonderes Aussehen zu verleihen, scheitern kann. Grundsätzlich möchte man sich bei der optischen Anpassung gar nicht mit allen Technologien bis zur Erschöpfung auseinandersetzen,  denn meist geht es nur darum, einen funktionstüchtigen Prototyp zu realisieren. Dieser kann dann sukzessive weiter bis zum endgültigen Ergebnis ausgebaut werden.

Ein wichtiger Punkt in jedem SharePoint-Projekt, in dem eine öffentliche Website mithilfe von SharePoint erstellt werden soll, ist eine Designanpassung. Üblicherweise möchten Unternehmen das optische Erscheinungsbild ihrer SharePoint-Website an das Unternehmens-CI anpassen. Der Prozess der optischen Anpassung wird auch als Branding-Prozess bezeichnet. Bisher war das SharePoint-Branding immer ein größerer Aufwand, da sich die Anpassung von SharePoint nicht sehr an allgemeine Webstandards gehalten hat und sehr viel SharePoint-spezifisches Know-how notwendig war.

Der Branding-Prozess

Eine der großen Neuerungen bei SharePoint 2013 ist, dass SharePoint 2013 mit HTML 5 Masterpages arbeitet. Im Gegensatz zur bisherigen Realisierung des Branding-Prozesses hat dieser neue Ansatz den Vorteil, dass er nicht mehr so SharePoint-spezifisch ist und sich mehr an allgemeine Standards in der Webentwicklung anlehnt. Dadurch ist es für Webdesigner einfacher geworden, SharePoint anzupassen, da sie sich in vertrautem Territorium bewegen können und die Lernkurve nicht mehr so steil ist wie bisher.

Was sind Masterpages? Der Begriff Masterpage kommt aus der ASP.NET-Programmierung. Unter ASP.NET (und SharePoint ist auch ein ASP.NET-Programm) stellen Masterpages den Teil einer Website dar, der sich über alle Seiten hinweg nicht ändert, wie beispielsweise die Navigation oder eine Fußzeile. In der Masterpage gibt es bestimmte Platzhalterbereiche, in die dann die dynamischen Inhalte der einzelnen Webseiten eingefügt werden. In der deutschen Version von SharePoint 2013 werden Masterpages auch als Gestaltungsvorlagen bezeichnet. In diesem Artikel verwenden wir den technischen Terminus Masterpage.

SharePoint verwendet Masterpages für Veröffentlichungswebsites, um das grundsätzliche Aussehen und den grundsätzlichen Aufbau einer Website festzulegen. In einen der variablen Bereiche der Masterpage werden dann Seitenlayouts eingefügt. Ein Seitenlayout steuert, wie der Inhalt einer bestimmten Webseite aufgebaut wird, d. h. ob beispielsweise auf der linken Seite ein Bild angezeigt werden soll, und ob rechts ein Spalte mit Text ist. In die Seitenlayouts werden dann die Inhalte der SharePoint-Seite eingefügt.

Grundsätzlich unterscheidet man in SharePoint zwei Arten von Websites: Teamwebsites und Publishing-Websites. Möchte man mithilfe von SharePoint eine öffentliche Website erstellen, sollte man darauf achten, dass man diese Website als Veröffentlichungswebsite erstellt. In diesem Artikel beschreiben wir ausschließlich das Branding von Veröffentlichungswebsites. Veröffentlichungswebsites sind ein SharePoint-Feature, das ab der Standard Edition von SharePoint 2013 verfügbar ist, d. h. mit der SharePoint Foundation können keine Veröffentlichungswebsites erstellt werden. Möchte man Teamwebsites anpassen, so kann man dazu Themes verwenden. Themes sind nicht Bestandteil dieses Artikels. Der komplette Designprozess für eine Veröffentlichungswebsite ist hier als Poster dargestellt. Es sind nur wenige Schritte notwendig, um einen lauffähigen Prototyp einer HTML 5 Masterpage auf dem SharePoint-Server zu erstellen und der Website zuzuweisen. Da wir als Grundlage für die öffentliche Website eine Veröffentlichungswebsite als Vorlage für die Websitesammlung ausgewählt haben, wird im Menü EINSTELLUNGEN der Website der Menüpunkt Design-Manager angezeigt. Hier findet man viele Möglichkeiten, einer SharePoint-Website auch ganz ohne weitere Programmierkenntnisse ein eigenständiges Aussehen zu verpassen. Wir werden den Design-Manager nutzen, um uns vom Server selbst eine neue, mit minimalen Funktionen ausgestattete Vorlage erstellen zu lassen und auch gleich auf unsere Seite anzuwenden. Von diesem Punkt an kann man seine Seite dann direkt in einem beliebigen Editor bearbeiten.

Eine HTML5 Masterpage erstellen

Eine neue HTML5 Masterpage wird im Design-Manager unter dem Auswahlpunkt 4 GESTALTUNGSVORLAGE BEARBEITEN erstellt. Über der Liste mit den bereits vorhandenen Masterpages (im Standard sind dies oslo und seattle) befindet sich ein Link, der den Prozess anstößt, der eine neue, minimale Masterpage generiert. Hier kann man einen aussagekräftigen Namen vergeben und den Server die Seite generieren lassen. Nach Abschluss dieses Vorgangs wird sie mit in der Liste der vorhandenen Masterpages angezeigt. Man muss an dieser Stelle darauf achten, dass die Masterpage veröffentlicht wird, damit auf sie zugegriffen und Anpassungen durchgeführt werden können. Leider führt SharePoint diesen Schritt nicht automatisch durch.

Unter Punkt 6 SEITENLAYOUTS BEARBEITEN erstellt man nun aus der neuen Masterpage ein neues Seitenlayout, das dann im nächsten Schritt der Website zugewiesen werden kann. Auch hier sollte man wieder einen aussagekräftigen Namen für das neue Seitenlayout vergeben, der dabei hilft, das Layout zu identifizieren. Als Nächstes muss man die neu erzeugte Masterpage als Vorlage auswählen und einen Inhaltstyp auswählen, dem man das Seitenlayout zuweisen möchte.

Abb. 1: Ein neues Seitenlayout erstellen

Für jeden Seitentyp der Website (z. B. Artikelseiten, Homepage etc.) kann man ein eigenes Seitenlayout erstellen. In diesem Artikel erstellen wir ein Seitenlayout für eine Artikelseite. Auch die Seitenlayouts müssen wieder veröffentlicht werden.

Die neue Masterpage einbinden

In Punkt 7 des Design-Managers DESIGN VERÖFFENTLICHEN UND ÜBERNEHMEN kann man dann das neu erstellte SharePoint-Design der Website zuweisen. An dieser Stelle entscheidet man dann auch, ob das Design nur für die Webseiten der SharePoint-Website angewendet werden soll, die Inhalte enthalten, oder ob das Design auch für die administrativen Seiten der Website verwendet wird. Aus eigener leidvoller Erfahrung raten wir Ihnen, das neue Design zunächst nur auf die Inhaltsseiten und nicht auf die administrativen Seiten anzuwenden. So können Sie verhindern, dass Sie sich durch ein ungeschicktes oder fehlerhaftes Design den Zugang zur Administrationswebsite verbauen. Sind bereits unterschiedliche Gerätekanälen definiert worden, kann man das Design auch pro Gerätekanal festlegen.

Was sind Gerätekanäle? Eine der neuen Funktionen in SharePoint 2013 stellen die so genannten Gerätekanäle (engl. device channels) dar. Unter einem Gerätekanal kann man ein bestimmtes Design an ein bestimmtes Gerät oder eine bestimmte Geräteklasse binden. Heutzutage wird auf SharePoint nicht mehr nur über den Arbeitsplatz-PC zugegriffen. Inzwischen ist es üblich, auch über Smartphones oder Tablets zu arbeiten. Natürlich ist ein Design, das auf einem PC gut aussieht, nicht unbedingt für die Nutzung über Smartphones geeignet, da diese ein viel kleineres Display besitzen. Verwendet eine SharePoint-Website Gerätekanäle, so wird das Gerät, das die Website aufruft, erkannt und entsprechend das definierte Design (also die definierte Masterpage) an das Gerät gesendet.

Neben den Gerätekanälen stehen, sofern vorhanden, auch unterschiedliche Themes zur Verfügung. In Themes werden Schriftarten und Farben für eine Website definiert, die man dann mit einem Mausklick ändern kann, ohne dass man Anpassungen an den CSS StyleSheets durchführen muss. Das ist eine Vorgehensweise, die wir auch unbedingt empfehlen, sobald Sie sich mit ihrem SharePoint Server ein wenig angefreundet haben – im Rahmen dieses Artikels werden wir aber nicht näher auf die Arbeit mit Themes eingehen.

Auf der Seite WEBSITEEINSTELLUNGEN | AUSSEHEN UND VERHALTEN | GESTALTUNGSVORLAGE kann man auch eigene CSS Stylesheets auswählen und festlegen, ob die eigenen CSS Stylesheets die vorhandenen CSS Stylesheets ergänzen oder ersetzen sollen. In diesem Artikel soll es darum gehen, wie man mithilfe eines HTML-Editors das Branding des SharePoint Servers anpassen kann. Daher ignorieren wir die Option an dieser Stelle und zeigen Ihnen weiter unten, wie man CSS Stylesheets in eine HTML5 Masterpage einbindet.

Abb. 2: CSS Stylesheets auf der Seite „Gestaltungsvorlage“

Sobald der oben skizzierte Prozess abgeschlossen ist, läuft der Server auf der neuen, minimalen Vorlage. Das kann man daran erkennen, dass auf der SharePoint-Website relativ wenige Inhalte angezeigt werden. So fehlen beispielsweise eine Navigationsleiste oder andere Elemente, die Sie aus den Standarddesigns von SharePoint kennen. Als Nächstes muss man dafür sorgen, dass die neu erstellte Masterpage-Datei auch in einem HTML-Editor bearbeitet werden kann. Auch hier bietet der Design-Manager eine Hilfestellung unter dem Auswahlpunkt 3 DESIGNDATEIEN HOCHLADEN. Auf der entsprechenden Webseite wird der URL der Vorlagenbibliothek angezeigt. Diesen URL kann man direkt von der Seite kopieren, um dann auf dem Arbeitsplatzrechner ein Netzlaufwerk einzurichten. Das funktioniert sowohl auf Windows-PCs als auch unter MacOS X auf einem Apple-Rechner. Hilfreich ist es, wenn man nun noch den Namen der in Punkt 4 GESTALTUNGSVORLAGE BEARBEITEN generierten Masterpage parat hat. Im frisch verbundenen Netzlaufwerk befindet sich eine HTML-Datei, die diesen Namen trägt. Diese Datei ist die generierte Masterpage, die mit einem beliebigen HTML-Editor (z. B. Visual Studio, WebMatrix, Dreamweaver, Notepad …) bearbeitet werden kann. Führt man Änderungen an der Datei durch und speichert diese, so kann man das Ergebnis der Änderungen nach einer Aktualisierung der SharePoint Seite im Browser direkt begutachten.

Aufmacherbild: html code von Shutterstock / Urheberrecht: iinspiration

[ header = Seite 2: SharePoint-Komponenten in die Masterpage einbetten ]

SharePoint-Komponenten in die Masterpage einbetten

Um die Masterpage mit weiteren SharePoint-Funktionen auszustatten, kann man nun einfach Elemente aus den vorhandenen Masterpages (oslo oder seattle) kopieren, indem man diese Masterpages ebenfalls im HTML-Editor öffnet und dann die entsprechenden Elemente per Copy-and-Paste in die eigene Masterpage übernimmt.

In der eigenen Vorlage kann man einfach neue DIV-Container erstellen. Neue HTML5-Elemente wie header, nav oder article können auch verwendet werden. Möchte man beispielsweise an einer Stelle das Logo der Website anzeigen lassen, so sucht man sich in der Vorlage seattle den Container mit der ID siteIcon (Zeile 146 bis 156 – Listing 1), um ihn dann zu kopieren und die eigene Masterpage dort einzubetten, wo das Icon der Website angezeigt werden soll.

http://gdswebsite:46007/_layouts/15/images/siteIcon.png?rev=23" alt="Content site" />

Sobald die Masterpage gespeichert wurde, wird das Logo an der vorgegebenen Stelle angezeigt. Da man in die Masterpage natürlich beliebigen HTML-Code einfügen kann, ist es selbstverständlich auch möglich, ein eigenes Image-Element einzusetzen. Grundsätzlich sollte man aber für von SharePoint vorgegebene Inhalte auch den „SharePoint-Weg“ wählen, da dies den Vorteil hat, dass das entsprechende Element aus der SharePoint-Weboberfläche heraus geändert werden kann. Verfolgt man beispielsweise beim Websitesymbol den oben beschriebenen Weg, hat das den Vorteil, dass das Symbol über die Einstellungen der Website angepasst und ausgetauscht werden kann, ohne dass der HTML-Quelltext der Masterpage oder das CSS Stylesheet geändert werden müssen.

Weitere wichtige Elemente, die bisher nicht auf der SharePoint-Website angezeigt werden, sind die Brotkrumennavigation und der Titel der Website. Hier ist das Vorgehen analog zum Einfügen des Logos der Website. Dieses Mal werden aber die Zeilen 157 bis 263 aus der Masterpage oslo kopiert, um sie in einem Container in unserer eigenen Vorlage zu platzieren.

Ein Suchfeld findet sich unter der ID searchInputBox in den Zeilen 268 bis 271, und auch die Schnellstartnavigation ist unter der ID sideNavBox in den Zeilen 280 bis 378 enthalten. Auf diesem Weg kann man sehr schnell eine funktionierende Masterpage für eine SharePoint-Website zusammenbauen, deren Struktur durch die Anordnung der diversen Container (DIVs) grundlegend auf den Kopf gestellt und nach eigenen Bedürfnissen angepasst werden kann. Wer für weitere Experimente bereit ist, findet im Design-Manager unter dem Auswahlpunkt 6 Seitenlayouts bearbeiten das eigene Seitenlayout wieder. Wird es ausgewählt, fällt in der obersten Zeile der SharePoint-Seite der Menüpunkt AUSSCHNITTE auf. An dieser Stelle kann man HTML-Code für weitere SharePoint-Elemente generieren, um ihn dann in die Masterpage einzubetten.

Abb. 3: Der Menüpunkt „Ausschnitte“

Eigene CSS StyleSheets adaptieren

Als Nächstes kann man das selbsterstellte Design mit eigenen CSS StyleSheets erweitern. Weiter oben haben wir bereits die Möglichkeit beschrieben, wie man während des Erstellens einer Masterpage CSS Stylesheets angeben kann. Bei anspruchsvollen Designs sollte man aber das CSS Stylesheet direkt im HTML-Code der Masterpage verankern, da das CSS-Sytelsheet integraler Bestandteil der Masterpage ist. Hierzu kann man im Head-Bereich der Seite einen Verweis auf die externe CSS-Stylesheet-Datei einfügen, wie im folgenden Beispiel zu sehen ist:


Hierbei ist zu beachten, dass der Pfad zum CSS StyleSheet relativ zum Pfad der Masterpage angegeben wird. Beim Verwalten der Dateien, die zu einer Gestaltungsvorlage gehören, sollte man so wie im Kasten „Best Practices beim Erstellen eines SharePoint-Designs“ vorgehen.

Best Practices beim Erstellen eines SharePoint-Designs Eine anspruchsvolles SharePoint-Design besteht in der Regel nicht aus einer Masterpage allein, sondern aus vielen unterschiedlichen Dateien wie beispielsweise CSS Stylesheets, JavaScript-Skripten, Bildern usw. Damit man den Überblick behält, was zu welchem SharePoint-Design gehört, hat es sich als Best Practice bewährt, im freigegebenen Netzlaufwerk einen Ordner mit dem Namen der Masterpage zu erzeugen und in diesem alle für das SharePoint-Design, das durch die Masterpage beschrieben wird, notwendigen Dateien abzulegen. Gibt es sehr viele Bilder oder JavaScript-Skripte, kann man den Ordner auch noch in weitere Unterordner unterteilen. Die einzelnen Elemente werden dann in der Masterpage-Datei relativ referenziert.

In unserem Fall haben wir in dem als Netzlaufwerk verbundenen Ordner also einen weiteren Unterordner mit dem Namen styles, in dem sich unser CSS StyleSheet mit dem Namen meinStyle.css befindet. Die eigenen CSS StyleSheets kann man, genau wie die Masterpage selbst, mit einem beliebigen Editor bearbeiten. Änderungen werden direkt nach dem Abspeichern und dem Neuladen der Seite im Browser angezeigt.

Gerätekanäle

Um das Design der Seite auf unterschiedliche Browser und Gerätetypen anzupassen, kann man im Design-Manager unter dem Auswahlpunkt 2 GERÄTEKANÄLE VERWALTEN dem SharePoint-Server beibringen, einen Browser oder Browsertyp anhand des so genannten UserAgents zu erkennen. Der UserAgent ist eine Kennung, mit der sich ein Browser gegenüber einem Webserver zu erkennen gibt, siehe dazu auch hier. Aufgrund der an den Server gelieferten UserAgent-Kennung kann der Webserver unterschiedlichen HTML-Quelltext an den Client zurückliefern, um so bestimmte Designanpassungen zu erzielen. Durch die Auswertung des UserAgent-Strings kann man eine gesonderte Designvorlage für ein und dieselbe Website zur Verfügung stellen.

Um einen neuen Gerätekanal einzurichten, ist es notwendig, den UserAgent-String des Browsers oder des mobilen Geräts, für das man eine eigene Vorlage erstellen möchte, zu kennen. UserAgent-Strings kann man hier einsehen. Möchte man also ein eigenes Design für alle iPhones erstellen, die unseren SharePoint Server besuchen, legt man mit KANAL ERSTELLEN einen neuen Gerätekanal an, vergibt wieder einen aussagekräftige Namen und trägt als EINSCHLUSSREGEL FÜR GERÄTE den Text iPhone ein.

Abb. 4: Einen neuen Gerätekanal anlegen

Damit der neue Gerätekanal auch vom SharePoint Server verwendet wird müssen wir ihn mithilfe des Kontrollkästchens Aktiv aktivieren. Klickt man nun im Design-Manager unter Punkt 7 DESIGN VERÖFFENTLICHEN UND ÜBERNEHMEN auf den Link ORDNEN SIE GESTALTUNGSVORLAGEN JE NACH GERÄTEKANAL IHRER SITE ZU, so kann man den einzelnen definierten Gerätekanälen Masterpages zuordnen. Im Beispiel können wir dem Gerätekanal iPhone eine der auf dem Server verfügbaren Masterpages zuordnen. Bei der Erstellung einer gerätespezifischen Masterpage sollte man dann natürlich auf die entsprechenden Spezifika des jeweiligen Gerätes achten wie z. B. die Bildschirmgröße oder auch technische Einschränkungen. So kann ein iPhone beispielsweise keine Silverlight-Inhalte wiedergeben.

Abb. 5: Einem Gerätekanal eine Masterpage zuordnen

Der Vollständigkeit halber sollte an dieser Stelle auch noch das Konzept des Responsive Designs angesprochen werden, das genau wie Gerätekanäle dazu dient, auf unterschiedliche Gegebenheiten des darstellenden Browsers oder mobilen Endgeräts zu reagieren und das Design der Website darauf hin anzupassen. Responsive Design ist im Gegensatz zu Gerätekanälen nicht darauf angewiesen, über den UserAgent-String einen bestimmten Browser oder Browsertyp zu erkennen und ein speziell für ihn gefertigtes Layout zu präsentieren, sondern reagiert direkt auf die Bildschirmgröße und Ausrichtung. Das hat den Vorteil, dass man seine Regeln allgemeiner definieren kann, aber auch den Nachteil, dass andere Einschränkungen wie zum Beispiel der fehlende Mauszeiger bei Smartphones oder die fehlende Unterstützung von Silverlight nicht erkannt werden können. Möchte man wirklich auf allen möglichen Endgeräten eine perfekte Darstellung erreichen, muss man entweder seine Erwartungen an den Funktionsumfang der Seite überdenken oder eine Kombination aus Gerätekanälen und Responsive Design verwenden, was natürlich sehr aufwändig ist.

Die fertige Masterpage exportieren

Wenn man sich einmal die Mühe gemacht, hat aufwändig ein schönes Design für den eigenen SharePoint Server zu erstellen, möchte man das fertige Design eventuell auch auf andere Server übertragen. Hierzu dient der Auswahlpunkt 8 DESIGNPAKET ERSTELLEN im Design-Manager.

Mit einem aussagekräftigen Namen versehen, erstellt der SharePoint Server hier eine Datei (die nichts weiter als ein Archiv darstellt). Diese Datei wird im Anschluss an die Erstellung als Link zum Download angeboten. Im Paket sind allerdings nicht die CSS Stylesheets und andere Elemente enthalten, die selbst in den HTML-Quellcode der Masterpage eingebettet wurden. Die entsprechenden Verweise sind natürlich noch in der Vorlage enthalten, die Dateien fehlen allerdings auf dem neuen SharePoint-Server, auf den wir das Designpaket einspielen, und müssen manuell auf dem neuen Server an die richtigen Stelle hochgeladen werden. Möchte man das heruntergeladene Designpaket auf einem anderen Server bereitstellen, muss auf diesem Server wieder der Design-Manager geöffnet werden. Unter dem Navigationspunkt 1 WILLKOMMEN wählt man dazu den Link VOLLSTÄNDIGES DESIGNPAKET IMPORTIEREN, gibt die Designpaket-Datei an und klickt auf die Schaltfläche IMPORTIEREN.

Abb. 6: Ein Designpaket importieren

Fazit

Wir haben nun den Weg geebnet, um mit so gut wie jeder Technologie, die uns unter SharePoint 2013 zur Verfügung steht, einen Server optisch anzupassen. Alle hier angesprochenen Themen haben wir nur höchst oberflächlich behandelt, da es der Anspruch war, möglichst schnell und mit so wenig Aufwand wie möglich einen SharePoint Server mit einem eigenen Design zu versehen. Wenn Sie sich ein wenig mit den hier vorgestellten Möglichkeiten angefreundet haben, öffnen sich für Sie ganz neue Wege und Brücken, um tiefer in die Materie einzudringen als es Ihnen bisher möglich war. Als Literatur zur weiteren Anpassung des Aussehens von SharePoint 2013 empfehlen wir Pro SharePoint 2013 Branding and Responsive Web Development von Eric Overfeld und SharePoint 2013 Branding and User Interface Design von Randy Drisgill.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -