Responsives Design

Smartphone, Tablet, Laptop, PC ... Ihr Internetauftritt soll auf allen Geräten eine angenehme, leicht lesbare Darstellung bieten und sich mit Maus oder Finger gleichermaßen gut bedienen lassen.

Erfahren Sie mehr darüber, wie Responsive Design (engl., „anpassungsfähiges Design“) die Nutzung auf verschiedenen Geräten unterstützt und warum Sie bei der technischen Umsetzung Ihres Webauftritts auf professionelle Unterstützung setzen sollten.

• Teil 1: Bildschirmgrößen und Seitengestaltung
• Teil 2: Die Seitenelemente: Schriften, Tabellen, Bilder...

„Das kann ja kein Mensch lesen...“

Über viele Jahre wurden die Schriftgröße und Bildschirmpunkte auf Rechnern gleichgesetzt. Eine Schrifthöhe von 12 Bildschirmpunkten wurde als 12 Pixel-Schrift bezeichnet. Auf den niedrig-auflösenden Bildschirmen waren die absoluten Maßangeben in Pixel kein Problem. Heute allerdings verfügen Rechner, Tablets und Smartphones über hochauflösende Bildschirme, Drucker arbeiten in der Regel mit noch höheren Auflösungen. Ohne gerätespezifische Umsetzungen wäre die gleiche Schrift heute winzig.

Genau genommen stimmte die Angabe „1 Bildschirmpunkt = 1 Pixel“ nie, denn das Pixel als typografisches Maß ist definiert als 1/96 Zoll und damit unabhängig von der Anzahl der Bildpunkte des Bildschirms. In Anwendungen für die Vorbereitung von Druckvorlagen (Desktop Publishing) wird die Maßeinheit Punkt (pt, 1/72 Zoll) verwendet, die ihren Urspung im Buchdruck und der Typografie der Printmedien hat. Moderne Bildschirme verfügen über Auflösungen von ca. 220 Bildschirmpunkten pro Zoll. Für die Wiedergabe einer 12-Punkt-Schrift auf einem aktuellen Apple MacBook - Schrifthöhe: 12/72 = 1/6 Zoll - werden auf dem Bildschirm damit vertikal ca. 36 Bildpunkte genutzt.

Im responsiven Design wird der Fachmann alle verwendeten Schriftgrößen relativ bezogen auf eine Grundgröße angeben, so dass über Skalierungsfaktoren in den Gestaltungsvorlagen angemessene Schrifthöhen für verschiedene Bildschirmgrößen erzeugt werden können. Er wird außerdem bedenken, dass für den optischen Eindruck einer Schrift neben der Schriftgröße auch die Schriftart und Kennzeichen wie Ober- und Unterlängen eine wichtige Rolle spielen. Um eine gute Lesbarkeit auf kleinen Bildschirmen zu gewährleisten, kann es z.B. ratsam sein, auf Schmuckschriften zu verzichten.

„Ich hätte gerne 4 Spalten...“ - oder doch besser nicht?

Angenommen, Ihr Webauftritt enthält auf der Startseite im zentralen Bereich 4 Spalten, in denen Sie Merkmale Ihrer Angebote vergleichend nebeneinander stellen, ähnlich der Übersicht im Artikel Kosten hier im Journal.

Das Problem: Auf Smartphone-Bildschirmen werden Sie im Hochformat eine Spalte, im Querformat vielleicht zwei Spalten lesbar darstellen können - aber keinesfalls alle 4 Spalten. Auch hier können Sie im responsiven Design mit Hilfe von Gestaltungsvorlagen erreichen, dass bezogen auf die verfügbare Bildschirmbreite eine passende Anzahl von Spalten-Elementen dargestellt wird. Ähnliche Überlegunen gelten auch für einfache Textspalten wie Sie sie aus Zeitungen kennen oder für die Darstellung von Tabellen.

Kompromisse in der Präsentation der Inhalte werden dennoch an einigen Stellen unvermeidlich sein. So können Benutzerinnen und Benutzer Merkmalstabellen wie die oben erwähnte Kostenübersicht bei auf schmalen Ausgabemedien eben nicht mehr direkt nebeneinander vergleichen. Gerade bei Tabellen stößt die Technik der senkrechten Stapelung schnell an Grenzen und wird vielleicht bewußt zugunsten einer waagerechten Darstellung mit eingeblendetem Rollbalken verworfen.

„Das Laden der Seite dauert ja ewig...“

Das hat wohl jeder von uns schon erlebt: Ein erwartungsvoller Klick auf den Suchmaschinen-Treffer, die Seite öffnet sich - und bleibt leer. Nach einer gefühlte Ewigkeit baut sich langsam, langsam ein Bild auf. Beliebte Variationen dieser Erfahrung sind scheinbar bewegunslose Fortschrittsbalken und wahlweise animierte „bitte Warten“ Symbole.

Was ist passiert? Zwei typische Gründe für das benutzerfeindlich-langsame Laden einer Webseite liegen in einer Falle, in die mancher Hobby-Webdesigner tappt, der am heimischen PC in einer Großstadt mit schneller Internetanbindung z.B. mit Hilfe eines Homepage-Baukastens eine Hompage erstellt.

Zum einen sollten Sie bei Design und Umsetzung eines Webauftritts die Auswirkungen einer weniger schnellen Internetanbindung berücksichtigen.

Zum Anderen erweisen sich Bilder häufig als der Flaschenhals, an dem eine performante Darstellung scheitert. Ein einfaches Beispiel: Das Bild auf der Startseite meines eigenen Webauftritts, dessen Journal-Artikel sie gerade lesen, benötigt etwa 8-mal so viel Speicherplatz wie dieser gesamte Artikel. Dabei wurde das Bild bereits bearbeitet und für den Webauftritt optimiert. Im Original wäre das Bild etwa 1200-mal größer gewesen als dieser Text. Selbst bei sehr guter Internetanbindung hätte das Original über 2 Sekunden Ladezeit benötigt - mehr als manche Benutzerinnen und Benutzer warten würden...

Im responsiven Design wird ein guter Webentwickler für eingebettete Bilder die Möglichkeit der Auszeichnungssprache nutzen, in die Homepage angepasste Darstellungen bei unterschiedlichen Bildschirmgrößen einzubinden. Ebenso können - abhängig von den 'Fähigkeiten' des benutzen Browsers - verschiedene Bildformate bereit gestellt werden.

So kann beim Einsatz von Bildern, Grafiken und anderen Medien auch die Ladezeit optimiert werden, insbesondere mit Blick auf langsame Internetverbindungen und Mobilgeräte. Auch diese Überlegungen sind Merkmale eines sorgfältigen responsiven Designs.