Prvá vec, ktorú väčšina návrhárov zváži pri vytváraní svojej webovej stránky, je čo rozhodnutie navrhnúť pre. To, čo to skutočne znamená, je rozhodnutie, aký široký by mal byť váš dizajn. Štandardná šírka webových stránok už neexistuje.
Prečo zvážiť rozlíšenie
V roku 1995 boli štandardné monitory s rozmermi 640 x 480 pixlov najväčšími a najlepšími dostupnými monitormi. To znamenalo, že sa weboví dizajnéri zamerali na to, aby sa stránky, ktoré vo webových prehliadačoch vyzerajú dobre, maximalizovali na 12-palcovom až 14-palcovom monitore pri tomto rozlíšení.
V dnešnej dobe tvorí rozlíšenie 640 x 480 menej ako 1 percento väčšiny prenosu z webu. Ľudia používajú počítače s oveľa vyšším rozlíšením vrátane 1366 x 768, 1600 x 900 a 5120 x 2880. V mnohých prípadoch návrh na obrazovku s rozlíšením 1366 x 768 funguje.
Todya, väčšina ľudí má veľké širokouhlé monitory a maximalizujú okno svojho prehliadača. Ak sa teda rozhodnete navrhnúť stránku, ktorá nemá šírku viac ako 1366 pixelov, bude pravdepodobne vyzerať dobre vo väčšine okien prehliadača aj na veľkých monitoroch s vyšším rozlíšením.
Šírka prehliadača
Jedným z často prehliadaných problémov pri rozhodovaní o šírke webovej stránky je to, ako veľkí zákazníci si zachovajú svoj prehliadač. Konkrétne maximalizujú svoje prehliadače pri veľkosti celej obrazovky alebo ich udržiavajú menšie ako celá obrazovka?
Po vytvorení účtu pre zákazníkov, ktorí maximalizujú alebo nie, myslite na hranice prehliadača. Každý webový prehľadávač používa posúvač a okraje po stranách, ktoré zmenšujú dostupné miesto z 800 na okolo 740 pixelov alebo menej v rozlíšení 800 x 600 a okolo 980 pixelov v maximalizovaných oknách na 1024 x 768 uznesenia. Toto sa nazýva prehliadač chróm a môže vám to uberať využiteľný priestor pre návrh stránky.
Stránky s pevnou alebo tekutou šírkou
Skutočná číselná šírka nie je jediná vec, na ktorú musíte myslieť pri navrhovaní šírky vášho webu. Musíte sa tiež rozhodnúť, či budete mať pevná šírka alebo šírka kvapaliny. Inými slovami, nastavíte šírku na konkrétne číslo (pevné) alebo na percento (tekuté)?
Pevná šírka
Stránky s pevnou šírkou sú presne také, aké znejú. Šírka je pevne stanovená na konkrétnom čísle a nezmení sa bez ohľadu na to, aký veľký alebo malý je prehliadač. Tento prístup môže byť dobrý, ak potrebujete, aby váš návrh vyzeral úplne rovnako bez ohľadu na to, aký široký alebo úzky je prehľadávač vašich čitateľov, ale táto metóda vašich čitateľov nezohľadňuje. Ľudia s užšími prehliadačmi, ako je váš návrh, sa budú musieť posúvať vodorovne a ľudia so širokými prehliadačmi budú mať na obrazovke veľké množstvo prázdneho miesta.
Ak chcete vytvoriť stránky s pevnou šírkou, použite konkrétne počty pixelov pre šírky rozdelení stránok.
Šírka kvapaliny
Stránky s tekutou šírkou (niekedy sa nazývajú stránky s flexibilnou šírkou) sa líšia šírkou v závislosti od toho, aké široké je okno prehliadača. Táto stratégia prináša návrhy, ktoré sa viac zameriavajú na zákazníkov. Problém stránok s tekutou šírkou je, že sa dajú ťažko prečítať. Ak dĺžka skenovania ak je riadok textu dlhší ako 10 až 12 slov alebo kratší ako 4 až 5 slov, môže byť ťažké ho prečítať. To znamená, že čitatelia s veľkými alebo malými oknami prehľadávača majú problémy.
Ak chcete vytvoriť stránky s flexibilnou šírkou, použite percentá alebo ems pre šírky vašich rozdelení stránok. Zoznámte sa s CSS max-šírka nehnuteľnosť. Táto vlastnosť umožňuje nastaviť šírku v percentách, ale potom ju obmedziť tak, aby nebola taká veľká, aby ju ľudia nedokázali prečítať.
Dotazy na médiá CSS
Najlepšie riešenie v dnešnej dobe je použitie mediálnych dotazov CSS a responzívneho dizajnu na vytvorenie stránky, ktorá sa prispôsobí šírke prehliadača, ktorý ju prehliada. Responzívny webový dizajn používa rovnaký obsah na vytvorenie webovej stránky, ktorá funguje, či už ju zobrazíte so šírkou 5120 pixelov alebo šírkou 320 pixelov. Stránky rôznych veľkostí vyzerajú odlišne, ale obsahujú rovnaký obsah. S mediálnym dotazom v CSS3 každé prijímajúce zariadenie odpovedá na dotaz svojou veľkosťou a šablóna štýlov sa prispôsobí tejto konkrétnej veľkosti.