Hast du Schwierigkeiten, dich zwischen responsivem und adaptivem Design zu entscheiden? Wir führen dich durch die Grundlagen des Verständnisses von adaptiven Websites und responsiven Websites.
Was sind adaptive Websites?
Beginnen wir mit adaptivem Webdesign. Woher kommt der Begriff? Der Begriff Adaptive Web Design wurde in dem Buch Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement, geschrieben von Webdesigner Aaron Gustafson. Adaptives Design ist auch bekannt als die progressive Verbesserung einer Website.
Während responsive Websites so konzipiert sind, dass sie ihr Layout ändern, um den verfügbaren Platz auszufüllen, sind adaptive Websites so konzipiert, dass sie mehrere feste Layout Größen haben.
Wenn eine Website den auf dem jeweiligen Gerät verfügbaren Platz ermittelt, wählt sie das am besten geeignete Layout für den Bildschirm des Geräts aus. Die Größenänderung des Browsers hat also keinen Einfluss auf das adaptive Layout der Website. Wenn du z.B. einen Browser auf einem mobilen Gerät öffnest, wählt die Website das beste Layout für diesen mobilen Bildschirm.
Einige etablierte Unternehmen (wie Amazon und Apple) haben ein adaptives Layout in ihre Websites integriert und sind für mobile Geräte optimiert. Durch die mobile Optimierung kann das angezeigte Layout auf einer mobilen Website von der Desktop-Version der gleichen adaptiven Website abweichen. Und warum? Das liegt daran, dass Webdesigner unterschiedliche Layouts für die Bildschirme mobiler Geräte wählen, anstatt das Design selbst neu anzuordnen.
Es gibt sechs gängige Bildschirmbreiten für adaptive Websites:
- 320 Pixel
- 480 Pixel
- 760 Pixel
- 960 Pixel
- 1200 Pixel
- 1600 Pixel
Vorteile des adaptiven Webdesigns
Jetzt, wo du weißt, was adaptives Webdesign ist. Was sind die Vorteile von adaptiven Websites?
- Adaptive Websites werden schneller geladen.
- Webdesigner haben die Kontrolle über jedes Layout, da sie in der Lage sind, das optimale Design für jede Bildschirmgröße zu erstellen.
Um es noch weiter auszuführen, aufgrund der verschiedenen Layouts werden bei adaptiven Websites im Gegensatz zu responsiven Websites mehrere URLs für eine einzige Seite verwendet. Außerdem können Webdesigner bei Bedarf Inhalte für verschiedene Bildschirmgrößen hinzufügen oder entfernen.
Stellen wir uns zum Beispiel vor, ein Gastronom entscheidet sich für ein adaptives Layout für seine Website. Warum sollte er sich für dieses Layout entscheiden und nicht für ein responsives Webdesign? Weil er weiß, dass Nutzer, die seine Website auf mobilen Geräten besuchen, sich in der Regel entweder den Standort des Restaurants oder die Speisekarte ansehen, um zu sehen, ob sie dort essen möchten.
Ein Nutzer, der die Website auf einem Desktop-Gerät besucht, könnte jedoch nach mehr Hintergrundinformationen über das Restaurant suchen. Mit einer adaptiven Website kannst du auf deiner Homepage je nach dem Bildschirm, den der Benutzer verwendet, unterschiedliche Inhalte anzeigen.
Nachteile von adaptivem Webdesign
Diese Vorteile sehen vielversprechend aus, was sind nun die Nachteile eines adaptiven Webdesigns?
- Aufgrund der doppelten Inhalte, die durch mehrere Layouts auf adaptiven Websites entstehen, kann sich dies auf die Suchmaschinenoptimierung (SEO) der Website auswirken.
- Die Verwendung eines adaptiven Webdesigns ist mühsam, da sie viel Zeit und Mühe erfordert.
Beispiele für adaptive Websites
∙ IKEA
Die mobile Website von IKEA verwendet ein adaptives Design, das für mobile Bildschirme optimiert ist. Sie verfügt über optimierte Menüs und eine optimierte Produktsuche, die auch die Einkaufslistenoption hervorhebt (die in der Desktop-Version der Website nicht so gut sichtbar ist). Dieses Design zielt auf Kunden ab, die ihr Handy beim Einkaufen in einem Geschäft benutzen.
Bild von IKEA Website genommen
∙ Adidas
Adaptive Websites wie Adidas verwenden ein adaptives Layout, das die Desktop-Website imitiert, um mobilen Nutzern ein reibungsloses Erlebnis zu bieten. Es hat hellere Bilder und einen einfacheren Einkaufsprozess.
Bild von Adidas Website genommen
∙ Turkish Airlines
Turkish Airlines bietet mobilen Nutzern die Möglichkeit, zwischen drei Versionen eines adaptiven Layouts zu wählen: Desktop-Website, mobile Website und mobile App. Die mobile Website hat ein neues, simples Design, das sich an kleinere Bildschirmbreiten anpasst.
Die Webdesigner haben Funktionen hervorgehoben, nach denen Reisende suchen (z.B. Online-Check-in und Flugstatus), sowie Flugbuchungsfunktionen für mobile Nutzer, die einen Flug buchen möchten.
Bild von Turkish Airlines Website genommen
Was sind responsive Websites?
Wann und wo tauchte der Begriff "Responsive Webdesign" zum ersten Mal auf? Der Begriff Responsive Web Design wurde 2011 in dem Buch Responsive Web Design von dem Webdesigner und Entwickler Ethan Marcotte eingeführt. Responsive Websites werden so gestaltet, dass sie auf Änderungen der Browserbreite mit einer Anpassung der Platzierung von Designelementen reagieren.
Der Inhalt einer Website mit responsivem Layout wird auf der Grundlage des verfügbaren Platzes im Browser angezeigt. Wenn du eine responsive Website auf dem Desktop öffnest und dann die Größe des Browserfensters änderst, wird der Inhalt dynamisch verschoben, um die Elemente optimal für das Browserfenster zu arrangieren, im Gegensatz zu adaptiven Websites. Auf mobilen Geräten hingegen erfolgt dieser Prozess automatisch, da die Website den verfügbaren Platz prüft, bevor sie die ideale Anordnung der Website präsentiert.
Vorteile von Responsive Web Design
Nun, da du weißt, was responsives Webdesign ist, was sind seine Vorteile?
- Im Gegensatz zu adaptiven Websites verwenden responsive Websites eine einzige URL, um sich jeder Bildschirmgröße für jede Seite anzupassen. Da sich die Technologie ständig ändert, löst diese Funktion Probleme, bevor sie auftreten.
- Der Entwurfsprozess erfordert weniger Zeit.
- Ein responsives Design ermöglicht Konsistenz über alle Geräte hinweg, was ein wichtiger Faktor für ein gutes Nutzererlebnis ist.
- Ein responsives Layout ist besser für die Suchmaschinenoptimierung (SEO) geeignet als ein adaptives Layout.
- Es gibt viele Vorlagen für responsive Websites, da diese unter Webdesignern sehr beliebt sind.
Nachteile von responsivem Webdesign
Was sind also die Nachteile von responsiven Websites?
- Responsive Websites werden im Vergleich zu adaptiven Websites langsamer geladen.
- Die Entwicklung eines responsiven Webdesigns erfordert mehr Zeit, da es mehrere bewegliche Teile hat. Bevor eine Website live geschaltet wird, sind viele Anpassungen und Überprüfungen erforderlich, da sich responsive Websites selbständig an jeden Bildschirm anpassen können müssen.
- Bilder auf einer responsiven Website können verzerrt oder Texte zu breit (oder zu schmal) werden, weil sich Designelemente verschieben.
Beispiele für responsive Websites
1. Real Meal Grill (Desktop- und mobile Website)
Bild von der Website eines Strikingly-Benutzers
Bild von der Website eines Strikingly-Benutzers
2. Dr. Chai Tea (Desktop und Mobile Website)
Bild von der Website eines Strikingly-Benutzers
Bild von der Website eines Strikingly-Benutzers
3. Grow Food Where People Live (Desktop und Mobile Website)
Bild von der Website eines Strikingly-Benutzers
Bild von der Website eines Strikingly-Benutzers
Vergleich zwischen responsivem und adaptivem Design
Immer noch unsicher? Vergleichen wir adaptive Websites und responsive Websites.
∙ Adaptive Websites sind einfacher zu entwickeln
Ein adaptives Design erfordert nicht die zusätzliche Aufmerksamkeit für das CSS und die Organisation einer Website (um sicherzustellen, dass jedes Layout für jede Bildschirmgröße funktioniert), die ein responsives Design erfordert.
Es ist viel einfacher, viele Layouts für deine Website zu erstellen, als ein einziges Layout zu entwerfen, das für jede Bildschirmgröße geeignet ist. Obwohl adaptive Websites ein gewisses Maß an Flexibilität erfordern, um auf verschiedenen Bildschirmgrößen zu funktionieren, ist es viel einfacher, als ein einziges Layout zu erstellen, das für alle Bildschirmgrößen passt.
∙ Ein adaptives Design ist weniger flexibel
Ein Nachteil adaptiver Websites besteht darin, dass das Endergebnis für eine Vielzahl von Bildschirmgrößen nicht immer optimal dargestellt werden kann. Während ein responsives Webdesign seine Funktionalität auf jeder Bildschirmgröße garantiert, funktioniert ein adaptives Webdesign nur auf so vielen Bildschirmen, wie seine Layouts verarbeiten können.
Wenn also ein neues Gerät mit einer neuen Bildschirmbreite auf den Markt kommt, passen die von dir erstellten adaptiven Layouts möglicherweise nicht so gut, wie du es dir wünschst. Das würde bedeuten, dass du sie entweder bearbeiten oder ein neues Layout erstellen musst.
Responsive Websites sind so flexibel, dass sie eigenständig funktionieren, während adaptive Websites höchstwahrscheinlich je nach den Umständen gewartet werden müssen.
∙ Responsive Websites laden schneller
Es ist wichtig, die Ladezeit deiner Website zu berücksichtigen. Eine adaptive Website muss jedes entwickelte Layout laden, während eine responsive Website nur ein einziges Layout laden muss, das für alle Bildschirmbreiten geeignet ist. Adaptive Websites benötigen aufgrund der zusätzlichen Layouts und Ressourcen mehr Zeit zum Laden als responsive Websites.
Dies ist jedoch nicht immer der Fall. Wenn du eine Website mit responsivem Layout, die 50 Seiten umfasst, mit einer Website mit adaptivem Layout, die 10 Seiten umfasst, vergleichst, wird die adaptive Website aufgrund der Größenunterschiede wahrscheinlich schneller geladen.
Welches Webdesign solltest du wählen?
Solltest du also ein adaptives Webdesign oder ein responsives Webdesign wählen? Denke in erster Linie an den Benutzer, denn so erhältst du mehr Einblick in seine Gewohnheiten (z.B. welche Geräte er zum Betrachten von Websites verwendet).
Wenn du davon ausgehst, dass die Nutzer Websites wie die deine eher unterwegs und auf ihrem Mobilgerät ansehen oder inhaltsintensive Seiten lieber auf ihrem Desktop betrachten, wird die Entscheidung zwischen adaptiven und responsiven Websites viel einfacher.
Ein weiterer Faktor, den du bei der Wahl deines Website-Layouts berücksichtigen solltest, ist der Zeitaufwand. Adaptive Websites erfordern im Vorfeld mehr Aufwand, da du technisch gesehen mindestens 4 bis 6 verschiedene Layouts erstellen musst. Responsive Websites sind jedoch komplexer, da sie so konzipiert sind, dass sie mehr Raum für Leistungs- und Darstellungsprobleme lassen, die zu einem späteren Wartungsbedarf führen könnten.
Hast du nach einem Website-Builder gesucht, um deine neue Website zu erstellen? Strikingly bietet stilvolle und reaktionsfähige Website-Vorlagen, mit denen du die adaptiven Websites erstellen kannst, die du dir wünschst. Strikingly verfügt über eine mobile Ansichtsfunktion, mit der du in der Vorschau sehen kannst, wie deine Website auf einem mobilen Bildschirm aussehen würde. So kannst du deinen Inhalt bei Bedarf ändern, wenn du mit der Erstellung deiner Seite fortfährst.
Bild von Strikingly
Strikingly bietet allen Nutzern seine Vorlagenbibliothek (die ständig erweitert wird!) - sowohl kostenpflichtige als auch kostenlose Abos - und die Möglichkeit, deine eigene Website zu gestalten. Worauf wartest du also noch? Entdecke die vielen Funktionen, die dieser Website-Builder zu bieten hat, und melde dich noch heute für ein Strikingly-Konto an, um noch heute mit der Gestaltung von adaptiven Websites (oder responsiven Websites) zu beginnen!
