Mobile first: prečo sa web navrhuje najprv pre telefón, aj keď sa polovica stránok na Slovensku stále otvára na počítači

01Stručná odpoveď: prečo začať od telefónu

• Malá obrazovka núti rozhodnúť, čo je dôležité. Na šírku 360 pixelov sa nezmestí nič navyše a to, čo na telefóne prežije, býva podstatné aj na počítači.
• Google posudzuje mobilnú verziu. Od roku 2023 indexuje a hodnotí weby podľa obsahu ich mobilnej verzie, od júla 2024 už bez výnimky. Na Slovensku pritom na mobile pripadá na Google takmer 99 % prekliknutí z vyhľadávačov.
• Telefón je najslabší článok. Pomalší procesor a horšie pripojenie. Čo beží svižne na mobile, pobeží aj na počítači. Naopak to neplatí.
• Pridávať je ľahšie ako škrtať. Rozšíriť jednoduchý mobilný návrh na veľkú obrazovku je menej práce ako orezávať preplnenú stránku pre počítač.
• Neplatí to vždy. Pri interných systémoch, do ktorých ľudia chodia hlavne z počítača, môže byť lepšie začať od veľkej obrazovky. Rozhodnite podľa vlastnej analytiky.

02Čo mobile first znamená a čo nie

Mobile first je postup návrhu: web najprv navrhnete a naprogramujete pre telefón a potom ho postupne rozširujete pre tablet a počítač. Výsledkom je jeden web, ktorý sa prispôsobí každej obrazovke. Na telefóne jeden stĺpec a veľké tlačidlá, na počítači viac stĺpcov a viac priestoru.

Myšlienka stojí na staršom princípe, ktorý vývojári volajú progressive enhancement, čiže postupné vylepšovanie. Pomenovali ho Steven Champeon a Nick Finck v marci 2003. Podľa MDN ide o to dať čo najväčšiemu počtu ľudí základný obsah a funkcie a až najmodernejším prehliadačom pridať to najlepšie. Opačný postup, graceful degradation, začína pri plnej verzii a pre slabšie zariadenia z nej uberá.

Pojmy sa často pletú, preto ich dávame vedľa seba:

Responzívny web teda môže vzniknúť oboma smermi. Rozdiel uvidíte hlavne na telefóne: web navrhnutý od počítača a potom „stlačený“ máva schované dôležité informácie, drobné tlačidlá a ťažké obrázky, ktoré sa načítavajú, aj keď na malej obrazovke nie sú potrebné.

03Odkiaľ sa mobile first vzal

Pojem spopularizoval dizajnér Luke Wroblewski. V článku z 3. novembra 2009 napísal, že mobilná verzia webov sa navrhuje až po tej pre počítač, a navrhol poradie otočiť. Uviedol tri dôvody: mobil rýchlo rastie, mobil núti sústrediť sa na podstatné a mobil dokáže viac (polohu, dotyk, náklon). K druhému dôvodu dodal, že na obrazovke 320 × 480 pixelov jednoducho nie je miesto na nič zbytočné.

O pol roka neskôr prišiel Ethan Marcotte s responzívnym dizajnom a v októbri 2011 vyšla Wroblewského kniha Mobile First. Odvtedy sa z vtedy odvážneho nápadu stal bežný postup. Rozhodujúci krok však urobil Google.

04Koľko Slovákov chodí na web z telefónu

Za desať rokov sa pomer otočil. StatCounter meria zobrazenia stránok na weboch so svojím meracím kódom. Mobil na Slovensku predbehol počítač v roku 2022, o tri roky skôr ako v Česku. Odvtedy však ďalej nerastie a drží sa okolo polovice.

Mesačné čísla sa hýbu okolo polovice. Od septembra 2025 do augusta 2026 mal mobil navrch len v piatich mesiacoch z dvanástich. Ani jedno zariadenie teda nemôžete odbiť ako okrajové.

