2. diel - Responzívny webdesign pomocou Media Queries v CSS3

V minulej lekcii, Úvod do responzívneho webdesignu, sme sa uviedli do responzívneho webdesignu.

Dnes sa naučíme používať media queries, čo sú v podstate podmienky v CSS štýloch, ktoré umožňujú aktiváciu a deaktiváciu rôznych štýlov podľa veľkosti obrazovky zariadenia.

Desktop first vs. mobile first prístup

K responzívnemu webdesignu môžeme pristupovať pomocou dvoch základných prístupov.

Desktop first

Keď sa povie responzívna web, väčšina z nás si predstaví web vytvorený pre desktopy, ktorý sa následne upraví pre mobilné zariadenia. Takto začínal každý – je to ľahké a pomerne efektívne. V podstate tvoríme normálnu stránku, tak ako sme sa to učili, a prenastavujeme elementy podľa pravidiel pre menšie šírky.

Metóda má však jeden zásadný problém. Zmena rozvrhnutia webu pre rôzne zariadenia je dosť zložitá a vyžaduje prepisovanie veľkej časti kódu – a my určite nechceme písať veľa kódu, že? Navyše často dochádza k nekorektnému zobrazeniu. Však to poznáte - niečo sa zobrazí dobre, niečo zase nie - des a hrôza.

Mobile first

Mobile first je metóda tvorby webu, ktorá vyžaduje trochu iné myslenie. Metóda využíva v podstate opačného postupu, ako desktop first. Z toho teda vyplýva, že sa začína od zobrazenia pre mobily. A verte alebo nie, je to paráda.

Mnoho ľudí, najmä začiatočníkov, metóda odrádza kvôli jej "vyššej náročnosti" na pochopenie. Nezmysel, len sú leniví a nechce sa im premýšľať.

Mobile first je výhodná metóda – ušetrí veľa času a hlavne napíšete oveľa menej kódu, ktorý sa tak stane aj výrazne prehľadnejším.

Breakpointy a media queries

CSS3 nám umožňuje definovať podmienky, tzv. media queries, kedy sa daný štýl aplikuje na elementy. Pomocou breakpointov definujeme, od akej šírky zariadenia sa má štýl aplikovať. Hneď si to ukážeme.

Viewport

Aby sme vôbec mohli webové stránky na mobilných zariadeniach spustiť, budeme potrebovať upraviť viewport. Ten nastavíme meta tagom, ktorý vložíme niekam do HTML hlavičky – úplne jedno kam. Ten v podstate nastaví reálnu šírku displeja, ktorú si internetové prehliadače v mobilných zariadeniach rady upravujú podľa seba.

Mojím osvedčeným nastavením je toto.

<meta name="viewport" content="width=device-width, viewport-fit=cover">

Box-sizing

Budeme využívať vlastnosť box-sizing. Najčastejšie sa používa s hodnotou border-box, čo nám mení rozpätie šírky elementu a počíta do neho aj padding a border. Môžeme teda treba nastaviť šírku na 500px, pridať padding či border a element bude mať konečne šírku naozaj len 500px.

Porovnanie

Poďme si teda ukázať krátke porovnanie.

Budeme mať napr. nejakú jednoduchú galériu, ktorá bude pre počítače v dvoch stĺpcoch. Pre mobily budeme chcieť jedno-stĺpcové rozloženie. (Pre jednoduchosť zatiaľ vynecháme rôzne marginy, paddingy a podobne.)

Metódou desktop first by sme napísali asi tento kód:

.gallery img {
  width: 50%;
  float: left;
}

@media screen and (max-width: 700px) {
  .gallery img {
    width: 100%;
    float: none;
  }
}

Metódou mobile first by sme napísali len tento kód:

@media screen and (min-width: 700px) {
  .gallery img {
    width: 50%;
    float: left;
  }
}

Všimnite si, že pri desktop first musíme niekoľko štýlov vyresetovať na východiskovú hodnotu, ktorá je práve roztiahnutá cez celú šírku. Pri zložitejších štýloch je to ale pomerne ťažké a preto sa nám pri tejto metóde môže často design rozsypať kvôli zabudnutému štýlu. Pri mobile first však nič resetovať nemusíme a iba jednoducho nastavíme nové hodnoty pre desktop. Pre mobilný telefón ich necháme predvolené.

Ukážka mobile first

Ukážeme si ešte jeden príklad, teraz iba s metódou mobile first, pretože je to zatiaľ najefektívnejšia metóda na štýlovanie responzívnych stránok. Preto sa tiež ostatnými metódami už zaoberať nebudeme.

Vytvoríme si jednoduché štýly pre stránku s elementmi pre jeden článok a dva postranné panely.

HTML kód by mohol vyzerať nejako takto:

<div>
  <article class="article"></article>
  <aside class="lateral-panel"></aside>
  <aside class="lateral-panel"></aside>
</div>

A CSS kód s využitím mobile first by mohol vyzerať nasledovne:

.article {
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  margin: 20px 0;
  padding: 15px;
  background: blue;
}

.lateral-panel {
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  margin: 20px 0;
  padding: 10px;
  background: red;
}

@media screen and (min-width: 900px) {
  .clanek {
    width: 79%;
    float: left;
  }

  .lateral-panel {
    width: 19%;
    float: right;
  }
}

Vždy sa budeme snažiť vytvárať samostatné komponenty, ktoré nie sú závislé od konkrétneho elementu či pozície v HTML stránke, ale to už trochu predbieham a viac sa o tom porozprávame v článku o objektovom CSS.

Pri malej obrazovke dostaneme nasledujúci efekt:

Rozloženie na malých displejoch.

A pri väčšej obrazovke dostaneme inak rozmiestnené elementy:

Rozloženie na veľkých displejoch.

Flexibilnosť

V ére responzívnych webov metódou desktop first ste mohli vidieť skôr fixné hodnoty pre šírku v každom @media rozmedzí. V metóde mobile first sa však často využíva kombinácia responzívnosti a flexibilnosti, teda nenastavujete pevné hodnoty (px, em, rem...), ale využívate predovšetkým percentá (%). Bavíme sa predovšetkým o šírke elementov.

V jednoduchosti: snažte sa stránky robiť flexibilné od najmenších displejov až po najväčšie. Pokiaľ na webe samozrejme chceme pevné hodnoty, tak použite ich.

Záver

Tvorba naozaj dobre responzívnej stránky fungujúcej naprieč prehliadačmi rozhodne nie je prechádzka ružovou záhradou. Snažte sa teda využívať efektívne ciest a vyhnite sa veciam, ktoré vás obmedzujú a sťažujú vám prácu.

Existujú tiež takzvané CSS/front-end frameworky, ako napr. Bootstrap, ktoré vám (okrem iného) môžu pomôcť k ľahkému responzívnemu dizajnu - hľadajte grid systém.

V ďalšej lekcii, Responzívne menu, si vytvoríme jednoduché responzívne menu metódou mobile-first. Povieme si, na čo si dávať pozor a akým spôsobom zaistiť čo najlepší chod.