1. diel - Úvod do responzívneho webdesignu
Vitajte v kurze, kde sa naučíme prispôsobiť weby pre mobilné zariadenia.
Prečo robiť responzívne weby?
Poďme sa na začiatok trochu namotivovať tým, prečo sa vlastne snažiť svoje webové stránky prispôsobovať návštevníkom s mobilnými zariadeniami. Dôvody sú vlastne hneď 2.
Počet používateľov
Podľa štatistík statcounter.com používa väčšina ľudí pre prístup na internet mobilný telefón:
V roku 2016 prekonali mobilné zariadenia v prístupe na internet klasické počítače. V januári dokonca prekročil podiel mobilných zariadení na internete 55 % celosvetovo. To znamená, že obrovská masa ľudí k nám príde s malou obrazovkou orientovanou na výšku a s korektným zobrazením nášho webu na svojom mobile jednoducho počíta.
Bežný deň pre "závislákov na mobiloch" prebieha asi takto:
Prídu do školy či do práce a takmer neustále niekomu musia nutne písať, musia sa nutne pozerať na weby, čo samozrejme nepočká na ich osobné voľno. Z toho vyplýva, že je nutné weby optimalizovať, aby sa na ne dostal každý kedykoľvek a odkiaľkoľvek.
Mobile-first indexing
Druhým dôvodom je, že aj Google už používa na indexovanie mobilnú verziu stránok (tzv. mobile-first indexing). Keď nám nebude fungovať korektne, nebude sa mu páčiť a nebudú k nám teda ani chodiť ľudia alebo ich bude chodiť málo.
Responzívny webdesign
Spôsobov ako zobraziť na mobilných zariadeniach webovú stránku je mnoho, ale nie všetky sú dobré. Zlým riešením je, keď vytvoríme špeciálnu subdoménu pre mobily - takto vážne nie! Určite nechceme vynakladať prostriedky na udržovanie dvoch webov, keď môžeme udržovať len jeden, stačí sa v zásade naučiť len pár moderných postupov.
Pojem responzívny dizajn označuje tvorbu stránky, ktorá sa dokáže prispôsobiť veľkosti displeja zariadenia podľa určitých pravidiel definovaných najčastejšie pomocou tzv. breakpointov, ktoré si predstavíme ďalej v kurze.
Hlavne si tento pojem nepomýľte s elastickými webmi, čo nie je nič iné ako šikovné využitie percent pre šírku a pixelov, či iných vhodných jednotiek, pre maximálnu šírku.
Náš prvý responzívny web
Vytvorme si teraz úplne jednoduchú stránku bez akéhokoľvek layoutu, ktorá bude obsahovať zatiaľ iba odsek textu. Kód HTML stránky bude nasledovný:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Unresponsive web</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum dignissim varius. Phasellus lobortis libero vestibulum augue commodo, vitae finibus orci varius. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec a lacus eget felis molestie congue. Donec sed fermentum ex. Praesent eu ultrices sem. In in ante pellentesque, hendrerit nibh eu, accumsan ex. Nunc commodo viverra elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam in feugiat nunc. Ut bibendum lectus sollicitudin finibus aliquam.</p> </body> </html>
A výsledok v prehliadači:
To zatiaľ nie je nič nové, však?
Simulácia mobilného telefónu
Poďme sa na stránku pozrieť na mobile. Nemusíme hneď siahať do vrecka, dá sa to oveľa ľahšie. Keď zapneme pomocou klávesu F12 vývojárske nástroje v našom prehliadači, nájdeme tu ikonku, ktorá umožňuje nasimulovať, ako bude web zobrazený na mobile (v Chrome je to táto):
Po stlačení sa text zobrazí korektne aj na mobilnom zariadení:
Deje sa tak z dôvodu, že sme zatiaľ neurčili žiadnu veľkosť žiadneho
prvku. Poďme pod text vložiť odznak "Bestseller!" s veľkosťou
100x100px:
<p style="background: blue; color: white; border-radius: 999px; width: 100px; height: 100px; vertical-align: top; display: flex; align-items: center; justify-content: center; ">Bestseller!</p>
Výsledok v mobilnej verzii prehliadača:
Vidíme, že odznak je z nejakého dôvodu miniatúrny, aj keď na desktope vyzerá normálne. Ako je to možné?
Aby sme problém pochopili, pozrime sa, ako to s tými pixelmi na displeji vlastne je.
Fyzický pixel vs. CSS pixel
Možno si pamätáte, že v minulosti sa obrazovky fyzicky zväčšovali. 14" monitory najprv mali rozlíšenie 640 bodov na šírku, potom 800, až sme sa dnes dostali na 1920 pixelov na 27" obrazovke. Všetky tieto "zväčšenia" znamenali ale aj zväčšenie obrazovky, takže jeden pixel meral približne stále rovnako.
Úsvit retina displejov
Toto trvalo, až kým firma Apple prišla s novým trendom a to, že do rovnakého displeja vložila na šírku 2x toľko pixelov, celkovo mal displej teda 4x toľko bodov (2x toľko na šírku aj na výšku), ale uhlopriečka displeja mala stále rovnako palcov. Týmto displejom od Apple sa hovorí retina displeje. Daný zlom nastal medzi telefónmi iPhone 3 a iPhone 4 a odštartoval trend, ku ktorému sa pripojili všetci ostatní výrobcovia mobilných zariadení. Na displeji mobilov dnes nie sú body už vidieť voľným okom a text sa stal oveľa zaoblenejším a lepšie čitateľným.
Aby sme zobrazili bod rovnako veľký ako bol bod na displeji iPhone 3, musíme teda na iPhone 4 rozsvietiť vlastne 4 fyzické pixely:
Tieto vyššie rozlíšenia sú často označované číslom a
písmenom x (koľkokrát je pixel menší ako býval). Väčšina
mobilných zariadení má rozlíšenie 2x a
viac. Čo sa týka desktopov a tabletov, tie sú
väčšinou stále na 1x, niekedy 2x. Možno vám už
dochádza, kde je problém.
CSS pixely
V našej ukážke Chrome emuluje displej s veľkým počtom fyzických
pixelov na malom rozmere. My sme určili, že náš obrázok má
100px šírku. Jednotka px v predvolenom
nastavení zodpovedá 1 fyzickému pixelu! To preto, aby sa staré
webové stránky, ktoré počítajú s veľkým desktopovým displejom,
zobrazili na telefóne nerozsypané. Pretože fyzických pixelov má mobilný
displej na šírku tisíce, zaberá náš 100px odznak naozaj len
malú časť.
Aby sme problém opravili, musíme prehliadaču povedať, že
počítame s tým, že displej je malý a pixel môže byť naozaj braný podľa
tej pôvodnej normy, kedy jeden CSS pixel sú napr. rovno 4 fyzické.
Šírka obrazovky na mobile potom meria obvykle niečo medzi
320px-360px a náš odznak bude vyzerať normálne, pretože bude
mať reálne trebárs 400px. Ako na to?
Viewport
HTML umožňuje nastaviť tzv. viewport, čo je vlastne rozmer
„okna“, ktorým sa na web pozeráme. Do hlavičky <head>
si pridáme nasledujúci <meta> element, ktorým hovoríme,
že nechceme CSS pixel prevádzať na pixel fyzický, ale chceme pomer 1:1.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Môžeme sa pozrieť na nový výsledok v simulátore webového prehliadača:
1px teraz zodpovedá asi 1/96 palca ako na počítači, tak aj
na mobilnom telefóne. Odznaky sa na stránku zmestia asi 3, pretože jeden má
100px a celá stránka má niečo cez 300px.
Nesmieme zabudnúť na to, že teraz je tá istá stránka na
telefóne široká len 320px, ale na desktope napr.
1000px. My na nej skoro nič nemáme, takže nám to nevadí, ale
ak by sme tam mali napr. obrázok so šírkou 640px, pretiekol by
na mobile z displeja.
Ďalej si v kurze ukážeme, ako pre rôzne šírky stránky prispôsobiť jej obsah, najmä obrázky a navigáciu.
V budúcej lekcii, Responzívny webdesign pomocou Media Queries v CSS3, sa naučíme používať media queries a vysvetlíme si prečo ísť smerom k mobile-first prístupu.