Dáta o ľuďoch hovoria ešte jasnejšie. Podľa Eurostatu sa v roku 2025 pripájalo na internet z mobilu 84,6 % Slovákov vo veku 16 až 74 rokov. Priemer EÚ bol 89,9 %. Z notebooku chodilo na internet 50,1 % a zo stolného počítača 27,3 % ľudí, teda menej ako v Česku aj v priemere EÚ.

Pozor na starších zákazníkov. Medzi ľuďmi od 65 do 74 rokov chodí na internet z mobilu 55,7 %, v EÚ 70,3 %. A 13,6 % slovenských seniorov, ktorí používajú internet, naň chodí len z počítača. Ak predávate seniorom alebo robíte web pre zdravotníctvo, počítač môže mať u vás väčšiu váhu. Aj tak sa oplatí navrhovať od telefónu, pretože veľké tlačidlá a čitateľné písmo starším ľuďom pomôžu na akejkoľvek obrazovke.

05Google hodnotí mobilnú verziu webu

Google v novembri 2016 oznámil, že začne weby hodnotiť podľa mobilnej verzie, pretože väčšina ľudí už u neho vyhľadáva z telefónu. Presun všetkých webov na nový spôsob indexovania trval sedem rokov. Od júla 2019 dostával tento režim každý nový web automaticky a 31. októbra 2023 Google oznámil, že je prechod dokončený. Posledné weby, ktoré ešte prechádzal robot pre počítač, prepol 5. júla 2024. Obsah, ktorý sa na telefóne vôbec nedá otvoriť, už nie je možné zaindexovať.

V praxi to znamená, že čo na mobile chýba, pre Google neexistuje. Jeho dokumentácia radí hlavne toto:

• Rovnaký obsah na mobile aj na počítači. Na telefóne ho môžete schovať do rozbaľovacích sekcií alebo záložiek, ale musí tam byť.
• Rovnaké nadpisy, titulok a popis stránky. Keď mobilná verzia nesie menej textu, počítajte s poklesom návštevnosti z vyhľadávania.
• Rovnaké štruktúrované dáta a rovnaké alt texty pri obrázkoch. Obrázky v dostatočnom rozlíšení a na rovnakých adresách.
• Hlavný obsah nenačítavať až po kliknutí alebo potiahnutí prstom. Taký obsah robot Googlu nenačíta.
• Rovnaká meta značka robots. Inak môžete na mobile omylom zakázať indexovanie.

Na Slovensku je to o to dôležitejšie, že Google mal podľa StatCounteru v auguste 2026 na mobile 98,6 % prekliknutí z vyhľadávačov. Iný vyhľadávač, ktorý by hodnotil web podľa počítačovej verzie, tu prakticky nehrá žiadnu úlohu. Viac o vyhľadávaní nájdete v článku SEO v roku 2026.

06Telefón je najpomalšie zariadenie, pre ktoré web robíte

Telefón má slabší procesor ako počítač a často horšie pripojenie. Dáta z prehliadača Chrome ukazujú dôsledky aj na Slovensku. Podľa HTTP Archive spĺňalo v auguste 2026 všetky tri ukazovatele Core Web Vitals (načítanie, odozva a stabilita stránky) 70,8 % webov navštevovaných zo Slovenska na počítači, ale len 63,8 % na mobile. Mobilných webov je v dátach viac ako dvakrát toľko, nejde teda o rovnakú sadu. Najväčší rozdiel je v odozve na ťuknutie.

Na počítači má dobrú odozvu takmer každý web, na mobile zhruba štyri z piatich. Veľkú úlohu hrá JavaScript: telefón ho spracúva dlhšie, a keď je ho veľa, stránka po ťuknutí chvíľu nereaguje. Výnimkou je stabilita rozloženia, tá vychádza na mobile lepšie (87,8 % oproti 81,9 %).

