Responzivní design — jak funguje na mobilu
Nauč se, jak vytvořit stránku, která vypadá skvěle na všech zařízeních — od malých mobilů až po velké monitory.
Proč je responzivní design důležitý
Pamatujete na časy, kdy se weby zobrazovaly správně jen na počítačích? To už je dávno pryč. Dnes se na weby kouká skoro všichni z telefonu — někdy i z tabletu. Pokud tvoje stránka nevypadá dobře na mobilu, ztratíš spoustu návštěvníků.
Responzivní design není žádná složitá magie. Je to vlastně prostě logický přístup — tvůj web se přizpůsobí velikosti obrazovky, na které se právě prohlíží. Texty zůstávají čitelné, obrázky se změní, tlačítka jsou kliknutelná. Prostě všechno funguje, ať se na to koukaš z mobilu, tabletu nebo desktopového počítače.
Zajímavost: Víš, že 73 % lidí se poprvé na nový web dívá právě z mobilu? Pokud mu tam ale stránka nefunguje správně, jen tak tak 50 % z nich se vrátí.
Media queries — tvůj nový nejlepší kamarád
Pokud jsem ti měl říct jednu věc o responzivním designu, je to právě media queries. Jsou to vlastně CSS pravidla, která říkají: “Hej, pokud je obrazovka menší než 768 pixelů, změň tyhle styly.”
Vypadá to nějak takto:
@media (max-width: 768px) {
.navigace { flex-direction: column; }
.obsah { font-size: 16px; }
}
V angličtině to znamená: “Když je maximální šířka obrazovky 768 pixelů nebo méně, udělej toto.” Prostě si představ, že v tom kódu řídíš svou stránku jako na dálkové ovládání — podle toho, jak je velká obrazovka.
Obvykle pracuješ se třemi základními velikostmi: mobilní (do 768px), tablet (768-1024px) a desktop (nad 1024px). Není potřeba víc. Každou z těch kategorií si upravíš zvlášť.
Flexbox — jednodušší způsob, jak řadit věci
Pamatuješ na časy, kdy jsi musel skoro kouzeliti, aby se ti prvky na stránce naseřadily správně? Flexbox to změnil. Je to CSS vlastnost, která tě nechá poměrně snadno řídit, jak se věci v kontejneru rozmístí.
Dejme si příklad. Máš tři kartičky vedle sebe na desktopu. Na mobilu ale chceš, aby byly pod sebou. S flexboxem je to jednoduché:
.karticky { display: flex; flex-direction: row; }
@media (max-width: 768px) {
.karticky { flex-direction: column; }
}
A je to. Prostě změníš směr — z řady (row) na sloupec (column). Všechny kartičky se pak naskládají pod sebou. Flexbox se s tím poměrně snadno vypořádá.
Podobné články, které se ti mohou hodit
Shrnutí — základy responzivního designu
1
Mysli na mobil od začátku
Nenavrhuj pro desktop a pak se snažíš to “zmenšit” na mobil. Začni od mobilní verze a pak ji rozšiřuj.
2
Nauč se media queries
Jsou to opravdu tvůj nejlepší kamarád. S nimi můžeš měnit vzhled na základě velikosti obrazovky.
3
Používej flexbox
Je to nejsnazší způsob, jak uspořádat prvky na stránce a udělat je responzivní.
4
Nezapomeň na viewport meta tag
Je to malý, ale důležitý kousek HTML kódu, bez kterého tvá stránka nebude fungovat správně.
Responzivní design je vlastně o tom, aby tvá stránka pracovala pro všechny — bez ohledu na to, jestli ji čte někdo z iPhonu, Androidu, tabletu nebo počítače. Není to složité, ale vyžaduje to trochu praxe a myšlení dopředu. Pokud se těmito základy budeš řídit, budeš na správné cestě.
Upozornění
Tento článek je určen pouze pro vzdělávací účely. Jedná se o úvod do principů responzivního webového designu a praktických technik. Konkrétní implementace a nejlepší postupy se mohou lišit v závislosti na tvých konkrétních potřebách a projektu. Pokud pracuješ na profesionálním projektu, doporučujeme se poradit s zkušenějším vývojářem nebo designérem. Web se neustále vyvíjí, a proto některé techniky z tohoto článku mohou být v budoucnu nahrazeny novějšími metodami.