Wir sorgen für eine optimale Anpassung und Darstellung Ihrer Website auf allen Geräten. Desktop-Rechner, Notebooks, und mobile Endgeräte wie Smartphones und Tablets. Responsive Webdesign ist ein Muss.
Die Bedeutung von Responsive Webdesign
Responsive heisst auf Deutsch „reaktionsfähig“, was nichts anderes bedeutet, als dass sich die einzelnen Elemente einer Website an der jeweiligen Bildschirmgrösse anpassen. Wir gestalten die Inhalte so, dass Nutzer auf jedem Gerät alles übersichtlich und gut finden. Navigationselemente werden z.B. für die Darstellung auf Smartphones in aufklappbare Menus zusammengefasst, mehrspaltige Inhalte werden untereinander angeordnet. Schriften werden etwas kleiner dargestellt usw. Der Begriff „Responsive Webdesign“ fasst verschiedenen Techniken zusammen, mit welchen Websites mobile-tauglich gemacht werden können.
Das Mobile-First Prinzip
Bei Websites, welche auf allen Geräten gut aussehen und benutzerfreundlich bleiben sollen, muss auch auf die zu übertragende Datenmenge geachtet werden. Wir setzen auf das „Mobile-First“ Prinzip. „Mobile-First“ bedeutet, dass auf Smartphones und Tablets nur jene Daten geladen werden, welche auch wirklich nötig sind. Erst auf grösseren Bildschirmformaten werden zusätzliche Dokumente und Bilder geladen. Mobile Geräte verfügen meist über eine kleinere Bandbreite zur Datenübertragung als Desktop-Computer. Auch die CSS-Stile, welche für die Inhaltsformatierung benötigt werden, werden erst ab einer bestimmten Bildschirmbreite „gelesen“, wodurch für geringere Bandbreiten auch geringere Datenmengen empfangen werden müssen.
Mobile Websites
Als mobile Geräte den Markt eroberten, wurden für viele statische Websites eine eigenständige „Mobile version der Website“ entwickelt, um auf die kleineren Bildschirme zu reagieren. Der Vorteil einer separaten mobilen Version besteht darin, dass die Seiten und das Design komplett auf kleine Displays optimiert werden können. Es muss keine Rücksicht auf den Aufbau der bestehenden Desktop Seite genommen werden. Der gravierende Nachteil ist jedoch, dass nach dem Erstellen nun fortan zwei Websites gepflegt werden müssen, da sich Inhaltsänderungen nicht automatisch auf das neue System übertragen.
Diese Technik ist nicht mehr zu empfehlen. Ausser, die mobile Version soll sich in Umfang und Funktion signifikant von der Desktop-Version unterscheiden.
Adaptive Webdesign
Mittlerweile hat sich „Adaptive Webdesign“ etabliert. Für die Planung und Gestaltung von Web-Inhalten bietet dieses System Vorteile, da man sich bei der Anpassung der Seitenbreite auf „Breakpoints“ beschränkt. Die Inhalte werden statisch dargestellt und auf eine vordefinierte Breite fixiert. Der Inhalt passt sich dann stufenweise anhand der Display-Grösse oder bzw. der Breite des Browserfensters an. Durch die Breakpoints einer adaptiven Website werden dem Webdesigner Entscheidungsprozesse vereinfacht. Zum Beispiel welche Elemente erst auf grösseren Bildschirmen geladen werden sollen. Wann sollen sie neu angeordnet werden müssen? usw. Die Darstellung kann effizient und mit geringem Aufwand justiert werden.
Liquid- oder Fluid Webdesign
„Liquid“ oder auch „Fluid Webdesign“ unterscheidet sich dadurch von den anderen Techniken, dass sich die einzelnen Elemente stufenlos, und oft im gleichen prozentualen Verhältnis skalieren. Die Skalierung betrifft die Innen- und Aussenabstände der Elemente sowie die Schriftgrösse. Anders als bei adaptiven Websites wird bei liquiden Designs meist die komplette Fensterbreite des Browsers für die Anzeige verwendet. Da ein „rein liquides Layout“ keine Breakpoints besitzen würde, mit denen man einzelne Inhalte auf kleinen Bildschirmen anders anordnen kann, wird diese Technik eigentlich immer mit adaptivem Webdesign kombiniert. Der Vorteil besteht darin, dass man adaptive Techniken meist nur noch für Smartphones anwenden muss, da die komplett skalierte Seite auf Tablets, Notebooks und Desktop-Computern immer noch gut dargestellt werden kann.
Der Krieg um die Begriffe
Interessieren Sie ich für die vorgestellten Techniken und recherchieren im Netz? Sie werden sehen, dass sich die Community noch nicht wirklich auf eine klare Abgrenzung zwischen den Begriffen einigen konnte. Webdesigner und Programmierer unterscheiden z.B. noch zwischen „Responsive Webdesign“ und „Responsive Layout“. Genauso wie zwischen „Adaptive Webdesign“, „Adaptive Layout“. „Fluid Webdesign“ oder „Fluid Layout“. In diesem Beispiel bezieht sich der erste Begriff auf die angewandten Techniken und der zweite auf den tatsächlichen Aufbau eines Layouts selbst.
Ist die genaue Definition wichtig?
Manchmal stellen solche Unklarheiten bei technischen Begriffen ein Problem dar. Das kann zu Missverständnissen führen, jedoch ist dies beim Erarbeiten eines Webdesigns meist nicht der Fall. Oft fliessen die verschiedenen Techniken nahtlos ineinander. Der Webdesigner oder Programmierer entscheidet, wann welche Vorgehensweise am besten ist. Für den Anwender selbst macht es schlussendlich auch keinen grossen Unterschied. Die Seite auf seinem Gerät muss korrekt dargestellt werden und Inhalte müssen gut zu finden sein.
Sind Sie im Besitz einer Seite sind, welche noch nicht für mobile Geräte optimiert wurde? Kontaktieren Sie uns. Beispiele unserer Arbeit finden Sie in unseren Webdesign Referenzen.