© Kellie L. Folkerts/Shutterstock.com
Möglichkeiten und Grenzen bei der grafischen Gestaltung von SharePoint-2013-Webseiten

Brand my SharePoint


SharePoint ist zu einer Technologie herangewachsen, die sowohl in klassischen Szenarien wie Intranets oder Extranets, aber auch für Internetpräsenzen immer mehr Zuspruch findet. SharePoint ist in erster Linie eine webbasierte Plattform, die sich in Sachen Design, Usability und Performance mit anderen Webplattformen messen lassen muss. Dabei ist der Support von bewährten Webtechnologien wie HTML5 oder CSS3 mindestens genauso wichtig wie die Möglichkeit, die Websiteoberfläche mit jQuery oder anderen Erweiterungen anzupassen.

Blickt man in die Historie von SharePoint, so kann man beobachten, welchen Weg die Plattform gegangen ist. Wo man in den ersten Versionen noch zufrieden war, wenn man das Logo austauschen oder ein paar marginale Anpassungen vornehmen konnte, gibt es heutzutage völlig andere Anforderungen, die bis hin zu komplett angepassten Designs reichen, die nicht mehr an das Standard-„Look and Feel“ von SharePoint erinnern. Mittlerweile liefert die Technologie mit ihrer aktuellen Version SharePoint 2013 ein breites Feld an Funktionen, Werkzeugen und Standardsupport für die grafische Gestaltung und die Anpassung von SharePoint-Webseiten, die im Folgenden vorgestellt werden.

Das neue SharePoint UI

Mit der Umsetzung von SharePoint 2013 hat sich die Produktgruppe an die Arbeit gemacht, wesentliche UI-Merkmale zu verändern. Damit verfolgt Microsoft das Ziel, eine moderne Webplattform bereitzustellen, die ein hohes Maß an Gebrauchstauglichkeit (Usability) sowie eine gute Performance liefert. Das geschulte Auge wird feststellen können, dass eine SharePoint-Website sowohl in der HTML-Struktur als auch in der Oberfläche im Vergleich zur Vorversion deutlich „schlanker“ daherkommt (Abb. 1). Dazu wurde auf ausgediente Tabellenlayouts (fast) flächendeckend verzichtet, zugunsten einer modernen HTML-Struktur auf Basis von DIV-Tags. Der gesamte Aufbau wirkt nicht nur durch die neuen Icon-Sets sehr minimalistisch, auch die gesamte Aufmachung der Website verzichtet auf grafischen Schnörkel zu Gunsten einer inhaltsorientierten Visualisierung.

Moritz_Branding_01.png

Abbildung 1: Das neue Look and Feel einer SharePoint-Website

Zusammen mit SharePoint 2013 wurde ein komplett neues Generierungsmodell für die Ausgabe der Seiten eingeführt, das die Ladezeiten deutlich verkürzt. Die so genannte „Minimale Downloadstrategie“ (MDS) sorgt dafür, dass jeweils nur das Delta einer Seite am Client nachgeladen wird, anstelle eines kompletten Post Backs. Durch diese Neuerung wird man als Nutzer sehr schnell feststellen können, dass der gesamte Fluss der Website wesentlich schneller ist.

