Eine umfassende Anleitung zur Reparatur Responsive Designprobleme im Jahr 2023

Die meisten Websites verwenden responsive design verwenden es falsch, was zu Problemen führt. Die allgemeine Herangehensweise an responsive Design ist faul, und wenn Sie diesen Ansatz wählen, werden einige Ihrer responsive Websites werden absolut fehlerfrei funktionieren, und viele von ihnen werden es nicht tun. Für diejenigen, die perfekt funktionieren, wird es wahrscheinlich eine Frage des Glücks sein.

Der Begriff responsive Design ist einfach, aber genau diese Einfachheit führt dazu, dass Menschen so leicht Fehler machen. Designer mit jahrelanger Erfahrung haben sich daran gewöhnt, für die zu entwerfen desktop, und so planen sie normalerweise ein Design basierend auf a desktop Layout.

Desktop Layouts unterscheiden sich von Tablet-Layouts und mobilen Layouts, weil sie normalerweise mehrspaltig sind, normalerweise große Mengen an Leerraum enthalten und alles einfach „groß“ ist, da es kein besseres Wort gibt. Wenn responsive Designtechniken verwendet werden, soll dieses mehrspaltige Layout in eine einzelne Spalte zerfallen.

Wenn das alles deins ist responsive Design tatsächlich funktioniert, wenn es auf einem mobilen Gerät angezeigt wird, haben Sie möglicherweise ein Problem. Wie groß das Problem ist, hängt von Ihrer Einstellung ab, aber gute Designer kümmern sich um gute UX. Sie kümmern sich noch mehr um schlechte UX. Wenn Ihre Website ein schlechtes UX hat und Sie ein guter Designer sein möchten, müssen Sie das Problem beheben.

Dieses Problem beim Reduzieren eines mehrspaltigen Layouts in eine einzelne 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 des hohen, dünnen Glases an, während das Wasservolumen genau gleich bleibt. Was Designer verstehen müssen, ist, dass wir bei einer Website das Volumen ändern müssen. Es ist normalerweise keine gute Idee, die Form zu ändern, aber den Inhalt beizubehalten genau das Gleiche. Etwas muss geben.

Jemand, der den Titel eines Designers wirklich verdient hat, wird verstehen, dass dies ein Problem darstellt, 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 den Kerninhalt der Website bereitzustellen, ohne die Benutzererfahrung in ein frustrierendes Scroll-Fest zu verwandeln. Hier sind einige der Dinge, die es wert sind, bei der Aufschlüsselung von a berücksichtigt zu werden desktop Design in ein mobiles Design:

1. "Mobile First" ist schwachsinnig

Entschuldigung, aber es ist so. Jeder plappert das nach, aber als Konzept ist es nicht sehr hilfreich, denn wenn Sie wirklich „zuerst mobil“ entwerfen, wird es ein Alptraum, wenn Sie versuchen, es wieder auf a zu skalieren desktop Design, es sei denn, Sie bleiben ganz oben bei einem rein einspaltigen Layout.

Der beste Ansatz besteht darin, mindestens drei (und bis zu 11) verschiedene Layouts physisch zu entwerfen. Die Mindestwerte, die Sie berücksichtigen können, sind:

• 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:

• Enorm Desktop
• Ordentliche 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 „One-Size-Fits-All“ -Ansatz 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 eine dieser riesigen klobigen Fußzeilen mit vielen internen Links enthält? Toll, das wird auf einem wohl sehr praktisch sein desktop. Auf einem Handy sieht es lächerlich aus und ist mehr als nur ein Hauch nervig. Sie können für jeden Gerätehaltepunkt völlig unterschiedliche Seitenfüße gestalten. Stellen Sie einfach diese Fußzeilen-Links in einem modalen Dialog zur Verfügung und alle gewinnen.

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

Wenn ein bestimmtes Gerät nicht häufig vorkommt, ist es nicht so schlimm, wenn das Design einige Besonderheiten aufweist, die nur bei der Anzeige auf diesem Gerät auftreten. Je beliebter ein Gerät ist, desto mehr müssen Sie daran arbeiten, alle darauf auftretenden 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 sie existieren nur, um diese Werbung zu liefern. Wenn Sie jedoch zwischen der Anzeige der Kernnachricht oder der Anzeige der Werbung wählen müssen, 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 Google Sie anhand dieses Kerninhalts indiziert hat. Wenn dieser Inhalt nicht angezeigt wird, betrachtet Google dies als irreführend.

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 „bestrafen“, aber das ist eine etwas absurde Vorstellung. Die Realität ist, dass Sie den Inhalt verstecken, weil er da ist, um das zu verbessern desktop Erfahrung, trägt aber nicht ausreichend zur Kernbotschaft der Seite bei, als dass es notwendig wäre

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 auf diesen Hintergrund zugeschnitten wurde. Aufzählungszeichen mussten eine sehr genaue Anzahl von Zeichen sein, die Gesamtzahl der Zeilen musste genau sein und so weiter.

Dies ist definitiv eine schlechte Praxis im Webdesign, weil Sie dies sollten hört niemals Entwerfen Sie Inhalte so, dass sie zu einem Layout passen. Das Layout sollte immer entworfen werden, 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, unterschiedliche Hintergründe für unterschiedliche Geräte zu verwenden. Du bist ein Designer. Nutze deine Vorstellungskraft.

Inhalt ist das Herzblut einer Website, und das Ändern oder Einschränken auf der Grundlage der Einschränkungen eines Layouts ist ein klares Zeichen für Amateurhaftigkeit des Website-Eigentümers und ein Zeichen dafür, dass das Layout im ersten Fall schlecht gestaltet wurde Ort. Halten Sie sich an Ihre Grundsätze, denn dieser Kunde wird Probleme haben, wenn Sie zustimmen.

Der Kunde hat immer Recht, außer wenn dieser Kunde ein Webdesign-Kunde ist. Kunden wissen selten, was das Beste für sie ist, und es ist wichtig, sich als Webdesigner zu behaupten, der weiß, wie man das richtige Ergebnis für den Kunden liefert. Anderewise Sie riskieren, eine weitere Website zu erstellen Gräuel.

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

Dies ist ein komplexes Problem. Die Kollapsreihenfolge einer Site hängt von der Reihenfolge ab, in der die Divs gestapelt sind. 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 klar, was schief gehen kann. Sie sollten auch vermeiden, räumliche Bezüge (wie „in der Spalte links“) zu erstellen, da auf einem Mobiltelefon alles, was sich links oder rechts befand, nach oben oder unten verschoben werden kann. erfahren 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 unterschiedliche Schriftgrößen und sogar unterschiedliche Schriftflächen (wenn sie besser aussehen) für bestimmte Anzeigegrößen festlegen. Sie können die Anzeigegröße bei CSS-Medienabfragen ermitteln und dann die Schriftgröße oder Schriftfläche so ändern, dass sie den Werten entspricht, die den Inhalt für den Gerätetyp, auf den Sie abzielen, optimal nutzen.

8. Es ist am besten zu verwenden responsive Bilder

Alle Bilder sollten responsive wenn möglich. Das bringt mit sich, 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 vom Inhalt betrachten kann. Der normale Weg, dies zu tun, ist über ein modales Dialogfeld.

Headerbild mit freundlicher Genehmigung von Artur Martynowski