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.