Technisch betrachtet wird MDS über JavaScript realisiert, das über ein XMLHttpRequest die Daten in einer AJAX-typischen Form nachlädt. In herkömmlichen Teamsites ist die MDS-Funktion standardmäßig aktiv. Erkennen kann man sie daran, dass für jeden Aufruf jeweils nur die start.aspx-Datei (/_layouts/15/start.aspx) angefragt wird. Getrennt durch den Raute-Paramenter wird dann der eigentliche Inhalt referenziert (/_layouts/15/start.aspx#/SitePages/Homepage.aspx), der durch die MDS-Komponente am Client nachgeladen wird. Bei Bedarf kann die Funktion über ein Websitefeature deaktiviert werden. Wissen sollte man auch, dass die MDS-Komponente im Veröffentlichungsportal derzeit nicht unterstützt wird, was damit zu begründen ist, dass man hierin sowieso absolute Kontrolle über das ausgelieferte UI hat.

Neben dieser technischen Neuerung finden bei etlichen Entwicklern die so genannten Display Templates eine hohe Beachtung. Diese ersetzen die altgedienten XSL-Transformationen bei der Aufbereitung von Suchergebnissen oder damit verbundenen Funktionen durch eine HTML- und JavaScript-basierte Variante. Daneben wurde durch die JSLink-Eigenschaft von Web Parts die Möglichkeit geschaffen, die Darstellung des Web-Part-Inhalts (Ansicht, Formular oder Feld) durch ergänzendes JavaScript umfangreich zu beeinflussen. Beide Technologien werden Ihnen an späterer Stelle noch einmal ausführlich vorgestellt.

Wer über Webdesign spricht, der muss auch die Unterdisziplin Usability betrachten, und hier hat SharePoint 2013 um einiges zugelegt. Die Plattform kommt mit Funktionen wie Drag and Drop in Dokumentenbibliotheken, der Inline-Bearbeitung von Listenelementen (ohne ActiveX) oder einer Inplace-Suche für sämtliche Liste und Bibliotheken den Wünschen und Anforderungen der Nutzer einen großen Schritt entgegen. Bereits jetzt zeigt sich, dass durch den Einsatz von SharePoint 2013 beim Nutzer ein messbarer Zeitgewinn in der Durchführung von typischen Arbeitsgängen erzielt werden kann.

Neben diesen Änderungen in der Benutzeroberfläche liefert SharePoint 2013 für den Webdesigner eine Sammlung an Werkzeugen, Technologien und Standards, die die grafische Gestaltung von SharePoint-Portalen unterstützten. Die wichtigsten sollen Ihnen nun im Detail vorgestellt werden.

Durchkomponierte Looks (Themes)

Die so genannten SharePoint Themes erhalten mit der neuen Bezeichnung (durchkomponierte Looks) nicht nur einen neuen Namen sondern eine komplett überarbeitete technische Basis. Wie schon in den Vorversionen wurde die Theming Engine komplett neu entwickelt. Geblieben ist das Anwendungsgebiet: Durchkomponierte Looks dienen in erster Linie der visuellen Umgestaltung von SharePoint-Teamsites und damit verbundenen Standardfunktionen oder Vorlagen (im Gegensatz zum Veröffentlichungsportal, wo das Design über eine angepasste Master Page sowie CSS definiert werden kann).

Ein Theme ist unter SharePoint 2013 nicht mehr nur eine geänderte Farbpalette, sondern eine Kombination aus einer Farbpallette, einer Schrift, einem optionalen Hintergrundbild sowie einer Master Page (Gestaltungsvorlage). Alles zusammen ergibt dann einen durchkomponierten Look (Abb. 2).

Moritz_Branding_02.png

Abbildung 2: Die Bestandteile eines durchkomponierten Looks

Die unter SharePoint 2010 verwendeten THMX-Dateien sind in der neuen Version obsolet, wodurch auch die Idee gestorben ist, mit Word oder PowerPoint ein Theme gestalten zu können. Die Schrift- und Farbpaletten werden über XML-Dateien definiert, die innerhalb der Websitesammlung im Designkatalog (Websiteeinstellungen | Designs | 15) zu finden sind. Standardmäßig stellt SharePoint sieben Schrift- und 32 Farbpaletten bereit, die ggf. für eigene Zwecke erweitert werden können.

Der Aufbau der Farbpaletten (z. B. palette001.spcolor) ist nicht sonderlich komplex. Für die unterschiedlichen Abschnitte und Bereiche innerhalb der Websitesammlung findet man ein entsprechendes Element, das den Farbwert vorgibt. SharePoint 2013 unterstützt dabei den CSS3-Standard RGBA, bei dem zusätzlich zum Farbwert eine Transparenz definiert werden kann: <s:color name="BackgroundOverlay" value="7FFFFFFF" /> (die ersten beiden Werte beschreiben die Transparenz von 50 Prozent) (Listing 1).

<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="http://schemas.microsoft.com/s...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang