1. diel - Úvod do responzivního webdesignu
Vitajte u kurzu, kde sa naučíme prispôsobiť weby pre mobilné zariadenia.
Prečo robiť responzívne weby?
Poďme sa pre začiatok trochu namotivovať 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 užívateľov
Podľa štatistík statcounter.com používa väčšina ľudí k prístupu na internet mobilný telefón:
V roku 2016 prekonali mobilné zariadenia v prístupe na internet klasické počítače. To znamená, že obrovská masa ľudí k nám príde s malou obrazovkou orientovanou na výšku as 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 musí nutne písať, musí sa nutne pozerať na weby, čo samozrejme nepočká na ich osobné voľno. Z toho vyplýva, že je potrebné 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 dokonca teda ani chodiť ľudia alebo ich bude chodiť málo.
Responzívne webdesign
Spôsobov ako zobraziť na mobilných zariadeniach webovú stránku je veľa, ale nie všetky sú dobré. Také zlé riešenie je, keď vytvoríme špeciálny subdoménu pre mobily - takto vážne nie! Určite nechceme vynakladať prostriedky na udržiavanie dvoch webov, keď môžeme udržiavať len jeden, stačí sa v zásade naučiť len pár moderných postupov.
Pojem responzívne 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. Breakpoint, ktoré si predstavíme ďalej v kurze.
Hlavne si tento pojem nepomýlite so elastickými weby, č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ívne web
Vytvorme si teraz úplne jednoduchú stránku bez akéhokoľvek layoutu, ktorá bude obsahovať zatiaľ len odsek textu. Kód HTML stránky bude nasledujúci:
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="UTF-8"> <title>Neresponzivní 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é, že?
Simulácia mobilného telefónu
Poďme sa na stránku pozrieť na mobile. Nemusíme hneď siahať do vrecka, možno to aj 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!" o veľkosti 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úrne, aj keď na desktope vyzerá normálne. Ako je to len možné?
Aby sme problém pochopili, pozrime sa ako to s tými pixely 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šetka táto "zväčšenie" znamenala ale aj zväčšenie obrazovky, takže jeden pixel meral približne stále rovnako.
Úsvit retina displejov
Toto trvalo až 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 i na výšku), ale uhlopriečka displeja mala stále rovnako palcov. Týmto obrazovkám od Apple sa hovorí retina displeja. Daný zlom nastal medzi telefónmi iPhone 3 a iPhone 4 a odštartoval trend, ku ktorému sa pripojili všetky 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šie a lepšie čitateľný.
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íšenie sú často označovaná číslom a
písmenom x (ako koľkokrát je pixel menšia než býval).
Väčšina mobilných zariadení má rozlíšenie 2x a
viac. Čo sa týka desktopov a tabletov, tie sú
poväčšine stále na 1x, niekedy 2x. Možno vám už svitá,
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 predvolene odpovedá 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, keď jeden CSS pixel sú napr. Rovno 4 fyzické. Šírka obrazovky na mobile potom meria zvyčajne niečo medzi 320px-360px a náš odznak bude vyzerať normálne, pretože bude mať reálne potrebné 400px. Ako na to?
Viewport
HTML umožňuje nastaviť tzv. viewport, čo je vlastne rozmer
"okná", ktorým sa na web pozeráme. Do hlavičky <head> si
pridáme nasledujúce <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 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 o šírke 640px, vytiekol by na mobile z
displeja.
Ďalej v kurze si ukážeme, ako pre rôzne šírky stránky prispôsobiť jej obsah, najmä obrázky a navigáciu.
