Responsive Design ist keine Modeerscheinung, die durch eine coole CSS-Technik entstanden ist, sondern eine Antwort auf ein Problem. Denken Sie immer daran und fragen Sie sich ständig, ob Sie das Problem wirklich adäquat angehen. Wenn Sie zum Einfügen Ihrer Haltepunkte für Medienabfragen die Option zum Kopieren und Einfügen verwenden, ist Ihre Lösung möglicherweise fehlerhaft.
Lassen Sie uns besprechen, warum es Medienabfragen gibt 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 die Haltepunkte eines Layouts von Ihren Inhalten bestimmen lassen sollten, nicht von hypothetischen Bildschirmgrößen.
Dieser Artikel ist Teil unserer Serie "Blick über das Desktop-Design hinaus", die Sie in Partnerschaft mit Heart Internet VPS erhalten haben.
Die Idee hinter den Medienabfragen
Um diese Debatte richtig zu beginnen, muss diskutiert werden, warum Medienfragen plötzlich so populär geworden sind. Die Antwort ist natürlich das? Responsive Design? Ein von Ethan Marcotte geprägter Begriff ist eine fantastische Möglichkeit, ein ständig wachsendes Problem für Webdesigner anzusprechen.
Während alle immer wieder darüber redeten, wie das? Mobile Web? die traditionelle überholen würde, war die Revolution viel drastischer: das Netz wurde allgegenwärtig.Dieses Problem? ist großartig für die Welt als Ganzes, 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 Wände gebunden, die wir zuvor errichtet hatten. Ich habe das schon gesagt, aber es lohnt sich, es zu wiederholen. Während alle immer wieder darüber redeten, wie das? Mobile Web? die traditionelle überholen würde, war die Revolution viel drastischer: das Netz 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 als "Experten" aufgegeben. vorhergesagt Stattdessen ist das Web überall da, wo wir sind. Das betrifft nicht nur unsere Telefone und Computer, sondern auch unsere Tablets, iPods, Spielesysteme, Fernseher und sogar Autos.
Dieser Trend wird sich mit der Zeit nur fortsetzen. Responsive Design führt uns nach einer Saison, in der separate mobile Websites erstellt wurden, und in eine Ära, in der wir eine Site entwickeln, die sich weiterentwickelt und an das Gerät anpasst, auf dem sie angesehen werden. Mithilfe von Medienabfragen können wir spezifisches CSS in einer beliebigen Anzahl verschiedener Ansichtsfensterrassen präsentieren und sicherstellen, dass jeder die bestmögliche Erfahrung hat.
Das Problem mit Responsive Design
Der obige Abschnitt ist kein halbhistorischer Ausdruck, der den Raum ausfüllen soll. Er ist ein wichtiger Blick auf die Ziele, die mit responsivem Design erreicht werden sollen. Die Frage lautet dann: Erfüllt sie diese Ziele? Reagiert responsives Design das Problem der Ubiquität angemessen?
Die Antwort ist kompliziert, bestenfalls kann ich sagen, es kommt darauf an, 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 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 ein Targeting durchführen? Die aktuelle populäre Antwort beginnt vorhersagbar mit dem besten? Mobile? Geräte rund um: das iPhone und das iPad (wütende Android-Benutzerkommentare). Aus diesen Archetypen bauen wir so genannte "Generika" auf. Smartphone- und Tablet-Größen. Dann gehen wir nach oben und adressieren Laptops und kleine Desktops und schließlich große Bildschirme. Ein Standardsatz von Medienabfragen wie diese von CSS-Tricks verfügt normalerweise über neun oder zehn vordefinierte Haltepunkte.
Was wäre, wenn wir uns auf die Bedürfnisse eines bestimmten Designs anstatt auf einen hypothetischen Anwendungsfall konzentrieren würden? Was wäre, wenn wir Layouts bauten, die einfach überall funktionierten?Fairerweise funktioniert dieses System bis zu einem gewissen Grad. Wir haben alle eine Menge großartiger responsiver Sites gesehen, die mit einem Set ähnlich dem von Coyier oben erstellt wurden. Ich kann jedoch nicht anders als zu denken, dass dies den gleichen Fehler wiederholt, den wir beim Entwurf von "mobilen Websites" gemacht haben. vor einigen Jahren. Der gesamte Fokus liegt hier auf dem Gerät, das die Site betrachtet. Bevor wir die Site überhaupt erstellen, haben wir diese Haltepunkte im Auge.
Aber die Geräte ändern sich. Wir haben bereits festgestellt, dass das Internet mit einem Netzschalter an fast alles angeschlossen ist. Warum legen wir also wieder so viel Wert auf die gängigen Bildschirmgrößen? Gibt es eine bessere Alternative? Was wäre, wenn wir uns auf die Bedürfnisse eines bestimmten Designs anstatt auf einen hypothetischen Anwendungsfall konzentrieren würden? Was wäre, wenn wir Layouts bauten, die einfach überall funktionierten?
Inhaltsorientiertes Responsive Design
Die zuvor genannten Probleme mit vorab etablierten Medienanfragen traten nur bei mir auf, als ich mich selbst engagierte und wirklich anfing, reaktionsschnelle Arbeiten zu produzieren. Theoretisch sind die Standardvorschläge großartig, aber sobald Sie sie auf ein komplexes Design anwenden, werden Sie feststellen, dass diese Haltepunkte dies nicht immer abdecken. Das Problem, das die Boston Globe-Designer schnell herausfanden, als die Site live geschaltet wurde, ist, dass Probleme auftreten, die sich dazwischen befinden. (für das Protokoll ist das Projekt fantastisch und alle Layoutprobleme wurden weitgehend gelöst). Die Dinge werden unordentlich, wenn das Design eine Größe hat, die Sie nicht berücksichtigt haben, und Sie müssen hineingehen und die Löcher nachträglich flicken.
Ich sage dies als begeisterter Apple-Fan: Sie müssen keine Websites mehr für das iPhone entwerfen.
Meine Frage ist, warum fangen wir nicht dort an? Anstatt mit einem Satz von Geräten in ein Projekt zu gehen, und infolgedessen Medienabfragen im Hinterkopf, warum lassen wir den Entwurf nicht entscheiden? Jedes Webseitenlayout weist einen Punkt auf, 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 zu schäumen, abzuspülen und zu wiederholen, bis alle Schwachstellen berücksichtigt sind.
Ich sage dies als begeisterter Apple-Fan: Sie müssen keine Websites mehr für das iPhone entwerfen. Entwerfen Sie stattdessen eine Website, die ihre Integrität beibehält, da die Größe des Darstellungsbereichs auf einen möglichen Zustand reduziert wird. Berücksichtigen Sie bestimmte Geräte als Leitfaden für Ihr Design (Beispiel: kleinere Geräte sind in der Regel touchbasiert, machen Sie also Links groß), aber legen Sie Ihre Blinder nicht auf und schauen Sie sich das Gesamtbild nicht an: Ihr Design sollte auf jedem Bildschirm gut aussehen.
Ein neuer Workflow
Wie sieht also ein inhaltsorientierter, responsiver Design-Workflow aus? Es ist einfacher als Sie denken. Natürlich brauchen Sie einen Ausgangspunkt. Wenn Sie mit dem Handy anfangen und aufsteigen möchten, ist das großartig. Wenn Sie groß anfangen wollen und runterkommen, auch toll. Ich persönlich finde es sehr schwierig, wirklich in ein Design zu graben und es richtig zu machen, wenn ich von der mobilen Ebene aus beginne, aber es gibt viele solide Gründe, dies auf diese Weise zu tun.
Wenn Sie diesem Workflow folgen, geschieht etwas Magisches.Angenommen, Sie haben mit einer großen, 1020px breiten Site begonnen. Überprüfen Sie es auf dem größten Bildschirm, den Sie in die Finger bekommen können, und stellen Sie sicher, dass es gut aussieht. Ziehen Sie nun das Fenster und verkleinern Sie es, bis das Design unschön wird. Da ist dein erster Haltepunkt. Stellen Sie eine Medienabfrage für diesen Punkt ein und beheben Sie alles, was Sie ansprechen müssen. Wenn Sie fertig sind, schnappen Sie sich dieses Fenster und finden Sie den nächsten Punkt der Hässlichkeit. Wiederholen Sie diese Schritte, bis Sie mit dem von Ihnen erfassten Bereich zufrieden sind.
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, geschieht etwas Magisches. Sie haben es gerade so gemacht, dass das Layout bei jeder Größe gut aussieht. Wenn Sie es richtig gemacht haben, wird es großartig aussehen, wenn Sie es auf Ihrem Handy oder Tablet hochziehen.
Nur Layout
Beachten Sie, dass sich diese Diskussion nur auf Layout-Verhältnisse bezieht. Sie können die Testfunktionen auf verschiedenen Browsern und Geräten absolut nicht verlassen. Responsive Design trägt der Tatsache nicht Rechnung, dass verschiedene Browser-Engines HTML, CSS und JavaScript unterschiedlich interpretieren.
Fazit
Zusammenfassend bieten Medienabfragen und responsives Design ein unglaublich leistungsfähiges Werkzeug, um zu berücksichtigen, dass Websites auf allen Arten von Bildschirmen und Viewport-Größen angezeigt werden. Sobald wir jedoch unsere Designs an eine Handvoll Geräte gebunden haben, sind wir genau da, wo wir angefangen haben. Ihr Ziel sollte es vielmehr sein, ein Layout zu erstellen, das so vielseitig ist, dass es mit fast jeder Größe des Ansichtsfensters umgehen kann.
Das ist in der Theorie alles schön, aber wo ist das Beispiel? Der Anstoßpunkt dieser Diskussion kam von einem kürzlichen Versuch von mir, eine responsive Bildergalerie aufzubauen. In diesem Artikel erfahren Sie, wie ein inhaltsorientierter Design-Workflow in der Wildnis aussehen kann.