Ich surfe jeden Tag im Internet auf mehreren Geräten. Ich benutze mein Macbook Pro, iMac, PC, iPad, iPhone und ja sogar meinen Fernseher. Es stört mich wirklich, wenn ich Webseiten sehe, die nicht für größere Bildschirmauflösungen optimiert sind, oder die zwei Minuten brauchen, um mein Mobilgerät zu laden.
Wir alle haben das Konzept des responsiven Designs angenommen. Sehr wenige Leute argumentieren dagegen. In der Tat, der einzige überzeugende Repost, den ich in letzter Zeit gehört habe, ist, dass ein Kunde nicht bereit ist, die damit verbundene zusätzliche Zeit zu bezahlen. Aber wie bei jeder neuen Praxis sind Mythen gewachsen, um es zu kontrapunktieren.
Mal sehen, ob wir ein paar dieser Missverständnisse beseitigen können ...
Ja, das mobile Web explodiert und es ist die treibende Kraft hinter Responsive Design, aber wenn wir an Responsive Design denken, müssen wir mehr als nur Mobile berücksichtigen. Mit der Einführung von Retina-Displays und Videospiel-Browsern betrachten Internetnutzer Webseiten nun auf größeren Bildschirmauflösungen und in vielen verschiedenen Kontexten.
Berücksichtigen Sie beim Entwerfen und Entwickeln responsiver Websites verschiedene Benutzerkontexte. Sie müssen darüber nachdenken, welches Gerät ein Benutzer verwendet: Ist der Benutzer auf einem mobilen Gerät oder zu Hause vor dem Fernseher? Sie müssen darüber nachdenken, wo sich der Benutzer befindet: Ist der Benutzer in der Schlange im Supermarkt oder in der Wildnis? Gute Inhalte zu haben, bedeutet nichts, wenn Ihre Website zehn Minuten braucht, um geladen zu werden, während Ihre Benutzer mit Margarita am Strand sitzen.
Inhalt ist alles, aber Kontext ist überall und es ist etwas, über das du absolut keine Kontrolle hast. Aus diesem Grund sollte Ihr Inhalt realistisch auf jede große oder kleine Auflösung skaliert werden. Wir verfügen über eine Reihe von Werkzeugen, die es uns ermöglichen, Layouts zu manipulieren, Textgrößen zu optimieren und die Leistung für jeden Kontext zu erhöhen. Denken Sie daran, sie zu verwenden.
Denken Sie daran, dass sich der Kontext ständig ändert. Deshalb ist es so wichtig, das visuelle Layout, die Bedürfnisse des Benutzers und die Leistung in Einklang zu bringen, wenn Sie sich einem responsiven Design nähern. Es geht nicht nur um Mobile.
Ich habe argumentiert, dass Responsive Webdesign nicht für jedes Projekt funktioniert und vom Anwendungsfall abhängt. Nun, ich habe vor kurzem meine Ansicht geändert und ich bin fest davon überzeugt, dass wir, wenn wir nutzerorientierte Designer und Entwickler werden, jedes Projekt mit Responsive Design berücksichtigen müssen.
Websites mit fester Breite können bei größeren und kleineren Bildschirmauflösungen Einschränkungen verursachen. Die Quintessenz ist, dass unsere Websites für alle zugänglich sein sollten, unabhängig davon, welches Gerät oder welche Bildschirmauflösung sie verwenden, ohne Einschränkungen.
Ich habe festgestellt, dass in der Branche ein Trend auftaucht, bei dem Designer und Entwickler responsive Websites erstellen, die nur auf bestimmte Geräteauflösungen skalieren, und ich bin auch schuldig. Die drei häufigsten Geräte sind natürlich Laptops / Desktops, iPads und iPhones (oder andere mobile Geräte). Als Designer müssen wir erkennen, dass Responsive Design über Design-Breakpoints verfügt und Inhalte für alle lesbar und zugänglich macht, nicht nur für die Nutzer bestimmter Geräte.
Wenn Sie Websites in einem Softwareprogramm entwerfen, ist es wichtig, eine Art Framework mit Breakpoints zu haben, von dem aus gearbeitet werden kann. Ich schlage vor, Ihre eigenen zu erstellen. Optimiere dein Layout nach dem Inhalt. Um herauszufinden, welche Breakpoints am besten funktionieren, sollten Sie zuerst ein paar Drahtmodelle skizzieren, um eine Idee zu erhalten. Dann können Sie mit der Software Ihrer Wahl Pixel setzen. Stellen Sie sicher, dass Sie beim Drahtmodellieren und Entwerfen dasselbe Raster bearbeiten.
Wenn Sie wie ich sind, dann codieren Sie Ihre Wireframes und erstellen einen Live-Prototyp. Dies hat mir geholfen, meinen reaktionsschnellen Workflow zu verbessern, da ich ein flüssiges Mockup erstellen und dem Design Breakpoints hinzufügen kann, wenn das Design bricht, anstatt zu versuchen, Pixel in Photoshop zu stopfen.
Eines der größten Probleme, die ich auf vielen reaktionsschnellen Websites bemerkt habe, ist, dass Typografie den Wölfen präsentiert wird, wenn Designer und Entwickler sich dafür entscheiden, Geräte-Breakpoints über Design Breakpoints zu verwenden. Meiner Meinung nach zeigt die Wahl des Geräts gegenüber Design eine vollständige Missachtung des Inhalts, der veröffentlicht wird, und des Benutzers, der diesen Inhalt konsumiert. Der Inhalt sollte seine Lesbarkeit behalten, bis er angepasst werden muss, um diese Lesbarkeit beizubehalten. Inhalt wird immer König sein und die Zugänglichkeit und Lesbarkeit Ihrer Inhalte sollte immer die höchste Priorität haben.
Eine der Möglichkeiten, die Lesbarkeit von Inhalten in einem responsiven Design beizubehalten, besteht darin, relative Einheiten wie z. B. ems für Schriftgröße, Auffüllung, Ränder und Layout zu verwenden. Bei Responsive Design geht es um proportionale Layouts und meiner Meinung nach sind Ems perfekt.
Ems sind relative Einheiten, die auf die Schriftgröße von übergeordneten Elementen skalierbar sind, sie können Ihnen viel Zeit und Ärger ersparen und helfen dabei, die Struktur Ihres gesamten Layouts zu erhalten. Was bedeutet das für dich? Nun, es bedeutet, dass wenn die Basisschriftgröße größer oder kleiner wird, das Layout gleichmäßig angepasst wird, ohne etwas zu verfälschen.
Hier ein Beispiel: Wir haben zwei Design-Breakpoints gefunden, einen für einen sehr großen Desktop-Monitor bei einer Superauflösung und einen für ein kleines Tablet. Nehmen wir an, unsere Basisschriftgröße ist 16px, was 1,0em entspricht, und wir erhöhen die Basisschriftgröße auf 22px, wenn die Website mit einer Auflösung von 3840 x 2160 (Superauflösung) angezeigt wird 14px bei einer Auflösung von 800 x 600 (kleiner Laptop / Tablet). Wir haben gerade die Größe des Typs und das Layout unserer Website an zwei festgelegten Haltepunkten, einem großen und einem kleinen, dramatisch verändert. Eine Überschrift bei 1.4em mit einer Schriftgröße von 22px für größere Auflösungen bedeutet, dass 1.4em gleich 30.8px ist und bei der kleineren Schriftgröße von 14px wäre 1.4em gleich 19.6px. Obwohl unsere Schriftgröße bei 3840 x 2160 dramatisch größer geworden ist, müssen wir uns keine Gedanken über das Layout machen, da es sich auch angepasst hat. Nehmen wir an unser containing Element hat eine Breite von 50em. Bei einer Auflösung von 800 x 600 wäre das 700 px, bei einer Auflösung von 3840 x 2160 wären es 1100 px. Unsere Polsterung und Ränder würden sich ebenfalls anpassen. Bei der größeren Auflösung mit Schriftgrößen und dem in ems festgelegten Layout konnte unser Design proportional skaliert werden, was unseren Inhalt besser zugänglich und lesbarer macht.
Der Zweck des Responsive Designs besteht darin, Ihre Inhalte für alle, auch für Behinderte, über alle Bildschirmauflösungen und Geräte hinweg zugänglich zu machen. Inhalt zu verstecken ist nie eine gute Idee und die Chancen stehen gut, wenn du es verstecken musst, brauchst du es nicht von Anfang an. Das Ausblenden von Inhalten macht es für Bildschirmleser unlesbar und Sie machen Ihren Inhalt jetzt für Personen mit visuellen oder kognitiven Behinderungen unzugänglich. Denken Sie daran, Inhalte sollten auf allen Geräten universell sein. Bestrafen Sie Ihre Nutzer nicht, indem Sie einschränken, was sie auf einem separaten Gerät anzeigen können.
Davon abgesehen finde ich immer noch einige Anwendungsfälle, in denen angezeigt wird: keine; ist praktisch. Meistens befassen sich alle Anwendungsfälle mit einer Art von Navigation, und ich verwende display: none; auf Navigationselementen, die auf verschiedenen Geräten wechseln. Es ist nie eine gute Idee, Inhalte auf verschiedenen Geräten zu beschränken oder auszublenden, da Sie diese Entscheidung höchstwahrscheinlich auf einer Annahme basieren und einige Benutzer irgendwo sehr schlechte Erfahrungen machen werden.
Es gab eine Reihe von Webseiten, die ich in letzter Zeit gesehen habe und die ein geringes Empathie gegenüber Benutzern mit geringer Bandbreite gezeigt haben. Die meisten dieser Sites haben die gleichen Gemeinsamkeiten, große Bilder und große JavaScript-Bibliotheken und viele dieser Websites könnten optimiert worden sein, wenn sie mit einem mobilen ersten Ansatz entworfen wurden.
Da es immer noch viele Diskussionen über reaktionsfähige Bilder gibt, ist es schwierig für jemanden, sich auf eine einzige Lösung festzulegen. Ich verstehe das Dilemma, aber das Warten auf eine perfekte Lösung, die bei allen Browsern und Geräten Standard ist, macht Ihre aktuelle Website nicht einfacher auf Geräten mit begrenzter Bandbreite. Finden Sie eine Lösung, die Ihr Problem am besten behebt und damit läuft. Keine Lösung zu finden, bedeutet Performance-Probleme für alle, was den Zweck des responsiven Designs komplett zunichte macht.
Große JavaScript-Bibliotheken können auch Probleme auf kleineren Geräten verursachen. Versuchen Sie, einen Weg zu finden, um diese abhängig von der Bildschirmauflösung oder dem Gerätetyp bedingt aufzurufen. Bei Responsive Design sollte die Leistung kein Nachtrag sein.
Das Internet ist explodiert, und mit der Einführung der Mobil- und Smartphone-Technologie können wir überall und in jedem Kontext auf Inhalte zugreifen. Es ist wichtig, sicherzustellen, dass wir alle unsere Nutzer erreichen und ihnen geben können, was sie wollen, wann sie wollen. Responsive Design ist eine sehr neue Technik und meiner Meinung nach die perfekte Technik, um unsere Inhalte im Web zu vereinheitlichen.
Welche anderen Mythen über responsives Design möchten Sie entlarven? Gibt es Nachteile beim Responsive Design? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, reagierendes Webbild über Shutterstock.