Prvá vec, ktorú väčšina návrhárov považuje pri vytváraní svojej webovej stránky, je to, aké rozlíšenie navrhnúť. To, čo skutočne znamená, je rozhodnúť, aký by mal byť váš dizajn. Takáto vec už neexistuje ako štandardná šírka webových stránok.
Prečo zvážiť rozlíšenie
V roku 1995 boli štandardné monitory s rozlíšením 640x480 najväčšie a najlepšie dostupné monitory. To znamená, že web dizajnéri sa sústredili na to, aby stránky, ktoré vyzerali dobre v webových prehliadačoch, maximalizovali na 12-palcový až 14-palcový monitor v tomto rozlíšení.
V dnešnej dobe rozlíšenie 640 x 480 predstavuje menej ako 1 percentuálny podiel väčšiny návštevnosti webových stránok. Ľudia používajú počítače s omnoho vyšším rozlíšením vrátane rozlíšenia 1366x768, 1600x900 a 5120x2880. V mnohých prípadoch funguje návrh na obrazovku s rozlíšením 1366x768.
Sme na mieste v histórii webového dizajnu, kde sa nemusíte veľa starať o riešenie. Väčšina ľudí má veľké, širokouhlé monitory a maximalizujú okno svojho prehliadača. Ak sa rozhodnete navrhnúť takú stránku, ktorá nie je väčšia ako 1366 pixelov, bude vaša stránka pravdepodobne vo väčšine okien prehliadača vyzerá dokonale aj na veľkých monitoroch s vyšším rozlíšením.
Šírka prehliadača
Než začnete myslieť "dobre, budem mať moje stránky 1366 pixelov široký," je viac o tomto príbehu. Jeden často prehliadnutý problém pri rozhodovaní o šírke webovej stránky je, aké veľké vaše zákazníci držia svoje prehliadače. Konkrétne maximalizujú svoje prehliadače v celej veľkosti obrazovky alebo ich menšie ako celá obrazovka?
V jednom neformálnom prieskume spolupracovníkov, ktorí všetci používali štandardný prenosný počítač s rozlíšením 1024x768, dva uchovali všetky svoje aplikácie maximalizované. Zvyšok mal rozdielne veľké okná otvorené z rôznych dôvodov. To ukazuje, že ak navrhujete intranet tejto spoločnosti s rozlíšením 1024 pixelov, 85 percent užívateľov bude musieť posúvať horizontálne a zobraziť celú stránku.
Po zaúčtovaní zákazníkov, ktorí maximalizujú alebo nemajú, premýšľajte nad okrajmi prehliadača. Každý webový prehliadač má posúvač a okraje na stranách, ktoré zmenšujú dostupný priestor od 800 do približne 740 pixelov alebo menej pri rozlíšení 800x600 a približne 980 pixelov na maximalizovaných oknách s rozlíšením 1024x768. Toto sa nazýva prehliadač "chrome" a môže sa vziať z použiteľného priestoru pre návrh stránky.
Stránky s pevnou alebo tekutou šírkou
Skutočná číselná šírka nie je jediná vec, ktorú musíte myslieť pri navrhovaní šírky webových stránok. Musíte sa tiež rozhodnúť, či budete mať pevnú šírku alebo šírku kvapaliny . Inými slovami, nastavíte šírku na konkrétne číslo (fixné) alebo percento (kvapalné)?
Pevná šírka
Stránky s pevnou šírkou sú presne tak, ako sa ozývajú. Šírka je pevne nastavená na konkrétne číslo a nezmení sa bez ohľadu na to, aký veľký alebo malý je prehliadač. To môže byť dobré, ak potrebujete, aby váš dizajn vyzeral úplne rovnako, bez ohľadu na to, aké sú vaše čitateľské prehliadače široké alebo úzke, ale táto metóda nezohľadňuje vašich čitateľov. Ľudia s prehliadačmi užšími ako váš dizajn budú musieť horizontálne posúvať a ľudia so širokými prehliadačmi budú mať veľké množstvo prázdneho miesta na obrazovke.
Ak chcete vytvoriť stránky s pevnou šírkou, jednoducho použite špecifické čísla pixelov pre šírky rozdelenia stránok.
Tekutá šírka
Stránky so šírkou kvapaliny (niekedy nazývané flexibilné šírka) sa líšia v závislosti od šírky okna prehliadača. Umožňuje vám navrhnúť stránky, ktoré sa viac zameriavajú na vašich zákazníkov. Problém s stránkami šírky kvapaliny spočíva v tom, že môžu byť ťažko čitateľné. Ak je dĺžka skenovania riadku textu dlhšia ako 10 až 12 slov alebo kratšia ako 4 až 5 slov, môže byť ťažké čítať. To znamená, že čitatelia s veľkými alebo malými oknami prehliadača majú problémy.
Ak chcete vytvoriť flexibilné šírkové stránky, stačí použiť percentá alebo ems pre šírky stránok. Mali by ste sa tiež oboznámiť s vlastnosťou maximálnej šírky CSS. Táto vlastnosť umožňuje nastaviť šírku v percentách, ale potom ju obmedziť tak, aby sa nestala taká veľká, že ju ľudia nemôžu prečítať.
A víťazom je: CSS Media Queries
Najlepším riešením v týchto dňoch je používanie dopytov médií CSS a prispôsobivý dizajn na vytvorenie stránky, ktorá sa prispôsobí šírke prehliadača, ktorý ju zobrazuje. Odozva dizajnu webových stránok využíva rovnaký obsah na vytvorenie webovej stránky, ktorá funguje bez ohľadu na to, či ju zobrazíte v celej šírke 5120 pixelov alebo 320 pixelov. Stránky s rozdielnou veľkosťou vyzerajú rozdielne, ale obsahujú rovnaký obsah. Pomocou mediálneho dopytu v systéme CSS3 každé prijímajúce zariadenie odpovedá na otázku svojou veľkosťou a listom štýlov sa prispôsobí tejto konkrétnej veľkosti.