7 min. čítanie

Prečo je dobré mať responzívny web?

Jedným zo zásadných zlomov v programovaní webstránok bol príchod iPhonu na trh. Dovtedy sa webové stránky programovali v desktopovej aj mobilnej verzii, čo sa však ukázalo ako mimoriadne náročné riešenie z finančného i časového hľadiska. Dnes sú mobilné zariadenia zodpovedné za 56%+ využitia internetu, preto je potrebné, aby sme prehodnotili spôsob, akým webové stránky tvoríme. Riešením je responzívny dizajn. 

Pavol Sloboda Pavol Sloboda
ArtDirector v GALTON Brands
Prečo je dobré mať responzívny web?

Čo je to responzívny dizajn? 

Rozhodne najsilnejším trendom v digitálnom svete je využívanie internetu v on-the-go móde na mobilných zariadeniach. Aby sa naše ciele stretli s preferenciami zákazníkov, je nutné upraviť prístup k vývoju webov tak, aby boli stránky optimalizované na všetky zariadenia.

Čo to znamená? Responzívny dizajn webových stránok je flexibilný, dokáže prispôsobiť rozloženie obsahu, veľkosť obrázkov i navigačné menu rôznym rozmerom obrazoviek.

Preto, ak o stránke hovoríme ako o “optimalizovanej”, znamená to, že stránka je čitateľná a pre užívateľa je ľahko ovládateľná s minimálnym pohybom a posúvaním rovnako na desktope, tablete alebo smartfóne. 

Responzívny dizajn nie je len metóda alebo technika vývoja webu. Ide o ideológiu, podľa ktorej sú stránky navrhované a následne programované. 

Čo potrebuje responzívny web? 

Responzívny web je navrhnutý na základe troch developerských princípov

  • Fluid Grids
  • Media Queries alebo Breakpoints
  • Flexibilné obrázky a média 

Koreňom responzívneho dizajnu sú tzv. Fluid Grids, ktoré tvoria štruktúru webu. Tieto mriežky nepracujú s počtom pixelov, ale majú definovanú maximálnu výšku a/alebo šírku rozlíšenia obrazovky, čo umožňuje prispôsobiť vzhľad stránky zariadeniu.  Stanovenie maximálnej a minimálnej hodnoty určuje hraničné body priblíženia a zmenšenia webovej stránky tak, aby zostala zachovaná kvalita grafiky a zároveň aj čitateľnosť webu.

Vizuálnym základom responzívneho dizajnu sú tzv. Media Queries alebo breakpointy. Tie sú zodpovedné za zmenu dizajnu stránky v závislosti od zariadenia, na ktorom si konkrétny obsah prezeráme. Webová lokalita zistí typ zariadenia alebo rozlíšenie webového prehliadača a následne zobrazí obsah v preddefinovaných bodoch.

V zjednodušenej programátorskej reči to funguje takto – opýtaj sa prehliadača otázku, potom urob krok X, len ak je odpoveď Y. 

V praxi by to vyzeralo takto: 

Aké je aktuálne rozlíšenie obrazovky? Ak je odpoveď napríklad >400 pxl, CSS rozdelí obsah do dvoch stĺpcov. Ak je odpoveď <400 pxl obsah sa zobrazí v jednom dlhšom stĺpci. 

Breakpointy však používajte s rozumom. Ak ich pridáte priveľa, stránka môže pôsobiť chaoticky, čo v konečnom dôsledku ovplyvňuje celú používateľskú skúsenosť. 

Obrázky, videá a iné médiá sú neoddeliteľnou súčasťou každej webstránky. Pri vývoji nového responzívneho webu je preto nutné zabezpečiť, aby aj obrázky či médiá boli optimalizované. Táto vlastnosť umožňuje prispôsobiť ich rozlíšenie a zároveň stanoviť rýchlosť načítavania v závislosti od zariadenia.

Výhodou responzívnych obrázkov je zachovanie ich vizuálnej kvality

Super príkladom dobre zvládnutého responzívneho dizajnu je DropBox. Stránku na zdieľanie a odkladanie súborov využíva celý svet na desktope, tablete a čoraz častejšie je využívaná aj ako mobilná aplikácia. 

 

Detaily, na ktoré pri responzívnom webe nesmieme zabúdať

Responzívny web nie je len o prispôsobovaní rozlíšenia. Pri programovaní takejto webovej stránky síce eliminujeme nutnosť samostatnej desktopovej a mobilnej verzie, no na povrch sa vynárajú aj iné, veľmi podstatné, detaily. 

Myš vs. Touch pad

Pri desktopových počítačoch a laptopoch používateľ potrebuje myšku (alebo touchpad) na pohyb po obrazovke a výber objektov. Tablety a smartfóny však fungujú na dotyk prsta, ktorý nie je tak presný ako ikona myši.

Pri dizajnovaní responzívnej webstránky pre mobily a tablety je preto dôležité myslieť na detaily. Obrazovky smartfónov sú menšie, o to dôležitejšia je dostupnosť a veľkosť kľúčových buttonov, či navigačnej lišty. 

Rýchlosť načítavania 

Používatelia mobilných telefónov očakávajú, že ich výkonnosť bude porovnateľná s tou počítačovou, čo potvrdzujú aj odborníci z Googlu. Tí tvrdia, že priemerný čas načítania webovej stránky na mobilnom zariadení je 22 sekúnd.

Avšak až 53% používateľov zo stránky odchádza, ak sa na nej do 3 sekúnd nič nezobrazí.

