Responzívny web sa automaticky prispôsobuje veľkosti obrazovky. Zabezpečuje optimálny zážitok na mobile, tablete aj desktope bez potreby samostatných verzií.
Responzívny web je webová stránka, ktorá automaticky prispôsobuje svoje rozloženie, veľkosť textu, obrázkov a ďalších prvkov podľa veľkosti obrazovky zariadenia. Či už návštevník príde z mobilu, tabletu alebo desktopového počítača, stránka vyzerá a funguje správne bez toho, aby musel zoomovať alebo horizontálne scrollovať.
Podľa údajov StatCounter pochádza viac ako 60 % návštev webov z mobilných zariadení. Ak váš web nie je responzívny, strácate väčšinu potenciálnych zákazníkov ešte predtým, než si prečítajú prvú vetu. Google navyše od roku 2019 indexuje weby primárne podľa ich mobilnej verzie, takže nefunkčný mobil znamená horšie pozície aj v desktopovom vyhľadávaní.
Responzívny dizajn webových stránok funguje na princípe flexibilných mriežok, obrázkov s premenlivou veľkosťou a CSS media queries. Media queries sú pravidlá v kóde, ktoré hovoria prehliadaču: „Ak je šírka obrazovky menšia ako 768 pixelov, zobraz navigáciu ako hamburger menu namiesto horizontálneho menu."
V praxi to znamená, že máte jeden web s jedným kódom, ktorý sa dynamicky mení. Nepotrebujete samostatnú mobilnú verziu na subdoméne m.vašafirma.sk, čo bolo bežné riešenie pred desiatimi rokmi, ale dnes je zastarané a komplikované na údržbu.
Technicky responzívny web stojí na troch pilieroch:
Tieto dva pojmy sa často zamieňajú, ale fungujú odlišne. Responzívny web sa plynule prispôsobuje každej šírke obrazovky, rozloženie sa mení kontinuálne. Adaptívny web design má pevne definované layouty pre konkrétne veľkosti zariadení a prepína medzi nimi.
Pri adaptívnom dizajne server detekuje typ zariadenia a pošle príslušnú verziu stránky. Pri responzívnom dostane každý rovnaký HTML kód a prehliadač ho vyrenderuje podľa aktuálnej šírky okna. To je rozdiel.
V praxi väčšina moderných webov používa responzívny prístup. Adaptívny dizajn má zmysel pri komplexných aplikáciách, kde mobilná a desktopová verzia potrebujú zásadne odlišné funkcie, napríklad bankové aplikácie alebo e-mailové klienty.
Mobile-first dizajn je prístup, kde najprv navrhujete a kódujete web pre mobilné zariadenia a postupne pridávate prvky pre väčšie obrazovky. Je to opak tradičného postupu, kde ste začali desktopom a potom „orezávali" pre mobil.
Prečo je mobile-first lepší? Núti vás prioritizovať. Na mobile máte menej miesta, takže musíte rozhodnúť, čo je naozaj dôležité. Výsledok je čistejší a rýchlejší web pre všetky zariadenia. Okrem toho Google používa mobile-first indexovanie, takže váš mobilný web je ten, ktorý sa hodnotí.
Pri tvorbe webových stránok v BigWay vždy pracujeme mobile-first. Nie preto, že je to módny buzzword, ale preto, že to prináša merateľne lepšie výsledky, rýchlejšie načítanie, vyššiu konverziu na mobiloch a lepšie SEO skóre.
Nejde len o pohodlie návštevníkov. Responzívny web priamo ovplyvňuje vaše tržby a viditeľnosť vo vyhľadávačoch.
Google od marca 2021 kompletne prešiel na mobile-first indexovanie. Ak váš web funguje zle na mobile, Google ho bude hodnotiť horšie bez ohľadu na to, ako dobre vyzerá na desktope. Core Web Vitals, metriky rýchlosti a použiteľnosti, ktoré Google sleduje — sa merajú primárne na mobilných zariadeniach.
Podľa štúdie Google opustí 53 % mobilných návštevníkov stránku, ktorá sa načítava dlhšie ako 3 sekundy. Pri neresponzívnych weboch je situácia ešte horšia, ak musí používateľ zoomovať a scrollovať horizontálne, aby si prečítal text, s vysokou pravdepodobnosťou odíde ku konkurencii. Prie-shopoch to znamená priame straty na tržbách.
Jeden responzívny web je lacnejší na údržbu ako dve separátne verzie. Každá zmena obsahu, oprava bugu alebo bezpečnostná aktualizácia sa robí raz, nie dvakrát. Pri firmách, ktoré často aktualizujú ponuku alebo novinky, to v priebehu roka predstavuje desiatky hodín ušetreného času.
Existuje niekoľko spôsobov, ako rýchlo otestovať responzivitu vášho webu:
Ak vám testy ukážu problémy a neviete ich interpretovať, naši špecialisti na analytiku a tracking vám vedia urobiť kompletný audit a povedať, čo treba opraviť.
Ak plánujete web budovať alebo rekonštruovať, tu sú kľúčové technické požiadavky:
Každá responzívna stránka musí mať v hlavičke HTML tento riadok: <meta name="viewport" content="width=device-width, initial-scale=1">. Bez neho mobilný prehliadač zobrazí stránku v šírke desktopu a zmenší ju, čo robí text nečitateľným.
Media queries určujú, pri akej šírke obrazovky sa zmení rozloženie. Štandardné breakpointy sú: 480 px pre menšie mobily, 768 px pre tablety na výšku, 1024 px pre tablety na šírku a menšie laptopy, 1200 px pre desktopy. Nie sú to dogmy, breakpointy by mali vychádzať z vášho dizajnu, nie z rozmerov konkrétnych zariadení.
Namiesto fixných pixelov používajte relatívne jednotky: percentá, em, rem, vw, vh. Napríklad namiesto width: 400px použite width: 50% alebo max-width: 400px s width: 100%. Tým zabezpečíte, že prvky sa prispôsobia kontajneru.
Klikateľné prvky na mobile musia mať minimálne 48×48 pixelov, ideálne viac. Palec je menej presný ako kurzor myši. Medzi tlačidlami a odkazmi nechajte dostatočný priestor, aby používateľ neklikol na zlý odkaz.
Pri auditoch webov sa nám opakovane potvrdzujú tieto problémy:
Ak váš súčasný web nie je responzívny alebo responzívnosť nefunguje dobre, redesign je väčšinou efektívnejší ako záplatovanie. Pri rekonštrukciách dbáme na niekoľko vecí, ktoré výrazne ovplyvňujú výsledok.
Navigácia musí byť intuitívna. Hamburger menu je štandard, ale dôležité je, aby bolo dostatočne veľké a umiestnené tam, kde ho používateľ očakáva, pravý horný roh alebo ľavý horný roh, závisí od zvyklostí vášho segmentu.
Formuláre musia byť jednoduché. Na mobile nikto nevyplní 15 polí. Minimalizujte počet požadovaných informácií a používajte správne typy inputov, email, tel, number — aby sa zobrazila príslušná klávesnica.
Vychádzajúc zo skúseností pri UX/UI redizajne webu, ktorý sme robili pre QEX, vidíme, že investícia do poriadneho UX/UI návrhu sa vráti v merateľne vyššej konverzii, typicky 15–30 % nárast pri správne optimalizovanom mobile experience.
Pred desiatimi rokmi bola responzívna webstránka konkurenčná výhoda. Dnes je to minimum, ktoré Google aj používatelia očakávajú. Ak váš web nefunguje na mobiloch, prichádzate o viac ako polovicu potenciálnych klientov a Google vás za to aktívne penalizuje v pozíciách.
Pre viac inšpirácie si pozrite naše projekty z praxe.
Ak riešite nový web alebo redesign existujúceho, ozvite sa nám a prejdeme váš projekt spolu. Pozrieme sa na aktuálny stav, identifikujeme problémy a navrhneme riešenie, ktoré bude fungovať na všetkých zariadeniach.
