Mobile First + Progressive Enhancement

mobile-first

Das mobile Internet hat die Art und Weise wie wir Websites entwickeln grundlegend verändert. Vor einiger Zeit habe ich einen Artikel über den veränderten Workflow im Responsive Design veröffentlicht und erklärt, warum wir umdenken müssen, mit welchen Herausforderungen wir uns konfrontiert sehen und welche Lösungsansätze es gibt.
Doch nicht nur die Erstellung eines flexiblen Layouts ist wichtig. Auch die Performance-Optimierung, die Browserkompatibilität und die Informationsarchitektur sind entscheidend für den späteren Erfolg der Website.
In diesem Artikel möchte ich beschreiben, inwiefern sich die Sichtweise bei der Konzeption und Entwicklung von Websites verändert hat.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Alles eine Frage der Sichtweise

Bei der Erstellung einer Website arbeiten wir meist aus Sicht einer ganz bestimmten Gerätekonfiguration. Die meisten Webdesigner nutzen einen großen Monitor und einen modernen Browser. Die Verlockung ist daher groß, von dieser Situation auszugehen und andere Hard- und Softwarekombinationen zu vernachlässigen. Die Kunst liegt darin, alle erdenklichen Szenarien von Beginn an zu berücksichtigen und für jedes System die optimale Lösung bereitzustellen. Das funktioniert meist nur mit regelmäßigen und möglichst frühen Tests.

Graceful Degradation

Beim Prinzip „Graceful Degradation“ wird die Website aus Sicht leistungsstarker Systeme und großer Displays entwickelt. Veraltete Browser, Tablets, Smartphones und schwache Internetverbindungen werden häufig erst im letzten Drittel des Projektverlaufs berücksichtigt. Diese Vorgehensweise gilt heute als nicht mehr zeitgemäß.

Der Workflow mit „Graceful Degradation“

Wenn man nach dem Prinzip „Graceful Degradation“ arbeitet, geht man zunächst davon aus, dass viel Performance und viel Platz zur Verfügung stehen. Man entwickelt die Website beispielsweise mit einem aufwändigen Layout und plant neueste Technologien und Effekte ein. Häufig wird als erstes die Startseite gecodet und in einem modernen Browser getestet. Sobald im modernen Browser alles funktioniert, wird die Seite auch in älteren Browsern getestet. Und hier kommt es dann – je nach Browser – zu Kompatibilitätsproblemen mit den verwendeten Technologien.

Schematische Darstellung von Graceful Degradation
Schematische Darstellung von Graceful Degradation

Um diese Probleme nun in den Griff zu bekommen, wird die Website für schwächere Systeme „abgespeckt“. Die schlimmsten Fehler werden zwar behoben, allerdings werden normalerweise nur bestimmte Browser getestet und korrigiert. Die Fehler im Internet Explorer 8 werden beispielsweise meist noch korrigiert, ein veralteter Opera-Browser wird häufig weder getestet noch berücksichtigt.

Auch die Art und Weise wie die Fehler behoben werden, kann kritisiert werden. Oft werden diverse CSS3-Eigenschaften per JavaScript nachgerüstet. Die Website funktioniert dann zwar letztendlich auch in älteren Browsern, schwache Systeme haben aber häufig starke Nachteile in der Benutzerfreundlichkeit, Barrierefreiheit und Performance.

Ein ähnliches Problem besteht auch beim Platzbedarf des Layouts. Da die Website zuerst für große Bildschirme entwickelt wird, fehlt es oft an Platz um alle Informationen auch auf dem Smartphone abzubilden. Man könnte dieses Problem lösen, indem Informationen auf dem Smartphone über display:none; ausgeblendet werden.
Bitte verwendet diese Methode nicht! Sie verhindert den uneingeschränkten Zugang zu Informationen und führt bei Besuchern, die eure Website über mehrere Geräte besuchen, zu starker Frustration.

