320, 768 a 1024. Pro vás tato čísla znamenají něco?
Ne, to není kód Da Vinci, jsou to šířky v pixelech, které mnoho designérů přidruží k šířkám mobilních, tablet a stolních počítačů.
Problém, který mám s tím, je, že mobil není široký 320 pixelů, můj tablet není široký 768 pixelů a obrazovka na ploše určitě není šířka 1024 pixelů. Tam jsou stovky různých velikostí obrazovky tam na různých zařízeních a přesto jsme stále myslet na citlivý web design jako 320, 768 a 1024.
Viděl jsem mnoho stránek, které používají tyto tři hranice pro své návrhy a stačí vytvořit 3 statické rozvržení, které se nacházejí v nejbližší šířce.
To je lepší než mít staromódní, statické desktopové stránky pouze proto, že přinejmenším představují jeden sloupec, zjednodušená verze pro mobilní zařízení a verze s dotykovou obrazovkou pro tablety, ale proč byste odcizili všechny ostatní velikosti obrazovky tím, úvahy?
Určitě bude návrh fungovat i na jiných velikostech, ale co se stane, když máte tablet, který je menší než 768? Získávají mobilní zážitky na tabletu! A při prohlížení na obrazovce notebooku menší než 1024? Prostě jim zašleme rozložení tablet a zasmějeme se, že nemají jednu ze tří velikostí obrazovky, které jsme považovali za hodné.
Při vytváření reagujících rozložení byste se měli vždy snažit nastavit co nejvíce vašich rozměrů v procentech. To pomáhá zajistit, aby se váš obsah rozrostl a zmenšil rovnoměrně v různých velikostech obrazovky, a to v poměru k zařízení, na které se dívá. Tento přístup také zajistí, že váš obsah bude vždy plnit 90% (nebo tolik, kolik jste zjistili) obrazovky namísto případně 50% obrazovky, protože obsah je soustředěn na velikost obrazovky, která je o několik pixelů menší než další dostupný bod zlomu.
Při výběru bodů zlomu byste měli vždy rozhodovat podle toho, kde se obsah rozpadá, a nikoli na šířku obrazovky zařízení. Místo toho, abyste vytvořili design a upravili jej tak, aby pohodlně seděl na obrazovce iPad, měli byste zjistit, na jakou šířku se váš obsah začne potýkat.
Mám tendenci začít s širokoúhlým designem 1400 a pomalu učinit prohlížeč menší, dokud část obsahu neporuší rozložení nebo se tak blíží. To pak určuje můj další zlom. Nezáleží na tom, zda je to 1200, 800 nebo 673, pokud obsah stále funguje, proč změnit rozvržení?
Zjistíte, že skončíte s podivnými zlomovými body jako 477 nebo 982 a že můžete mít 2, 6 nebo 10 různých zlomů. Otázkou je, že obsah bude rozhodovat spíše než zamýšlené velikosti obrazovky, na které chcete zobrazit.
S množstvím různých zařízení a velikostí obrazovky, které jsou vydávány každý měsíc, není možné stanovit soubor definitivních hranic pro naše reagující projekty. Pravdou je, že i když používáme proměnnou, jako je šířka obrazovky, abychom zjistili, jak reagují naše návrhy, budeme se snažit poskytnout dokonalé uspořádání všech velikostí, ale podle několika výše uvedených tipů můžeme alespoň zajistit, aby obsah se vždy zobrazuje co nejlépe.
Jaké body zlomu obvykle používáte? Vyhýbáte se úplným zlomovým bodům? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, širokoúhlý obraz přes Shutterstock.