Google v apríli 2014 upravil svoje algoritmy a na mobilných telefónoch preferuje stránky s dizajnom prispôsobujúcim sa menšej obrazovke – responzívny web.
Ak váš web nepodporuje prispôsobovanie obsahu zariadeniu, z ktorého si ho návštevník pozerá alebo nemá špeciálnu mobilnú verziu, používateľ na zariadeniach, ako sú tablety či mobilné telefóny (ale zaradiť sem môžete aj čítačky elektronických kníh s pripojením na internet) uvidí obsah, ktorý je na prvý pohľad nečitateľný a bez zväčšovania a následného posúvania nepoužiteľný.
O takéhoto používateľa je ľahké prísť – nemusí nájsť, čo hľadá, a z webu odíde.
Rozhodli ste sa vyjsť v ústrety ľuďom s mobilmi a tabletmi? Máte 3 možnosti:
- responzívny dizajn,
- dynamické servírovanie podľa návštevníkovho prehliadača,
- mobilná verzia na samostatnej adrese.
Prečítajte si, aké sú ich výhody či nevýhody. Pre technickejšie orientovaných čitateľov pridávame aj návod, ako si skontrolujete ich správne nastavenia!
1. Responzívny dizajn
Responzívny dizajn je pre nový web väčšinou najjednoduchšia voľba. Na webe sa nachádza jeden obsah, ktorý môže byť rôzne graficky zobrazený na veľkých PC monitoroch, tabletoch alebo mobiloch.
Začínať by ste mali zvyčajne od mobilu – t. j. v najjednoduchšej verzii, kde nie je treba zobrazovať veľké bannery, menu je skryté pod jednou ikonkou a zobrazujete len dôležitý obsah v jednom stĺpci. Pre väčšie obrazovky postupne pridávate ďalšie prvky – napr. bannery, tri stĺpce produktov, vysokokvalitné (ale kapacitne náročné) fotky.
Samotný prehliadač si potom cez špecifikáciu štýlov (CSS media queries a príp. doplnkový Javascript) vyberie, čo má zobraziť. Pre zjednodušenie kódovania responzívneho webu môžete využiť jeden z existujúcich HTML/CSS/JS frameworkov – najobľúbenejšie sú Bootstrap a Foundation, ale existujú mnohé ďalšie.
Cez responzívny dizajn určíte, ktorá časť obsahu sa zobrazuje všade (napr. kontaktné informácie) a ako sa má prispôsobiť menu na tabletoch a mobiloch (napr. menu je skryté a dostupné po kliknutí, aby nezaberalo cenný priestor malej obrazovky).
Rovnaký obsah je vždy prístupný cez tú istú URL adresu a tiež HTML kód ostáva rovnaký.
Výhodou je to, že zobrazovanie obsahu podmieňuje CSS, a teda nemusíte udržiavať viacero verzií HTML kódu. Tiež poteší možnosť rýchlo prispôsobovať zobrazený obsah pri vyjdení nových zariadení (napr. špecifické veľkosti rozlíšenia).
Ak už máte vytvorený neresponzívny web, migrácia na responzívny dizajn môže byť dosť zložitá. Pri novom webe nevýhoda prakticky neexistuje.
Bonus: Čerešničkou na torte je definovanie štýlov pre tlač (áno, responzívny dizajn funguje aj na papieri).
Responzívny dizajn je dnes preferovaným riešením najmä pre menšie webstránky.
Overte si správne nastavenie
Overte si, či sa v kóde vášho webu v hlavičke <head> nachádza tento alebo podobný riadok (použite skratku CTRL+U alebo pravé tlačidlo a View page source/Zobraziť zdrojový kód):
<meta name="viewport" content="width=device-width, initial-scale=1">
Zaistí, aby sa web správne zobrazil vo všetkých rozlíšeniach. Pre responzívne obrázky (rôzne veľkosti) odkážte developerov na element <picture>, ktorý dokáže špecifikovať viacero veľkostí obrázkov naraz. Tiež si zmenšite okno prehliadača na minimum a sledujte, či sa obsah prispôsobuje (mizne, mení poradie, zmenšuje/zväčšuje sa) jeho veľkosti.
Viac informácií poskytujú návody Googlu k responzívnemu webu.
2. Dynamické servírovanie obsahu
Dynamické servírovanie obsahu prebieha na základe detekcie reťazca user agent, teda identifikácie prehliadača, ktorý obsah zobrazuje. Prehliadaču na počítači vrátite veľký HTML kód so všetkými prvkami, prehliadaču v mobiloch zas osekanú verziu len s nevyhnutným obsahom.
Rovnaký obsah aj tu ostáva na rovnakej URL adrese. HTML kód však servírujete iný podľa cieľového prehliadača.
Výhodou je úplné oddelenie kódu pre väčšie a menšie obrazovky.
Nevýhodou je nedokonalá detekcia zariadení a prehliadačov – nikdy nedokáže obsiahnuť celú množinu prehliadačov a je možné, že niekomu sa omylom zobrazí na počítači mobilná verzia alebo naopak na mobile verzia pre stolný počítač. Komplikované tiež môže byť udržiavať samostatný kód.
Tento variant nebol nikdy veľmi rozšírený.
Overte si správne nastavenie
Pri načítaní stránky by mala byť posielaná HTTP hlavička Vary:
Vary: User-Agent
Overiť si ju po zadaní adresy webu môžete cez nástroj http://www.webconfs.com/http-header-check.php. Ak ju nástroj zobrazí vo vypísanom texte, hlavička je používaná.
Tá prehliadaču (indexovaciemu robotovi) hovorí, že existuje viac verzií obsahu podľa detekcie reťazca user agent. Pozor na cloaking, ak by ste obsah servírovali nie podľa typu prehliadača ale špecificky pre indexovacieho robota Googlebot.
3. Samostatná mobilná verzia webu
Samostatný mobilný web znamená, že obsah je pre mobilné zariadenia dostupný na inej adrese (napr. m.example.com) ako webové stránky pre veľké obrazovky. Na túto adresu môže byť používateľ presmerovaný na základe detekcie reťazca user agent alebo je táto verzia iba voliteľná (návštevník sa sám rozhodne, či preferuje mobilnú verziu).
Rovnaký obsah tu má dve odlišné URL adresy. HTML kód tiež meníte podľa cieľovej adresy (bežný či mobilný web).
Výhody samostatnej mobilnej verzie sme oceňovali v minulosti, keď neexistovali jej alternatívy. Za menšiu výhodu sa dá považovať samostatná URL adresa, keď mnohí návštevníci z mobilných telefónov boli zvyknutí vpisovať „m.“ pred danú doménu.
Nevýhodou je – podobne ako pri dynamickom servírovaní – možnosť zobrazenia chybnej verzie webu pri automatickej detekcii. Udržiavať dve verzie kódu môže byť náročné. Ak chcete, aby sa mobilná verzia umiestňovala vo výsledkoch vyhľadávania Googlu, potrebujete špeciálne riešiť mobilné SEO – pracovať na jej optimalizácii pre vyhľadávače.
Aktuálne je tento variant na ústupe a existujúce mobilné weby zotrvačnosťou „dobiehajú“.
Overte si správne nastavenie
Skontrolujte si prítomnosť rel=”alternate” v hlavičke <head> desktopovej verzie, odkazujúc na mobilnú a rel=“canonical“ v hlavičke <head> mobilnej verzie, odkazujúc na hlavnú (desktopovú). Kód pre desktopovú verziu vyzerá nejako takto (veľkosť 420px je ilustračná):
<link rel=“alternate“ media=“only screen and (max-width: 420px)“ href=“http://m.example.com“ >
Kód pre mobilnú verziu vyzerá takto:
<link rel=“canonical“ href=“http://www.example.com“ >
Tieto odkazy by mali byť 1:1, t. j. nemali by ste odkazovať napr. na hlavnú stránku desktopovej verzie z množstva podstránok mobilnej verzie. Vždy dodržte pravidlo, že určitý obsah odkazuje na rovnaký (podobný) obsah na mobile.
Ak zvolíte automatické presmerovanie na mobilnú (desktopovú) verziu, využite HTTP kód 302 (dočasné presmerovanie). Správnosť posielaného kódu si opäť môžete overiť cez nástroj http://www.webconfs.com/http-header-check.php. Posielaný HTTP kód nájdete identifikovaný hneď na začiatku (napr. HTTP/1.1 302 Moved Temporarily).
Alternatívne môže váš web využiť presmerovanie cez Javascript, ktoré je však zdĺhavejšie. Nie je dôležité, či budete presmerovávať iba jedným smerom (len na mobilnú verziu pre mobilné zariadenia) alebo obojsmerne (aj na mobilnú verziu, aj na desktopovú verziu na veľkých obrazovkách).
Čo preferuje Google?
Z hľadiska indexácie vyhľadávačom Google je úplne jedno, pre ktorú verziu mobilného webu sa rozhodnete. Pri správnom nastavení ich dokáže prechádzať bez problémov. Google však odporúča používať variant číslo 1 – responzívny web, a ten preferujeme aj my. V Pizza SEO tvoríme responzívne weby – užívateľsky prívetivé a od základu optimalizované pre vyhľadávače (vrátane optimalizácie webu pre mobilné zariadenia).
Ak sa vám téma stále zdá zložitá alebo máte ďalšie otázky, môžete využiť aj veľmi dobre spracovaný návod od Googlu.
Funguje vám mobilný web správne?
Nezabudnite si vždy skontrolovať správne fungovanie vášho mobilného webu.
2 responses to “Responzívny dizajn alebo mobilný web – pomôcka pri rozhodovaní”