Дефинисање ширине ваше веб странице

Прва ствар коју већина дизајнера узима у обзир приликом израде своје веб странице је шта резолуција дизајнирати за. Ово заправо представља одлучивање колико широк треба да буде ваш дизајн. Стандардна ширина веб странице више не постоји.

Зашто размотрити резолуцију

1995. године, стандардни монитори од 640 пиксела до 480 пиксела били су највећи и најбољи доступни монитори. То је значило да су се веб дизајнери фокусирали на то да странице које изгледају добро у веб прегледачима максимизирају на монитору од 12 до 14 инча при тој резолуцији.

Ових дана резолуција 640 пута 480 чини мање од 1 процента већине промета на веб локацији. Људи користе рачунаре са много већим резолуцијама, укључујући 1366 пута 768, 1600 пута 900 и 5120 пута 2880. У многим случајевима дизајн за екран резолуције 1366 пута 768 делује.

Тодја, већина људи има велике мониторе са широким екраном и не максимизира прозор свог прегледача. Дакле, ако се одлучите за дизајн странице чија ширина није већа од 1366 пиксела, ваша страница ће вероватно изгледати добро у већини прозора прегледача чак и на великим мониторима са већом резолуцијом.

instagram viewer

Ширина прегледача

Један од проблема који се често превиђа када се одлучује о ширини веб странице је колико ваши купци задржавају своје прегледаче. Тачније, максимизују ли своје прегледаче на целом екрану или их држе мањим од целог екрана?

Након што направите рачун за купце који максимизирају или не, размислите о границама прегледача. Сваки веб прегледач користи траку за померање и бочне ивице које смањују расположиви простор са 800 на око 740 пиксела или мање у резолуцијама 800 к 600 и око 980 пиксела у максимизираним прозорима при резолуцији 1024 к 768 резолуције. Ово се зове прегледач хром и може вам одузети корисни простор за дизајн ваше странице.

Странице са фиксном или течном ширином

Стварна нумеричка ширина није једина ствар о којој морате да размишљате приликом дизајнирања ширине веб странице. Такође морате да одлучите да ли ћете имати фиксна ширина или ширина течности. Другим речима, да ли ћете ширину подесити на одређени број (фиксни) или на проценат (течност)?

Фиксна ширина

Странице фиксне ширине су управо онакве какве звуче. Ширина је фиксна на одређени број и не мења се без обзира на то колико је велики или мали прегледач. Овај приступ може бити добар ако вам треба да ваш дизајн изгледа потпуно исто без обзира на то колико су широки или сужени прегледачи читача, али овај метод не узима у обзир ваше читаче. Људи са прегледачима ужим од вашег дизајна мораће да се крећу водоравно, а људи са широким прегледачима имаће велику количину празног простора на екрану.

Да бисте креирали странице фиксне ширине, користите одређене бројеве пиксела за ширине одељења страница.

Ширина течности

Странице ширине течности (понекад се називају странице флексибилне ширине) варирају у ширини у зависности од тога колико је широк прозор прегледача. Ова стратегија доноси дизајне који се више фокусирају на купце. Проблем са страницама ширине течности је тај што их може бити тешко прочитати. Ако је дужина скенирања реда текста дужи од 10 до 12 речи или краћи од 4 до 5 речи, може бити тешко прочитати. То значи да читачи са великим или малим прозорима прегледача имају проблема.

Да бисте креирали странице флексибилне ширине, користите проценте или емс за ширине одељења страница. Упознајте се са ЦСС-ом мак-видтх имовина. Ово својство вам омогућава да поставите ширину у процентима, али је онда ограничите тако да не постане толико велика да је људи не могу прочитати.

ЦСС медијски упити

Најбоље решење данас је коришћење ЦСС медијских упита и одзивног дизајна за креирање странице која се прилагођава ширини прегледача који је прегледава. Реагујући веб дизајн користи исти садржај за стварање веб странице која ради без обзира на то да ли је гледате ширине 5120 пиксела или ширине 320 пиксела. Странице различите величине изгледају другачије, али садрже исти садржај. Помоћу медијског упита у ЦСС3, сваки пријемни уређај одговара на упит својом величином, а табела се прилагођава тој одређеној величини.