SDBB #1: Hinweise für die Gestaltung von SharePoint-Webseiten
avatar

Liebe Leserinnen, liebe Leser,

in unserem ersten Beitrag der SharePoint Design & Branding Blogserie (SDBB) möchten wir uns mit einigen Hinweisen in Bezug auf Design-Themen im SharePoint beschäftigen. Neben wichtigen Themen, wie bspw. der Unterstützung von Kommunikation und Kollaboration in Unternehmen, gewinnt auch der Bereich der Gestaltung von SharePoint Webseiten eine immer größer werdende Rolle. Ein gutes Beispiel dafür sind die umfangreichen Produktänderungen seitens Microsoft, die jetzt in SharePoint 2013 zur Verfügung stehen und es wesentlich komfortabler ermöglichen, eigene Design-Lösungen zu entwerfen. Zu nennen wären an dieser Stelle bspw. der integrierte Design Manager oder das überarbeitete Theming-Konzept (Composed Looks). Das Tolle daran: Durch Mechanismen wie diese entstehen nicht nur für uns – die jeden Tag mit SharePoint arbeiten – Vorteile, sondern eben auch für die Anwenderinnen und Anwender. Diese können jetzt aktiver an den Gestaltungsprozessen teilhaben und leichter eigene kreative Ideen testen und zur Verfügung stellen. Auf diese neuen Features von SharePoint 2013 kommen wir im Rahmen weiterer Beiträge der Blogserie zu sprechen.

Mit den folgenden Informationen versuchen wir auf ein paar wichtige Punkte einzugehen, die Sie sowohl bei einer technischen als auch nicht-technischen Sicht auf das Design-Thema berücksichtigen sollten.

Nicht-technische Aspekte

Microsoft realisiert in SharePoint eine Trennung von Kollaborationsseiten und Seiten für eine „hübsche“ Unternehmenspräsenz. Dies bedeutet, dass sich die Werkzeuge und Möglichkeiten in den verschiedenen Site Templates unterscheiden. In Team Sites existieren bspw. andere Werkzeuge, als in Publishing Sites. Diese Trennung ist – vielleicht nicht immer aber häufig – sinnvoll. Und eben dies sollten Sie bei Ihren Design-Entscheidungen in jedem Fall berücksichtigen. Gerade in der Projektplanung und -realisierung empfehlen wir Ihnen, unbedingt auf eine klare Trennung der Team-internen Kollaborationsräume und der Gestaltung von anderen SharePoint-Webseiten zu achten. Sie machen es sich so während der Entwicklung aber auch im Nachhinein leichter, wenn es zu Support-Fragen etc. kommt.

Natürlich gibt es in Kollaborationsbereichen die Möglichkeit Themes einzusetzen, welche es erlauben, diese entsprechend, wenn auch begrenzt, zu gestalten. Für alles, was darüber hinausgeht, sollten Sie gute Gründe haben. Eine angepasste Master Page für Team Sites ist per se nicht auszuschließen, diese Option sollte jedoch nur in Ausnahmefällen in Betracht gezogen werden. Das Problem ist nämlich folgendes: Sie greifen durch eigene Master Pages derart tief in die Standard-Funktionalitäten ein, dass Sie und das ist meine persönliche Meinung, niemals sicherstellen können, dass sich Ihre Änderungen nicht auch auf anderer Arbeitsbereiche, Unter-Webseiten etc. auswirken. Das Site Template der Kollaborationsbereiche ist schlicht dafür nicht ausgelegt (z. B. feste Breiten) und bedarf vieler individueller Anpassungen. Ein Blick in die CSS-Dateien von SharePoint genügt um zu erahnen, wie komplex dieses System ist. Sie sollten also genau wissen, was Sie an welchen Stellen tun.

Technische Aspekte

Themes
Betrachten Sie Themes nicht als die Branding-Lösung um Intranetanwendungen dem Design einer Unternehmenswebseite anzupassen. Mit Bordmitteln stoßen Sie hier schnell an Ihre Grenzen. Neben einem Gespür für Farben und Layout, ist hier das Thema „CSS“ ein wesentliches. Egal an welcher Stelle Sie mit Bordmitteln nicht weiterkommen, müssen Sie CSS einsetzen, um Linkfarben, Schriftgrößen, Abstände etc. editieren zu können. Unser Tipp an dieser Stelle: Setzen Sie eigenes CSS ein, versuchen Sie gezielt CSS-Klassen zu isolieren, so dass sich Änderungen explizit nur auf die von Ihnen gewünschte Stelle auswirken.

Dazu ein (wirklich vereinfachtes) Beispiel. Alle Links in der Navigation sollen in Rot dargestellt werden. Daher wäre Folgendes möglich:

