Responsive Webdesign
Die wichtigste Neuerung war die Einführung der Media Queries. Die neuen Anforderungen bringen neues Denken und eine neue Art Websites zu gestalten mit sich. Vorher wurde versucht, die Daten vom Browser und Geräten zu sammeln, um daraufhin dem Browser die jeweiligen Templates zu übergeben. Es wurde zumeist mit festen Pixel-Zahlen gearbeitet. Mit Responsive Webdesign brauchen wir nur noch ein Template. Über die Media Queries wird dann die Darstellung auf den Devices angepasst.
Eine gute Hilfe bietet dafür Bootstrap, womit wir viele gute Erfahrung gesammelt haben und worauf all unsere Webseiten seit vielen Jahren basieren. Dabei unterscheidet Bootstrap vier Device-Zustände; damit ist immer die Breite des Displays gemeint:
- Extra small devices:Phones (<768px)
- Small devices: Tablets (≥768px)
- Medium devices:Desktops (≥992px)
- Large devices:Desktops (≥1200px)
Trotz dieser Hilfsmittel können Darstellungsfehler entstehen, da die Browserhersteller sich leider noch immer nicht durchgängig an alle Standards halten. Um aber trotzdem schneller die Anforderung zu meistern und dabei für eine gute Qualität auf allen möglichen Devices zu sorgen, sind wir weiter gegangen und haben für uns einen eigenen Device-Lab aufgebaut. Und dazu wird Browsersync benutzt um die Geräte parallel zu steuern.
Wie wir diese Neuerung nutzen wird im einem späteren Beitrag zu lesen sein.
Hat dir der Artikel gefallen?
Werkraum News:

Toller Podcast zu Künstliche Intelligenz von Sascha Lobo
Wir von werkraum träumen ja schon seit langem vom eigenen Podcast, wäre das nicht immer so viel spannende Projekte, die es zu erledigen gibt. Solange hören wir einfach andere…
Matomo im DDEV installieren
Ich zeige euch wie man eine lokale Matomo Instanz im DDEV nutzen kann.
Strukturierte Daten - schema.org
Suchmaschinen mit den richtigen Daten füttern ist einfacher als man denkt.