Ein Design, das auf einem kleinen Bildschirm betrachtet wird, sollte nicht wie die verkleinerte Version eines Layouts mit einem großen Bildschirm aussehen. Ebenso sollte ein auf einem großen Bildschirm betrachtetes Design nicht wie eine aufgeblasene Version eines Layouts mit einem kleinen Bildschirm aussehen. Stattdessen muss das Design flexibel genug sein, um sich an alle Bildschirmgrößen anzupassen. Ein erfolgreiches responsives Design nutzt jeden Formfaktor optimal.
Das bedeutet, dass einige Elemente der Benutzeroberfläche je nach Kontext, in dem sie angezeigt werden, möglicherweise ganz unterschiedlich aussehen müssen. Möglicherweise müssen Sie sehr unterschiedliche CSS-Elemente auf dieselbe HTML-Codebasis anwenden, um verschiedene Bildschirmgrößen optimal zu nutzen. Das kann eine ziemliche Designherausforderung sein!
Im Folgenden sind einige häufige Herausforderungen aufgeführt.
Navigation
Das Anzeigen einer Liste von Navigationslinks ist auf einem großen Bildschirm ziemlich einfach. Es gibt viel Platz für diese Links.
Auf einem kleinen Bildschirm ist Platz nur wenig Platz. Wenn Sie ein Design für diese Situation entwerfen, ist es verlockend, die Navigation hinter einer Schaltfläche zu verbergen. Das Problem bei dieser Lösung besteht darin, dass die Nutzenden zwei Schritte ausführen müssen, um an eine beliebige Stelle zu gelangen: Öffnen Sie das Menü und wählen Sie eine Option aus. Bis das Menü geöffnet ist, fragt sich der Nutzer, wo es hingehen soll.
Versuche, eine Strategie zu finden, bei der die Navigation nicht verdeckt wird. Wenn Sie nur eine relativ kleine Anzahl von Elementen haben, können Sie die Navigation so gestalten, dass sie auch auf kleinen Bildschirmen gut aussieht.