Първото нещо, което повечето дизайнери вземат предвид при изграждането на своята уеб страница, е какво резолюция за проектиране за. Това, което наистина представлява, е да решите колко широк трябва да бъде вашият дизайн. Вече няма такова нещо като стандартна ширина на уебсайта.
Защо да помислите за резолюция
През 1995 г. стандартните монитори с 640 пиксела на 480 пиксела бяха най-големите и най-добрите налични монитори. Това означаваше, че уеб дизайнерите се фокусираха върху създаването на страници, които изглеждаха добре в уеб браузърите, максимизирани на 12-инчов до 14-инчов монитор с тази резолюция.
В наши дни резолюцията 640 на 480 представлява по-малко от 1 процент от повечето посещения на уебсайта. Хората използват компютри с много по-висока разделителна способност, включително 1366 на 768, 1600 на 900 и 5120 на 2880. В много случаи проектирането за екран с резолюция 1366 на 768 работи.
Тодя, повечето хора имат големи монитори с широк екран и не увеличават максимално прозореца на браузъра си. Така че, ако решите да проектирате страница с ширина не повече от 1366 пиксела, вашата страница вероятно ще изглежда добре в повечето прозорци на браузъра дори на големи монитори с по-висока резолюция.
Ширина на браузъра
Един често пренебрегван проблем при определяне на ширината на дадена уеб страница е колко големи са вашите клиенти да поддържат своите браузъри. По-конкретно, максимизират ли браузърите си на цял екран или ги държат по-малки от целия екран?
След като отчетете клиенти, които максимизират или не, помислете за границите на браузъра. Всеки уеб браузър използва лента за превъртане и граници отстрани, които намаляват наличното пространство от 800 на около 740 пиксела или по-малко при разделителни способности 800 на 600 и около 980 пиксела на увеличени прозорци при 1024 на 768 резолюции. Това се нарича браузър хром и може да отнеме полезното пространство за дизайн на вашата страница.
Страници с фиксирана или течна ширина
Действителната числена ширина не е единственото нещо, за което трябва да помислите, когато проектирате ширината на уебсайта си. Също така трябва да решите дали ще имате фиксирана ширина или течност. С други думи, ще зададете ли ширината на определен брой (фиксиран) или на процент (течност)?
Фиксирана ширина
Страниците с фиксирана ширина са точно както звучат. Ширината е фиксирана на точно определен брой и не се променя, без значение колко голям или малък е браузърът. Този подход може да бъде добър, ако имате нужда от дизайна си, за да изглеждате абсолютно еднакво, независимо колко широки или стеснени са браузърите на вашите читатели, но този метод не взема предвид вашите читатели. Хората с по-тесни браузъри от вашия дизайн ще трябва да превъртат хоризонтално, а хората с широки браузъри ще имат голямо количество празно пространство на екрана.
За да създадете страници с фиксирана ширина, използвайте конкретни номера на пикселите за ширините на разделите на вашите страници.
Широчина на течността
Страници с широчина на течността (понякога наричани страници с гъвкава ширина) варират по ширина в зависимост от това колко широк е прозорецът на браузъра. Тази стратегия носи дизайни, които се фокусират повече върху клиентите. Проблемът със страниците с широчина на течността е, че те могат да бъдат трудни за четене. Ако дължина на сканиране на ред текст е по-дълъг от 10 до 12 думи или по-кратък от 4 до 5 думи, може да бъде трудно за четене. Това означава, че читателите с голям или малък прозорец на браузъра имат проблеми.
За да създадете страници с гъвкава ширина, използвайте проценти или ems за ширината на разделите на вашата страница. Запознайте се с CSS максимална ширина Имот. Това свойство ви позволява да зададете ширина в проценти, но след това да я ограничите, така че да не стане толкова голяма, че хората да не могат да я прочетат.
CSS медийни заявки
Най-доброто решение в наши дни е да се използват CSS медийни заявки и реагиращ дизайн, за да се създаде страница, която се адаптира към ширината на браузъра, който я разглежда. Отзивчивият уеб дизайн използва същото съдържание, за да създаде уеб страница, която работи, независимо дали я гледате на 5120 пиксела или 320 пиксела. Страниците с различен размер изглеждат по различен начин, но съдържат едно и също съдържание. С медийната заявка в CSS3 всяко приемащо устройство отговаря на заявката със своя размер и таблицата със стилове се настройва към този конкретен размер.