Responsive Design: Warum Sie es falsch machen

Responsive Design ist keine Modeerscheinung, die aufgrund einer coolen CSS-Technik entstanden ist, sondern eine Antwort auf ein Problem. Denken Sie immer daran und fragen Sie sich ständig, ob Sie dieses Problem wirklich angemessen angehen oder nicht. Wenn Sie Ihre Medienabfrage-Haltepunkte durch Kopieren und Einfügen einfügen, ist Ihre Lösung möglicherweise fehlerhaft.

Lassen Sie uns diskutieren, warum Medienabfragen existieren und wie wir sie nutzen können, um das Dilemma des allgegenwärtigen Webs wirklich zu lösen. Lassen Sie uns darüber sprechen, warum Sie Ihren Inhalt die Haltepunkte eines Layouts bestimmen lassen sollten, nicht hypothetische Bildschirmgrößen.

Dieser Artikel ist Teil unserer Reihe zum Thema „Blick über das Desktop-Design hinaus“, die Sie in Zusammenarbeit mit Heart Internet VPS erhalten haben.

Die Idee hinter Medienabfragen

Um diese Debatte richtig zu beginnen, muss diskutiert werden, warum Medienanfragen plötzlich so populär geworden sind. Die Antwort ist natürlich, dass „Responsive Design“, ein Begriff, der von Ethan Marcotte geprägt wurde, eine fantastische Möglichkeit ist, ein ständig wachsendes Problem für Webdesigner anzugehen.

Während alle immer wieder darüber schimpften, wie das „mobile Web“ das traditionelle überholen würde, war die Revolution viel drastischer: Das Web wurde allgegenwärtig.

Dieses „Problem“ ist großartig für die ganze Welt, aber echte Kopfschmerzen für uns. In den letzten zehn Jahren hat sich das World Wide Web in etwas Neues verwandelt. Es ist nicht mehr an die Mauern gebunden, die wir zuvor errichtet hatten. Ich habe das schon einmal gesagt, aber es lohnt sich zu wiederholen. Während alle immer wieder darüber schimpften, wie das „mobile Web“ das traditionelle überholen würde, war die Revolution viel drastischer: Das Web wurde allgegenwärtig.

Zu diesem Zeitpunkt greifen wir nicht von einem einzigen Punkt aus auf das Web zu. Wir haben unsere Laptops nicht zugunsten von Smartphones aufgegeben, wie „Experten“ vorausgesagt hatten. Stattdessen ist das Web überall, wo wir sind. Dies gilt nicht nur für unsere Telefone und Computer, sondern auch für unsere Tablets, iPods, Spielesysteme, Fernseher und sogar Autos.

Dieser Trend wird sich erst im Laufe der Zeit fortsetzen. Responsive Design führt uns über eine Saison der Erstellung separater mobiler Websites hinaus in eine Ära, in der wir eine Website entwickeln, die sich weiterentwickelt und an das Gerät anpasst, auf dem es angezeigt wird. Mithilfe von Medienabfragen können wir spezifisches CSS für eine beliebige Anzahl unterschiedlicher Ansichtsfenstergrößen präsentieren und sicherstellen, dass jeder die bestmögliche Erfahrung hat.

Das Problem mit Responsive Design

Der obige Abschnitt ist kein halbhistorischer Rant, der den Raum füllen soll, sondern ein wichtiger Blick auf die Ziele, die mit Responsive Design erreicht werden sollen. Dann stellt sich die Frage, ob diese Ziele erreicht werden. Behebt Responsive Design das Problem der Allgegenwart angemessen?

Die Antwort ist kompliziert, bestenfalls kann ich sagen: "Es hängt davon ab, wie Sie es tun." Das ist eine verwirrende Aussage, nicht wahr? Responsive Design ist unkompliziert: Verwenden Sie Medienabfragen, um benutzerdefiniertes CSS für verschiedene Ansichtsfenstergrößen bereitzustellen. So geht das jeder richtig an? Wie kann es also einen richtigen und einen falschen Weg geben?