Dobu načítania webu ovplyvňuje aj veľkosť grafiky a obrázkov, preto pri mobilnej verzii webu odporúčame staviť na jednoduchú grafiku a menej obrázkového materiálu. 

White spaces

Jedným z cieľov responzívnych webov je poskytnúť návštevníkovi plnohodnotný zážitok. White spaces, alebo biele miesta na webe, slúžia ako akcent, ktorý pomáha návštevníkom sústrediť sa na obsah webu.

Prakticky povedané, pri responzívnom dizajne je potrebné ustrážiť si paddingy (medzery) a prispôsobiť veľkosť písma i riadkovanie rozloženiu obrazovky. Neexistuje žiaden dohodnutý pomer, ktorý by určoval množstvo white spaces na stránke.

Jediným spoľahlivým merítkom sú vaše oči. 

Prečo staviť na responzívny dizajn? 

  • Zvýšenie web traffic vďaka mobilným zariadeniam (spomeňte si na štatistiku o využívaní internetu). Takmer každý má dnes inteligentný telefón, ktorý používa oveľa viac ako počítač. Čiže opäť platí – buďte tam, kde je cieľová skupina. 
  • Prehliadanie responzívnych webových stránok na mobiloch či tabletoch má nižší bounce rate (s čím súvisí aj rýchlosť načítania webu).
  • Jednoduchšia používateľská skúsenosť – mobilná verzia webu je nielen jednoduchšia “na údržbu”, ale aj oveľa prehľadnejšia. Kvôli rýchlosti načítania stránky má web len to najpodstatnejšie, čo môže návštevníka zaujímať. 
  • Lepšie SEO – Google podporuje responzívne webové stránky tým, že im poskytne lepšie pozície vo vyhľadávaní bez ohľadu na to, cez ktoré zariadenie používateľ vyhľadáva. Prečo? Misiou Googlu je zhromažďovať a organizovať relevantné informácie, tak aby boli dostupné odvšadiaľ. 
  • Nielen z hľadiska SEO je responzívny dizajn efektívny. Oceníte ho aj pri napĺňaní, keďže stačí obsah publikovať len raz. Navyše sa nestane, že na niečo zabudnete. Jednotný dizajn aj obsah prístupný z rôznych zariadení vyvoláva dojem silnej a stabilnej značky, ktorá má prehľad a vychádza zákazníkom v ústrety. 
  • Pre developerov majú responzívne weby (okrem iných) jednu hlavnú výhodu. Jedna webstránka, jeden kód, čo je veľmi užitočné predovšetkým z pohľadu prípadných opráv alebo dopĺňania nových informácií na web.

Responzívny dizajn je dnes nutnosť pre akýkoľvek typ webu. Nezáleží na tom, či predávate produkt alebo službu, responzívny dizajn pomôže zvýšiť návštevnosť webu a navyše je search friendly. Dôležité je však myslieť na každú maličkosť, pretože okrem jednoduchého ovládania musí web vyzerať skvelo na všetkých zariadeniach.

 

Zdieľať článok
Pavol Sloboda
ArtDirector v GALTON Brands

Pavol je ArtDirector v brandingovej agentúre GALTON Brands a dizajnu sa venuje už viac ako 10 rokov. Špecializuje sa na dizajn vizuálnej identity značiek a návrh webstránok s dôrazom na bezchybné používateľské rozhranie.

GALTON Brands
Tento článok ti prináša

GALTON Brands

Brandingová agentúra GALTON Brands je strategickým partnerom pre značky, ktoré chcú dlhodobo napredovať. Už viac ako 10 rokov budujeme značky a zlepšujeme firemnú kultúru startupom, lokálnym i globálnym spoločnostiam. Pomáhame im pochopiť vlastnú identitu, učíme ich zrozumiteľne komunikovať a tvoriť hodnoty pre lepšiu budúcnosť.

Týždenný podcast UPdate
Podobné články
5 min. čítanie

Najväčšie trendy v UI dizajne v roku 2022

Dizajn užívateľských rozhraní, predovšetkým webov a aplikácií, prešiel v posledných rokoch veľkými zmenami. Ako to už býva zvykom, ovplyvňovaný je celospoločenskými trendmi a aktuálnym stavom vo svete. Ktoré prvky sa tešia najväčšej obľube v roku 2022? 

Dominik Parajka Dominik Parajka
Content Marketing Specialist at Monkeymedia
Prečítať článok
8 min. čítanie

Základné piliere CX stratégie pre e-shopy

Customer experience (CX), čiže zákaznícka skúsenosť, je budúcnosť obchodovania na internete. Ako sa odlíšite v mori podobných e-shopov a zaujmete potenciálnych zákazníkov, ktorí vás ešte nepoznajú? Musíte sa venovať budovaniu značky, ktorá zvýši vašu rozpoznateľnosť. Kľúčovým odlíšením značky však nie je cena produktov, či produkt samotný – je ním práve zákaznícka skúsenosť, ktorá z vášho […]

Karolína Gregor Karolína Gregor
Search Engine Optimization Manager
Prečítať článok
10 min. čítanie

13 zistení ako vylepšiť formuláre na web stránkach

Formuláre na webových stránkach a aplikáciách sú zrejme najdôležitejším UX miestom, kde sa návštevník mení na zákazníka. Pri testovaní použiteľnosti sa stále stretávame s chybami, ktoré môžu mať za následok to najhoršie: frustrovaného používateľa, ktorý odchádza zo stránky (ku konkurencii).

Peter Angelov Peter Angelov
UX Consultant
Prečítať článok