Responsive Webdesign - Made in Bielefeld

Funktionales , schickes und responsive Webdesign – gleichzeitig?

Ja, das funktioniert! Moderne und responsive Website erstellen ist unser täglich Brot und auch unsere Leidenschaft. Aber vorher noch ein kleiner Rückblick in die Vergangenheit ..

Das Internet (so wie wir es kennen) ist bereits mehr als 25 Jahre alt. In diesem langen Zeitraum haben Webseiten unzählige Verwandlungen mitgemacht. Vorbei sind die Zeiten, in denen Tabellen für das Layout verwendet wurden, Inhalte mittels Frames in die Webseite eingebunden oder Flash zu der Darstellung herangezogen wurde. Flash ist heutzutage quasi „gestorben“, denn kaum ein Browser unterstützt es noch. Neuerdings ist es gar so, das Flash manuell im Browser (Chrome und Edge) freigeschaltet werden muss und man sich dadurch verwundbar gegen Viren und Trojaner macht, die gerne ein Einfallstor über Flash nutzen. Also: weg mit dem unsicheren „Zeugs“. Microsofts Edge Browser stellt nun die Flash Unterstützung komplett ein.

Nach wie vor sollte man natürlich eine valide Strukturierung vom HTML verwenden, denn das hat sich in den ganzen Jahren nicht geändert. Es ist gar so, dass es noch mehr Bedeutung hat, als damals. Denn heutzutage sind auch die Suchmaschinen in der Lage, die Qualität des Quellcodes zu analysieren und zu bewerten. Und wenn der Quellcode Fehler enthält, wirkt sich das unter Umständen negativ auf das Ranking in den Suchergebnissen aus.

Webdesign muss sich heutzutage ganz anderen Herausforderungen stellen. Die Besucher der Webseite möchten schnell informiert werden. Nun gilt es, diese Informationen „schick“ zu verpacken, ohne dabei zu sehr vom eigentlich Inhalt abzulenken. Da die Informationen von allen nur erdenklichen Endgeräten wie Smartphone, Tablet, Laptop, TV und dem klassischen Computer abgerufen werden können, müssen wir komplett umdenken. Der klassische Layout-Ansatz, ein festes Layout (ähnlich wie bei Print-Medien) zu verwenden ist falsch und sollte durch ein flexibles (responsive) Layout ersetzt werden. Denn auch hier sind die Suchmaschinen in der Lage, dies zu beurteilen. Und wenn die Webseite nicht responsive ist, wirkt sich dies auch negativ auf die Platzierung in den Suchergebnissen aus. Wir sind eine kleine Internet Agentur in Bielefeld und unsere Leidenschaft ist modernes Webdesign. Seit 2008 kümmern wir uns um die Websites unserer Kunden. Vielleicht können wir ja auch dich bei deinem Projekt unterstützen.

Was ist responsive Webdesign?

Genau für diesen Zweck gibt es seit Jahren das responsive Webdesign. HTML5 und CSS3 machen es möglich, mit einem einzigen Layout, eine perfekte Darstellung auf den unterschiedlichsten Endgeräten zu gewährleisten. Vor einigen Jahren hat man noch extra für mobile Geräte eine eigenständige Webseite erstellt, auf die der Besucher weitergeleitet wurde, wenn er mit einem mobilen Endgerät die Webseite besuchte. Dieser doppelte Aufwand des Gestaltens und der Pflege zweier Webseiten, gehört auch endlich der Vergangenheit an.

Konzept „Mobile first“ für responsive Webseiten

Responsive Webdesign ist jedoch nicht gleich responsive Webdesign! Es gibt unterschiedliche Ansätze, wie eine Webseite entwickelt werden kann. Da ein Großteil der Besucher von überall aus Informationen abrufen möchte, sollte man sich bei der Entwicklung auch genau hierauf konzentrieren: Smartphone und Tablet. Aber mal ganz abgesehen davon, ist der Ansatz „mobile first“ auch der einzig richtige. Hierbei wird zualler erst das mobile Layout gestaltet (quasi die kleinste Ausgabegröße) und diese wird mit den wichtigsten Inhalten und Medien bestückt. Dank CSS3 kann nun ab einer bestimmten Breite ein Breakpoint, die sogenannten „media queries“ gesetzt werden, um so das bereits vorhandene Layout nach und nach mit weiteren CSS3 Regeln zu erweitern. So wird eine perfekte Darstellung auf dem nächst größeren Endgerät (evtl. Tablet) erreicht. Diese „media queries“ können übrigens unbegrenzt verwendet werden, um dadurch die Webseite auf allen erdenklichen Breiten exakt anzupassen, bis die Webseite sogar noch auf Full HD Fernseher optimal wiedergegeben wird.

Ein zusätzlicher Vorteil dieser Entwicklung ist, dass der Besucher (wenn er mit einem Smartphone surft) nicht die komplette Gestaltung laden muss. Große Hintergrundbilder werden erst ab z. B. 1024 px Breite angezeigt und geladen. Das bedeutet schnellere Ladezeit und spart Datenvolumen! Die Webseite lädt nur noch die für das entsprechende Endgerät vorgesehene Gestaltung und Medien. Bilder und Medien, die erst ab einem Laptop sichtbar sein sollen, werden so erst gar nicht geladen. Das schont nicht nur die Nerven (falls der Besucher unterwegs eine schlechte Datenverbindung haben sollte) sondern es reduziert auch seinen Datenverbrauch.

Webseiten mit flexibler Breite

Heutzutage findet man viele Webseiten, die zwar responsive sind, aber trotzdem mit festen Breiten arbeiten. Bei jedem „media break“ erfolgt dann ein nicht zu übersehender Sprung zur nächsten Breite. Dies ist zum einen ein unschöner Effekt, wenn man mal gerade das Browserfenster schmaler machen möchte, zum anderen wird durch diese Sprünge kostbarer Raum links und rechts verschenkt. Außerdem ist der Markt an Smartphones und Tablets einfach zu groß, um auf jede Display-Größen exakt einzugehen.

Richtig macht man es, indem nur noch prozentuale Breiten verwendet werden. Dadurch wird gewährleistet, dass kein Raum mehr verschenkt wird. Zusätzlich werden die unschönen „Sprünge“ beim Ändern der Breite vom Browserfenster eliminiert und alles passt sich flüssig an die Breite des Gerätes / Fensters an.

Warum gestalten viele Webdesigner noch mit festen Breiten?

Die Antwort ist simpel: Es ist einfacher, da man sich so auf sagen wir mal drei „media queries“ festlegen kann. Sollte das Endgerät irgendwo dazwischenliegen, gibt es halt rechts und links ungenutzten Raum.

Bei einem „fluid“ Webdesign (mit Prozentwerten) muss sichergestellt werden, dass das komplette Spektrum vom kleinsten bis zum größten Endgerät abgedeckt wird, was natürlich ein nicht zu unterschätzender Mehraufwand ist.

Aber wir können Sie beruhigen, denn bei uns bekommen Sie nur responsive Webseiten, die mit dem Ansatz „mobile first“ gestaltet sind und ein „fluid“ Layout verwenden.