mittl medien | Webentwicklung in Stuttgart

Moderne Weblayouts
mit CSS Grid und Flexbox

Moderne Weblayouts erhöhen die Conversion Rate - realisierbar mit Techniken wie CSS Grid und Flexbox

Webseiten Layouts
bilden die Basis einer Webseite

Praktisch alles, was Sie im Netz finden, ist in Websites gefasst. Diese enthalten in der Regel ganz verschiedene Formen von Content, dessen Präsentation wiederum in bestimmten Layouts erfolgt. Die Relevanz des Webseiten-Layouts wird dabei oft unterschätzt. Es ist tatsächlich genauso wichtig wie seine Inhalte und sollte präzise auf die jeweiligen Voraussetzungen abgestimmt sowie responsiv, simpel und natürlich bestenfalls eindrucksvoll sein.

Komplexe Anforderungen durch den technologischen Fortschritt

Heutzutage ermöglicht es uns der technologische Fortschritt, das Web über jedes gewünschte Device zu durchsuchen. Daraus ergeben sich selbstverständlich ganz andere - und vor allem weitaus komplexere - Anforderungen für die Erstellung von Weblayouts als noch vor 10 oder gar 20 Jahren. Diese sollten heute ohne Einschränkungen und möglichst schnell auf jede Dimension reagieren können.

Mit Tabellen fing alles an

Zu den Anfangszeiten des Internets wurden komplexere Layouts noch mithilfe von Tabellen direkt im HTML generiert. Schließlich bekamen die Entwickler mit der Einführung von CSS ein Werkzeug an die Hand, durch das das Aussehen von Websites schon sehr viel differenzierter zu beeinflussen war. Die Erstellung mehrspaltiger Layouts konnte damit jedoch sehr aufwendig und nicht selten frustrierend sein. Solche und andere komplexere Darstellungen sowie dort integrierte Inhalte über unterschiedliche Browser hinweg konsistent und präzise umzusetzen, war mitunter ein überaus nervenaufreibendes Unterfangen. Man experimentierte mit Floats und Inline-Block-Konstrukten, kam jedoch in vielen Fällen nicht ohne Abstriche zu einem annehmbaren Ergebnis.

Flexbox und CSS-Grid
für komplexe Layouts

Zum Glück wurden mit der zunehmenden Fokussierung auf mobile Endgeräte immer mächtigere und dabei sehr funktionale Werkzeuge entwickelt, die derartige Layout-Probleme lösen konnten. Heute sind mit Flexbox und CSS Grid komplexeste Strukturen schaffbar, die praktisch ohne Weiteres mit allen erdenklichen Browsern und Devices funktionieren. Diese Techniken machen es nicht nur möglich auf vergleichsweise einfachem Weg Layouts zu erstellen, die früher keinesfalls ohne JavaScript realisierbar gewesen wären, sondern bieten zudem die Chance, den Code viel effizienter zu pflegen, anzupassen und weiterzuentwickeln.

Letztere Punkte sind hinsichtlich der weiterhin rapide fortschreitenden Entwicklung überaus wichtig. Denn ein nur schwer oder schlimmstenfalls gar nicht anpassbares Layout kann zukünftig vielleicht nicht mehr wie gewünscht funktionieren und entsprechende Inhalte – seien sie auch noch so gut – nicht mehr maximal vorteilhaft präsentieren.

Individuelle Templates erzeugen mehr Conversions

Allgemein ist es heute für den Erfolg einer Website unumgänglich, flexibel zu bleiben. Das bezieht sich nicht nur auf die sich ändernden technischen Voraussetzungen, sondern ebenso auf die Erwartungen der User! Mit dieser Genese kann ein „fertiges“ Theme oder Template, das ein vorprogrammiertes Standard-Layout bereitstellt, selbst bei noch so akribischer Nachbearbeitung kaum mithalten.

Da Menschen mittlerweile sowohl im Arbeitsumfeld als auch privat sehr viel Zeit im Web verbringen, können sie sehr wohl zwischen einem einzigartigen und einem Layout von der Stange unterscheiden. Dies geschieht nicht immer bewusst, schlägt sich aber stets in den Coversions nieder. Es ist also wichtiger denn je, einer Website mithilfe von individuellen Strukturen, bester Usability, einzigartigen Prozessen, der Kompatibilität mit Drittsystemen, Ladezeiten etc. eine eigene Identität zu verleihen.

Res­sour­cen­scho­nend und schnelle Ladezeiten

Dafür wird an der Basis tatsächlich nichts weiter benötigt als CSS Grid und Flexbox. Mit diesen Technologien erstellte Layouts können sich praktisch automatisch auf unterschiedliche Screens ausrichten. Neben der vergleichsweise einfachen Realisierung und Anpassbarkeit verlangen Sie Servern und Endgeräten weniger Ressourcen ab als beispielsweise ein großes Framework mit Bootstrap. Das wirkt sich wiederum auf die – heute für die SEO so wichtigen - Ladezeiten aus.