Koľko dát telefón sťahuje? Podľa Web Almanac 2025 mala mediánová domovská stránka na mobile 2,56 MB. Medián obrázkov bol 911 KB, JavaScriptu 632 KB. Mobile first tu pomáha priamo: keď začínate od telefónu, pridávate len to, čo je naozaj potrebné, namiesto toho, aby ste stránke určenej pre počítač na mobile schovávali obsah, ktorý sa aj tak sťahuje. Ako web zrýchliť krok za krokom, rozoberáme v článku Pravidlo 3 sekúnd.

07Prst namiesto myši: aké veľké majú byť tlačidlá

Myš trafí pixel, prst nie. Preto norma WCAG aj pokyny Apple a Googlu určujú minimálnu veľkosť plochy, na ktorú sa ťuká. Líšia sa jednotkami aj prísnosťou:

• WCAG 2.2, úroveň AA: klikacia plocha aspoň 24 × 24 CSS pixelov alebo dosť miesta okolo menších prvkov (W3C). Európska norma pre prístupnosť EN 301 549 toto kritérium prevzala vo verzii zo septembra 2026.
• Apple: predvolená veľkosť ovládacieho prvku na iPhone je 44 × 44 bodov, minimum 28 × 28 (Human Interface Guidelines).
• Android: aspoň 48 × 48 dp s medzerou 8 dp, fyzicky asi 9 mm (Google).
• WCAG, úroveň AAA: 44 × 44 CSS pixelov. Prísnejšia úroveň, ktorú zákon nevyžaduje, ale pre hlavné tlačidlá je to dobrý cieľ.

Dlho sa tradovalo, že ľudia držia telefón v jednej ruke a palcom dosiahnu len na spodnú časť displeja. Steven Hoober, ktorého výskum z roku 2013 sa k tomu často cituje, v roku 2017 upozornil, že jeho starý článok ľudia citujú až príliš a že obľúbené mapy dosahu palca nesedia. Jeho novšie dáta ukazujú, že 75 % ľudí ťuká len jedným palcom, ale telefón držia rôzne a najpresnejšie trafia stred obrazovky. Tam stačí cieľ veľký 7 mm, v rohoch treba asi 12 mm. Hlavné akcie teda patria na dobre dosiahnuteľné miesto a malé ikonky do rohov radšej nedávajte.

A nezakazujte priblíženie stránky. Podľa Web Almanac 2025 ho obmedzuje 19 % mobilných webov, najčastejšie nastavením maximum-scale=1 alebo user-scalable=no. Človek so slabším zrakom si potom text nezväčší.

08Formuláre na mobile: kde sa strácajú dopyty

Na malej klávesnici sa píše horšie a každé pole navyše je prekážka. Veľa sa dá zlepšiť drobnými úpravami, ktoré takmer nič nestoja:

• Správny typ poľa. Pri e-maile type="email" (klávesnica so zavináčom), pri telefóne type="tel" (číselná klávesnica), pri PSČ inputmode="numeric". Telefón potom sám ponúkne vhodnú klávesnicu.
• Automatické vyplnenie. Atribút autocomplete povie prehliadaču, čo do poľa patrí, a ten doplní meno, adresu alebo e-mail jedným ťuknutím (MDN). Pri poliach s údajmi o samotnom používateľovi WCAG na úrovni AA vyžaduje, aby bol účel poľa strojovo rozpoznateľný (kritérium 1.3.5), a autocomplete je najjednoduchší spôsob, ako to splniť.
• Popis nad poľom, nie vnútri. Sivý text v poli zmizne, len čo začnete písať, a na telefóne potom neviete, čo ste vypĺňali.
• Jeden stĺpec a polia cez celú šírku. Aj štátny dizajn manuál ID-SK odporúča na menších obrazovkách roztiahnuť polia na celú šírku.
• Len nevyhnutné polia. Čo nepotrebujete na vybavenie dopytu, nechajte na telefonát.
• Chyba hneď pri poli a zrozumiteľne. Hlásenie hore na stránke človek na telefóne často ani neuvidí, lebo je o niekoľko obrazoviek vyššie.