1
2
/* Alle Links einer SharePoint-Seite werden in Rot dargestellt */
a { color: #cc0000; }

 
Besser wäre aber:

1
2
/* Alle Links in der Navigation werden in Rot dargestellt */
#navigationsContainer a { color: #cc0000; }

 

Sie werden mir nicht glauben, wie oft ich schon die Erfahrung machen durfte, dass CSS-Konfigurationen sich auch ungewollt auf andere Seiten auswirkten, da dort selbige Eigenschaften eingebunden wurden. Gerade das Überschreiben von Standard CSS-Klassen ist nicht empfehlenswert. Wenn Sie es trotzdem machen müssen, versuchen Sie die CSS-Klasse anhand der DOM-Struktur so gut es eben geht zu isolieren. Zur Not können Sie mit Hilfe von jQuery Manipulationen am DOM durchführen.

(HTML) Master Pages
Mit den (HTML) Master Pages haben Sie die größten Freiheiten in Sachen Design-Anpassungen im SharePoint. Diese sollten Sie immer in Betracht ziehen, wenn Sie sich mit Anforderungen konfrontiert sehen, welche Publishing-Szenarien mit einbeziehen. Dies können einfache SharePoint-Webseiten aber auch umfangreiche Unternehmenspräsenzen mit zahlreichen Page Layouts, Custom Controls, aufwendigen Animationen etc. sein. An dieser Stelle Einschränkungen festzumachen ist zugeben schwierig, da hier Ihrer Phantasie eigentlich keine Grenzen gesetzt werden. Sie müssen lediglich beachten, dass Ihre (HTML) Master Page eben die von SharePoint geforderten Standard Controls einbindet. Für Ihre Arbeiten können Sie auch eine Minimal Master Page einsetzen, welche im Umfang auf das Nötigste reduziert wurde. Eine solche finden Sie z. B. hier: http://startermasterpages.codeplex.com/ (SharePoint 2013). Sie sollten allerdings darauf achten, dass Sie die vorhandenen Strukturen und Elemente im HTML weitestgehend beibehalten und auch deren Bezeichnungen nicht abändern. Ein sehr wichtiges Element ist bspw. das „#s4-bodyContainer“-Div. Dieses dient SharePoint dazu, Ihre definierten Inhalte in Form von Page Layouts auf der Seite darzustellen. Fehlt dieses Div-Element, kann SharePoint keine Inhalte auf einer Seite platzieren.

jQuery
jQuery ermöglicht es grundsätzlich lesend und schreibend auf die DOM-Struktur einer HTML-Seite zuzugreifen. Gegen den Einsatz von jQuery gibt es nichts einzuwenden, das Gegenteil ist der Fall. Neben dem Hinzufügen von Attributen oder dem „Suchen“ von einzelnen Objekten anhand ihrer Kennzeichnung, erlaubt jQuery auch das Erstellen einfacher Animationen. Wenn Sie sich heutige Webseiten anschauen, werden Sie feststellen, dass sehr viele dieser Seiten jQuery (oder andere und ähnliche Bibliotheken) einsetzen. Sie können natürlich auch in SharePoint eigene jQuery-Funktionalitäten hinzufügen. Gerade in SharePoint 2013 sind ihre Möglichkeiten noch einmal andere, als Sie es vielleicht von SharePoint 2010 kennen (z. B. durch JS-Link).

Achten Sie bitte bei der Verwendung von jQuery darauf, dass Sie mit einem eindeutigen Kontext-Objekt arbeiten und es keine Wechselwirklungen zwischen Ihrem und dem Code anderer gibt. Schauen Sie sich dazu die Funktion „.noConflict()“ einmal genauer an (http://api.jquery.com/jQuery.noConflict/). Hiermit ist es möglich, einen eigenen jQuery-Alias zu erstellen oder eigenen Code in anonymen Methoden auszuführen, welche sich nicht an anderen Code-Teilen stören. Sie sollten in jedem Fall auch einen Blick in das „JavaScript 101“ werfen. Dieses finden Sie ebenso auf der jQuery-Projektseite: http://learn.jquery.com/javascript-101/.

Ein Tipp noch zum Schluss: Beachten Sie beim Arbeiten mit jQuery, dass alle „Aktionen“ die Sie auf dem DOM der HTML-Seite ausführen, nach dem Laden der kompletten DOM-Struktur stattfinden. D. h. jQuery ist nicht immer eine sinnvolle Hilfe. Versuchen Sie bspw. verwendete Grafiken auf Ihrer Webseite bereits serverseitig an den Client zu senden, um so sichtbare „Austauschprozesse“ von Grafiken während des Ladens einer Seite zu unterbinden.

Zum Schluss

Soweit zu einigen wichtigen Hinweisen in Sachen SharePoint Design & Branding. Viele der genannten Punkte sind natürlich in diesem Rahmen nicht erschöpfend verdeutlicht wurden. Diese greifen wir in zukünftigen Beiträgen wieder auf. Falls Ihnen noch neue Aspekte einfallen oder Sie Fragen, Anregungen oder Kritik haben, dann nutzen Sie bitte die Kommentarfunktion weiter unten. Wir freuen uns auf Ihr Feedback!

Ein Gedanke zu “SDBB #1: Hinweise für die Gestaltung von SharePoint-Webseiten
avatar

  1. Pingback: SDBB #1: Hinweise für das Gestalten von SharePoint Webseiten - SharePoint Blogs in German - Bamboo Nation

Schreibe einen Kommentar