Responsive Design hat das Layout-Problem gelöst. Media Queries und flexible Raster stellen sicher, dass sich Inhalte über Bildschirmgrößen hinweg neu anordnen, ohne horizontales Scrollen oder überlappende Elemente. Aber Layout-Anpassung ist die minimal lebensfähige mobile Erfahrung, nicht das Ziel. Echtes Mobile-First-Design erfordert ein Umdenken bei jedem Aspekt der Nutzererfahrung für die Einschränkungen und Möglichkeiten mobiler Geräte.
Informationsarchitektur muss neu gestaltet werden, nicht nur umfließen. Auf dem Desktop können Nutzer eine Seite mit Dutzenden sichtbarer Elemente scannen und durch räumliche Erkennung finden, was sie brauchen. Auf dem Mobilgerät beschränkt der Viewport den sichtbaren Inhalt auf eine Handvoll Elemente gleichzeitig. Dies erfordert einen grundlegend anderen Ansatz für die Inhaltshierarchie. Wir gestalten die mobile Informationsarchitektur zuerst und verwenden progressive Offenlegung, um die wichtigsten Inhalte und Aktionen hervorzuheben, während sekundäre Informationen zugänglich bleiben, aber nicht um Aufmerksamkeit konkurrieren. Das Desktop-Layout erweitert dann diese Hierarchie, anstatt ein Desktop-Layout in einen mobilen Viewport zu komprimieren.
Interaktionsmuster unterscheiden sich grundlegend zwischen Touch- und Pointer-Interfaces. Touch-Targets benötigen mindestens 44 Pixel, aber großartiges mobiles Design geht weiter. Wischgesten, Pull-to-Refresh und Bottom-Sheet-Navigation nutzen die natürliche Ergonomie der einhändigen Telefonnutzung. Wir platzieren primäre Aktionen in der Daumenzone – dem Bogen des unteren Bildschirmbereichs, den Nutzer erreichen können, ohne ihren Griff umzupositionieren. Navigationsmuster wie untere Tabs und schwebende Aktionsbuttons halten kritische Steuerelemente in Reichweite, statt sie hinter einem Hamburger-Menü am oberen Bildschirmrand zu verstecken.
Performance ist eine Designentscheidung, nicht nur ein Engineering-Thema. Mobile Nutzer arbeiten häufig mit eingeschränkten Netzwerken und weniger leistungsfähigen Prozessoren. Jede Designentscheidung hat eine Performance-Implikation. Hero-Bilder, Animationsbibliotheken, Webfonts und Drittanbieter-Skripte konkurrieren alle um dieselbe begrenzte Bandbreite und Verarbeitungsleistung. Wir setzen Performance-Budgets in der Designphase fest: ein maximales Seitengewicht, ein Ziel für Largest Contentful Paint und einen Schwellenwert für die Interaktionsreaktionsfähigkeit. Designer gestalten dann innerhalb dieser Einschränkungen, anstatt Designs abzuliefern, die das Engineering später kompromittieren muss, um Performance-Ziele zu erreichen.