<label for="email">E-mail</label>
<input id="email" name="email" type="email" autocomplete="email">

<label for="tel">Telefón</label>
<input id="tel" name="tel" type="tel" autocomplete="tel">

<label for="psc">PSČ</label>
<input id="psc" name="psc" inputmode="numeric" autocomplete="postal-code">

Na weboch klientov Contentsquare končilo koncom roka 2025 konverziou (nákupom alebo iným cieľom webu) 3,4 % návštev z počítača, ale len okolo 2 % návštev z mobilného webu. Contentsquare to vysvetľuje tým, že ľudia web často nájdu na telefóne a nakúpia neskôr z počítača. Časť z nich sa však nevráti. Kto im na telefóne nepostaví zbytočné prekážky, nemusí na ich návrat spoliehať. Ďalšie tipy, ako z webu dostať viac dopytov, sú v článku Prečo pekný web nestačí.

09Ako sa web navrhuje mobile first: postup v šiestich krokoch

1. Obsah a priority

Skôr než dizajnér nakreslí prvú obrazovku, spíšte, čo musí človek na stránke nájsť a v akom poradí. Čo ponúkate, pre koho, koľko to stojí a ako vás kontaktovať. Na telefóne je poradie to isté ako dôležitosť: čo je nižšie, uvidí menej ľudí.

2. Návrh pre šírku telefónu

Najčastejšie telefóny na Slovensku zobrazujú web v šírke 360 až 430 CSS pixelov. Podľa StatCounteru na ne v auguste 2026 pripadlo najmenej 70 % zobrazení z mobilov. Navrhuje sa preto pre šírku okolo 360 px a kontroluje aj na 320 px, ktorú vyžaduje WCAG pri preskladaní obsahu. Návrh pre jeden konkrétny telefón nestačí: najčastejšie rozlíšenie malo len 9,3 %.

3. Rozšírenie pre tablet a počítač

Až potom pridáte druhý stĺpec, väčšie obrázky a viditeľné menu. Pozor na opačnú chybu: mobilný návrh len roztiahnutý na veľký monitor. Nielsen Norman Group v roku 2023 opísala, že takéto weby majú na počítači obrovské obrázky, prázdne miesta a obsah rozhádzaný do dlhých stránok.

4. Kód od najmenšej obrazovky

Základné štýly platia pre telefón a pre väčšie obrazovky sa pridávajú pravidlá s podmienkou minimálnej šírky. Telefón tak používa len jednoduché základné štýly a nemusí prepisovať pravidlá navrhnuté pre počítač.

/* Základ: telefón, jeden stĺpec */
.produkty { display: grid; gap: 16px; }

/* Od 768 px: dva stĺpce */
@media (min-width: 768px) {
  .produkty { grid-template-columns: 1fr 1fr; }
}

/* Od 1200 px: štyri stĺpce */
@media (min-width: 1200px) {
  .produkty { grid-template-columns: repeat(4, 1fr); }
}

5. Test na skutočných telefónoch

Zmenšené okno prehliadača na počítači neodhalí pomalý procesor ani to, ako sa do poľa píše palcom. Na Slovensku podľa StatCounteru pripadalo v auguste 2026 na Android 73,5 % mobilných zobrazení a na iPhone 26,5 %. Testujte preto hlavne na bežnom Androide strednej triedy, a nie iba na najnovšom iPhone, ktorý má v ruke vedenie.

6. Meranie podľa zariadenia

V analytike si rozdeľte návštevy, dopyty a objednávky podľa zariadenia. Keď mobil privádza polovicu ľudí, ale len desatinu dopytov, viete, kde začať. Rýchlosť na mobile zo skutočných dát ukáže PageSpeed Insights, ak má web dosť návštev z Chromu. Inak pomôže aspoň laboratórny test na tom istom mieste.

10Zákon o prístupnosti počíta aj s mobilom

