Čo je Mobile-first?
Mobile-first je prístup k tvorbe webu, pri ktorom sa najprv navrhuje mobilná verzia a až potom sa rozširuje pre väčšie obrazovky. Google od roku 2019 používa mobile-first indexovanie — hodnotí primárne mobilnú verziu vášho webu.
Definícia Mobile-first
Čo je mobile-first dizajn
Mobile-first dizajn je podľa Wikipedie súvisiaci koncept s responzívnym webovým dizajnom a progresívnym vylepšovaním (progressive enhancement). Princíp spočíva v tom, že najprv vytvoríte jednoduchý web pre základné mobilné zariadenia a potom ho vylepšujete pre smartfóny a počítače — namiesto opačného prístupu, kde sa zložitý desktop web snažíte prispôsobiť mobilom.
Responzívny webový dizajn — pojem, ktorý zaviedol webový dizajnér Ethan Marcotte v roku 2010 — využíva flexibilné layouty, CSS media queries a flexibilné obrázky na vytvorenie jednej stránky, ktorá funguje na všetkých zariadeniach.
Google a mobile-first indexovanie
Google oznámil prechod na mobile-first indexovanie, čo znamená, že Google crawlery primárne prehľadávajú a indexujú mobilnú verziu webstránok. Ak váš web nie je optimalizovaný pre mobily, vaše pozície v Google sa zhoršia.
- 2016 — Google oznámil experiment s mobile-first indexovaním
- 2018 — začatie postupného nasadzovania pre weby pripravené na mobile-first
- 2021 — mobile-first indexovanie sa stalo predvoleným pre všetky weby
Prečo je mobile-first dôležitý
Viac ako 60 % webovej návštevnosti celosvetovo pochádza z mobilných zariadení. Ak váš web nefunguje dobre na mobile, strácate väčšinu potenciálnych zákazníkov ešte predtým, než uvidia váš obsah.
Praktický príklad
Príklad: Reštaurácia navrhuje nový web.
Prístup desktop-first (zastaraný): Dizajnér vytvorí krásnu stránku s veľkými fotkami a animáciami pre PC monitor, potom ju „zmenší" pre mobil. Výsledok: na mobile sa text nedá čítať, tlačidlá sú príliš malé a stránka sa načítava 8 sekúnd.
Prístup mobile-first (správny): Dizajnér začne mobilnou verziou — veľké tlačidlo „Rezervovať stôl", čitateľné menu, rýchle načítanie. Potom pridá prvky pre tablet a PC — väčšie fotky, animácie, 3-stĺpcový layout.
Výsledok: Web funguje perfektne na všetkých zariadeniach, Google ho hodnotí pozitívne v mobile-first indexovaní.
Často kladené otázky
Čo je mobile-first dizajn?
Mobile-first je prístup k tvorbe webu, kde sa najprv navrhuje mobilná verzia a až potom sa rozširuje pre väčšie obrazovky (tablety, počítače). Je to opak tradičného desktop-first prístupu.
Čo je mobile-first indexovanie od Google?
Od roku 2021 Google predvolene používa mobilnú verziu vášho webu na indexovanie a hodnotenie. Ak váš web nie je optimalizovaný pre mobily, vaše pozície v Google sa zhoršia.
Aký je rozdiel medzi mobile-first a responzívnym dizajnom?
Mobile-first je filozofia — začnite návrhom pre mobil. Responzívny dizajn je technika — použite flexibilné layouty a CSS media queries, aby sa stránka prispôsobila akejkoľvek obrazovke. Ideálne ich kombinujete.
Ako zistím, či je môj web mobile-friendly?
Použite <a href="https://en.wikipedia.org/wiki/Google_PageSpeed_Tools" target="_blank" rel="noopener noreferrer">Google PageSpeed Insights</a> (pagespeed.web.dev) alebo Google Search Console, kde nájdete sekciu „Použiteľnosť na mobilných zariadeniach" s konkrétnymi problémami.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.