Wenn Responsive Design schief geht (und wie man es beheben kann)

Die meisten Websites, die Responsive Design verwenden, verwenden sie falsch, was zu Problemen führt. Der generelle Ansatz für responsives Design ist ein fauler Ansatz. Wenn Sie diesen Ansatz wählen, funktionieren einige responsive Websites absolut fehlerfrei und viele von ihnen nicht. Für diejenigen, die perfekt funktionieren, ist es wahrscheinlich eine Frage des Glücks.

Das Konzept des responsiven Designs ist einfach, aber es ist die Einfachheit, die die Menschen dazu bringt, Fehler so leicht zu machen. Designer mit jahrelanger Erfahrung haben sich inzwischen an das Designen von Desktops gewöhnt. Daher planen sie normalerweise ein Design basierend auf einem Desktop-Layout.

Desktop-Layouts unterscheiden sich von Tablet-Layouts und mobilen Layouts, da sie normalerweise mehrspaltig sind, normalerweise große Leerräume enthalten und alles nur "groß" ist, weil es kein besseres Wort gibt. Wenn responsive Design-Techniken verwendet werden, soll dieses mehrspaltige Layout in eine einzige Spalte aufgeteilt werden.

Wenn dies alles ist, was Ihr responsives Design tatsächlich tut, wenn es auf einem mobilen Gerät angezeigt wird, liegt möglicherweise ein Problem vor. Wie stark ein Problem ist, hängt von Ihrer Einstellung ab, aber gute Designer legen Wert auf gute UX. Sie kümmern sich noch mehr um schlechte UX. Wenn Ihre Site eine schlechte UX hat und Sie ein guter Designer sein möchten, müssen Sie sie reparieren.

Dieses Problem beim Zusammenfassen eines mehrspaltigen Layouts in einer einzelnen Spalte besteht darin, dass es nicht proportional funktioniert. Wenn Sie etwas horizontal verkleinern müssen und keine weiteren Änderungen vornehmen, wird es offensichtlich vertikal erweitert.

Gießen Sie Wasser aus einem kurzen, fetten Glas in ein hohes, dünnes Glas, und das Wasser nimmt die Form eines hohen, dünnen Glases an, während das Wasservolumen genau gleich bleibt. Designer müssen verstehen, dass wir mit einer Website das Volumen ändern müssen. Normalerweise ist es keine gute Idee, die Form zu ändern, aber den Inhalt beizubehalten genau das Gleiche. Etwas muss geben.

Jemand, der wirklich den Titel eines Designers erworben hat, wird verstehen, dass dies ein Problem ist, das gelöst werden muss, und was Designer eigentlich tun, ist, Lösungen für Probleme zu finden. Daher ist es die perfekte Aufgabe für Sie, den besten Weg zu finden, um die Kerninhalte der Website bereitzustellen, ohne das Benutzererlebnis in ein frustrierendes Scroll-Fest zu verwandeln. Hier einige Punkte, die es zu beachten gilt, wenn ein Desktop-Design in ein mobiles Design zerlegt wird:

1. "Mobile First" ist schwachsinnig

Entschuldigung, aber es ist so. Jeder plappert dies, aber als Konzept ist es nicht sehr hilfreich, denn wenn Sie wirklich "mobile first" entwerfen, wird es ein Albtraum sein, wenn Sie versuchen, es wieder auf ein Desktop-Design zu skalieren, es sei denn, Sie haben ein reines einspaltiges Layout oben.

Der beste Ansatz ist, mindestens drei (und bis zu 11) unterschiedliche Layouts physisch zu entwerfen. Zu den Mindestanforderungen, die Sie berücksichtigen können, gehören:

  • Desktop
  • Mobile Landschaft
  • Portrait Mobile

Wenn Sie etwas gründlicher sein wollen, sollten Sie auch Folgendes berücksichtigen:

  • Landschaftstablette
  • Porträt-Tablet

Und die vollständige Liste, wenn Sie absolut vollständig sein wollen, wäre:

  • Riesiger Desktop
  • Gewöhnlicher Desktop
  • Große Landschaftstablette
  • Großes Portrait-Tablet
  • Kleine Landschaftstablette
  • Kleines Portrait-Tablet
  • Große Landschaftsmobile
  • Großes Portrait Mobile
  • Kleines Landschaftsmobile
  • Kleines Portrait Mobile
  • Winzig / tragbar

Bei so vielen verschiedenen Möglichkeiten ist es offensichtlich, warum ein fauler Ansatz, der für alle passt, so verlockend ist, aber es ist auch offensichtlich, warum es so viele Möglichkeiten gibt, ihn zu ruinieren.

2. Zähmen Sie die ausladende Seitenfußzeile

Das Desktop-Design enthält eine dieser großen, klobigen Seitenfußzeilen mit vielen internen Links? Toll, das wird wahrscheinlich auf einem Desktop sehr praktisch sein. Auf einem Handy sieht es lächerlich aus und ist mehr als nur eine Berührung nervig. Sie können für jeden Geräteunterbrechungspunkt völlig unterschiedliche Seitenfußzeilen entwerfen. Machen Sie diese Fußzeilenlinks in einem modalen Dialog verfügbar, und alle gewinnen.

3. Akzeptieren Sie einige kleinere Macken auf dunklen Geräten

Wenn ein bestimmtes Gerät nicht üblich ist, ist es nicht so schlimm, wenn das Design einige Macken enthält, die nur beim Anzeigen auf diesem Gerät angezeigt werden. Je beliebter ein Gerät ist, desto mehr müssen Sie daran arbeiten, die darauf befindlichen Macken zu beseitigen.

4. Sie können Inhalte ausblenden, die nicht zur Kernbotschaft beitragen

