Vor rund 20 Jahren habe ich meine ersten Webseiten in reinem HTML mit einem Texteditor erstellt, damals wurden die Elemente mit unsichtbaren, verschachtelten  Tabellen positioniert ( Tabellen ohne Rahmen), denn das Design vom Reißbrett konnte so eins zu eins  umgesetzt werden.

Vom Raster-Layout zum Zen Garden

Grundlage des Tabellen-Webdesign war ein Raster, das in Photoshop erstellt und anschließend in HTML via Tabellen umgesetzt wurde, ein pixelgenaues Positionieren war nur so möglich. Die Tabellen wurden nicht wie sonst üblich zur geordneten Darstellung von Zahlen verwendet, sondern waren der Grundbaustein für das Layout einer Webseite in den frühen 2000er Jahre.

Trotzdem war das  Tabellenlayout eine Krücke, es hatte einen aufgeblähte HTML-Code, welcher Form und Funktion der Webseite enthielt. Die so erstellten Webseiten waren  weder barrierefrei noch suchmaschinenfreundlich.

Zum Glück wurde bereits in den 90iger  Jahren  CSS entwickelt. Es hat das Layout mit Hilfe von Tabellen abgelöst,  durch CSS wurde erstmals eine klare Trennung zwischen dem Design der Webseite und deren Inhalt realisiert, eine kleine Revolution.

Wie habe ich die Bücher “Little Boxes” von Peter Müller  und CSS Zen Garden  geliebt, sie waren meine erste Lektüre zu CSS. Es war erstaunlich, welche neuen Gestaltungsmöglichkeiten es jetzt fast ohne Photoshop gab, selbst das ineinander verschachteln von DIVs  war möglich (Holy Grail) und ohne CSS würde es heute kein Responsive Web Design geben.

Responsive Webdesign – Mobile First

Heute nutzen viel Menschen das Smartphone oder das Tablet und wünschen sich zu recht ein Webdesign, welches auch bei wenigen Pixeln und langsamer Internetverbindung gut aussieht und schnell geladen wird. Und selbst Suchmaschinen wie Google haben sich “Mobile First” auf die Fahne geschrieben.

Bei Mobile First wird die Webseite für die Smartphone Version der Webseite entwickelt, dadurch entfallen überflüssige Informationen, man beschränkt sich auf relevante und präzise Inhalte. Ebenso ist die Anzahl der Unterseiten und die Tiefe der Navigation zu reduzieren, das Ergebnis ist eine leicht verständliche, intuitive Navigationsstruktur. Nicht ohne Grund sind OnePages so beliebt. Auch Geräte wie Tablet und Desktop-PC profitieren von diesen optimierten Inhalten.

Das Design orientiert sich ebenfalls an dem kleinsten Bildschirm, wenn funktioniert, wird sie mittels CSS auf die übrigen Geräte erweitert ( (Mobile First Responsive Design).

Tipps für responsive Design:

  • verwende für Deine alle Seiten und Elemente nur prozentuale  Pixelwerte,
  • gehe bei neuen Seiten nach dem Prinzip Mobile First Responsive Design vor,
  • der Inhalt ist wichtiger als das Design, lege Wert auf präzisen und relevanten Inhalt,
  • benutze nur prozentuale Schriftgrößen,
  • verzichte auf feste Bildgrößen (siehe Peter Müllers Beitrag “Responsive Bilder“).

Fazit:

Es ist heute wichtig, dass wir unser Angebote auf allen Geräten für den Kunden zugänglich machen. Eine Lösung ist Responsive Webdesign. Unsere Kunden wünschen sich heute schnelle Seiten, die sich einfache bedienen lassen und dabei noch effizient sind, eine Herausforderung für alle Webdesigner.