Responzívny dizajn vo webdizajne

Responzívny dizajn sa vo svete internetu stáva štandardom.

0
532

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.

Rozlíšenie webu štatistiky
Rozlíšenie webu štatistiky 2016

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áč.

 

responsive design

 

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.

Mobile-stats-vs-desktop-users-global-550x405

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.

 

responsive-vs-mobile-first-webdesign-022-1024x689

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?
  1. 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ť.
  2. Duplicitný obsah – Novému updatu Google – Panda sa nemusí páčiť ak máte duplicitný obsah pre rôzne rozlíšenia – mobil a PC
  3. 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.
  4. Znižuje čas načítania webu, ktorý je jeden z najdôležitejších faktorov rankovania v Googli.
  5. Google vie rozlíšiť responzívnosť samu o sebe a aj za to vás rankuje vyššie.

responsive seo

Ako vytvoriť Responzívny dizajn?

  1. 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.

bootstrap

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.

Media query

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

Chceli by ste, aby sme na našej stránke rubriku, v ktorej by sme ponúkali obsah na stiahnutie?

Výsledky

Loading ... Loading ...