Vorteile des Prinzips „Graceful Degradation“

  • Entspricht unserer Gewohnheit
  • Moderne Systeme werden voll ausgereizt. Neuste Technologien können eingesetzt werden

Nachteile des Prinzips „Graceful Degradation“

  • Schwache Systeme werden oft nicht oder nur schlecht berücksichtigt
  • Performance-Probleme: Schwache Systeme können überlastet werden
  • Informationen sind nicht für alle Menschen gleich zugänglich, wenn schwache Systeme und/oder kleine Displays bestraft werden. Das widerspricht der Grundidee des Internet.
  • Schwierige Erweiterung der Website. Änderungen müssen in allen schwächeren Systemen getestet und ggf. nachgerüstet werden

Progressive Enhancement

Das Prinzip „Progressive Enhancement“ verändert die Sichtweise im Vergleich zu „Graceful Degradation“ deutlich und kann zu Recht als die modernere und bessere Herangehensweise bezeichnet werden. Neu ist „Progressive Enhancement“ allerdings nicht.

Bei „Progressive Enhancement“ steht der Inhalt der Website im Vordergrund. Die Darstellung der Seite, die Browserkompatibilität und die Anpassung für verschiedene Displaygrößen werden erst später berücksichtigt. Das Prinzip hat also größere inhaltliche und konzeptionelle Anteile.

Schematische Darstellung von Progressive Enhancement
Schematische Darstellung von Progressive Enhancement

Der Workflow mit „Progressive Enhancement“

Im ersten Schritt werden die Inhalte gesammelt und strukturiert. Anschließend wird die Website entwickelt. Hierbei beginnt man allerdings mit dem schwächsten anzunehmenden System, also beispielsweise mit einem stark veralteten Internet Explorer ohne JavaScript. Wenn in dieser elementaren Version alle Informationen dargestellt werden und die Website benutzbar ist, wird das Projekt für leistungsstarke Browser erweitert. Hierbei kommen dann auch komplexere Technologien und umfangreichere Layouts zum Einsatz.

Feature Detection

Ein wichtiger Bestandteil von „Progressive Enhancement“ ist die Abfrage vorhandener Browser-Funktionen (Feature Detection). Die elementare Version der Website wird so entwickelt, dass sie auf dem schlechtesten vorstellbaren System funktioniert. Anschließend wird mit einem Script wie Modernizr geprüft, ob weitere Funktionen, z. B. JavaScript oder bestimmte CSS3-Eigenschaften, vom Browser unterstützt werden. Wenn das der Fall ist, werden diese Technologien genutzt um den Funktionsumfang und die Darstellung der Website zu verbessern.

Feature Detection mit Modernizr
Feature Detection mit Modernizr

Diese Vorgehensweise führt zwangsläufig dazu, dass eine Website nicht in allen Browsern gleich aussieht. Auch vor diesem Hintergrund ist es daher nicht mehr sinnvoll mit dem Layout der Website zu beginnen. Mehr zu diesem Thema findet ihr auch in meinem Artikel zum Workflow im Responsive Web Design.

Vorteile von „Progressive Enhancement“

  • Die Inhalte stehen im Mittelpunkt
  • Alle Informationen sind für alle Besucher zugänglich
  • Moderne Browser werden belohnt, anstatt dass veraltete Browser bestraft werden
  • Sehr gute Performance auf allen Systemen
  • Leichte Erweiterbarkeit der Website, sobald neue Funktionen in Browsern verfügbar sind

Nachteile von „Progressive Enhancement“

  • Umdenken erforderlich
  • Viele Tests sind notwendig

Mobile First + Progressive Enhancement

Das Prinzip „Mobile First“ geht nun noch einen Schritt weiter als „Progressive Enhancement“. Die Website wird im ersten Schritt nicht nur für schwache Systeme entwickelt, sondern auch für Geräte mit kleinem Display und geringer Bandbreite. Man beginnt also mit der Smartphone Version der Website. Das „Mobile First“-Prinzip hat dabei allerdings noch größere konzeptionelle Anteile als „Progressive Enhancement“.

