1. diel - Úvod do responzívneho webdesignu
Vitajte pri prvej lekcii online kurzu responzívneho webdizajnu. Spoločne si vysvetlíme, čo znamená pojem responzívny dizajn, prečo je nevyhnutný pre moderné weby a ako navrhnúť stránky, ktoré sa prispôsobia všetkým zariadeniam (od mobilu až po širokouhlý monitor).
V priebehu kurzu sa krok za krokom naučíme vytvárať responzívne rozloženie pomocou media queries, flexboxu a CSS gridu. Využijeme tiež framework Bootstrap a jeho grid systém na rýchlu tvorbu profesionálneho dizajnu.
Minimálne požiadavky kurzu
Na úspešné absolvovanie kurzu sú potrebné znalosti minimálne v rozsahu nášho kurzu Webové stránky krok za krokom. Výhodou pre vás bude aj znalost kurzu Základy CSS3.
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ď dva.
Počet používateľov
Podľa štatistík statcounter.com používa väčšina ľudí na prístup k internetu 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 63 % celosvetovo. To znamená, že obrovská masa ľudí k nám príde s malou obrazovkou orientovanou na výšku a so správnym 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
Google od roku 2023 úplne prešiel na tzv. mobile-first indexing, teda indexovanie podľa mobilnej verzie webu. Znamená to, že desktopová verzia sa už vôbec nepoužíva pri zaraďovaní do výsledkov vyhľadávania. Ak teda stránka na mobile nefunguje správne (napr. má skryté alebo chýbajúce prvky), Google ju môže vyhodnotiť ako menej kvalitnú a znížiť jej pozíciu vo výsledkoch.
Responzívny webdizajn
Spôsobov, ako zobraziť webovú stránku na mobilných zariadeniach, 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ž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í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 zatiaľ obsahovať iba odsek textu. Keďže náš projekt bude mať
časom viac súborov, vytvoríme si preň najprv priečinok, napr.
responsive_website/. Ideálne v zálohovanom priečinku Dropboxu
alebo v priečinku OneDrive, aby bola naša práca zálohovaná. Následne
spustíme VS Code a v tomto priečinku vytvoríme nový súbor
index.html. Kód HTML stránky bude nasledujúci:
<!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 aj oveľa jednoduchšie. Pomocou klávesu F12 zapneme vývojárske nástroje v našom prehliadači. Nájdeme tu ikonu, ktorá umožňuje nasimulovať, ako bude web zobrazený na mobile (v Chrome je to táto):
Po kliknutí na ikonu 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 rozmermi
100 × 100px:
<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>
Atribút style vytvára tzv. inline štýl, pomocou
ktorého môžeme priamo do HTML prvku zapísať CSS vlastnosti (napr. farbu,
veľkosť, zarovnanie, ...). V praxi sa hodí najmä na jednoduché ukážky,
ale v reálnych projektoch píšeme štýly do samostatného CSS súboru.
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. Monitory s veľkosťou 14" mali najprv rozlíšenie 640 bodov na šírku, potom 800 bodov, 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ž dovtedy, kým spoločnosť Apple neprišla s novým trendom a do rovnakého displeja nevlož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 zostala rovnaká. Tieto displeje od Apple sa označujú ako 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 displejoch mobilov dnes už body nie sú viditeľné 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áš odznak má šírku
100px. 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, keď jeden CSS pixel predstavujú napr. rovno 4
fyzické pixely. Ší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 napr. 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
ako šírku viewportu má prehliadač použiť skutočnú šírku zariadenia v
CSS pixeloch (a nemá simulovať široký desktopový monitor):
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Takto nastavený viewport zabezpečí, že šírka layoutu zodpovedá šírke
zariadenia v CSS pixeloch a naše prvky (napr. odznak so šírkou
100px) budú na mobile vyzerať prirodzene veľké. Môžeme sa
pozrieť na nový výsledok v simulátore webového prehliadača:
Jeden pixel teraz zodpovedá asi 1/96 palca ako na počítači, tak aj na
mobilnom telefóne. Na stránku sa zmestia približne tri odznaky, 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.
Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 3x (1.17 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
