Responsives Design

Eine Website für alle Geräte - Teil 2

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...

Kurz und knapp:
Responsives Webdesign gewährleistet eine angepasste Darstellung der Inhalte bei unterschiedlichen Bildschirmgrößen.
  • Das Layout der Seite berücksichtigt ‚automatisch‘ die Bildschirmgröße des Ausgabegerätes, z.B. in der Darstellung der Navigationselemente und der Menüleiste.
  • Die Lesbarkeit von Texten bleibt erhalten, z.B. durch die Verwendung angepaßter Schriftgrößen.
  • Bilder und Bedienelemente werden an das Bildschirmformat ebenso angepasst wie z.B. Spaltenbreiten oder ganze Tabellen.

„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 verworden.

„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...

Ein guter Webdesigner wird beim Einsatz von Bildern, Grafiken und anderen Medien stets auch den Aspekt der Ladezeit beachten, insbesondere mit Blick auf langsame Internetverbindungen und Mobilgeräte. Auch diese Überlegungen sind Merkmale eines sorgfältigen responsiven Designs.

Lesen Sie zum responsiven Design auch den Teil 1 dieses Artikels: Bildschirmgrößen und Seitengestaltung

Hat Ihnen dieser Artikel gefallen?
Schreiben Sie einen Kommentar!

erforderliche Angaben
Powered by Commentics
Noch maximal 1000 Zeichen.

Kommentare

Noch keine Kommentare. Schreiben Sie den ersten!