Möglichkeiten und Grenzen bei der Umsetzung von Responsive Webdesign mit SharePoint 2013

Responsive Webdesign mit SharePoint 2013
Kommentare

Unter den Webdesignern, Onlineagenturen und Medienspezialisten ist ein Begriff heutzutage kaum noch wegzudenken: Responsive Webdesign. Er beschreibt eine Technik bzw. vielmehr ein Konzept, eine Webseite so zu entwerfen, dass sie eine konsistente Anzeige auf unterschiedlichen Endgeräten aufweist. Unter Zuhilfenahme von HTML3, CSS3 und JavaScript wird hierbei das Layout so gestaltet, dass es die Inhalte dynamisch passend für das jeweilige Gerät darstellt und durchweg eine hohe Gebrauchstauglichkeit für den Nutzer aufweist.

Aufgrund des rasanten Anstiegs der mobilen Nutzung von Websites, Portalen und sonstigen Webplattformen gewinnt das Thema Responsive Webdesign immer mehr an Bedeutung. Passende Mobile-Konzepte legen dabei den Grundstein für die nachhaltige Akzeptanz und den Erfolg einer Plattform. Hinzu kommt die regelrechte Erwartung des Nutzers, dass sein präferierter Onlineshop, sein Lieblingssportverein oder gar sein Arbeitgeber für sein mobiles Gerät eine passende Darstellung bieten.

Diese Anforderungen sind immer häufiger auch in SharePoint-Projekten anzutreffen. Besonders im Bereich von Internet- oder Extranet-Portalen, aber auch in internen Einsatzgebieten (Intranet, Zusammenarbeit, MySite etc.), erhalten wir regelmäßig die Anforderung, diese mit einer passenden mobilen Strategie zu gestalten. Dieser Artikel soll beleuchten, welche Möglichkeiten und Grenzen es in SharePoint im Bereich der mobilen Ansichten gibt, welche Standards zur Umsetzung von Responsive Designs existieren und wie diese Konzepte in SharePoint-Projekten technisch eingesetzt werden können.

Warum Responsive Webdesign?

Ethan Marotte, einer der Vorreiter des Themas, beschreibt in seinem oft zitierten Blogbeitrag vom 25. Mai 2010, dass das mobile Browsing den desktopbasierten Zugriff in den nächsten drei bis fünf Jahren übertreffen wird. Betrachten wir das aktuelle Jahr 2014 und den rasanten Anstieg der Nutzung mobiler Geräte, wird schnell deutlich, dass er mit dieser Annahme richtig lag. Und der Boom kennt noch lange kein Ende.

Gartner wiederum prognostiziert, dass die mobile Nutzung in den kommenden drei Jahren weiter ansteigen wird, vor allem im Bereich der Tablets. Schauen Sie sich doch mal alleine in Ihrem privaten oder geschäftlichen Umfeld um. Wie viele unterschiedliche Geräte kennen Sie? Es sind vermutlich etliche (Abb. 1). Und Sie selbst? Wie viele Geräte besitzen bzw. verwenden Sie in der täglichen Arbeit? Mehr als eines, nehme ich an. Sind Sie einer der Nutzer, die keinen herkömmlichen PC mehr besitzen, dann liegen sie voll im Trend. Parallel zum Anstieg der mobilen Geräte zeichnet sich nämlich ab, dass die Nutzung von PCs weiter sinken wird.

Dieser Umstand macht deutlich, dass im Bereich des Webdesigns über alle Plattformen hinweg ein Umdenken stattfinden muss. Es geht längst nicht mehr um die Frage, für welche Desktoplösungen eine Webseite optimiert werden soll. Stattdessen treten mobilen Ansichten und deren Optimierung immer mehr in den Vordergrund. Und genau an dieser Stelle setzt Responsive Webdesign an, indem es eine Herangehensweise beschreibt, diese Herausforderungen zu adressieren.

Abb. 1: Die Vielfalt der mobilen Geräte kennt keine Grenzen