Od 28. júna 2025 je účinný zákon č. 351/2022 Z. z. o požiadavkách na prístupnosť výrobkov a služieb, slovenská verzia európskeho Aktu o prístupnosti. Týka sa okrem iného e-shopov, finančných služieb, elektronických kníh a dopravy, pri doprave výslovne aj „služieb poskytovaných prostredníctvom mobilných zariadení vrátane mobilných aplikácií“. Prístupnosť sa teda posudzuje aj na telefóne.

• Koho sa týka: služby pre spotrebiteľov, typicky e-shopy.
• Výnimka: zákon sa nevzťahuje na služby mikropodnikov, teda firiem s menej ako 10 ľuďmi a obratom alebo bilančnou sumou do 2 miliónov eur.
• Kto kontroluje: Slovenská obchodná inšpekcia.
• Pokuta: od 200 eur do 3 % obratu, najviac 6 000, 20 000 alebo 30 000 eur podľa druhu deliktu. Ak web nespĺňa požiadavky na prístupnosť a firma prijme nápravné opatrenia, SOI od pokuty upustí.

Štát ide ešte ďalej. Podľa § 36a vyhlášky č. 78/2020 Z. z. môže úrad vytvoriť mobilnú aplikáciu k elektronickej službe až vtedy, keď už existuje služba s responzívnym webovým rozhraním a verejným API a používateľský prieskum potvrdí, že aplikácia má zmysel. Najprv dobrý web na mobile, až potom aplikácia. Pre firmy je to rozumné pravidlo tiež.

Malé tlačidlo, text, ktorý sa nedá zväčšiť, alebo formulár bez popisov nie sú len nepohodlné. Pri e-shope môžu byť porušením zákona. Mobile first a prístupnosť chcú to isté: veľké klikacie plochy, čitateľné písmo a jasnú štruktúru. Viac o prístupnosti píšeme v článku Rozdiel medzi UI a UX.

11Päť mýtov o mobile first

„Mobile first znamená len mobil.“ Nie. Nielsen Norman Group to zhŕňa už v názve článku Mobile First Is NOT Mobile Only. Na počítači musí web fungovať rovnako dobre, len sa k nemu dostanete až v druhom kroku.

„Na mobile ľudia stránku neposúvajú.“ Posúvajú, dokonca viac ako na počítači, pretože musia. Ale len vtedy, keď je hore dôvod pokračovať (NN/g). Hlavné posolstvo teda patrí na prvú obrazovku, zvyšok môže byť nižšie.

„Sedemdesiat percent návštev je z mobilu.“ Pri veľkých značkách to platí. Firma Contentsquare namerala na viac ako 6 500 weboch svojich klientov z deviatich odvetví 69,9 % návštev z mobilu (Contentsquare). Na Slovensku je to podľa StatCounteru zhruba polovica zobrazení stránok. Pozrite sa do vlastnej analytiky.

„Menu schované pod ikonou je vždy zlé.“ Na počítači škodí, na mobile menej. Výskum NN/g odporúča na telefóne časť menu schovať, ak má viac ako štyri hlavné položky.

„Stačí web zmenšiť.“ Zmenšený web pre počítač má na telefóne drobné písmo, malé tlačidlá a obsah, ktorý sa sťahuje, aj keď ho nikto nevidí. Mobile first znamená navrhnúť stránku od začiatku pre malú obrazovku.

12Kedy mobile first nedáva zmysel

Sú weby a aplikácie, do ktorých ľudia chodia takmer výlučne z počítača: účtovné a skladové systémy, administrácia e-shopu, nástroje na analýzu dát alebo zložité konfigurátory. Nielsen Norman Group v denníkovej štúdii zistila, že dôležitejšie úlohy ľudia riešia skôr na väčšej obrazovke, a pri produktoch pre dôležité úlohy, napríklad z financií alebo zdravotníctva, odporúča pozrieť sa do analytiky: ak je mobilných interakcií málo, mobile first nerobte.

