Технологията за разработка на уебсайтове е много многостранен процес. Но все пак всички негови етапи могат да бъдат разделени на два основни компонента - функционалната и външната обвивка. Или, както е обичайно сред уеб администраторите, съответно back-end и front-end. Хората, които поръчват своите уебсайтове от студия за уеб разработка, често наивно вярват, че си струва да се съсредоточим само върху функционалността и това ще бъде правилното решение. Но това е вярно в много, много редки случаи, обикновено за стартиращи проекти на етап бета тестване. В противен случай графичният дизайн и потребителският интерфейс просто трябва да отговарят на стандартите за уеб разработка и да бъдат удобни.
Първият крайъгълен камък, пред който е изправен дизайнерът на интерфейса или дизайнерът, е ширината на оформлението на сайта. В крайна сметка, за него е необходимо да се нарисуват интерфейси. Чисто интуитивно възникват два подхода - или направете отделни оформления за всяка популярна разделителна способност на екрана, или създайте една версия на сайта за всички дисплеи. И двете опции ще са грешни, но първо първо.
Стандартна ширина на уебсайта в пикселиза Runet
Преди разработването на адаптивно оформление, разработването на сайт с ширина хиляда пиксела беше масово явление. Тази фигура е избрана по една проста причина - така че сайтът да се вписва във всеки екран. И това си има своя логика, но да приемем, че човек все пак има поне HD монитор на десктоп. В този случай вашето оформление ще изглежда като малка ивица в средата на екрана, където всичко е залепено заедно в една купчина, а отстрани има огромно неизползвано пространство. Сега да предположим, че човек има достъп до вашия уебсайт на таблет с широк екран от 800px и в настройките има отметка „Показване на целия уебсайт“. В този случай вашият сайт също ще бъде показан неправилно, тъй като просто няма да се побере на екрана.
От тези съображения можем да заключим, че фиксирана ширина за оформлението определено не е подходяща за нас и трябва да потърсим друг начин. Нека анализираме идеята за отделно оформление за всяка ширина на екрана.
Оформления за всички поводи
Ако сте избрали като стратегия да създавате оформления за всички размери на екрана на пазара, тогава вашият сайт ще бъде най-уникалният в целия Интернет. В крайна сметка днес е просто невъзможно да се покрие цялата гама от устройства, опитвайки се да се настрои фино за всяка опция. Но ако се съсредоточите върху най-популярните резолюции на монитори и екрани на устройства, тогава идеята не е лоша. Единственият му недостатък са финансовите разходи. В крайна сметка, когато дизайнер на интерфейс, дизайнер и кодер са принудени да извършват една и съща работа 5 или 6 пъти, проектът ще струванепропорционално по-висока от първоначално предвидената в бюджета цена.
Ето защо само едностраничните сайтове могат да се похвалят с изобилие от версии за различни екрани, чиято цел е да продават един продукт и да го правят добре. Е, ако имате не едно от тези насочвания, а сайт с няколко страници, тогава трябва да помислите допълнително.
Най-популярни размери на сайтове
Компромис между двете крайности е изобразяването на оформлението за три или четири размера на екрана. Сред тях трябва да бъде оформление за мобилни устройства. Останалото трябва да бъде адаптирано за малки, средни и големи настолни екрани. Как да изберем ширината на сайта? По-долу представяме статистиката на услугата HotLog за май 2017 г., която ни показва разпределението на популярността на различните резолюции на екрана на устройството, както и динамиката на този индикатор.
От таблицата можете да разберете как да определите размера на сайта, който искате да използвате. Освен това можем да заключим, че най-разпространеният формат днес е екран от 1366 на 768 пиксела. Такива екрани са инсталирани в бюджетни лаптопи, така че тяхната популярност е естествена. Следващият по популярност е Full HD мониторът, който е златният стандарт за видеоклипове, игри и следователно за създаване на оформления на уебсайтове. По-нататък в таблицата виждаме разделителната способност на мобилните устройства 360 на 640 пиксела, както и различни опции за настолни и мобилни екрани след нея.
Проектиране на оформление
И такаСлед анализ на статистиката можем да заключим, че оптималната ширина на сайта има 4 варианта:
- Версия за лаптоп с ширина 1366px.
- Пълна HD версия.
- Оформление с ширина 800 пиксела за показване на малки настолни монитори.
- Мобилна версия на сайта - ширина 360 пиксела.
Да кажем, че сме решили какъв размер да използваме за генерирания източник за сайта. Но такъв проект все пак би бил скъп. Така че нека разгледаме повече опции, този път без да използваме фиксирана ширина.
Правим оформлението гъвкаво
Има алтернативен подход, когато си струва да се адаптира само към минималния размер на екрана, а самите размери на сайта ще се задават в проценти. В същото време такива елементи на интерфейса като менюта, бутони и лого могат да бъдат зададени в абсолютни стойности, като се фокусира върху минималния размер на ширината на екрана в пиксели. Блоковете със съдържание, напротив, ще бъдат разтегнати според посочения процент от ширината на площта на екрана. Този подход ви позволява да спрете да възприемате размера на сайтовете като ограничение за дизайнера и умело да победите този нюанс.
Какво е златното сечение и как може да се приложи към оформлението на уеб страницата?
Дори през Ренесанса много архитекти и художници се опитват да придадат на своите творения перфектната форма и пропорции. За отговори на въпроси относно стойностите на такава пропорция те се обърнаха към кралицата на всички науки - математиката.
Още от древността е измислена пропорция, която нашето око възприема като най-естествената и елегантна,защото е повсеместно в природата. Откривателят на формулата за такова съотношение е талантлив древногръцки архитект на име Фидий. Той изчисли, че ако по-голямата част от пропорцията е свързана с по-малката, както цялото е свързано с по-голямата, тогава такава пропорция ще изглежда най-добре. Но това е така, ако искате да разделите обекта асиметрично. Тази пропорция по-късно е наречена златното сечение, което все още не надценява значението му за световната история на културата.
Обратно към уеб дизайн
Много е просто - използвайки златното сечение, можете да проектирате страници, които ще бъдат възможно най-приятни за човешкото око. Изчислявайки според дефиницията на формулата за златното сечение, получаваме ирационалното число 1, 6180339887 …, но за удобство можем да използваме закръглена стойност от 1, 62. Това ще означава, че блоковете на нашата страница трябва да са 62 % и 38% от цялото, без значение какъв размер е генерираният източник за сайта, който използвате. Можете да видите пример в тази диаграма:
Използвайте нови технологии
Модерните технологии за оформление на уебсайтове позволяват точното предаване на идеята за плановик и дизайнер, така че сега можете да си позволите да реализирате по-смели идеи, отколкото в зората на интернет технологиите. Вече няма нужда да мислите усилено какъв трябва да бъде размерът на сайта. С появата на такива неща като блоково адаптивно оформление, динамично зареждане на съдържание и шрифтове, разработването на уебсайтове стана много по-приятно. В крайна сметка тези технологии сапо-малко ограничения, въпреки че те все още са налице. Но както знаете, без ограничения не би имало изкуство. Предлагаме ви да използвате един наистина креативен подход към дизайна - златното съотношение. С него можете ефективно и красиво да запълните работното пространство, без значение какви размери на сайта сте задали в шаблоните си.
Как да увеличим работното пространство на сайта
Има голям шанс да нямате достатъчно място, за да поберете всички елементи на потребителския интерфейс в малко оформление. В този случай ще трябва да започнете да мислите творчески или дори по-креативно, отколкото сте правили преди.
Освободете максимално място на сайта, като скриете навигацията в изскачащото меню. Логично е този подход да се използва не само на мобилни устройства, но и на настолни компютри. В крайна сметка потребителят не трябва да гледа през цялото време какви заглавия има на вашия сайт - той дойде за съдържанието. И желанията на потребителя трябва да се спазват.
Пример за добър начин да скриете менюто е следното оформление (снимка по-долу).
В горния ъгъл на червената зона можете да видите кръст, щракване върху който ще скрие менюто в малка икона, оставяйки потребителя сам със съдържанието на уебсайта.
Това обаче е по избор, можете да оставите навигацията, която винаги ще бъде видима. Но можете да го направите красив елемент на дизайна, а не просто списък с популярни връзки в сайта. Използвайте интуитивни икони в допълнение към или дори вместо текстови връзки. това е същотоще позволи на вашия сайт да използва по-ефективно пространството на екрана на устройството на потребителя.
Най-добрият уебсайт е отзивчив
Ако не знаете кое оформление да изберете за сайта, тогава всичко е просто за вас. За да спестите от разходи за разработка и в същото време да не загубите аудиторията си поради лошо оформление за някое устройство, използвайте адаптивен дизайн.
Отзивчивият дизайн е дизайн, който изглежда еднакво добре на различни устройства. Този подход ще позволи на вашия сайт да бъде разбираем и удобен дори на лаптоп, дори на таблет, дори на смартфон. Този ефект се постига чрез автоматично променяне на ширината на работната площ на екрана. Използвайки адаптивни стилови таблици за вашия сайт, вие взимате възможно най-доброто решение.
Каква е разликата между адаптивния дизайн и версиите на уебсайта
Отзивчивият дизайн се различава от мобилната версия на сайта по това, че във втория случай потребителят получава html код, който е различен от настолния. Това е недостатък по отношение на оптимизирането на производителността на сървъра, както и оптимизацията за търсачки. Освен това става по-трудно да се изчислят статистически данни за различните версии на сайта. Адаптивният подход няма тези недостатъци.
Отзивчивостта за различни устройства се постига чрез оформление с процент от посочената ширина или чрез прехвърляне на блокове в наличното пространство (във вертикалната равнина на смартфон вместохоризонтално на работния плот) или създаване на индивидуални оформления за различни екрани.
Научете повече за адаптивния дизайн и разработка в нашите уроци.