Responsive Webdesign ist dabei nicht nur eine Technik des Gestaltens. Vielmehr ist es der Prozess, Informationen und Funktionen passend für das jeweilige Gerät darzustellen. Es geht also nicht darum, alle möglichen Desktopfunktionen in die kleinste mobile Ansicht zu quetschen, sondern darum, genau zu überlegen, welche dieser Inhalte für das jeweilige Gerät und den Anwender von Nutzen sind. Stellen Sie sich nur einmal ein ausgeklügeltes, modernes Bestellformular für eine Urlaubsreise vor, mit allem, was man sich wünscht. Wie wahrscheinlich ist es, dass der Nutzer dieses Formular auf einem mobilen Gerät ausfüllt? Eher gering, würde ich meinen. Aus diesem Grund ist es vermutlich nicht sinnvoll, eine solche Funktion für sämtliche Geräte anzubieten. Vielmehr geht es in diesem Fall darum, den Nutzer trotzdem abzuholen und passende Konzepte zu entwickeln, um ihn zum Desktopangebot zu begleiten.

Welche Möglichkeiten bietet der Standard von SharePoint 2013 bzw. SharePoint Online?

Mit der Einführung von SharePoint 2013 und der neuen Generation von Office 365 liefert Microsoft unterschiedliche Strategien für mobile Ansichten. Hierbei muss die Plattform ein wenig differenziert betrachtet werden, da es für das SharePoint-Standard-UI und die Veröffentlichungsportale (die Möglichkeit, Webpräsenzen mit SharePoint zu realisieren) unterschiedliche Konzepte gibt. Betrachten wir zunächst einmal das Standard-UI von SharePoint. Hier liefert die Plattform drei unterschiedliche Sichten auf die Webseite: die moderne Ansicht, die klassische Ansicht und die Vollbildansicht (Abb. 2).

Die moderne Ansicht wurde mit SharePoint 2013 neu eingeführt. Sie generiert ihre Ausgabe in HTML5 und ist für folgende Betriebssysteme standardmäßig aktiv: mobile Internet Explorer ab Version 9.0 für Windows Phone 7.5 und später, Safari ab Version 4.0 für iPhone iOS 5.0 aufwärts und Android-Browser für Android 4.0 aufwärts. Ältere Geräte fallen auf die aus SharePoint 2010 übernommene klassische Ansicht zurück. Desktopvarianten und mobile Geräte mit einer höheren Auflösung verwenden eine Vollbildansicht. Diese mobilen Ansichten werden speziell für die jeweiligen Geräte angewandt.

Abb. 2: SharePoint 2013 liefert drei Ansichtstypen

Administratoren können diese Funktion ein- und ausschalten und die Ansichten von Listen und Bibliotheken für die mobile Nutzung konfigurieren. Zu erwähnen ist weiterhin, dass die moderne Ansicht für Touch optimiert ist und die Office Web Applications ebenso Support für diese Darstellung liefern. Office-365-Kunden wird in Kürze etwas mehr Komfort eingeräumt, indem die Plattform in OneDrive for Business und den Sites eine neue Touch-Experience integriert, die die Bedienung mit dem Finger deutlich erleichtern soll.

Soviel zum Standard-UI. Mit dem Veröffentlichungsframework von SharePoint Server 2013 liefert Microsoft noch eine weitere Technologie zur Umsetzung von mobilen Ansichten: Device Channels (bzw. Gerätekanäle). Diese Technologie macht es deutlich einfacher, eine dedizierte mobile Ansicht für ein Internetportal oder eine anderweitige komplett angepasste SharePoint-Webseite zu realisieren. Ein Device Channel ist dabei ein Listeneintrag, der das jeweilige Gerät über den oder die User Agent Strings als so genannte Einschlussregel (Browser Inclusion Rules) definiert.

Die technische Umsetzung der angepassten mobilen Ansicht erfolgt anschließend über die Zuweisung einer alternativen Masterseite. Nachdem ein Gerätekanal über die Webseiteneinstellungen definiert wurde, kann in den Master-Page-Einstellungen für dieses Gerät die Masterseite zugewiesen werden.

Neben dieser Option stellt SharePoint 2013 mit den Device Channel Controls (Publishing:DeviceChannelPanel) eine weitere Möglichkeit bereit, die Darstellung auf einem definierten mobilen Gerät zu beeinflussen. Device Channel Controls sind Steuerelemente, die ausschließlich für die hierin definierten Geräte gerendert werden. Beispielweise kann durch ein solches Control zusätzlicher CSS- oder JavaScript-Code geladen werden, der sich dann um die mobile Darstellung des Inhalts kümmert. Das Device Channel Control kann ebenso wie weitere SharePoint Controls über den Snippet Manager importiert werden.