Mobil však ani tu nevynechávajte. Aj interný systém má mať responzívny základ, pretože obchodník v teréne alebo riaditeľ na cestách si potrebuje rýchlo niečo overiť. Rozdiel je v tom, odkiaľ návrh začína. Pri internom systéme od veľkej obrazovky a hustých tabuliek, pri webe pre zákazníkov od telefónu.

• Začnite od telefónu, keď ide o web, e-shop, rezervácie, objednávky, čokoľvek pre zákazníkov a čokoľvek, čo ľudia otvárajú z odkazu v e-maile alebo na sociálnych sieťach.
• Začnite od počítača, keď ide o interný systém s veľkými tabuľkami, pri ktorom vaše dáta ukazujú, že z telefónu chodí len malá časť ľudí.
• V oboch prípadoch testujte na oboch zariadeniach a merajte, odkiaľ ľudia skutočne chodia.

13Kontrolný zoznam: je váš web naozaj mobile first?

• Na telefóne je bez posúvania vidieť, čo ponúkate a ako vás kontaktovať
• Obsah, nadpisy, titulok a popis stránky sú na mobile rovnaké ako na počítači
• Hlavné tlačidlá majú aspoň 44 × 44 px a žiadny ovládací prvok nie je menší ako 24 × 24 px
• Text sa dá priblížiť dvoma prstami, stránka nemá user-scalable=no ani maximum-scale=1
• Na šírke 320 px sa stránka neposúva do strán
• Formuláre majú správne typy polí, autocomplete a popisy nad poliami
• Telefónne číslo sa dá vytočiť ťuknutím, adresa otvorí mapu
• Rýchlosť na mobile spĺňa Core Web Vitals podľa skutočných dát v PageSpeed Insights
• Web je otestovaný na bežnom Androide aj na iPhone, a nie iba v zmenšenom okne
• Analytika ukazuje dopyty a objednávky zvlášť pre mobil a počítač
• Web na počítači nevyzerá ako roztiahnutý mobil

Ak pri viac ako troch bodoch váhate, oplatí sa dať web skontrolovať. Nový web na mieru navrhujeme od telefónu a pred spustením ho testujeme na skutočných zariadeniach. Ako spolupráca prebieha, nájdete na stránke Ako to prebieha, orientačné ceny v cenníku.

14Časté otázky

15Zdroje

• Luke Wroblewski: Mobile First (2009) a kniha Mobile First (2011)
• Ethan Marcotte: Responsive Web Design, A List Apart (2010)
• Steven Champeon: Progressive Enhancement and the Future of Web Design (2003, archív)
• MDN: Progressive enhancement a Graceful degradation
• Google: ohlásenie mobile-first indexovania (2016), predvolené pre nové weby (2019), dokončenie (2023) a koniec robota pre počítač (2024)
• Google: odporúčania pre mobile-first indexovanie
• StatCounter: zariadenia na Slovensku, rozlíšenia mobilov, mobilné systémy a vyhľadávače na mobile
• Eurostat: zariadenia na prístup na internet, isoc_ci_dev_i
• HTTP Archive: Core Web Vitals Technology Report
• Web Almanac 2025: Page Weight a Accessibility
• W3C: WCAG 2.2 a vysvetlenie kritéria 2.5.8
• Apple: Human Interface Guidelines, Accessibility
• Google: veľkosť dotykových cieľov v Androide
• Steven Hoober: Design for Fingers, Touch, and People (2017)
• MDN: inputmode a autocomplete
• Nielsen Norman Group: Mobile First Is NOT Mobile Only, Content Dispersion, The Fold Manifesto, Hamburger Menus a Large Devices Preferred for Important Tasks
• Contentsquare: Digital Experience Benchmark 2026, konverzie a štatistiky mobilu
• Zákon č. 351/2022 Z. z. o požiadavkách na prístupnosť výrobkov a služieb
• Vyhláška č. 78/2020 Z. z. o štandardoch pre informačné technológie verejnej správy
• ID-SK: textové pole a typografia