„Mobile First“ Konzeption

Nach wie vor stehen die Inhalte der Website im Vordergrund, allerdings werden die Inhalte im Hinblick auf Smartphone-Benutzer erstellt. Da auf einem kleinen Display wenig Platz zur Verfügung steht, führt diese Herangehensweise zwangsläufig zu relevanten und präzisen Inhalten. Da für überflüssige Informationen kein Platz vorhanden ist, fallen sie zwangsläufig weg. Auch die Anzahl der Unterseiten und die Tiefe der Navigation werden auf ein Minimum reduziert, was zu übersichtlichen und leicht verständlichen Navigationsstrukturen führt.

Inhalt, Darstellung und Verhalten sollten in dieser Reihenfolge berücksichtigt werden
Inhalt, Darstellung und Verhalten sollten in dieser Reihenfolge berücksichtigt werden

Die „mobile First“ optimierten Inhalte gelten selbstverständlich für alle Geräteklassen. Geändert hat sich lediglich die Sichtweise bei der Erstellung. Die Relevanz der Informationen verändert sich aber nicht, nur weil mehr oder weniger Platz zu Verfügung steht. Im Gegenteil – auch die Desktop-Version profitiert von den prägnanten Inhalten der Smartphone-Ansicht.

„Mobile First“ Development

Sobald die Inhalte erstellt sind, wird die Website gecodet. Hierbei beginnt man allerdings sowohl mit dem kleinsten Bildschirm als auch mit dem schwächsten Browser. Gedanklich könnt ihr euch also einen uralten Internet Explorer auf dem Bildschirm eines Smartphones vorstellen. :)
Wenn diese rudimentäre Version der Website funktioniert, wird die Ansicht mit Hilfe von CSS Media Queries für größere Displays wie Tablets, Notebooks und Desktop-Computer erweitert (Mobile First Responsive Design). Gleichzeitig wird mittels „Feature Detection“ geprüft, welche Browser-Funktionen vorhanden sind, um die Seite für moderne Systeme aufzuwerten.

Umgekehrter CSS-Code bei „Mobile First“

Da beim „Mobile First“-Prinzip aus Sicht der Smartphone-Version entwickelt wird, beginnt auch der CSS-Code mit der Smartphone-Version. Erst weiter unten im Code wird das Layout mit min-width-Media Queries um die größeren Ansichten für Tablets und Computer erweitert.

  /* Code der Smartphone-Version */

@media screen and (min-width: 500px) {
  /*  Code für große Smartphones, kleine Tablets */	
}

@media screen and (min-width: 800px) {
  /*  Code für Tablets */
}

Da alle Browser den Quellcode von oben nach unten lesen, hat diese Vorgehensweise einen großen Vorteil. Schwache Systeme wie Smartphones und Tablets müssen nur den für sie relevanten Quellcode lesen, was zu sehr performanten mobilen Websites führt.

Vorteile von „Mobile First“

  • Sehr gute, prägnante Website-Inhalte
  • Optimale Darstellung auf allen Geräten
  • Bestmögliche Performance auf allen Geräten, da der Quellcode umgedreht wird
  • Unkomplizierte Erweiterbarkeit auf größere Displays
  • Unkomplizierte Erweiterbarkeit für modernere Systeme

Nachteile von „Mobile First“

  • Aufwändige Konzeption
  • Aufwändige technische Umsetzung
  • Starkes Umdenken notwendig (aus heutiger Sicht)

Links und Quellen

Vielen Dank an dieser Stelle auch an Julian Burford, für die Bereitstellung seines kostenlosen Storyboard Illustration Sets auf Dribble. Einige seiner Illustrationen habe ich in diesem Beitrag verwendet.