Die Komplexität entsteht, wenn wir beginnen, einen entscheidenden Teil dieser Technik zu diskutieren: Welche Medienabfragen sollte ich verwenden? Oder anders ausgedrückt: Welche „Haltepunkte“ sollte ich für benutzerdefiniertes CSS festlegen? Die derzeit beliebte Antwort beginnt vorhersehbar mit den besten „mobilen“ Geräten: dem iPhone und dem iPad (Stichwort verärgerte Kommentare von Android-Nutzern). Aus diesen Archetypen ermitteln wir sogenannte „generische“ Smartphone- und Tablet-Größen. Dann rücken wir auf und adressieren Laptops und kleine Desktops und schließlich große Bildschirme. Ein Standardsatz von Medienabfragen, wie dieser von CSS-Tricks, hat normalerweise neun oder zehn vordefinierte Haltepunkte.

Was wäre, wenn wir uns auf die Anforderungen eines bestimmten Designs anstatt auf einen hypothetischen Anwendungsfall für Geräte konzentrieren würden? Was wäre, wenn wir Layouts erstellen würden, die einfach überall funktionieren?

Um fair zu sein, funktioniert dieses System bis zu einem gewissen Grad. Wir haben alle viele großartige reaktionsfähige Websites gesehen, die mit einem ähnlichen Set wie Coyier erstellt wurden. Ich kann jedoch nicht anders, als zu glauben, dass dies irgendwie den gleichen Fehler wiederholt, den wir vor einigen Jahren beim Entwerfen von „mobilen Websites“ gemacht haben. Der gesamte Fokus liegt hier auf dem Gerät, das die Site anzeigt. Bevor wir die Site überhaupt erstellen, haben wir diese Haltepunkte im Auge.

Aber Geräte ändern sich. Wir haben bereits festgestellt, dass das Web über einen Netzschalter mit so ziemlich allem verbunden ist. Warum legen wir also wieder so viel Wert auf die derzeit üblichen Bildschirmgrößen? Gibt es eine bessere Alternative? Was wäre, wenn wir uns auf die Anforderungen eines bestimmten Designs anstatt auf einen hypothetischen Anwendungsfall für Geräte konzentrieren würden? Was wäre, wenn wir Layouts erstellen würden, die einfach überall funktionieren?

Inhaltsorientiertes Responsive Design

Die oben genannten Probleme mit vorab festgelegten Medienabfragen kamen mir erst in den Sinn, als ich mich vertiefte und wirklich anfing, selbst reaktionsschnelle Arbeit zu produzieren. Theoretisch sind die Standardvorschläge großartig, aber sobald Sie sie auf ein komplexes Design anwenden, werden Sie feststellen, dass diese Haltepunkte es nicht immer abdecken. Das Problem, wie die Boston Globe-Designer nach der Inbetriebnahme der Website schnell herausfanden, besteht darin, dass Probleme „dazwischen“ auftreten (für die Aufzeichnung ist dieses Projekt fantastisch und alle Layoutprobleme wurden weitgehend behoben). Die Dinge werden chaotisch, wenn das Design eine Größe hat, die Sie nicht berücksichtigt haben, und Sie müssen nachträglich die Löcher flicken.

Ich sage dies als begeisterter Apple-Fan: Hör auf, Websites für das iPhone zu entwerfen.

Meine Frage ist, warum fangen wir nicht dort an? Warum lassen wir das Design nicht entscheiden, anstatt mit einer Reihe von Geräten und folglich Medienabfragen in ein Projekt einzusteigen? Jedes Webseitenlayout hat einen Punkt, an dem die Browsergröße die Integrität verringert. Unsere Aufgabe als Designer sollte es angesichts des Problems der Allgegenwart sein, diese Größe zu finden und zu berücksichtigen, dann einzuschäumen, zu spülen und zu wiederholen, bis alle Schwachstellen berücksichtigt sind.