Die Technologie der Device Channels hat mit den mobilen Standardansichten eines gemeinsam: Sie generieren ein spezifisches Design für ein spezifisches Gerät. Dieser Ansatz unterscheidet sich technisch stark vom Konzept des Responsive Designs, das sich nicht für das Gerät an sich, sondern für seine Auflösung (Media Query) interessiert. In der Umsetzung ist dieses Modell deutlich flexibler, weil die Ergebnisse im besten Fall für eine Vielzahl mobiler Geräte eingesetzt werden können und aufgrund der eingesetzten Standards zukunftssicher sind.

Warum setzt SharePoint (derzeit) nicht auf Responsive Design? Diese Frage lässt sich leicht beantworten. Schaut man sich den Produktzyklus der vergangenen Jahre genauer an, stellt man fest, dass knapp alle drei Jahre eine Produktversion von SharePoint veröffentlicht wurde: 2006 (SharePoint 2007), 2009 (SharePoint 2010) und 2012 (SharePoint 2013). Zu diesen Zeitpunkten waren die Produkte bereits komplett fertig entwickelt und die Qualität war gesichert. Wer die Vielfalt und die Komplexität der Plattform kennt, kann sich vermutlich vorstellen, dass die Planung deutlich früher abgeschlossen wurde als das Release. Bei SharePoint 2013 war das wahrscheinlich irgendwann im Jahr 2010, dem Geburtsjahr des Responsive Designs. Vor diesem Hintergrund wird deutlich, warum SharePoint in der aktuellen On-Premise-Version nicht diesen Konzepten folgen kann. In der Cloud-basierten Variante sind die Chancen für kurzfristige Veränderungen oder Verbesserungen deutlich größer, weil das ganz einfach in der Natur der Cloud liegt. Die vorgenommen Touch-Erweiterungen geben hierfür ein ersten Beispiel, und man kann hoffen, dass in diesem Bereich noch mehr passieren wird.

Das Gute bei SharePoint und Office 365 ist, dass diese zu großen Teilen auf Standardtechnologien wie CSS3, HTML5 oder JavaScript zurückgreifen und sich damit erweitern lassen. Diese Grundlage macht es möglich, auch SharePoint 2013 Responsive Webdesigns umzusetzen. In Kombination mit bewährten Frameworks lassen sich somit Teamsites, Blogs oder auch komplette Publishing-Portale in einem Responsive Design umsetzen. Welche Frameworks hierzu existieren und wie sie in SharePoint integriert werden können, soll in den nachfolgenden Kapiteln genauer beschrieben werden.

Aufmacherbild: Tesla Ball Emitting Electrical Currents von Shutterstock / Urheberrecht: jcjgphotography

[ header = Seite 2: Die technischen Grundlagen des Responsive Webdesigns ]

Die technischen Grundlagen des Responsive Webdesigns

Bis vor rund vier Jahren war es in der Konzeption einer Webseite gängige Praxis, von nur einer Bildschirmauflösung auszugehen. Hier stellte sich die Frage, für welche feste Bildschirmbreite die Inhalte mindestens optimiert werden sollten. In der Regel bot es sich an, die Webseite für eine Auflösung von 1024 px zu optimieren. Das gesamte Layout der Webseite war somit in Stein gemeißelt und konnte auf größere Bildschirmauflösungen der Nutzer nur in dem Umfang reagieren, dass es den entstandenen Leerraum mit Hintergrundfarbe oder -bildern ausfüllte.

Durch den stetigen Anstieg mobiler Internetnutzung ist die Herausforderung an das Design einer Webseite um ein Vielfaches gewachsen. Bei einer schier nicht enden wollenden Vielfalt an Bildschirmauflösungen ist es unmöglich, einen kompletten Überblick zu behalten und mit den bisherigen Designkonzepten einen gebrauchstauglichen Internetauftritt zu gestalten. Mit Responsive Webdesign wiederum finden sich verschiedene Lösungsansätze, eine Webseite in die Lage zu versetzen, flexibel auf alle möglichen Bildschirmauflösungen zu reagieren.

