Většina našich enterprise uživatelů přistupuje ze stolních počítačů. Tak proč mobile-first? Protože design pro omezení (malá obrazovka, pomalá síť) vede k lepšímu produktu i na desktopu. Content first, progressive enhancement.
Mobile-first neznamená mobile-only¶
Mobile-first je designová strategie: začněte s nejmenší obrazovkou, definujte prioritu obsahu, pak přidávejte pro větší obrazovky. Na mobilu se vejde jen to důležité — to vás donutí přemýšlet o prioritách.
Progressive Enhancement¶
Základní funkčnost pro všechny, vylepšení pro schopnější zařízení. CSS media queries
přidávají pravidla pro větší obrazovky (min-width, ne max-width).
JavaScript: feature detection místo browser detection.
Typografie a touch targets¶
Minimum 16px pro body text (čitelné bez zoomování). Touch targets minimálně 44x44px (Apple HIG). Dostatek whitespace mezi interaktivními elementy. Formuláře: správné input types (email, tel, number) pro mobilní klávesnice.
Performance budget¶
Na 3G je každý kilobajt důležitý. Performance budget: max 400KB initial load, first meaningful paint pod 3 sekundy. Lazy loading obrázků, critical CSS inline, async JavaScript. Performance je feature.
Mobile-first = User-first¶
Přístup mobile-first nás donutí přemýšlet o tom, co je pro uživatele skutečně důležité. Výsledek: lepší produkty na všech zařízeních.
Brauchen Sie Hilfe bei der Implementierung?
Unsere Experten helfen Ihnen bei Design, Implementierung und Betrieb. Von der Architektur bis zur Produktion.
Kontaktieren Sie uns