Wissenswertes zu den Themen Webdesign, Responsive Webdesign, Web-Entwicklung, Homepage Erstellung und Contao

Vom klassischen zum responsiven Webdesign

Es ist noch gar nicht so lange her, da waren PCs und Notebooks mit ihren relativ großen Bildschirmen das Maß aller Dinge, wenn es um das Design von Webseiten ging. Die Anordnung von Content und Steuerelementen orientierte sich an den allgemein verbreiteten Größenstandards. Die meisten Seiten waren zu Beginn des Internetbooms noch für 800 x 600 optimiert. Größere Monitore und leistungsstärkere Grafikkarten tendierten zu Auflösungen von 1024 x 768 und später zu 1240 x 1024. Websites, die für kleinere Auflösungen konzipiert waren liefen selbstverständlich auch auf größeren Bildschirmen, wenngleich oft viel freier Raum um die Seiteninhalte zu sehen war. Umgekehrt mussten Nutzer mit leistungsschwächeren Monitoren auf hochauflösenden Webseiten manchmal viel herumscrollen, um an alle Seitenelemente zu gelangen. Um diese ergonomischen Schwachstellen zu umgehen, wurden Webseiten überwiegend für 1024 x 768 optimiert, wobei Webdesigner darauf achteten, dass die Darstellung auch in 800 x 600 noch akzeptabel aussah.

Warum Responsive Webdesign?

Die steigenden Zugriffszahlen internetfähiger Mobilgeräte zwangen die Webdesigner in den letzten Jahren, über neue Konzepte beim Webdesign nachzudenken. Auf Smartphones und Tablets mit unterschiedlich großen Displays lassen sich konventionelle Websites in der Regel gar nicht mehr vernünftig darstellen und steuern. Einen Ausweg bietet responsives Webdesign, bei dem die mobile Version und die Standard Web-Version in einer Website vereint werden. Technisch ist das nur mit neueren Webstandards wie HTML5, CSS3 und JavaScript möglich.

Was ist Responsive Webdesign?

Responsive Webdesign sorgt dafür, dass Webseiten in allen Browsern und auf allen Geräten optimal dargestellt werden. Gleich, auf welchem Gerät der Nutzer die Webseite auch aufruft – die zentralen Steuerelemente und der Hauptcontent befinden sich im Fokus und damit im direkten Zugriff. Das lässt sich mit responsivem Design in einem sehr hohen Maße umsetzen. Das Testen aller im Handel befindlichen Geräte ist allerdings nicht möglich. Im Gegensatz zu mobilen Webseiten, die mehrere Templates für unterschiedliche Geräte erfordern, ist wird beim reponsiven Webdesign ein einziges Website-Template erstellt, das sich automatisch an die Umgebung des jeweiligen Geräts anpasst. Durch den Einsatz von HTML5 und CSS3 werden mehrere Aspekte bei der Anzeige einer Webseite berücksichtigt: Verwendeter Bildschirm und Fenstergröße, Darstellungsmöglichkeiten des verwendeten Browsers und die Orientierung, also ob die Seite im Hoch- oder Querformat angezeigt wird.

Was sonst noch zu beachten ist

Neben der Darstellbarkeit hochauflösender Inhalte wie Grafiken und Bilder sind auch die Strukturen zu berücksichtigen, damit wichtige Inhalte auf kleinen Displays von Smartphones prominent platziert sind. Wenn es sich um die Website eines stationären Ladengeschäfts handelt, sollten auf sehr kleinen Displays von Smartphones beispielsweise die Öffnungszeiten im Blickfeld sein. Bei Online-Shops sind neben aktuellen Top-Angeboten die Steuerelemente zur Bestellabwicklung wie beispielsweise der Button für den Warenkorb an prominenter Stelle zu platzieren. Auch wenn der Webdesigner beim responsiven Webdesign nicht alle Geräte, Betriebssysteme und Browser testen kann, sollte er die fertige Website nicht nur auf PC und Mac, sondern zumindest auch auf iPad und iPhone sowie auf Geräten mit Android und Windows Phone testen und bei den Browsern die wichtigsten wie Firefox, Internet Explorer und Chrome im Blick haben.

Responsive Framework Bootstrap

Bootstrap ist ein HTML5 & CSS3 Framework, das Webdesignern hilft, die Entwicklung von mobilen Webapps und Webseiten wesentlich zu vereinfachen. Das Framework wurde von Twitter zur internen Verwendung entwickelt, um die interdisziplinäre Zusammenarbeit zwischen Designern und Entwicklern zu vereinfachen.

Weiter zum Artikel: Bootstrap, das HTML5 & CSS3 Responsive-Framework Webdesignern und Entwicklung