Der erste Baustein für ein gelungenes Responsive Webdesign bildet ein so genanntes fluides Grid-System als Basis für das gesamte Layout (Abb. 3). Es gibt dem Entwickler einer Webseite vordefinierte CSS-Klassen an die Hand, mit denen er den Content in Reihen und Spalten aufteilen kann. Diese Klassen definieren verschiedene Breitenangaben und Abstände in Prozentzahlen, wodurch sich die Position und die Größe eines Elements abhängig von der Größe des benutzten Geräts steuern lassen.

Abb. 3: Grid-System als Basis des Layouts

Bei mehrspaltigen Layouts stößt man allerdings schnell an Grenzen, sobald der Nutzer die Webseite mit einem Smartphone betrachtet. Oft lassen sich Inhalte nicht mehr übersichtlich anzeigen, da Container und Spalten, die dem Inhalt den Rahmen geben, schlichtweg zu schmal werden. Texte und Bilder werden abgeschnitten oder brechen an den falschen Stellen um und machen den Content unleserlich. An dieser Stelle bieten sich die bereits seit CSS2 bekannten Media Queries dazu an, die designtechnische Herausforderung zu lösen.

Früher vor allem dafür genutzt, ein separates Stylesheet für die Printausgabe bereitzustellen, lässt sich damit heute das Verhalten von Inhaltscontainern und anderen Webseitenelementen gezielter steuern. So lassen sich unterschiedliche Größenangaben, Abstände, Floating oder Farben der Webseitenelemente für bestimmte Bildschirmauflösungen definieren. Unwichtige Bereiche einer Webseite lassen sich so auch komplett ausblenden oder an anderer Stelle neu positionieren (Listing 1).

@media screen and (max-width: 480px) {
  #main {
    width: 100%;
  }
 
  aside {
    display: none;
  }
}

@media screen and (mmin-width: 481px) and (max-width: 1024px) {
  #main {
    width: 70%;
  }
 
  aside {
    width:30%;
  }
}

Über @media mediatype wird das gewünschte Ausgabemedium genauer spezifiziert. Gängige Mediatypes sind all, screen, print oder handheld. Mit Letzterem lassen sich z. B. nur Geräte mit sehr kleiner Auflösung und geringer Bandbreite ansteuern. Danach folgt eine beliebige Anzahl an Einschränkungen, die mit and verknüpft werden und den zu behandelnden Sonderfall genauer spezifizieren. Neben Angaben über Mindest- und Maximalbreite eines Bildschirms lässt sich unter anderem bei Smartphones auch mit orientation : (landscape/portrait) die Orientierung des Bildschirms überprüfen.

Zu guter Letzt gilt es, die Typografie der Webseite in Augenschein zu nehmen. Wie auch bei allen anderen Elementen der Webseite verursachen feste Pixelangaben hier unerwünschte Nebeneffekte. Um zu erreichen, dass Schrift stets in einer optimalen Größe angezeigt wird, sollten Größenangaben hier immer in em gemacht werden. Dieser Wert orientiert sich stets an der im Browserclient eingestellten Standardschriftart sowie -größe und ist somit flexibel. 1em entsprechen hierbei immer 100 Prozent der Standartschriftgröße des Browsers. Ein gutes Onlinetool, das dem Entwickler die Umrechnung von px– zu em-Angaben abnimmt, findet sich hier.

In Verbindung mit einem fluiden Grid-System und Media Queries lässt sich genau das umsetzen, was Responsive Webdesign eigentlich sein soll: ein geräteunabhängiges Designkonzept.

Frameworks für Responsive Webdesigns

CSS und JavaScript-Frameworks sind ein wichtiger Bestandteil moderner Webentwicklung, da sie durch ihren modularen Aufbau und ihre vordefinierten Elemente den Design- und Entwicklungsprozess einer Webseite enorm verkürzen können und somit Zeit sparen. Da die Entwicklung eines eigenen Frameworks Unmengen an Mehraufwand bedeuten würde, kann und sollte auf eines zurückgegriffen werden, das den eigenen Ansprüchen am ehesten entspricht. Im Bereich des Responsive Webdesigns hat sich Bootstrap von Twitter in besonderem Maße hervorgetan.

