Responsives Webdesign ist zu einem Oberbegriff geworden, um Ihre Website bei niedrigen Auflösungen gut zu machen.
Smartphones haben das mobile Internet revolutioniert, und Tablets werfen mit ihrer wachsenden Popularität einen weiteren Schlag ins Getriebe. Alles in allem könnte eine Website heute auf einem Smartphone mit niedriger Auflösung, einem Tablet mit mittlerer Auflösung oder einem Desktop oder Laptop mit hoher Auflösung dargestellt werden. Wenn Sie Retina-Displays in den Mix werfen, ist die Anzahl der möglichen Bildschirmgrößen schwindelerregend. Idealerweise wird Ihre Website bei allen Auflösungen elegant aussehen und funktionieren.
Responsives Webdesign an sich ist der Prozess, um eine Website auf sehr kleinen Bildschirmen, sehr großen Bildschirmen und bei jeder Auflösung dazwischen zu arbeiten.
In den letzten Jahren hat die Branche gemeinsam eine Shortlist mit gemeinsamen Best Practices entwickelt. Viele dieser Praktiken konzentrieren sich auf das Nachrüsten von Websites, die für hohe Auflösung bis zu niedrigeren Größen gedacht sind. Andere beginnen mit dem Handy und arbeiten sich bis zu den größeren Viewports aus und optimieren sie nach Bedarf. Alle diese Praktiken können allgemein als reaktionsfähige oder adaptive Layouts kategorisiert werden.
Responsive Layouts schneiden im Allgemeinen besser ab als adaptive Layouts, aber in einigen Fällen (z. B. bei komplexen Webapps) könnte ein adaptiver Ansatz den Nutzern besser helfen. In jedem Fall ist es das Ziel, dass Ihre Website in der gewünschten Auflösung immer optimal aussieht.
Die meisten Menschen entscheiden sich dafür, Medienabfragen zu verwenden, wie z Sie sind felsenfest es sei denn, Sie benötigen Unterstützung für IE8 oder darunter. Für diejenigen von uns, die immer noch ein Publikum im IE6 - 8 haben, hat Scott Jehl ein JavaScript-Polyfill namens Respond.js Das wird die Dinge funktionieren lassen.
Zuvor hatten viele Webdesigner bis zur Übergabe nur eine minimale Kommunikation mit den Entwicklern. Jetzt müssen Designer und Entwickler jedoch durch den Design- und Entwicklungsprozess zusammenarbeiten, damit alles reibungslos abläuft. Von Benutzeranalysen bis zu dem, was beim Ändern von Ansichtsfenstern neu angeordnet werden kann - Designer und Entwickler sind näher als je zuvor, wenn nicht dieselbe Person. Wenn Sie nach Inspirationen suchen, wie responsive oder adaptive Layouts aussehen, Medien-Anfragen ist eine beliebte Webdesign-Galerie, die vier Ansichtsfenster einer Website anzeigt.
Als die Idee des responsiven Webdesigns begann, an Boden zu gewinnen, dominierten adaptive Techniken für eine Weile. Es ist einfacher, in Design und Entwicklung für diese Layouts überzugehen, obwohl sie mehr Arbeit erfordern als ihre responsiven Komponenten. Dies ist auch der Weg, den viele Menschen bei der Nachrüstung einer bestehenden Website einschlagen, um mobil zu sein. Aufgrund der Natur von adaptiven Layouts geben sie viel mehr Kontrolle über das Design der Website. Sie müssen nur für bestimmte Ansichtsfenster entwerfen, und Browser zeigen nur das höchste Fenster an, das in die Breite passt. Diese Layouts sind diejenigen, die bei der Anpassung beim Anpassen der Größe Ihres Browserfensters "einrasten". Wenn Sie Ihr Fenster auf weniger als 1024 Pixel verkleinern, sehen Sie diese plötzliche Änderung, über die ich spreche, da sich das Layout dieser Website so einstellt, dass Sie sich auf ein Ansichtsfenster mittlerer Auflösung konzentrieren können.
Beim Entwurf für einen adaptiven Entwicklungsansatz ist die Arbeit ziemlich einfach. Bevor Responsive Webdesign eine Sache wurde, entwarf man einfach ein Layout und entwickelte es dann. Jetzt entwerfen Sie mehrere Ansichtsfenster und entwickeln sie. Im Allgemeinen ist es einfacher, mit Bildfenstern mit niedriger Auflösung zu beginnen und sich hochzuarbeiten. Wenn Sie mit hochauflösenden Ansichtsfenstern beginnen und nach unten gehen, könnten die Dinge ein wenig ... kompakt werden. Und bis du mobil bist, überladen.
Die Anzahl der Ansichtsfenster, für die Sie entwerfen, liegt ganz bei Ihnen und dem Entwickler. Erarbeiten Sie anhand Ihrer Benutzer einen Schlachtplan. Wenn die aktuelle Website-Analyse zeigt, dass Nutzer hauptsächlich Ansichtsfenster mit niedriger und mittlerer Auflösung verwenden, planen Sie diese. Sie möchten mindestens drei: eins für Ansichtsfenster mit niedriger Auflösung (Smartphones), Mittelauflösungs-Ansichtsfenster (Tablets) und eins für hochauflösende Ansichtsfenster (Desktops und Laptops). Idealerweise ist die Planung für sechs der Standard mit einem Layout mit hoher und niedriger Auflösung für jedes der drei oben aufgeführten Ansichtsfenster. Wenn Sie jedoch zu viele mehr haben, werden Sie die Entwicklung und Wartung zu sehr in die Hand nehmen, seien Sie also vorsichtig.
Die Entwicklung eines adaptiven Layouts ist auch ziemlich einfach. Vorausgesetzt, Sie haben von Anfang an mit dem Designer (oder dem Designer) zusammengearbeitet, ist es genauso, wie wenn Sie eine traditionelle Website entwickeln. Sie beginnen mit der Entwicklung der Website in einem mobilen Anzeigefenster mit niedriger Auflösung. Sobald Sie damit fertig sind, verwenden wir Medienabfragen, um das Layout für Ansichtsfenster mit höherer Auflösung zu erweitern. Im Folgenden finden Sie Medienquerabfragen mit niedriger, mittlerer und hoher Auflösung:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Hier kommt der "Snap" aus dem adaptiven Ansatz. Da wir auf mehrere gängige Viewport-Auflösungen abzielen, kann es bei der Größenänderung des Fensters dazu führen, dass das Layout springt. Wie ich bereits erwähnt habe, ist Adaptive Design & Development nur zum Nachrüsten oder für komplexe Webapps sehr nützlich. Das Entwerfen und Entwickeln von vielen Layouts für unabhängige Ansichtsfenster ist viel mühsamer, wenn es nicht benötigt wird.
Ab sofort ist Responsive Design und Entwicklung der De-facto-Ansatz. Während es im Vergleich zu einem adaptiven Ansatz weniger Kontrolle über das Layout bietet, ist es viel weniger Aufwand zu implementieren und zu warten, da Sie technisch nur ein Layout haben. Es ist auch mehr für die Website angepasst, und das ist das wichtigste Verkaufsargument. Sie können Ihre eigenen Haltepunkte basierend darauf erstellen, wann Ihr Design bricht oder nicht wie gewünscht aussieht.
Responsive Layouts beinhalten auch flüssige Layouts. Bevor sich das responsive Webdesign durchsetzte, waren flüssige Systeme populär - Layouts, die Prozentsätze für Breiten verwendeten. Während sie in den meisten Fällen sicherlich gut funktionierten, war das früher, bevor wir Smartphones und Tablets hatten. Jetzt werden die meisten flüssigen Layouts durch Medienabfragen bei sehr niedrigen und sehr hohen Auflösungen ergänzt. Sonst könnte es zu sehr kompakten oder immens großen Layouts kommen.
Während Sie mit dem adaptiven Design eine sehr einfache Anleitung haben, ist das Responsive Design nicht so klar. Es gibt eine hitzige Debatte, dass das Entwerfen im Browser der beste Weg ist, um es gleichzeitig zu entwerfen und zu entwickeln. Da Sie beim Entwurf grundsätzlich alle Ansichtsfenster berücksichtigen, ist auf der Designseite mehr Arbeit erforderlich. Im Idealfall möchten wir die Ansichtsfenster behalten, aber nicht für ein bestimmtes Design. Wenn möglich, versuche dich in einem Mittelfeld zu treffen; Konzentrieren Sie sich auf Ansichtsfenster mit mittlerer Auflösung und beachten Sie dabei, dass das Layout später für niedrigere und höhere Auflösungen angepasst werden muss.
Es ist äußerst wichtig, vorhandene Benutzeranalysen zu verwenden, wenn Sie sie haben. Wenn auf Ihrer Website bereits Analysen vorhanden sind, mit denen Ihre Zielgruppe in erster Linie aus Anzeigenbereichen mit niedriger Auflösung gelesen wird, legen Sie einen Schwerpunkt auf diese Bereiche. Richten Sie Ihre Zielgruppe ein , auch wenn das bedeutet, dass Sie einige der Best Practices ignorieren. Am Ende wird Ihre Website sie bedienen, nicht die Leute, die diese "besten" Praktiken zusammentragen.
Sobald die Designphase abgeschlossen ist, beginnt die Entwicklung. Wie bereits erwähnt, wenn Sie analytische Daten Ihrer typischen Zielgruppe haben, beginnen Sie dort. Sobald Sie Ihr Layout entwickelt haben, verwenden Sie Medienabfragen, um darauf zu reagieren. Anstatt festgelegte Ansichtsfenster zu definieren, ändern Sie stattdessen manuell die Größe Ihres Browsers, bis das Layout bricht. Wenn dies der Fall ist, ist dies die Haltepunktbreite. Fügen Sie eine Medienabfrage hinzu, um den Designbruch zu beheben und die Größenanpassung fortzusetzen. Im Idealfall werden Sie dies von einem Gerät mit hoher Auflösung aus tun, damit Sie alle Ansichtsfenster sehen können. Nachdem Sie sichergestellt haben, dass Sie Unterstützung für Ansichtsfenster mit niedriger und hoher Auflösung haben, fahren Sie mit dem Testen fort.
In seltenen Fällen können Sie auf eine Website stoßen, die eine benutzerdefinierte Lösung verwendet, z {$lang_domain} . Im Allgemeinen fällt der Großteil des Webs entweder in die reaktiven oder adaptiven Gruppen, wie oben beschrieben, aber manchmal werden die Leute kreativ und machen ihre eigene Lösung. {$lang_domain} Dazu beginnen Sie mit den Standard-Tief-, -Medium- und Hoch-Breakpoints, dann ergänzen Sie sie nach Bedarf, wenn das Layout bricht. Darüber hinaus ist das Layout bis zu einer eingestellten maximalen Auflösung fließend. In diesem Sinne kreativ werden und etwas bauen, das die Norm bricht!
Leider gibt es wirklich keine gute Lösung für Browser, die diese Layouts noch testen. Der beste Weg zum Testen ist es, es manuell zu tun: Laden Sie die Seite auf Ihr Handy, Tablet, Laptop und alles andere herum. Sie können auch einen Viewport-Spoofer in Ihrem Browser verwenden, wenn er eine solche Erweiterung unterstützt. Ripple-Emulator ist eine Erweiterung, die ich in Chrome verwende, um einige Ansichtsfenster mit niedriger Auflösung zu testen. Es ist zwar unbequem, manuell auf Geräten zu testen, aber es gibt einen genaueren Eindruck von der Funktionalität Ihrer Website. UI, die auf einem Emulator gut aussieht, kann auf einem tatsächlichen Gerät tatsächlich ziemlich schlecht funktionieren.
So umfangreich wie dieser Artikel ist, ist dies nur eine Einführung in das Thema Layout-Typen. Es gibt viele Informationen über responsive Webdesign-Methoden, die in diesem Artikel nicht enthalten sind. Die Optimierung von UI-Elementen und -Typographie, responsiven Bildern und Medien, Gerätepixelverhältnissen und vielem mehr wird hier nicht erläutert. Es gibt jedoch viele Quellen für dieses Wissen in viel mehr informationsdichten Formen. Seit der Idee des Responsive Webdesigns haben wir zu einem überaus großen Wissensschatz zu diesem Thema beigetragen. Ich hoffe, dass Sie, indem Sie hier den Unterschied zwischen den Layout-Typen erklären, die Idee eines ansprechenden Webs besser in den Griff bekommen können, ohne sich im Kaninchenloch verlaufen zu müssen.
Die Community entwickelt ständig neue Techniken und konstruiert kreative Lösungen für Probleme, denen wir gerade erst begegnen. Es gibt zwar eine Fülle von Informationen über responsives Webdesign, aber ein Konzept steckt noch in den Kinderschuhen. Best Practices und häufige Anwendungsfälle lassen sich leicht anpassen, Kreativität und das Erstellen einer eigenen Lösung werden jedoch immer unterstützt. Wenn Sie Tipps oder Vorschläge für diejenigen von uns haben, die sich gerade mit unserem responsiven Webdesign und unserer Entwicklung vertraut machen oder erweitern möchten, sollten Sie unten eine Diskussion anstoßen!
Vorgestelltes Bild / Thumbnail, verwendet reagierendes Bild über Shutterstock.