Už kedysi dávno povedal Steve Jobs, že dizajn nie je to “ako to vyzerá” ale “ako to funguje“. Nepriamo to povedal aj Miro Kozel v našom rozhovore. Preto sa vyvíja aj svet webdizajnu, ktorý sa dnes posunul už dosť ďaleko v oblasti prispôsobovania užívateľovi a zariadeniu, funkcionality aj vzhľadu. Rýchly rozvoj mnohých technológii prispel k vzniku zariadení s rôznymi veľkosti obrazovky a rozlíšenia. Preto je potrebné prispôsobiť týmto podmienkam každý web. A z tohto dôvodu vznikol trend, ktorý sa nazval responzívny dizajn.
Čo je Responzívny dizajn?
Responzívny dizajn je taký, ktorý prispôsobí všetky svoje prvky akémukoľvek zariadeniu. Nezáleží na tom, či má pixelové rozlíšenie 1024×768,1280×1024,2K, 4K a iné alebo aj mobilným zariadeniam ako 800×480, 960×640.
Responzívny dizajn je nastavený tak, aby sa prvky rozdelili na obrazovke podľa toho, aká je veľkosť displeja. Preto môže na každom zariadení stránka vyzerať trochu ináč.
Dnešnými dňami prichádza trend, kedy sa dizajn stavia najprv pre mobilné zariadenia, kde musí byť dizajn veľmi jednoduchý a prehľadný. Prvky sú väčšinou naskladané na sebe a stránkou musíte rolovať. Menu je väčšinou klasické hamburgerové v ľavom alebo pravom rohu.
Až následne na to sa web pripraví pre desktopy. Tento spôsob rozmýšľania ale aj kódovania pomáha dizajnérom a webdeveloperom sa sústrediť na jednoduchosť a funkčnosť. Ďalším z dôvodov, prečo sa zaviedol tento postup je aj ten, že podľa najnovších štatistík je viac mobilných zariadení než desktopových. Hovorí sa tomu aj ináč Mobile-first dizajn.
Pre užívateľa aj SEO
Google sa rozhodol, že responzívny dizajn bude pre nich trendom. Preto bude tento dizajn nielen lepším pre užívateľský zážitok, ale stránka sa bude lepšie hodnotiť aj na Google vyhľadávači. Aj z tohto dôvodu by sa responzívnosť webu mala stať bežným štandardom pre všetky stránky na internete.
Prečo?
- Google začal porovnávať to čo vidno na stránke vs. to čo je v zdrojovom kóde. Akonáhle sa vám bude niečo prekrývať, resp. nebude vidieť, tak nielenže to bude Google ignorovať, ale ešte vás za to môže aj penalizovať.
- Duplicitný obsah – Novému updatu Google – Panda sa nemusí páčiť ak máte duplicitný obsah pre rôzne rozlíšenia – mobil a PC
- Budovanie linkov – ak niekto odkáže na vašu desktop verziu a užívateľ na to klikne z mobilu, nemusí tam byť vždy presmerovaný. Alebo Google jednoducho bude počítať vaše backlinky osobitne pre mobilnú a desktopovú verziu.
- Znižuje čas načítania webu, ktorý je jeden z najdôležitejších faktorov rankovania v Googli.
- Google vie rozlíšiť responzívnosť samu o sebe a aj za to vás rankuje vyššie.
Ako vytvoriť Responzívny dizajn?
- Frameworky
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.
2. Meta – Viewport
Overte si, či sa v kóde vášho webu v hlavičke <head> nachádza tento alebo podobný riadok:
<meta name="viewport" content="width=device-width, initial-scale=1">
Zaistí, aby sa web správne zobrazil vo všetkých rozlíšeniach.
3. Používajte relatívne veľkosti.
Je praktickejšie využívať relatívne jednotky ako em alebo % percentá namiesto absolútnych pixelov. Slúži na to jednoduchá matematika. Ak je základná šírka stránky 1000px a váš objekt má 200px tak objekt bude mať šírku 1000/200=0,2 čiže 20%
4. Využívajte media query
Pomocou Media query viete písať rôzne CSS štýly pre iné rozlíšenia obrazovky. Tento príklad ukazuje rôzne nastavenia pre 320px a 640px displej. Je to konkrétne prípad Eshopu kde v prvej možnosti sa produkty ukazovali v jednom stĺpci a v druhom prípade sa už zmestili aj dva do jedného riadku.
5. Šablóny
Ak ste jednoducho lenivý alebo nemáte čas (resp. peniaze) na vytvorenie vlastného webdizajnu, ktorý bude presne podľa vašich predstáv, môžete sa uspokojiť aj s omnoho jednoduchšou možnosťou. A tou je možnosť vybrať si z tisícov šablón vo WordPresse a Drag & Drop platforiem na internete. Pozrite si niektoré z nich:
Nezabudnite si taktiež pozrieť aj článok o 5 trendoch vo webdizajne, kde bol tiež responzívny dizajn spomenutý.
Otázka na záver
Loading ...
