Definování šířky vaší webové stránky

První věc, kterou většina návrhářů uvažuje při vytváření své webové stránky, je to, jaké rozlišení navrhnout. To, co skutečně znamená, je rozhodnout, jak široký by měl být váš návrh. Už taková věc neexistuje jako standardní šířka stránky.

Proč zvažovat řešení

V roce 1995 byly standardní monitory s rozlišením 640x480 největším a nejlepším monitorem. To znamenalo, že weboví návrháři se zaměřili na to, aby stránky, které vypadaly dobře ve webových prohlížečích, maximalizovaly na rozlišení 12 palců až 14 palců.

V dnešní době je rozlišení 640x480 méně než 1% většiny návštěvnosti webových stránek. Lidé používají počítače s mnohem vyššími rozlišeními, včetně 1366x768, 1600x900 a 5120x2880. V mnoha případech funguje návrh na obrazovku rozlišení 1366x768.

Jsme v bodě v historii webového designu, kde se nemusíte moc starat o řešení. Většina lidí má velké širokoúhlé monitory a maximalizují okno prohlížeče. Pokud se tedy rozhodnete navrhnout stránku, která není větší než 1366 pixelů, bude pravděpodobně vypadat ve většině oken prohlížeče dokonce i na velkých monitorech s vyšším rozlišením.

Šířka prohlížeče

Předtím, než vyrazíte, přemýšlejte "dobře, udělám své stránky 1366 pixelů," je pro tento příběh více. Jeden často přehlédnutý problém při rozhodování o šířce webové stránky je, jak velký vaši zákazníci udržují své prohlížeče. Konkrétně maximalizují své prohlížeče v celoobrazovkovém formátu nebo je udržují menší než celá obrazovka?

V jednom neformálním průzkumu spolupracovníků, kteří všichni používali standardní laptop s rozlišením 1024x768, dva uchovávaly všechny své aplikace maximalizované. Zbytek měl různá okna otevřená z různých důvodů. To ukazuje, že pokud navrhujete intranet této společnosti v šířce 1024 pixelů, 85 procent uživatelů bude muset rolovat horizontálně, aby vidělo celou stránku.

Poté, co účtujete zákazníky, kteří maximalizují nebo nemají, přemýšlejte o okrajích prohlížeče. Každý webový prohlížeč má posuvník a okraje na stranách, které zmenší dostupný prostor 800 až přibližně 740 pixelů nebo méně při rozlišení 800 x 600 a přibližně 980 pixelů na maximalizovaných oknech při rozlišení 1024x768. Toto se nazývá prohlížeč "chrome" a může to odvést od použitelného místa pro návrh stránky.

Stránky s pevnou nebo tekutou šířkou

Skutečná číselná šířka není jediná věc, kterou musíte při návrhu šířky vašeho webu přemýšlet. Musíte se také rozhodnout, zda budete mít pevnou šířku nebo šířku kapaliny . Jinými slovy, nastavíte šířku na určité číslo (fixní) nebo na procento (kapalina)?

Pevná šířka

Stránky s pevnou šířkou jsou přesně tak, jako to zní. Šířka je pevně nastavena na konkrétní číslo a nemění se bez ohledu na to, jak velký nebo malý je prohlížeč. To může být dobré, pokud potřebujete, aby váš návrh vypadal přesně stejně bez ohledu na to, jak široké nebo úzké jsou vaše prohlížeče čtenářů, ale tato metoda nezohledňuje vaše čtenáře. Lidé s prohlížečem, který je užší než váš návrh, budou muset rolovat horizontálně a lidé se širokými prohlížeči budou mít na obrazovce velké množství prázdného místa.

Chcete-li vytvořit stránky s pevnou šířkou, jednoduše použijte specifická čísla pixelů pro šířky rozdělení stránek.

Šířka kapaliny

Stránky s šířkou kapaliny (někdy označované jako stránky s flexibilní šířkou) se liší v závislosti na šířce okna prohlížeče. To vám umožní navrhnout stránky, které se více zaměřují na vaše zákazníky. Problém s stránkami s šířkou tekutiny je, že mohou být obtížné číst. Pokud je délka skenování řádku textu delší než 10 až 12 slov nebo kratší než 4 až 5 slov, může být obtížné číst. To znamená, že čtenáři s velkými nebo malými okny prohlížeče mají potíže.

Chcete-li vytvořit stránky s flexibilní šířkou, stačí použít procenta nebo ems pro šířky rozdělení stránek. Měli byste se také seznámit s vlastností maximální šířky CSS. Tato vlastnost umožňuje nastavit šířku v procentech, ale pak ji omezit tak, aby nebyla tak velká, že ji lidé nemohou přečíst.

A Winner Is: CSS Media Queries

Nejlepším řešením v těchto dnech je použití dotazů na média CSS a reagujícího návrhu k vytvoření stránky, která se přizpůsobí šířce prohlížeče, který je prohlíží. Odpovídající webový design používá stejný obsah k vytvoření webové stránky, která funguje bez ohledu na to, zda ji zobrazíte v šířce 5120 pixelů nebo šířce 320 pixelů. Stránky s různou velikostí vypadají jinak, ale obsahují stejný obsah. Při dotazu na médium v ​​CSS3 přijímá každé přijímající zařízení dotaz s jeho velikostí a list stylu se přizpůsobí této konkrétní velikosti.