Der wichtigste Teil einer Site ist die Kernbotschaft. Ja, auf einigen Websites ist der wichtigste Teil die Werbung, und diese sind nur für die Bereitstellung dieser Werbung vorhanden. Wenn Sie jedoch entscheiden müssen, ob Sie die Kernnachricht oder die Werbung anzeigen möchten, wählen Sie die Nachricht aus. Google betrachtet Sie eher als persona non grata Wenn Sie den Kerninhalt ausblenden und dann eine Reihe von Anzeigen schalten. Dies liegt daran, dass dieser Kerninhalt auf dem von Google indizierten Index basiert. Wenn dieser Inhalt nicht angezeigt wird, betrachtet Google dies als betrügerisch.

Darüber hinaus sind Dinge wie Bilder, die rein dekorativ oder ästhetisch sind, aber nicht wesentlich zur Kernbotschaft beitragen, Kandidaten für die Reduzierung oder das Verstecken insgesamt.

Einige Leute haben vorgeschlagen, dass das Verstecken von Inhalten mobile Benutzer „bestraft“, aber dies ist eine absurde Vorstellung. Die Realität ist, dass Sie den Inhalt verbergen, weil er das Desktop-Erlebnis verbessert, jedoch nicht ausreichend zur Kernbotschaft der Website beiträgt, damit er notwendig ist

5. Sie können alternative Hintergründe verwenden

Kürzlich erhielt ich einen lächerlichen Auftrag, bei dem der Websitebesitzer für einen bestimmten Hintergrund bezahlt hatte und wollte, dass der gesamte Inhalt an diesen Hintergrund angepasst wurde. Aufzählungspunkte mussten aus einer sehr genauen Anzahl von Zeichen bestehen, die Gesamtzahl der Zeilen musste genau sein und so weiter.

Dies ist definitiv eine schlechte Praxis im Webdesign, weil Sie dies sollten nie Inhalte so gestalten, dass sie zu einem Layout passen. Das Layout sollte immer gestaltet sein, um den Inhalt zu halten. Wenn das Layout aus irgendeinem Grund den Inhalt nicht enthalten kann, sollte das Layout neu gestaltet werden, nicht der Inhalt. Es ist durchaus möglich, verschiedene Hintergründe für verschiedene Geräte zu verwenden. Du bist ein Designer. Benutze deine Vorstellungskraft.

Der Inhalt ist das Herzblut einer Website. Wenn Sie die Website modifizieren oder einschränken möchten, ist dies ein deutliches Zeichen der Launenhaftigkeit des Websitebesitzers und ein Zeichen dafür, dass das Layout zunächst schlecht gestaltet wurde Platz. Stehen Sie zu Ihren Grundsätzen, denn dieser Kunde wird Ärger, wenn Sie einwilligen.

Der Kunde hat immer Recht, es sei denn, dieser Kunde ist ein Webdesign-Kunde. Kunden wissen selten, was für sie das Beste ist, und es ist wichtig, sich als Webdesigner zu behaupten, der weiß, wie er das richtige Ergebnis für den Kunden liefert. Andernfalls riskieren Sie die Erstellung einer weiteren Website Gräuel.

6. Manuelle Steuerung der Minimierungsreihenfolge (oder Vermeidung von Raumbezügen in Inhalten)

Dies ist ein komplexes Problem. Die Reihenfolge der Minimierung einer Site hängt von der Reihenfolge ab, in der die Divs gestapelt werden. Sie müssen Ihre Divs in der richtigen Reihenfolge stapeln, damit sie in der richtigen Reihenfolge zusammenfallen.

Ein Problem von Drag-and-Drop-WYSIWYG-Website-Buildern besteht darin, dass Sie normalerweise nicht bestimmen können, in welcher Reihenfolge die Divs gestapelt werden. In den seltenen Fällen, in denen Sie dies tun können, wird Ihre harte Arbeit jedes Mal rückgängig gemacht Sie nehmen die kleinste Bearbeitung vor, und Sie müssen den Quellcode erneut hacken.

Wenn Sie die Reihenfolge nicht einschränken, Dieses Bild erklärt deutlich was schief gehen kann. Sie sollten auch keine räumlichen Bezüge erstellen (z. B. „in der linken Spalte“), da auf einem Handy das, was sich links oder rechts befindet, nach oben oder unten verschoben werden kann. Plus Wenn Sie dem Leser den Eindruck geben, es sei wichtig, dass Sie scrollen müssen, um zu sehen, müssen sie erneut zurückblättern, und das ist nicht cool.

7. Möglicherweise benötigen Sie unterschiedliche Schriftgrößen für unterschiedliche Layouts

Es ist einfach, die Schriftgröße mit CSS zu steuern, und Sie können für bestimmte Anzeigegrößen unterschiedliche Schriftgrößen und sogar andere Schriftflächen einstellen (wenn sie besser aussehen). Sie können die Anzeigegröße mit CSS-Medienabfragen ermitteln und anschließend die Schriftgröße oder die Schriftartoberfläche in Werte ändern, die den Inhalt auf den Gerätetyp, den Sie als Ziel verwenden, maximal ausnutzen.

8. Verwenden Sie am besten responsive Bilder

Alle Bilder sollten möglichst ansprechend sein. Dies führt dazu, dass manchmal die Details eines Bildes verloren gehen können, wenn es zu stark verkleinert wird. Eine Lösung für dieses Problem besteht darin, das Bild anklickbar zu machen, sodass der Benutzer eine vergrößerte Version des Bildes separat zum Inhalt anzeigen kann. Normalerweise geschieht dies über ein modales Dialogfeld.

Headerbild mit freundlicher Genehmigung von

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.