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í.
Přečíst článekMobilní design první — co byste měli vědět
Praktické zdroje o responzivních breakpointech, fluidních rozloženích a rozhraních přátelských k dotyku. Vše, co potřebujete k vytvoření webů, které fungují všude.
Mobilní přístup není jen trend — je to standard. Dnes vytváříme pro malé obrazovky jako první a pak rozšiřujeme pro větší zařízení. Tady najdete průvodce, tipů a příklady, které vám pomůžou pochopit, jak na to.
Články a průvodce
Zaměřené články pokrývající konkrétní aspekty mobilního designu a responzivních stratégií.
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.
Přečíst č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.
Přečíst článek
Mobilní první — psaní CSS od nejmenších obrazovek
Jak se přesunout na mobilní-první přístup v CSS. Začněte s nejjednoduššími styly a přidávejte složitost s media queries, jak se obrazovka zvětšuje.
Přečíst článekProč to dnes všichni dělají
“Mobilní zařízení už nejsou sekundární — jsou primární. Někdy jsou to jediná zařízení, která uživatelé mají. Když začnete navrhovat pro malou obrazovku, všechno ostatní se stane jednodušší.”
Mobilní-první přístup není jen o tom vytvořit weby, které vypadají dobře na telefonech. Jde to hlouběji. Když stavíte od nejmenších obrazovek nahoru, přinutí vás to přemýšlet o prioritách obsahu. Co je opravdu důležité? Co může čekat na větší obrazovku? Tím způsobem vytváříte jednodušší, čistší weby.
Zároveň se o tom hovoří v Česku víc než kdy dřív. Jsou tu firmy, které rozumí tomu, že responzivní design není volitelný. Je to povinné. A když to uděláte správně, ušetříte si problémy v budoucnosti.
Čtyři základní principy
Věci, které byste měli pamatovat pokaždé, když budete navrhovat nebo kódovat responzivní web.
1
Mobilní obsah je první
Rozhodněte, co se zobrazí na mobilu. Vše ostatní je dodatek. Malá obrazovka vás nutí být přesný a soustředěný.
2
Fluidní je lepší než fixní
Procenta, relativní jednotky, clamp(). Fixní šířky jsou nepřítel. Nechte obsah expandovat a kontrahovat s obrazovkou.
3
Dotyk je jiný než myš
Plochy musí být větší. Bez hover stavů na dotykovém zařízení. Kliky musí být jasné a snadno dosažitelné.
4
Testujtevšude
Simulátor v prohlížeči je dobré začátek, ale skutečná zařízení jsou jiná. Skutečný obsah, reální připojení, skutečné ruky.