Breakpointy, které skutečně fungují
Jak zvolit správné breakpointy pro vaše projekty. Jde o víc než jen 768px — musíte znát svou cílovou skupinu a zařízení.
Čtěte článekMobilní design první — skutečná řešení pro české projekty
Praktické návody na responzivní breakpointy, fluidní rozložení a dotyková rozhraní. Vše co potřebujete vědět o designu bez ohledu na zařízení.
50+
Praktických tipů
8
Klíčových konceptů
24/7
Přístup k zdrojům
Proč na tom záleží
Mobilní design není volitelný — je to základ
Víc než 70% uživatelů web prohlíží na mobilních zařízeních. Váš design musí fungovat všude, jinak ztratíte potenciální zákazníky.
Mobilní prvnost od začátku
Když začnete s mobilem, je jednodušší přidat funkce pro větší obrazovky. Opak není vždycky pravda. Nejdřív mobil, pak tablet, pak desktop.
Fluidní rozložení funguje lépe
Fixní šířky vás zablokují. Fluidní jednotky se přizpůsobují — procenta, rem, viewport jednotky. Výsledek? Design, který vypadá dobře všude.
Dotyková rozhraní jsou jiná
Dotyk není myš. Bez hover efektů, větší cílové oblasti, jasné stavy. Vaši uživatelé budou vděční za každý větší tlačítko a jednodušší navigaci.
Zlepšuje se SEO a výkonnost
Google preferuje mobilní design. Stránky, které jsou mobilní prvé, se lépe umisťují. Plus — jsou rychlejší a stahují se lépe na pomalých připojeních.
Dostanete se k více lidem
Starší telefony, levné zařízení, pomalé sítě — všechny se musí vejít do vašeho designu. Inkluze znamená větší dosah a více uživatelů.
Jednodušší údržba a vývoj
Konzistentní systém breakpointů ušetří hodiny. Víte přesně, kde se design mění. Není to chaos — je to plán, kterému rozumíte vy i váš tým.
Nejdůležitější články
Mobilní design — praktické články
Články, které se zabývají tím, co skutečně funguje. Bez teoretických blábolů, jen praktické poznatky z reálných projektů.
Fluidní rozložení místo fixních šířek
Proč fixní šířky už nepatří do moderního webdesignu. Fluidní jednotky a relativní velikosti vám ušetří čas a vytvářejí lépe vypadající stránky.
Čtěte článek
Dotyková rozhraní — design bez myši
Dotyk funguje jinak než myš. Větší cílové oblasti, jasné stavy, bez hover efektů. Jak navrhnout zkušenost, která funguje na prstech.
Čtěte článek
Jak na to
Procesem k responzivnímu designu
Není to složité. Máte-li systém, všechno vám jde lépe. Tady je ten náš.
01
Začněte s mobilem
Nejdřív si představte nejmenší obrazovku. Co tam musí být? Co je opravdu potřeba? Začněte jednoduše, pak přidávejte vrstvou.
02
Zvolte své breakpointy
Ne všechny velikosti jsou stejně důležité. Zvolte 3-4 klíčové breakpointy (třeba 480px, 768px, 1024px) a budujte na nich. Konsistence vám ušetří čas.
03
Testujte na skutečných zařízeních
Simulátor není dost. Vezměte si starý telefon, nový telefon, tablet. Jak to vypadá? Jak se to chová? Skutečný svět je náročnější než DevTools.
04
Optimalizujte výkon
Mobily mají pomalší sítě. Obrázky musí být menší, kód čistší, animace jemnější. Výkon není možnost — je to požadavek.
Co říkají ostatní
Reálné zkušenosti z praxe
Vývojáři a designéři, kteří používají mobilní design první, se vrátili. Tady je proč.
“Předtím jsme design dělali na desktopu a pak se snažili zmenšit. Bylo to bolest. Od chvíle, co jsme začali s mobilem, všechno je jednodušší. Tablet a desktop se přidají sami.”
— Jana, frontend vývojářka
“Neměl jsem tušení, kolik věcí se změní, když mi na mobilu zafunguje dotyk místo hover efektů. Návštěvníci jsou teď mnohem spokojení. A je to rychlejší — vždycky když optimalizuji pro mobil, zrychli se to i na desktopu.”
— Petr, designér, 8 let v oboru
“Začal jsem si dělat poznámky o breakpointech. Vždycky jsem měl stejné hodnoty, takže jsem si je zapsal. Teď používám CSS proměnné a šetří mi to čas při každém projektu. Věděl jsem, že něco se změní, ale neuvěřoval bych, jak moc to pomůže.”
— David, 12 let jako vývojář
Časté otázky
Často se ptáte
Odpovědi na otázky, které si všichni pokládají. Nic složitého, jen čistý praktický poradí.
Kolik breakpointů bych měl mít?
Není jedna správná odpověď. Někdo používá 2 (mobil, desktop), někdo 5. Doporučuji začít se 3-4: mobil (max 480px), tablet (480-768px), malý desktop (768-1024px), velký desktop (1024px+). Pak je můžete přizpůsobit svým projektům.
Je CSS Grid nebo Flexbox lepší pro responzivitu?
Obojí funguje, ale Flexbox je jednodušší na začátku. Grid vám dává víc kontroly, ale je složitější na učení. Začněte s Flexbox, pak se naučte Grid, když budete potřebovat.
Jak testovat responzivitu bez fyzických zařízení?
DevTools v Chrome/Firefox jsou skvělé, ale nejsou dokonalé. Ideální je fyzické testování. Půjčte si starý telefon od kamaráda, koupit levný tablet na OLXu. Pak jste viděli opravdu všechno.
Zpomaluje mobilní design vývojový proces?
Zpočátku ano, trochu. Ale brzy si zvyknete. A pak vám ušetří čas. Méně problémů v produkci, méně oprav. Vyplatí se to.”
Jak se vypořádám s pomalými mobilními sítěmi?
Optimalizujte obrázky, minifikujte CSS a JavaScript, používejte cache. Testujte na pomalém 3G připojení. Pokud vám to funguje tam, funguje to všude.
Je touch-friendly design komplikovaný?
Vůbec. Větší tlačítka (minimálně 48x48px), jasné stavy, bez hover efektů. To je všechno. Zní jednoduše, protože je to jednoduché.
Náš přístup
Jak pracujeme s mobilním designem
Máme metodiku, kterou používáme na všech projektech. Není to raketová věda, ale funguje to.
Základny našeho přístupu
Nejdřív mobil. Vždycky. To není jen módní trend — je to logika. Když si to nejdřív uvědomíte na malé obrazovce, přidávání na větších je přirozené.
Používáme relativní jednotky. Rem, procenta, viewport jednotky. Pevné pixely jen v poslední instanci. Tak se váš design přizpůsobuje automaticky.
Breakpointy jsou konzistentní. Víme přesně, kde se design mění. Není to náhoda — je to plán. Pokud víte, že se vše mění na 768px, můžete to zapsat do CSS proměnné a použít to všude.
Testování je součást procesu, ne něco na konci. Během vývoje se podíváme na mobil. Při designu myslíme na dotyk. Při psaní kódu myslíme na výkon. To všechno pohromadě dělá rozdíl.
Více o našem přístupu
Chcete začít s mobilním designem?
Není to těžké. Máte-li otázky nebo chcete diskutovat o vašem projektu, pojďme si promluvit. Jsme tady proto.