Fallstricke des reaktionsschnellen Webdesigns

Ursprünglicher Autor: Scott Gilbertson
  • Übersetzung
Responsive Webdesign ist viel mehr als nur elastische Vorlagen und @ media-Abfragen . In der Tat ist dies eine völlig neue Herangehensweise an das Design. Vor diesem Hintergrund schlage ich vor, einige häufige Fallstricke in Betracht zu ziehen, die in Ihrer nächsten adaptiven Vorlage vermieden werden sollten.

Bildschirmauflösungen

Konzentrieren Sie sich nicht auf die gängigsten Auflösungen von heute - sie werden sich morgen ändern. Und übermorgen auch. Um ein Design zu erstellen, das auch in Zukunft relevant sein wird, konzentrieren Sie sich nicht auf die wichtigsten Punkte, an denen sich Ihr Design ändert, sondern darauf, was zwischen diesen wichtigen Punkten passiert.



Wenn Sie hauptsächlich für mobile Geräte entwickeln, beginnen Sie mit dem Aufbau der Benutzeroberfläche, wobei Sie sich auf die kleinste Bildschirmauflösung konzentrieren, die Sie unterstützen werden. Dann vergrößern Sie einfach das Browserfenster, bis Ihr Design "geht". Markieren Sie den Cue-Point an dieser Stelle und beheben Sie die Fehler in der @ media-Abfrage . Wiederholen.

Stellen Sie sicher, dass Sie eine großartige Benutzererfahrung auf Bildschirmen bieten, die zwischen den Auflösungen der gängigen Geräte von heute liegen - und Sie werden den Benutzern in Zukunft gefallen. ( Siehe auch Trent Waltons Artikel Geräteunabhängig - Anmerkung des Übersetzers. )

Geschwindigkeit

Der Sinn des reaktionsschnellen Webdesigns ist es, auf jedem Gerät die bestmögliche Benutzererfahrung zu bieten. Wenn Ihre Website jedoch langsam geladen wird, spielt es keine Rolle, wie gut der Inhalt auf kleinen Bildschirmen angezeigt wird oder wie professionell die Bilder gestreckt werden, da niemand die Geduld hat, sie zu sehen.

Website-Geschwindigkeit - vor allem einen bestimmten Betrag aus dem Budget für die Leistung zuweisen. Verwenden Sie Webpagetest.org , um sicherzustellen, dass Ihre Website auch mit 3G schnell geladen wird . Achten Sie besonders auf den " Geschwindigkeitsindex ", der angibt, wie viel Zeit vergeht, bis der Benutzer den Inhalt der Seite sieht.

Bilder

Nichts beschleunigt Ihre mobile Website so sehr, wie das Verringern der Größe von Bildern. NeuHTML-Tag < das Bild > wird von mehreren Browsern noch in diesem Jahr unterstützt werden, und während es eine polyfill-Bibliothek PictureFill .
Ich empfehle die Verwendung von PictureFill, damit Sie zum Bild- Tag wechseln können, wenn es aktiver unterstützt wird. Es gibt jedoch auch andere, ältere Optionen, z. B. Adaptive Images.
Jede Lösung für die Implementierung elastischer Bilder ist für ein vollständig adaptives Design erforderlich.

Verstecke den Inhalt nicht

Es ist schwierig, alle Funktionen, die ein Benutzer benötigt, auf einem kleinen Bildschirm unterzubringen. Das Ausblenden einiger Elemente auf Mobilgeräten kann verführerisch sein - tun Sie dies nicht! Mobile Benutzer, die Ihre Website besuchen, erwarten, dass sie alles bekommen, was sie benötigen. Bestrafen Sie sie nicht, nur weil sie ein Gerät mit einem kleinen Bildschirm verwenden.

Dies ist ein Teil dessen, was das Erstellen eines responsiven Designs schwierig macht: Alles, was Sie dem Benutzer auf einem kleinen Bildschirm zeigen möchten, ist eine schwierige Aufgabe. Verstecken Sie nicht die Details; Schauen Sie sich die bewährten Elemente der Benutzeroberfläche an, um sich inspirieren zu lassen, und testen Sie viel, wie Benutzer mit Ihrer Website interagieren.

Dies kann mehr Zeit und Mühe kosten, aber wenn Sie den Benutzern das geben, wofür sie bestimmt sind, verwandeln Sie Besucher in zufriedene Kunden.

Jetzt auch beliebt: