Es gibt verschiedene Wege moderne und responsive Weblayouts zu erstellen. Templates und Themes werden meist mit UIkit, Bootstrap oder Foundation umgesetzt, da es auf den ersten Blick einfach und leicht erscheint.
Auch ohne Framework können responsive Webseiten mit akzeptablen Aufwand umgesetzt werden. Ohne Framework erreicht man deutlich schnellere Ladezeiten, welche zu eine längeren Verweildauer des Besucher auf der Webseite führen. Ein weiterer Vorteil ist, dass Google schnelle Webseiten besser platziert.
Die nötigen eingesetzten Techniken für responsive Webseiten habe ich in diesem Vortrag auf dem JoomlaDay 2019 dargestellt. Insbesondere gehe auf die Techniken CSS Flexbox und CSS Grid ein.
Folgende Punkte werden in im Vortrag über Webayouts behandelt:
- Unterschiede zwischen Flexbox und Grid
- responsives Spalten-Layout mit Bild und Text
- CSS Padding Bottom Trick
zum Schwerpunkt CSS Flexbox
- Ausrichtung der Elemente mit CSS Flexbox
- typische Beispiele mit CSS Flexbox
- CSS Flexbox Browser Debugging
- Berechnung der Größe der Kindelemente von CSS Flexbox
und Schwerpunkt CSS Grid:
- Grid Ausrichtung der Elemente
- Grid Template Areas
- Grid auto-fill und auto-fit
- CSS Subgrid
- Implicit und Explicit Grid
- Grid Browser Debugging
CSS Grid und Flexbox ermöglichen schnelle Ladezeiten der Webseite, da man hier kein Framework für das Webseitenlayout benötigt. Die Vorteile wie höhere Conversion Rate und individuellere Layouts unterstützen diese Umsetzung.
Zu den --> Slides zu moderne Weblayout mit Flexbox und Grid
Zum --> Video zu moderne Weblayout mit Flexbox und Grid
Progressive Web App (PWA)
Progressive Web App - unverzichtbar für jede Webseite? Lesen Sie mehr...
Joomla PWA
Realisierung der Progressive Web App mit Push Nachrichten in Joomla für eine Kommune.Lesen Sie mehr...
PWA oder Nativ?
Sprecher auf dem Digital Breakfast in Stuttgart "PROGRESSIVE WEB APP (PWA) EINE ALTERNATIVE ZUR NATIVEN APP?" Lesen Sie mehr...