Responsive Webdesign mit SharePoint – Teil 1: Einführung

In der Medien- und Internetbranche ist der Begriff des Responsive Design mittlerweile Alltag. In der SharePoint-Welt hört man diesen eher selten, was vermutlich damit zusammenhängt, dass SharePoint zur mobilen Darstellung komplett andere Konzepte einsetzt. Doch mehr und mehr erhalten wir die Anforderungen, dass SharePoint-basierte Intranets, Teamsite oder Internetportale mit einer passenden mobilen Strategie zu gestalten und hier liefert die Idee des Resposive Webdesigns einen hervorragenden Lösungsansatz. In dieser Blogserie wollen wir beleuchten, welche Möglichkeiten und Grenzen SharePoint im Bereich der mobilen Ansichten hat, welche Standards zur Umsetzung von Responsive Designs existieren und wie diese Konzepte in SharePoint-Projekten technisch eingesetzt werden können.

Responsive Webdesign in wenigen Worten

Responsive Webdesign beschreibt eine Technik – vielmehr einen methodischen Ansatz – eine Website so zu entwerfen, dass diese eine konsistente Anzeige auf unterschiedlichen Endgeräten (Desktop Monitor, Table, Phone etc.) aufweist. Unter Zuhilfenahme von HTML5, CSS3 und JavaScript wird hierbei das Layout einer Webseite 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.

Warum Responsive Webdesign?

Aufgrund des rasanten Anstiegs der mobilen Nutzung von Webseiten, 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, dass der Nutzer es mittlerweile fast erwartet, dass sein präferierter Onlineshop, sein Lieblingssportverein oder auch des Intranet seines Arbeitgebers für sein mobiles Gerät eine passende Darstellung bietet.

Ethan Marcotte – einer der Vorreiter des Responsive Webdesign – beschreibt in seinem oft referenzierten Blogbeitrag vom  Mai 2010, dass das mobile Browsing den Desktop-basierten Zugriff in den nächsten drei bis fünf Jahren übertreffen wird. Betrachten wir das aktuelle Jahr 2014 und den rasanten Anstieg der mobilen Geräte und dessen Nutzung wird schnell deutlich, dass er mit dieser Annahme sehr gut lag. Und der Boom kennt noch lange kein Ende!

responsive 01

Gartner prognostiziert, dass die mobile Nutzung in den kommenden drei Jahren weiter ansteigen wird, vor allem im Bereich der Tablets. Schauen Sie sich allein in Ihrem privaten oder geschäftlichen Umfeld um. Wie viele unterschiedliche Geräte kennen Sie? Es sind vermutlich etliche. Und Sie selbst? Wie viele Geräte besitzen bzw. verwenden Sie in der täglichen Arbeit? Mehr als eins nehme ich an. Sind Sie eines der Nutzer, die keinen herkömmlichen PC mehr besitzen, dann liegen sie voll im Trend! Parallel zum Anstieg der mobilen Geräte zeichnet sich 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 Desktop Lösungen eine Website optimiert werden soll. Stattdessen treten mobilen Ansichten und dessen Optimierung immer mehr in den Vordergrund. Und genau an dieser Stelle setzt das Responsive Webdesign an, indem es eine Herangehensweise beschreibt, diese Herausforderungen zu adressieren.

Was bieten SharePoint und Office 365 in diesem Bereich?

SharePoint 2013 und Office 365 bieten unterschiedliche Technologien und Standardfunktionen zur Bereitstellung von mobilen Ansichten. Hierbei muss die Plattform ein wenig differenziert betrachtet werden, da es für die SharePoint Standard-UI und Veröffentlichungsportale unterschiedliche Konzepte gibt. Betrachten wir zunächst einmal die Standard UI von SharePoint. Hier liefert die Plattform drei unterschiedliche Sichten auf die Website: die moderne Ansicht, die klassische Ansicht sowie die Vollbild-Ansicht.

responsive 02

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 und später und Android Browser für Android 4.0 aufwärts. Altere Geräte fallen auf die aus SharePoint 2010 übernommene klassische Ansicht zurück. Desktop-Varianten und mobile Geräte mit einer höheren Auflösung verwenden eine Vollbild-Ansicht. Diese mobilen Ansichten werden spezielle für die jeweiligen Geräte angewandt.

