Mobile-first nie je voliteľné: Čo väčšina webov robí so small screens zle

Čísla neklamú

Vo väčšine odvetví teraz mobilné zariadenia tvoria 55–70 % webovej návštevnosti. V niektorých sektoroch — pohostinstvo, stravovanie, miestne služby — je to ešte viac. Vaši zákazníci vás hľadajú na telefónoch počas cestovania, čakania v rade, sedenia na gauči. Nie sú pri počítači.

Napriek tomu väčšina webov malých podnikov, ktoré kontrolujem, bola postavená desktop-first a potom "urobená responzívnou" ako dodatočná myšlienka. Výsledkom je web, ktorý technicky funguje na mobile, ale nikdy nebol skutočne navrhnutý preňho.

Responzívny vs. Mobile-first: Kľúčový rozdiel

Responzívny web prispôsobuje rozloženie rôznym veľkostiam obrazovky. To je základ — minimálny prijateľný štandard. Ale neznamená to, že mobilný zážitok je dobrý. Len znamená, že nie je rozbitý.

Mobile-first web je navrhnutý začínajúc od najmenšej obrazovky. Na mobile máte obmedzený priestor, dotykové rozhranie, potenciálne pomalé pripojenie a používateľa, ktorý je pravdepodobne rozptýlený. V CSS to znamená písať základné štýly pre malé obrazovky a pomocou min-width media queries ich rozšíriť pre väčšie:

/* ❌ Desktop-first: píše pre veľké obrazovky, zmenšuje */
.karta {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

@media (max-width: 768px) {
  .karta {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ✅ Mobile-first: píše pre malé obrazovky, rozširuje */
.karta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .karta {
    flex-direction: row;
    gap: 2rem;
  }
}

Najčastejšie mobilné chyby

Príliš malé plochy na klepnutie — Tlačidlá a odkazy navrhnuté pre kurzor myši sú príliš malé pre prst. Google odporúča plochy aspoň 44×44 pixelov. Formulárové vstupy by mali aktivovať správnu klávesnicu:

<!-- Telefónne číslo: zobrazí číselnú klávesnicu -->
<input type="tel" name="telefon" autocomplete="tel" />

<!-- Email: zobrazí @ a .com klávesy -->
<input type="email" name="email" autocomplete="email" />

<!-- Len čísla: číselná klávesnica -->
<input type="number" inputmode="numeric" pattern="[0-9]*" />

Ako skutočný mobile-first dizajn vyzerá

Začína sa vo fáze drôtových modelov. Pred akýmkoľvek vizuálnym dizajnom skicujem mobilné rozloženie: čo je nad záhybom, čo používateľ vidí ako prvé, ako naviguje. Potom sa desktopové rozloženie buduje ako vylepšenie.

Výkon a mobil sú úzko prepojené. Mobilný používateľ na 4G pripojení v budove so slabým signálom bude mať úplne iný zážitok ako vaše kancelárske broadband pripojenie. Preto optimalizácia obrázkov, lazy loading a minimálny JavaScript nie sú len výkonnostné starosti — sú to starosti o mobilný používateľský zážitok.

Záver

Váš mobilný zážitok je váš primárny zážitok. Nie sekundárny, ktorý sa vyleští, keď bude čas. Ten, s ktorým sa väčšina vašich potenciálnych zákazníkov stretne ako prvý a podľa ktorého vás bude hodnotiť. Budovanie mobile-first vyžaduje viac premýšľania vopred, ale vedie k lepšiemu zážitku na každom zariadení.