Ich sage dies als begeisterter Apple-Fan: Hör auf, Websites für das iPhone zu entwerfen. Entwerfen Sie stattdessen eine Website, die ihre Integrität beibehält, da die Größe des Ansichtsfensters auf einen möglichen Zustand reduziert wird. Denken Sie an bestimmte Geräte als Leitfaden für Ihr Design (Beispiel: Kleinere Geräte sind in der Regel berührungsbasiert, machen Sie also Links groß), aber setzen Sie Ihre Scheuklappen nicht auf und sehen Sie sich nicht das Gesamtbild an: Ihr Design sollte auf jedem Bildschirm gut aussehen.

Ein neuer Workflow

Wie sieht ein inhaltsorientierter Responsive Design-Workflow aus? Es ist einfacher als Sie denken. Natürlich brauchen Sie einen Ausgangspunkt. Wenn Sie mobil starten und aufsteigen möchten, großartig. Wenn du groß anfangen und runter kommen willst, auch toll. Ich persönlich finde es sehr schwierig, mich wirklich in ein Design zu vertiefen und es richtig zu machen, wenn ich auf mobiler Ebene anfange, aber es gibt viele solide Argumente dafür.

Wenn Sie diesem Workflow folgen, passiert etwas Magisches.

Angenommen, Sie haben mit einer großen, 1020 Pixel breiten Site begonnen. Schauen Sie sich das auf dem größten Bildschirm an, den Sie in die Hände bekommen können, und stellen Sie sicher, dass es großartig aussieht. Ziehen Sie nun das Fenster und verkleinern Sie es, bis das Design hässlich wird. Es gibt Ihren ersten Haltepunkt. Legen Sie eine Medienabfrage für diesen Punkt fest und korrigieren Sie alles, was Sie adressieren müssen. Wenn Sie fertig sind, greifen Sie zu diesem Fenster und finden Sie den nächsten Punkt der Hässlichkeit. Wiederholen Sie diese Schritte, bis Sie mit dem Bereich zufrieden sind, den Sie berücksichtigt haben.

Aber was ist mit dem iPad? Was ist mit dem Kindle Fire oder dem neuesten Versuch von Samsung, relevant zu sein? Wenn Sie diesem Workflow folgen, passiert etwas Magisches. Sie haben es so gemacht, dass das Layout in nahezu jeder Größe gut aussieht. Wenn Sie es richtig gemacht haben, wird es großartig aussehen, wenn Sie es auf Ihrem Telefon oder Tablet hochziehen.

Nur Layout
Beachten Sie, dass sich diese Diskussion nur auf Layoutverhältnisse bezieht. Sie können die Funktionalität auf verschiedenen Browsern und Geräten auf keinen Fall testen. Responsive Design trägt nicht dazu bei, dass verschiedene Browser-Engines HTML, CSS und JavaScript unterschiedlich interpretieren.

Fazit

Zusammenfassend lässt sich sagen, dass Medienabfragen und responsives Design uns ein unglaublich leistungsfähiges Tool bieten, mit dem wir die Tatsache berücksichtigen können, dass Websites auf allen Arten von Bildschirmen und Ansichtsfenstergrößen angezeigt werden. Sobald wir jedoch anfangen, unsere Designs an eine Handvoll Geräte zu binden, sind wir wieder da, wo wir angefangen haben. Ihr Ziel sollte es stattdessen sein, ein Layout zu erstellen, das so vielseitig ist, dass es nahezu jede Größe des Ansichtsfensters verarbeiten kann.

Theoretisch ist das alles schön, aber wo ist das Beispiel? Der Ausgangspunkt dieser Diskussion war mein jüngster Versuch, eine reaktionsschnelle Bildergalerie aufzubauen. In diesem Artikel erfahren Sie, wie ein inhaltsorientierter Responsive Design-Workflow in freier Wildbahn aussehen kann.