Administratoren können diese Funktion ein- und ausschalten und die Ansichten von Listen und Bibliotheken für die mobile Nutzung vorkonfigurieren. Zu erwähnen ist noch, dass die moderne Ansicht für Touch optimiert ist und die Office Web Apps ebenso einen Support für diese Darstellung liefern. Office 365-Kunden haben etwas mehr Komfort durch die Verfügbarkeit einer Touch-Experience in OneDrive for Business (ehemals SkyDrive Pro).

responsive 03

Dieser „adaptive“ Ansatz unterscheidet sich klar von den Ideen des Responsive Designs, da die mobilen Ansichten fest mit den jeweiligen Geräte verdrahtet sind. Beim Veröffentlichungsportal wird ein ähnliches Konzept gefahren, jedoch mit einer anderen technischen Grundlage. SharePoint 2013 bietet hier die Technologie der Device Channel (bzw. Gerätekanäle). Diese erlaubt es, eine dedizierte mobile Ansicht für ein Internetportal oder eine anderweitige komplett angepasste SharePoint-Website zu realisieren. Ein Device Channel ist dabei ein Listeneintrag, der das jeweilige Gerät über den oder die User Agent Strings als sogenannte Einschlussregel (Browser Inclusion Rules) definiert.

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

device channel liste

device channel master page

Neben dieser Option stellt SharePoint 2013 mit den Device Channel Controls (Publishing:DeviceChannelPanel) noch 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, was sich in der Natur nicht für das Gerät sondern eine 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 kann und aufgrund der eingesetzten Standards Zukunftssicher ist.

Warum setzt SharePoint (derzeit) nicht auf Responsive Design?

Diese Frage lässt sich leicht beantworten. Schaut man in den Produktzyklus der vergangenen Jahre mal genauer stellt man fest, dass knapp alle drei Jahr 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 Qualität gesichert. Wer die Vielfalt und die Komplexität der Plattform kennt, kann sich vermutlich vorstellen, dass die Planung deutlich früher als das Release abgeschlossen wurde. Bei SharePoint 2013 wahrscheinlich irgendwann im Jahr 2010 – das Jahr der Geburt des Responsive Designs. Und vor diesem Hintergrund wird es sehr 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 in der Natur der Cloud Idee 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 es zu großen Teilen auf Standardtechnologien wie CSS3, HTML5 oder JavaScript zurückgreift und sich damit erweitern lässt. Daher ist es möglich, auch in SharePoint 2013 Responsive Webdesigns umzusetzen. In Kombination mit bewährten Frameworks lassen sich somit Teamsites, Blogs oder auch komplette Publishing Portale mit einem modernen mobilen Konzept zu versehen.

Wie die technischen Standards lauten und welche unterschiedlichen Frameworks hierzu existieren, beschreiben wir im nächsten Teil dieser Serie (die bereits am kommenden Montag folgen wird).

,

2 Kommentare zu “Responsive Webdesign mit SharePoint – Teil 1: Einführung”

  1. Marco K. 14. April 2014 um 12:13 #

    Hallo Fabian Moritz,

    ein netter Artikel der Hoffnungen macht, dass in der nächsten SharePoint Version mehr Ansatzpunkte für ein responsives Design zu finden sein werden. Wenn man etwas Zeit mitbringt kann man denke ich aber auch im SharePoint 2013 eine schöne responsive Seite basteln. In Projekten wie z.B. “Responsive SharePoint” (http://responsivesharepoint.codeplex.com/) wurde bereits Anstrengungen unternommen die beiden größten responsiven Frameworks (Bootstrap und Foundation) für den SharePoint nutzbar zu machen. Sicherlich alles noch im Anfangsstadium, aber man kann es nutzen.

    Gruß Marco

    PS: 2 Kleine Fehler sind mir aufgefallen: Im zweiten Abschnitt schreibst du “[...]Unter Zuhilfenahme von HTML3, CSS3 und JavaScript wird hierbei [...]. Dabei meinst du vermutlich HTML5. Und der Gute Mensch der den Begriff “Responsive Webdesign” geprägt hat war Ethan Marcotte, nicht Marotte.

  2. Fabian Moritz
    Fabian Moritz 14. April 2014 um 13:06 #

    Hallo Marco,

    danke für das Feedback und die Infos! Derzeit sind wir noch keine großen Freunde des Codeplex-Projekts, weil man ohne dieses in der Paxis wesentlich schneller vorankommt aber für Neueinsteiger ist es sicherlich ein guter Ansatz in das Thema.

    Mein Kollege Ronny arbeitet derzeit den zweiten Teil aus. Wir werden dann hierauf Bezug nehmen.

    Schöne Grüße,
    Fabian

Hinterlasse eine Antwort