Првото нешто што повеќето дизајнери сметаат кога градат нивната веб-страница е она што резолуција за дизајн. Што ова навистина значи е да се одлучи колку широк вашиот дизајн треба да биде. Не постои такво нешто повеќе како стандардна ширина на веб-страница.
Зошто да се разгледа резолуцијата
Во 1995 година, стандардните мониторите за резолуција 640x480 беа најголемите и најдобрите монитори. Ова значеше дека веб-дизајнерите се фокусираа на правење страници кои изгледаа добро во веб-прелистувачите што беа максимизирани на мониторот од 12 инчи до 14 инчи во таа резолуција.
Денес, резолуцијата 640х480 сочинуваат помалку од 1 процент од повеќето сообраќај на веб-страница. Луѓето користат компјутери со многу повисоки резолуции, вклучувајќи 1366x768, 1600x900 и 5120x2880. Во многу случаи, дизајнирањето за екран за резолуција од 1366x768 работи.
Ние сме во точка во историјата на веб-дизајнот, каде што не мора да се грижиме многу за резолуцијата. Повеќето луѓе имаат големи монитори со широк екран и не го максимизираат прозорецот на прелистувачот. Значи, ако одлучите да дизајнирате страница што не е поширока од 1366 пиксели, вашата страница веројатно ќе изгледа добро во повеќето прозорци на пребарувачи дури и на големи монитори со повисоки резолуции.
Ширина на прелистувачот
Пред да одите размислување "во ред, ќе направам моите страници шири 1366 пиксели", има повеќе на оваа приказна. Едно често се занемарува прашањето кога одлучувањето за ширината на веб-страница е колку вашите клиенти ги задржуваат своите прелистувачи. Поточно, дали тие ги максимизираат своите прелистувачи со големина на цел екран или ги задржуваат помали од целиот екран?
Во една неформална анкета на соработници, кои сите користеа лаптоп за резолуција со резолуција од 1024x768, двајцата ги чуваат сите нивни апликации максимално. Останатите имаа различни прозорци отворени од различни причини. Ова покажува дека ако го дизајнирате интранетот на оваа компанија со ширина од 1024 пиксели, 85 проценти од корисниците ќе треба да дојдат по хоризонтално за да ја видат целата страница.
Откако ќе ги најавите потрошувачите кои го максимизираат или не, размислете за границите на прелистувачот. Секој веб прелистувач има лента за лизгање и граничи на страни кои го намалуваат достапниот простор од 800 до околу 740 пиксели или помалку на резолуции од 800x600 и околу 980 пиксели на максимални прозорци со резолуција 1024x768. Ова се нарекува прелистувач "хром" и може да потрае од употребливиот простор за дизајнирање на вашата страница.
Фиксни или течни ширини
Вистинската нумеричка ширина не е единственото нешто што треба да размислите кога ја дизајнирате ширината на вашиот веб-сајт. Исто така треба да одлучите дали ќе имате фиксна ширина или течна ширина . Со други зборови, дали ќе ја поставите ширината на одреден број (фиксен) или на процент (течност)?
Фиксна ширина
Страниците со фиксна ширина се токму како што звучат. Ширината е фиксирана на одреден број и не се менува, без разлика колку е голем или мал прелистувачот. Ова може да биде добро ако ви треба дизајнот да изгледаат исти, без разлика колку се широки или тесни прелистувачи на читачи, но овој метод не ги зема предвид вашите читатели. Лицата со прелистувачи потесни од вашиот дизајн ќе мора да се движат хоризонтално, а луѓето со широк прелистувач ќе имаат големи количини на празен простор на екранот.
За да креирате страници со фиксна ширина, едноставно користете специфични пикселски броеви за ширината на поделбите на страницата.
Течна ширина
Страниците со ширина на течност (понекогаш наречени флексибилни ширини) варираат во зависност од тоа колку е широк прозорецот на прелистувачот. Ова ви овозможува да дизајнирате страници што повеќе се фокусираат на вашите клиенти. Проблемот со страниците со широчина на течноста е дека тие можат да бидат тешки за читање. Ако должината на скенирање на линија на текст е подолга од 10 до 12 зборови или пократка од 4 до 5 зборови, може да биде тешко да се прочита. Ова значи дека читателите со големи или мали прозорци на пребарувачот имаат проблеми.
За да креирате флексибилни страници за ширина, едноставно користете проценти или ems за ширината на поделбите на страницата. Исто така, треба да се запознаете со CSS сопственоста со максимална ширина. Овој својство ви овозможува да поставите ширина во проценти, но потоа да ја ограничите, така што тоа не се толку големи што луѓето не можат да го прочитаат.
И победникот е: CSS Media Queries
Најдобро решение за овие денови е да се користат медиумски пребарувања на CSS и реагирачки дизајн за да се креира страница која се прилагодува на ширината на прелистувачот што го гледа. Одличниот веб-дизајн ја користи истата содржина за да креира веб-страница која работи без оглед дали ја гледате со ширина од 5120 пиксели или ширина од 320 пиксели. Страниците со различна големина изгледаат различно, но тие содржат иста содржина. Со пребарувањето на медиумите во CSS3, секој уред што прима е одговори на барањето со нејзината големина, а листот со стилови се прилагодува на таа одредена големина.