Bootstrap deckt durch sein fluides Grid-System und eine Vielzahl an CSS-Klassen zum Stylen verschiedenster Webseitenelemente wie Navigation, Buttons, Tabs, Suchleisten und Bildern fast sämtliche Bedürfnisse eines Webauftritts ab. Um Bootstrap für das eigene Webprojekt nutzen zu können, ist lediglich die Einbindung einer JavaScript- und einer CSS-Datei notwendig. Das Framework besitzt bereits vordefinierte Media Queries, bei denen die Elemente sich entsprechend der Bildschirmbreite verhalten, und lässt sich durch eigene Styles erweitern.

Der Clou dabei ist, dass sich viele Elemente durch bestimmte CSS-Klassen bereits verschiedenen Größen auf unterschiedlichen Geräteauflösungen zuordnen lassen. Hierfür müssen keine eigenen Media Queries erzeugt werden. Dazu gibt man den entsprechenden Elementen einfach die Klassen col-lg-*, col-md-*, col-sm-* und col-xs-* mit einer Ziffer zwischen 1 und 12 für die gewünschte Breite des Elements (Listing 2). Das Kürzel lg bedeutet large, md steht für medium, sm für small und xs für very small. Die Kürzel beziehen sich jeweils auf eine bestimmte Mindest- und Maximalbreite der Bildschirmauflösung.

....
....

Listing 2 zeigt exemplarisch die Verwendung von CSS-Klassen des Bootstrap-Grid-Systems. Da sich das Grid-System auf ein Zwölf-Spalten-Layout bezieht, bewirkt die Verwendung der Klassen col-lg-6 und col-md-6, dass die beiden inneren DIV-Container auf großer und mittlerer Desktopauflösung 6/12 (entsprechend 50 Prozent) der Größe des Elternelements einnehmen und nebeneinander dargestellt werden. Bei kleineren Auflösungen für Smartphones nehmen sie dann 12/12, also 100 Prozent der Breite des Elternelements ein und werden untereinander dargestellt (Abb. 4).

Abb. 4: Exemplarische Darstellung von Grid-Containern des Bootstrap-Frameworks

Zusätzlich bietet das Framework eine JavaScript-Bibliothek, die nahezu alle Elemente steuern kann, die aus modernen Webauftritten nicht mehr wegzudenken sind. Dazu gehören z. B. Dialogfenster, Tooltips, Media-Slideshows oder Akkordeonmenüs. Wer auf bestimmte Elemente verzichten kann, der kann sich auch sein eigenes Bootstrap-Framework erstellen und an die eigenen Bedürfnisse anpassen.

Ein anderes Framework, das sich in den letzten Jahren im Bereich Responsive Webdesign einen Namen gemacht hat, ist Skeleton. Wie der Name bereits vermuten lässt, ist Skeleton ein sehr schlankes Framework, das nur das Gerüst auf technischer Ebene bietet. Auf Designvorgaben für UI-Elemente wurde bei diesem Framework bewusst verzichtet, um dem Designprozess keinerlei Schranken zu setzen. Diese Umstände machen es um einiges schlanker als Bootstrap. Auch Foundation von zurb ist ein nennenswertes Framework für die mobile Webentwicklung. Der Vorteil sämtlicher responsiver CSS-Frameworks sind die einfache Einbindung und die Möglichkeit, schnell und unkompliziert erste Prototypen einer Webseite zu entwickeln, die auf aktuellsten Webstandards beruhen.

[ header = Seite 3: Responsive Webdesigns in SharePoint umsetzen am Beispiel von Publishing-Portalen ]

Responsive Webdesigns in SharePoint umsetzen am Beispiel von Publishing-Portalen

Bei der Entwicklung von komplexen SharePoint-Internet- und -Extranet-Anwendungen kann man ebenfalls auf Frameworks mit responsivem Designansatz zurückgreifen und SharePoint fit für mobile Endgeräte machen. Hierfür gibt es auf codeplex.com ein interessantes Projekt von Eric Overfield, das eine Solution für SharePoint 2010 und 2013 bereitstellt.

Die Solution beinhaltet speziell für SharePoint angepasste CSS-Klassen und JavaScript-Funktionen des jeweiligen Frameworks, eine angepasste Masterpage und Beispielseitenlayouts für die Verwendung der verschiedenen Frameworkelemente. Die Solution ist verfügbar für Bootstrap Version 2 und 3 sowie für Foundation in Version 4.

Allerdings sind bei diesem Projekt die vordefinierten Media Queries ein wenig eingeschränkt und lassen sich weniger flexibel handhaben. Wer sich bereits an die bekannten Klassennamen der Frameworks gewöhnt hat, mag es hier vielleicht auch etwas verwirrend finden, dass zum Teil komplett neue Namen vergeben wurden.

Der einfachere und flexiblere Weg, Bootstrap in eine SharePoint-Anwendung zu integrieren, ist sicher, es einfach selbst einzubinden. Der Vorteil wäre vor allem, dass hier auch angepasste Bootstrap-Versionen benutzt werden können. Hierfür müssen zuerst die CSS- und JavaScript-Dateien heruntergeladen und in das eigene Designverzeichnis entpackt werden. Die CSS-Datei lässt sich dann am besten über das CssRegistration-Control von SharePoint einbinden (Listing 3).



Beim Einbinden der im Paket enthaltenen JavaScript-Datei muss nur darauf geachtet werden, dass die Bootstrap-JavaScript-Bibliothek auf jQuery zurückgreift und vorher geladen werden muss.

Natürlich gibt es auch ein paar kleine Herausforderungen beim Zusammenspiel von SharePoint und Bootstrap. So mag den einen oder anderen Nutzer nach erfolgreicher Implementierung von Bootstrap in das eigene SharePoint-Projekt der Zustand des Ribbons erstaunen. Icons werden zum Teil nicht angezeigt, Menüs sind verschoben etc.

Dies liegt in erster Linie an den unterschiedlichen Box-Modellen der beiden Systeme. SharePoint nutzt für das Box Sizing das Modell Content-Box, Bootstrap jedoch nutzt Border-Box und überschreibt, wenn es nach der corev15.css von SharePoint geladen wird, diese Stylesheets. Die Lösung an dieser Stelle ist denkbar einfach. Zuerst wird für alle Elemente das Boxmodell Content-Box definiert, anschließend für die CSS-Klassen des Bootstrap-Grid-Systems das Box-Modell wieder auf Border-Box gesetzt (Listing 4).

*,*:before, *:after { 
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  box-sizing: content-box; 
}

*[class^="col-"], 
*[class^="col-"]:before, 
*[class^="col-"]:after { 

  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  
}

Andere auftretende Probleme sind in der Regel Namenskonflikte zwischen CSS-Klassen von SharePoint und Bootstrap, die sich allerdings mithilfe von Firebug oder ähnlichen Entwicklertools schnell identifizieren und beheben lassen.

Alles in allem ist SharePoint aber durchaus in der Lage, sich durch ein Framework den Rahmen geben zu lassen, der die nötige Flexibilität für eine dynamische Ansicht mitbringt.

Mobile ist längst da

Mobile ist nicht nur die Zukunft, es ist längst da. Und hierfür gilt es, Webportale oder Websites passend zu rüsten. SharePoint und Office 365 liefern bereits einige Standardfunktionen für mobile Ansichten. Ergänzt durch die Konzepte des Responsive Designs bietet die Plattform gute Möglichkeiten, nachhaltige, mobile Ansichten für mobile Szenarien umzusetzen. Hierbei lohnt es sich, anstelle der Nachprogrammierung von SharePoint-Standardfunktionen diese beiden Welten passend miteinander zu kombinieren. Überlegen Sie hierbei gut, welche Ansicht bzw. Funktion für welches mobile Gerät für den Nutzer Sinn macht. Besonders im Bereich der Internetportale sind den Optionen keine Grenzen gesetzt. Hier empfiehlt sich der Einsatz eines bewährten Frameworks zur Umsetzung der jeweiligen Webanwendung in Kombination mit den Standardparadigmen von SharePoint. Und parallel hierzu sollte man immer ein Auge auf die neueste Version von Office 365 oder die nächste Generation von SharePoint werfen. Vielleicht sind hier ja dann noch mehr mobile Features zu finden als heute.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -