Häufige Krisen im Responsive Design und wie man sie löst

Da nichts in festen Grund- und Grundrisselementen so flexibel ist wie Wasser, ist es noch nicht einmal „Designen“ im herkömmlichen Sinne. Responsive Design passt sich an die Geräteströme auf dem Markt an (und kommt ihnen entgegen). Jeder experimentiert und es war noch nie so toll, ein Webdesigner zu sein.

Es gibt so viele Praktiken für responsives Design, dass es schwierig ist, sich eine Gruppe anzusehen und sie als die beste zu bezeichnen. Wir können keine „Was zu tun“-Liste haben. Wir können jedoch aus den Fehlern der anderen lernen.

Hier ist also, was ich beim Entwerfen für ein responsives Web gelernt habe:

Design für Ihr Publikum. Nicht Sie selbst.

Angenommen, Sie versuchen, ein überwiegend indisches Publikum mit einer superschnellen, brillant gestalteten Website und einer großartigen UX für diese mobilen Benutzer zu erreichen. Dort leben 1,2 Milliarden Menschen; es sollte ein sofortiger, massiver Hit sein. Die Zahlen selbst sind zu Ihren Gunsten. Oder sie wären es, wenn Sie gewusst hätten, dass dort nur knapp 13 % der Menschen Smartphones besitzen. (Quelle: Google Mobile Planet).

Dies ist nur einer der Gründe, warum das Lernen und Verstehen Ihres Publikums von entscheidender Bedeutung ist.

Kulturelle Vielfalt, Alter, Geschlecht, Beruf, Sprache, beliebte Geräte usw. können sehr wichtige Faktoren sein, die Ihre Marke/Website prägen oder zerstören.
Es ist einfacher als es klingt.

Es ist bekannt, dass Designer aus den Augen verlieren, für wen sie entwerfen.

Wenn Sie also keinen UX-Architekten zur Hand haben, tun Sie gut daran, dies selbst zu recherchieren. Es wird sich schließlich auf Ihre Arbeit auswirken, also zucken Sie nicht mit den Schultern und sagen Sie, es sei nicht Ihre Stärke.

Verwenden Sie für mobilspezifische Nummern Googles Mobile Planet. Befragen Sie Ihre Kunden nach ihrem Publikum.

Wenn Sie sich in die Lage Ihres Publikums versetzen können, werden Sie in der Lage sein, intuitiv benutzerfreundliche Designs zu erstellen. Es ist keine Raketenwissenschaft, nur grundlegende menschliche Psyche.

Ein „Drahtmodell“ braucht eine Geschichte

Ihr Responsive-Design-Projekt wird ohne Interaktionen unvollständig sein. Gleiches gilt für Ihr Mockup.

Ihr Design wird (wahrscheinlich) kein One-Page-Gig sein, bei dem Inhalte angezeigt werden und sonst nichts passiert.

Keine Interaktionen, keine Zustände, keine Animationen oder Effekte: Im Grunde wird alles entfernt, was Ihre Website zu einem Erfolg (oder einem Misserfolg, wenn sie unbedacht verwendet wird) machen kann. Während Style Tiles aus gutem Grund ein Klassiker ist (wie sein Gründer sagte, „um ein Gespräch über das Design zu beginnen“), ist es viel zu einfach, um in den heutigen Designbegriffen anspruchsvoll zu sein.

INVESTIEREN SIE ETWAS ZEIT, INTERAKTIVE PROTOTYPEN IHRER IDEEN ZU ERSTELLEN. ARBEITEN SIE AN DIESEN UMFASSEND ZUSAMMEN, BEVOR SIE MIT DER FRONT-END-ENTWICKLUNG BEGINNEN.

Schmeißen Sie nicht einfach Ideen umher. Sie haben schon von Storytelling gehört?

Erzählen Sie Ihren Kunden eine reaktionsschnelle, interaktive Geschichte mit nichts als Ihrem Prototyp und Ihrer Intuition.

Verwenden Sie Tools wie Balsamiq, Axure, UXPin usw., um visuelle Versionen dieser „Geschichten“ zu erstellen. Streicheln Sie ihre Vorstellungskraft mit Worten; füttere es mit einem gut gemachten Prototyp.
Es wird dazu dienen, Ihre Design- und Entwicklungsarbeit für später zu rationalisieren und Ihnen eine etwas definierte Spur zu geben, an der Sie festhalten können. Und als Bonus: Der erste Eindruck zählt immer noch. Ein guter Prototyp zeigt, dass Sie von dem Projekt begeistert sind.

Inhalt: Erster, Sichtbarer und Anpassbarer. Stets

Der Grund, warum Sie reagieren, ist, dass Ihre Nachricht eine größere Reichweite hat, indem sie einheitlich zugänglich und geräteunabhängig ist.

Sie machen den gesamten Zweck des responsiven Designs zunichte, indem Sie Ihre Inhalte verstecken müssen.

Ihr mobiles Publikum wird die Daten sowieso herunterladen, also was bringt es, sie zu verstecken? Erstellen Sie ein Inhaltselementinventar. Identifizieren Sie, welche Elemente auf allen Seiten vorkommen und welche auf bestimmten. Ihre CTA-Schaltflächen können sich beispielsweise auf jeder einzelnen Seite oder auf bestimmten Seiten (wie Landing Page, Seiten mit verwandten Ressourcen usw.) befinden.

Sie beginnen damit, die Inhaltselemente an die erste Stelle zu setzen, und bauen dann von dort aus auf. Glocken und Pfeifen gehen am Ende.

Erstens: Verstehen Sie die Benutzerziele und was sie von der Website erwarten, und passen Sie dann Ihre Inhalte für einen einfachen Zugriff auf ihren Geräten an.

Anstatt nur einen Millionen-Wörter-Artikel auf eine mobile Seite zu quetschen, geben Sie Ihren Benutzern die Möglichkeit, die Informationen zu lesen, ohne endlos zu scrollen. Und Front-End- oder serverseitiges Skripting ist nicht die (eigentliche) Antwort darauf.

Eine gute Möglichkeit, dies zu tun, ist die Verwendung einer kurzen und genauen Zusammenfassung für die Vorschau .

Lassen Sie den Benutzer entscheiden, ob er für den Rest durch Ihre Inhalte scrollen möchte. TL; DR ist unter allen verbreitet (sogar in Medienorganisationen, weshalb wir Geschichten ohne tatsächliche Überprüfung der Fakten veröffentlichen und auf nichts als einem Hype basieren). Fügen Sie also einen Abschnitt am Ende Ihres Inhalts hinzu und machen Sie es einfacher.

Zweitens: Geben Sie den Benutzern vollständige Informationen, anstatt nur eine fragmentierte Version davon.

Verwenden Sie responsive Spalten und Schriftarten. Verwenden Sie Zurb Responsive Tables für fließende Datentabellen. Komprimieren Sie die Medien (verwenden Sie CDN und Caching, um die Leistung zu steigern).
Inhalt ist Ihre Botschaft. Stellen Sie sicher, dass es klar und sichtbar ist, unabhängig von der Gerätegröße.

Bonus: Content-first erinnert Sie an die Inhaltshierarchie, und das macht das Entwerfen der Navigation zu einem reibungsloseren Prozess.

Beachten Sie die Einschränkungen und Fähigkeiten des Geräts

Wenn wir von „Mobile-First“ oder „progressive Verbesserung“ sprechen, verstehen und berücksichtigen wir wirklich das Nötigste? Hier ist ein Überblick darüber, was das "nötigste" sein sollte:

• Nutzbare Bildschirmbreite: mindestens 120 Pixel.
• Auszeichnungssprachenunterstützung: XHTML Basic 1.1 wird mit dem Inhaltstyp application/xhtml + xml geliefert.
• Zeichencodierung: UTF-8
• Unterstützte Bildformate: JPEG, GIF 89a.
• Farben: Mindestens 256 Farben.
• Stylesheet- Unterstützung: CSS Level 1, CSS Level 2 @media rule zusammen mit dem Handheld und allen Medientypen
• HTTP: HTTP/1.0 oder neueres HTTP1.1
• Skript: Keine Unterstützung für clientseitiges Skripting.

Basierend auf diesen Spezifikationen ist es nicht schwierig, ein funktionales Design zu erstellen. Das Problem ist die Skalierung.
Es ist gut, die Geräteabmessungen zu berücksichtigen, aber das ist nur der Anfang und nicht das Ganze. Hier sind das Minimieren und Normalisieren von Skripten (Leistung und Erfahrung), das Entwerfen sauberer Schnittstellen mit Sorgfalt für genügend Leerzeichen (zum Anzapfen), das Respektieren von Konnektivitäts- und Lastbeschränkungen von Geräten (Leistung) und immer rigoroses Testen wichtig.

Bitte erleichtern Sie die Last

Ich möchte nicht weiter darüber reden (wir haben viele Meinungen zu diesem Thema), aber es ist unbestreitbar, wie wichtig die Seitengeschwindigkeit für höhere Rankings und eine bessere Benutzererfahrung ist.

Einfach ausgedrückt: Wenn Ihre Seite langsam lädt, wird sich niemand die Mühe machen, darauf zu warten, dass sie aufholt.

Ein Ansatz wie Mobile-First funktioniert dafür eigentlich sehr gut. Bei der progressiven Verbesserung beginnen wir mit dem absoluten Minimum von allem: UI-Elemente, Funktionen und die Tatsache, dass wir für die kleinsten Bandbreiten aller Geräte entwerfen. Diejenigen, die immer noch die Vorzüge des Mobile-First-Ansatzes anprangern, werden zustimmen, dass dies Leistung und Geschwindigkeit über alles andere stellt .

Darüber hinaus, und Sie sollten nicht daran erinnert werden müssen, müssen Sie die Größe Ihrer Medien unter Kontrolle halten.

Verwenden Sie also CDN (möglich für Websites mit mittlerem bis hohem Traffic) und Back-End-Entwicklungstechniken, die das Laden von Seiten speziell erleichtern. Verwenden Sie Caching. Verbessern Sie die wahrgenommene Leistung (wie schnell sich die Website für den Benutzer anfühlt), indem Sie das entsprechende Kontrollkästchen aktivieren, bevor Sie ein JPG-Bild für das Web speichern.

Halten Sie Ihr Design schlank und schlank (am wenigsten Ihre Kunden und Benutzer).

TL; DR

Hier ist also, was ich beim Entwerfen für ein responsives Web gelernt habe:

• Design für ein Publikum. Recherchieren Sie ein wenig und verwenden Sie Google Mobile Planet (und andere ähnliche Tools) für Zahlen.
• Ein Wireframe kann durch eine Geschichte zum Leben erweckt werden. „Prototyp“ bezeichnet die vorläufige Version eines Geräts/Systems. Machen Sie es zu etwas, das tatsächlich funktioniert. Verwenden Sie interaktive Prototyping-Tools.
• Machen Sie Inhalte sichtbar und anpassbar. Verbergen Sie Inhalte nicht vor Mobiltelefonen, wenn sie ohnehin heruntergeladen werden. Wenn es einen Originalbeitrag gibt, fügen Sie eine kurze relevante Zusammenfassung hinzu, die besser zum Lesen auf Mobiltelefonen geeignet ist.
• Beachten Sie die Einschränkungen und Fähigkeiten des Geräts. Abgesehen von der Maus-/Fingertipp-Debatte oder den Abmessungen beiseite, entwerfen Sie für die Mindestspezifikationen des Geräts, das von Ihrer Zielgruppe verwendet wird.
• Auf Leistung achten. Nicht nur für bessere Suchrankings, sondern auch für Erfahrung.

Autorenbiografie: Lucy Barret ist mit HireWPGeeks Ltd. verbunden. Sie bietet HTML-zu-WordPress-Konvertierungsdienste an und hat ein Team von erfahrenen Entwicklern, die ihr helfen. Sie ist auch eine leidenschaftliche Bloggerin und liebt es, ihr Wissen mit der großen WordPress-Community zu teilen. Folgen Sie ihrem Unternehmen in sozialen Netzwerken wie Facebook und Google+.