Responsivní Design — Telefon Je Důležitý
Půlka návštěv přijde z mobilu. Zjistěte, jak to udělat správně — bez kompromisů na vzhled.
Proč je mobilní design už dlouho nemluvná věc?
Zkuste si to sami. Otevřete jakýkoliv web na telefonu. Jestli se musíte přiblížit a posunovat obrazovkou, aby jste viděli tlačítka, znamená to, že návrhář zapomněl na půlku světa. A to je přesně ta půlka, která vás hodnotí.
Responsivní design není nějaký bonus. Je to základní očekávání. Vaše portfolio musí vypadat dobře na všech zařízeních — od starého smartphonu až po 27palcový monitor. Tady vám ukážeme, jak na to.
Breakpoints — myšlíte si, že je to jen čísla?
Není. Breakpoints jsou body, kde váš design říká: “Tady se musím změnit, aby byl čitelný.” Nejdůležitější jsou tři — a pak se stane kouzlo.
Začnete mobilem (320px), pak tablet (768px), nakonec desktop (1024px+). Nejde o to udělat tři různé weby. Jde o to, aby jeden web rostl chytře. Text který je OK na mobilu se stane maličký na desktopu, takže musíte poupravit velikost. Stejně s obrázky — na mobilu potřebujete kvadrát, na desktopu můžete obsáhnout širší krajinu.
A tady je věc — nedělejte breakpoint na 600px, pak na 700px, pak na 800px. To je zbytečné. Tři základní jsou stačit. Víc vám jenom komplikuje práci.
Mobile-First — začněte tím, co má smysl
Není to nový trend. Je to zdravý rozum. Když budete navrhovat pro mobilní telefon jako první, musíte se soustředit na to, co je důležité. Žádné zbytečnosti. Jen obsah, který opravdu potřebuje být tam.
Pak přidáte tablet — a vidíte, že máte prostor na dva sloupce. Na desktopu to můžete rozšířit na tři. Vždycky přidáváte, nikdy neubíráte. To je klíč. Pokud budete dělat opak — navrhnete něco skvělého na desktopu a pak se snažíte to nacpat do mobilu — bude to katastrofa.
Hádám, že vás to překvapí — ale mobilní design vám vždycky pomůže udělat lepší desktop verzi taky. Vynucuje vás myslet jasně.
Jak to udělat v praxi — čtyři kroky
Definujte obsah na mobilu
Co se MUSÍ vidět? Jméno, vaše nejlepší práce, kontakt. Všechno ostatní je bonus. Napište si seznam — nebude vás to trvat dlouho a ušetří vám to hodiny later.
Nastavte správný viewport
Do HTML vložte
<meta name="viewport" content="width=device-width,
initial-scale=1">
. Bez toho vás prohlížeč přeškáluje a všechno bude malé. S
tím je všechno OK.
Použijte flexbox a CSS Grid chytře
Na mobilu jsou položky v jednom sloupci (flex-direction: column). Na tabletu se změní na dva sloupce (flex-direction: row). Desktop má tři. Jde to hladce, bez problémů. Jen napište media query.
Testujte na reálných zařízeních
Chrome DevTools jsou skvělé, ale není to totéž jako opravdový iPhone nebo Android. Poproste kamaráda, aby si vás na svém telefonu otevřel. Uvidíte chyby, které jste nikdy nezaznamenali.
Nejčastější chyby — kterým se vyhnete
Moc textu na jednom řádku
Na desktopu se 120 znaků na řádek čte skvěle. Na mobilu to vypadá jako zeď. Maximálně 45-50 znaků na mobilu. Váš oči vám budou děkovat.
Obrázky které nejdou zmenšit
Když vložíte obrázek bez max-width: 100%, přeteče z obrazovky. Malá věc, velký problém. Přidejte vždy max-width: 100%; height: auto; do CSS.
Tlačítka která jsou moc malá
Prsty nejsou přesné. Minimum 44×44 pixelů na mobilu. Větší je lepší. Mnohem lépe se to používá a vypadá to profesionálně.
Ignorování touch zařízeníí
Hover efekty na desktopu jsou OK. Na mobilu se nedají použít. Místo toho používejte :active nebo :focus. Uživatelé to cítí a oceňují to.
“Myslel jsem, že mobilní design znamená vzdát se designu. Pak jsem se naučil, že to znamená udělat lepší design. Na všech zařízeních, bez výjimek.”
— Martin, UX designer, Praha
Stručně — co si zapamatovat
Responsivní design není vykouzlení. Je to disciplína. Začnete s mobilem, myslíte na obsah, testujete na reálných zařízeních a pak se odsunete a podíváte se na to, co jste udělali.
Vaše portfolio se bude zobrazovat na telefonu někoho, kdo rozhoduje, zda vám dá práci. Nemůžete si dovolit, aby tam vypadalo zle. Nemůžete si dovolit, aby tam vypadalo zlomené. Musí to být bezchybné.
A když to uděláte správně? Nebude to jen dobré na mobilu. Bude to dobré všude. To je cíl.
Chcete svůj web vylepšit?
Projděte si své portfolio na telefonu. Pokud vidíte něco, co vám nepřijde správné, vím přesně co dělat.
Zpět na domůPoznámka
Tento článek obsahuje obecné pokyny pro responsivní web design. Vaše konkrétní potřeby se mohou lišit v závislosti na typu projektu, cílové skupině a technologiích, které používáte. Vždy testujte na více zařízeních a sbírejte zpětnou vazbu od skutečných uživatelů. Design se vyvíjí, a s ním i vaše přístup.
Související články
