Unsere Ideen für Ihr Projekt

Viele Wege führen ins Internet

Eine schematische Darstellung von Inhaltsbereichen auf verschiedenen Endgeräten

Die Verkaufszahlen von Desktop-PCs im Vergleich zu Smartphones und Tablets lassen es ahnen, aktuelle Zugriffsstatistiken bestätigen es: Das Internet ist im Wandel. Oder genauer: der Zugriff darauf. Was sich hingegen nicht geändert hat, ist der Fokus auf die Inhaltspräsentation. Der optimalen Erfassung von Information und Inhalten sollte weiterhin das Hauptaugenmerk gelten.

Vor wenigen Jahren noch war bei einem Webseitenaufruf relativ klar: mit durchschnittlich fünf Browsern (Internet Explorer, Firefox, Safari, Chrome und Opera) wurde die Darstellung samt Inhalten auf eine recht eng gefasste Palette von Monitorauflösungen gebannt. Dabei war vor allem die minimale Monitorbreite von ca. 800 bis 1024 Pixel in Sachen Design und Funktionalität eine statische Bezugsgröße.

Heute haben wir einen bunten Strauß an Betriebssystemen, Browsern, Auflösungen und Fähigkeiten, welche in Zukunft noch weiter anwachsen werden, man denke nur an SmartTVs oder Google Glass. Diese Vielfalt erfordert ein Umdenken sowohl bei der Online-Strategie als auch bei ihrer konzeptuellen und technischen Realisierung. Denn jedes Endgerät stellt andere Anforderungen an die Lesbarkeit und Inhaltspräsentation. So sind vielleicht nicht alle verfügbaren Inhalte auch für alle möglichen Endgeräte gleich wichtig. Und besonders auf kleinen Displays kann ein Umstrukturieren oder Ausblenden von Inhalten nötig sein, um dem Besucher Inhalte so zu präsentieren, dass sie einen Mehrwert bieten und er gern wieder kommt.

Der beste Weg für jedes Ziel

Wir von trilobit nutzen bei der technischen Realisierung und Optimierung von möglichst breit zugänglichen Webpräsenzen zwei Verfahren: sogenannte "m-dot-Domains" und "Responsive Web Design".

m-dot-Domain

Mobildarstellung der Seite element.de

"m-dot-Domains" sind bekannt von Amazon, eBay, Spiegel oder auch der Deutschen Bahn. Gemeint sind eigene Subdomains, welche nur speziell aufbereitete Inhalte oder eine ganz eigene Version des Webangebots bereitstellen. Dabei werden nicht benötigte Inhalte gar nicht erst generiert oder ausgeliefert, außerdem sind eigenständige Funktionalitäten (wie z.B. touch-optimierte Formulare) relativ einfach integrierbar. Dabei wird in den oben genannten Beispielen auch gleich das Layout dieser Inhalte für kleine Bildschirmauflösungen optimiert und ausgegeben.

Die Entscheidung, ob statt der regulären Seite die optimierte Mobil-Variante aufgerufen wird, erfolgt dabei in der Regel via Useragent-Sniffing. Der Webserver entscheidet anhand der übermittelten Browserkennung, welche Variante der Webpräsenz besser für das Endgerät geeignet ist und leitet, gegebenenfalls nach Nachfrage, auf die Mobil-Variante um. Dabei kommt eine umfangreiche Liste der Browserkennungen zum Einsatz.

  • Vorteile dieser Lösung sind die explizite Content-Bereitstellung mit einhergehender Traffic-Verschlankung - was nicht benötigt wird, wird auch nicht ausgeliefert. Gerade bei weggelassenen JavaScript-Bibliotheken und Bildern kann der Geschwindigkeitszuwachs beim Abruf der Seite über ein Handy-Netz deutlich spürbar sein, und auch das Datenvolumen wird geschont.
    Außerdem bestechen die alternativen Funktionalitäten, denn es gibt gerade bei komplexen Webapplikationen sinnvolle Workflow-Alternativen für mobile Geräte. Mit "m-dot-Domains" können diese gezielter plattformoptimiert realisiert werden.
  • Nachteilig ist vor allem der höhere Aufwand, welcher durch doppelte Inhalte und/oder Workflows entstehen kann. Auch muss die Liste der Browserkennungen stets aktuell gehalten werden. Besonders exotische oder brandneue Geräte bekommen vielleicht nicht immer die optimale Darstellung ausgeliefert.
    Bedacht werden muss auch, dass es durch das Einrichten einer Subdomain zu einer Vorselektion der Darstellungsweise kommt, die nicht immer optimal ist. Leitet man beispielsweise einen Link der Form http://m.example.com von seinem Smartphone via Email weiter, der dann von einem Desktoprechner angesehen wird, so bekommt auch dieser Browser die mobile Darstellung ausgeliefert, was oft nicht gewünscht ist. Hier gilt es, Sicherungen zu integrieren und dem Nutzer gegebenenfalls die freie Wahl der Darstellung zu überlassen.

Responsive Web Design

Mobildarstellung der Seite colos-saal.de

Der (nahezu) rein auf CSS basierende Ansatz "Responsive Web Design" (kurz "RWD") geht auf die Methodik "Progressive Enhancement", also "schrittweise Verbesserung" zurück. Ausgehend von der kleinstmöglichen Basis werden Funktion, Inhalt und Design stetig erweitert und angereichert. Als Entscheidungsbasis dient hierbei die verfügbare Breite, bei Smartphones also etwa 320 bis 480 Pixel, bei Tablets etwa 600 bis 1000 Pixel und bei normalen Desktop-Systemen alles über 1000 Pixel, wobei dies nur grobe Richtgrößen sind, denn pixelgenaue Designumsetzungen sind ja bereits seit Jahren nicht mehr aktuell.

