První věc, kterou většina designérů při vytváření své webové stránky zvažuje, je co řešení navrhnout pro. To, o co se skutečně jedná, je rozhodování o tom, jak široký by váš návrh měl být. Již neexistuje nic jako standardní šířka webových stránek.
Proč uvažovat o řešení
V roce 1995 byly standardní monitory 640 x 480 pixelů největšími a nejlepšími dostupnými monitory. To znamenalo, že se weboví designéři zaměřili na to, aby stránky, které ve webových prohlížečích vypadaly dobře, byly maximalizovány na 12palcovém až 14palcovém monitoru v tomto rozlišení.
V dnešní době tvoří rozlišení 640 x 480 méně než 1 procento většiny návštěvnosti webových stránek. Lidé používají počítače s mnohem vyšším rozlišením, včetně 1366 x 768, 1600 x 900 a 5120 x 2880. V mnoha případech funguje návrh obrazovky s rozlišením 1366 x 768.
Todya, většina lidí má velké, širokoúhlé monitory a nemaximalizují okno prohlížeče. Pokud se tedy rozhodnete navrhnout stránku, která není široká více než 1366 pixelů, bude pravděpodobně vypadat dobře ve většině oken prohlížeče, a to i na velkých monitorech s vyšším rozlišením.
Šířka prohlížeče
Jedním z často přehlížených problémů při rozhodování o šířce webové stránky je to, jak velcí zákazníci si udržují svůj prohlížeč. Konkrétně maximalizují své prohlížeče při velikosti celé obrazovky, nebo je udržují menší než celá obrazovka?
Poté, co vytvoříte účet pro zákazníky, kteří maximalizují nebo ne, přemýšlejte o hranicích prohlížeče. Každý webový prohlížeč používá posuvník a okraje po stranách, které zmenšují dostupné místo z 800 na kolem 740 pixelů nebo méně v rozlišení 800 x 600 a přibližně 980 pixelů v maximalizovaných oknech na 1024 x 768 rozlišení. Tomu se říká prohlížeč chrom a může to unést využitelné místo pro návrh vaší stránky.
Stránky s pevnou nebo kapalnou šířkou
Skutečná číselná šířka není jediná věc, na kterou musíte myslet při navrhování šířky vašeho webu. Musíte se také rozhodnout, zda budete mít pevná šířka nebo šířka kapaliny. Jinými slovy, nastavíte šířku na konkrétní číslo (pevné) nebo na procento (kapalné)?
Pevná šířka
Stránky s pevnou šířkou jsou přesně takové, jaké znějí. Šířka je fixována na konkrétní číslo a nemění se bez ohledu na to, jak velký nebo malý je prohlížeč. Tento přístup 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 prohlížeče vašich čtenářů, ale tato metoda vaše čtenáře nezohledňuje. Lidé s užšími prohlížeči, než je váš návrh, budou muset posouvat vodorovně a lidé s š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, použijte konkrétní čísla pixelů pro šířky divizí stránek.
Šířka kapaliny
Stránky s tekutou šířkou (někdy nazývané stránky s flexibilní šířkou) se liší šířkou podle toho, jak široké je okno prohlížeče. Tato strategie přináší designy, které se více zaměřují na zákazníky. Problém stránek s tekutou šířkou spočívá v tom, že je obtížné je číst. Pokud délka skenování je-li řádek textu delší než 10 až 12 slov nebo kratší než 4 až 5 slov, může být obtížné jej přečí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, použijte procenta nebo ems pro šířky vašich rozdělení stránek. Seznamte se s CSS maximální šířka vlastnictví. Tato vlastnost umožňuje nastavit šířku v procentech, ale pak ji omezit tak, aby nebyla tak velká, aby ji lidé nemohli přečíst.
CSS Media Queries
Nejlepším řešením v dnešní době je použití mediálních dotazů CSS a responzivního designu k vytvoření stránky, která se přizpůsobí šířce prohlížeče, který ji prohlíží. Responzivní webový design používá stejný obsah k vytvoření webové stránky, která funguje, ať už ji zobrazíte v šířce 5120 pixelů nebo šířce 320 pixelů. Stránky různých velikostí vypadají odlišně, ale obsahují stejný obsah. S mediálním dotazem v CSS3 každé přijímající zařízení odpovídá na dotaz svou velikostí a styl se přizpůsobí konkrétní velikosti.