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