Natürlich reicht die verfügbare Breite als Entscheidungskriterium nicht mehr aus. Längst haben Smartphones wie das HTC One oder das Samsung Galaxy S IV physikalische Auflösungen von 1920x1080 Pixel erreicht und spielen damit in der Liga von FullHD-Monitoren, Apples aktuelles iPad bietet sogar 2048x1536 Pixel. Doch dank MediaQueries stehen auch noch andere Entscheidungshilfen zur Verfügung wie Pixeldichte und Bildschirmausrichtung.

Damit lässt sich ein Design realisieren, welches sich stets an die verfügbare Bildschirmfläche anpasst und abhängig davon zum Beispiel die Navigation um weniger wichtige Einträge entschlackt oder Inhaltsbereiche neu strukturiert. Auch Änderungen von Schriftgrößen oder Implementierung von alternativen Icons und touch-optimierten Schaltflächen gehören dazu.

  • Vorteil von RWD sind vor allem die Loslösung von Spezifikationen und Hinwendung zu "Fähigkeiten" der Geräte. Dadurch ist gewährleistet, dass die Webpräsenz später auch auf Geräten optimal funktioniert, die es derzeit noch gar nicht auf dem Markt gibt. Die Nachbetreuung durch den Dienstleister verringert sich also deutlich.
    Dazu kommt ein deutlich geringerer programmiertechnischer Aufwand. Optik und Design werden von der Instanz geregelt, welche dafür auch vorgesehen ist: CSS.
  • Der größte Nachteil ist sicherlich der "Ausliefern und Verstecken"-Ansatz von RWD: Inhalte und Bibliotheken werden an das Endgerät übermittelt, egal, ob sie auch angezeigt werden. Dadurch kann es vor allem auf komplexen Webpräsenzen mit hohem Bildanteil und viel (JavaScript-)Funktionalität zu längeren Ladezeiten via Handy-Netz kommen. Hier ist eine Optimierung und ein behutsamer Umgang mit Bibliotheken angebracht, denn das adaptive Nachladen von JavaScript-Bibliotheken steckt noch in den Kinderschuhen.
    Außerdem müssen komplexe Workflows oder desktopoptimierte Funktionen wie zum Beispiel Lightboxen oder Formular-Wizards alternativ implementiert oder vollständig umgebaut werden, um auch auf kleineren und touch-basierten Systemen optimal zu funktionieren

Das Beste aus zwei Welten

Beide Methoden haben ihre Vor- und Nachteile. Daher ist für jedes Projekt zu prüfen, welches Verfahren am besten geeignet ist. Wir von trilobit sind der Meinung, dass gerade für komplexe Anwendung die Kombination von m-dot-Domain und Responsive Web Design die stärksten Ergebnisse bringt.

Bei der Homepage der element GmbH kommen daher beide Verfahren zum Einsatz: Initial findet ein Abgleich der Browserkennung statt und leitet gegebenenfalls auf die m-dot-Domain um. Dort kommt dann eine responsive Gestaltung zum Tragen. So ist es möglich, das zentrale Element der Jobsuche optimal auf Tablets & Co. zu bringen, ohne auf Desktopsystemen auf vom Kunden gewünschte Features verzichten zu müssen. Das Layout passt sich dabei an die verschiedenen Breiten an und stellt so eine optimale Lesbarkeit und Bedienbarkeit auch bei sehr kleinen Displaygrößen sicher. Gleichzeitig lädt die Applikation auch im mobilen Netz sehr schnell, da auf Schmuckbilder weitgehend verzichtet wurde.

Bei Bestandsprojekten oder funktional weniger komplexen Präsenzen bewährt sich oft der responsive Ansatz. So haben wir die Seite des Musik-Clubs "Colos-Saal" in Aschaffenburg nachträglich für Smartphones optimiert. Wird die Seite via Smartphone angesteuert, greifen zusätzliche CSS-Deklarationen der Darstellung unter die Arme und bringen alle Konzert-Infos ansprechend an den Besucher.

Der Kunde als Projektpartner

Wie bei jedem Wandel bleibt auch der Boom von Smartphones und Tablets nicht ohne Aufwand. Die Anpassung und Optimierung von modernen Webpräsenzen für den mobilen (und zukünftigen) Markt erfordern bereits vorab Planung und Konzepte, auch und vor allem auf Kundenseite.

  • Welche Inhalte können notfalls ans Ende der Seite sortiert oder gar weggelassen werden, weil sie weniger hoch priorisiert sind?
  • Was sind die Kernaussagen? Was muss stets präsent und nach Möglichkeit auch im sichtbaren Bereich sein?
  • Welche Bildmittel sollen eingesetzt werden, wie können diese auch geräteübergreifend optimal bereit gestellt werden?

Gerade beim Designprozess besteht viel Dialogbedarf, eine frühzeitige Integration von RWD oder m-dot-Domains vermeidet erhöhte Kosten bei nachträglichen Anpassungen. Hier sorgen wir bei trilobit vor allem durch transparente Workflows und regelmäßige Statusupdates dafür, dass der Kunde stets um den aktuellen Projektstand weiß. Und einige Entscheidungen lassen sich am besten in der Praxis treffen. Durch agile Entwicklungstechniken können unsere Kunden auch noch während der Entstehungsphase Kurskorrekturen vornehmen oder Entscheidungen revidieren. Und sollte es mal an Ideen oder Konzepten mangeln: wir haben stets das passende Ass im Ärmel.