Стандартни размери на сайтове: характеристики, изисквания и препоръки

Технология на разработването на уеб сайтове

Първият крайъгълен камък, с който се сблъсква дизайнерът на интерфейса или дизайнерът, е ширината на оформлението на сайта. В края на краищата е необходимо да се изготвят интерфейси за него. Чисто интуитивно съществуват два подхода - или да се правят отделни оформления за всяка популярна разделителна способност на екрана, или да се създаде една версия на сайта за всички картографиране. И двете опции ще бъдат неправилни, а за всичко в ред.

Стандартната ширина на сайта в пиксели за RuNet

Преди разработването адаптивно оформление масивен феномен е развитието на площадка с ширина от хиляда пиксела. Тази цифра беше избрана по една проста причина - мястото да се побере на всеки екран. И това има своя собствена логика, но да предположим, че човек все още има поне HD-монитор на работния плот. В този случай оформлението ви ще изглежда като малка ивица в средата на екрана, където всичко е натрупано в една купчина, а отстрани е огромно незаето пространство. Сега нека предположим, че човек дойде на уебсайта Ви от таблет с екран с ширина 800 пиксела, а в настройките е отметната "Показване на пълната версия на уеб сайта". В този случай сайтът Ви също ще се покаже неправилно, защото просто не се вписва в екрана.

От тези съображения можем да заключим, че фиксираната ширина на оформлението не ни пасва точно и трябва да търсим друг начин. Да анализираме идеята за отделно оформление за всяка ширина на екрана.

Оформление за всички случаи

Ако сте избрали като стратегия да създавате оформления за всички размери на екрана, които се предлагат на пазара, сайтът Ви ще стане най-уникален в целия интернет. Това е просто невъзможно да се покрие цялата гама от устройства днес, опитвайки се да направи точна настройка за всяка опция. Но ако се съсредоточите върху най-популярните резолюции на мониторите и екранните устройства, тогава идеята не е лоша. Единственото минус са финансовите разходи. В края на краищата, когато дизайнерът на интерфейса, дизайнерът и оформлението дизайнер са принудени да направят една и съща работа 5 или 6 пъти, проектът ще струва несъизмеримо повече от първоначално зададената в бюджета цена.

Следователно, може да се похвали с изобилие от версии за различни екрани, с изключение на уебсайтовете на една страница, чиято цел е да продадат един продукт и непременно да го направят добре. Е, ако нямате нито една от тези площадки, нито един сайт с няколко страници, струва си да обсъдите допълнително.

Най-популярните размери на сайта

Компромис между двете крайности е изготвянето на оформление за три или четири размерите на екрана. Между тях трябва да бъде макет за мобилни устройства. Останалата част трябва да бъде адаптирана за малък, среден и голям настолен екран. Как да изберем ширината на сайта? По-долу са статистическите данни за услугата HotLog за май 2017 г., което ни показва разпределението на популярността на различните резолюции на екрани на устройствата, както и динамиката на тази промяна на индикатора.

От таблицата можете да научите как да определите размера на сайта, който искате да използвате. В допълнение, можем да заключим, че най-често срещаният формат днес е екранът 1366 на 768 точки. Такива екрани се инсталират в бюджетни лаптопи, така че тяхната популярност е естествена. Следващото най-популярно е Full HD мониторът, който е златният стандарт за видеоклипове, игри и следователно за създаване на оформления на сайта. Освен това в таблицата виждаме резолюцията на мобилните устройства 360 на 640 точки, както и различни опции за настолни и мобилни екрани след нея.

Проектиране на оформление

Така че, след като анализирахме статистиката, можем да заключим, че оптималната ширина на сайта има 4 вариации:

1. Версия за преносими компютри с ширина 1366 пиксела.
2. Пълна версия на HD.
3. Ширина на 800-пиксела за показване на малки настолни монитори.
4. Мобилната версия на сайта е с ширина 360 пиксела.

Да приемем, че решихме как да използваме размера на генерирания източник за сайта. Но такъв проект все още ще бъде скъп. Затова нека разгледаме повече опции, този път без да използваме фиксирана ширина.

Оформлението е гъвкаво

Има алтернативен подход, когато е необходимо да се коригира само за минималния размер на екрана, а размерите на сайтовете ще се задават по процента. В този случай такива елементи на интерфейс като менюта, бутони и лога могат да бъдат зададени в абсолютни стойности, като се фокусира върху минималния размер на ширината на екрана в пиксели. Блокерите със съдържание, за разлика от тях, ще бъдат опънати според конкретни проценти от ширината на зоната на екрана. Този подход ви позволява да спрете възприемането на размера на сайтовете като ограничение за дизайнера и талантливите да победят този нюанс.

Какво е златното съотношение и как да го приложите към оформлението на уеб страниците?

Дори в ренесанса много архитекти и художници се опитват да дадат своите творения идеална форма и пропорция. След като отговориха на въпросите за смисъла на това съотношение, те се обърнаха към кралицата на всички науки - математиката.

От времето на древността е изобретен един процент, който нашето око възприема като най-естественото и елегантно, защото е универсално открито в природата. Откривателят на формулата на подобно съотношение е талантлив древногръцки архитект на име Фидиас. Той изчислява, че ако по-голямата част от дела се отнася до по-малко, тъй като цялото се отнася до по-големите, това съотношение ще изглежда най-добре. Но това е така, ако искате да разделите обекта асиметрично. Този процент по-късно се нарича златен раздел, който все още не надценява значението му за световната история на културата.

Връщане към уеб дизайна

Това е много просто - използвайки златен разрез, можете да проектирате страници, които ще бъдат приятни за човешкото око, колкото е възможно. Изчислявайки по дефиницията на формулата на златната секция, получаваме ирационалното число 1.6180339887 ..., но за удобство можем да използваме закръглената стойност 1.62. Това ще означава, че блоковете на нашата страница трябва да са 62% и 38% от цялото, независимо от размера на изходния код за сайта, който използвате. Пример, който можете да видите в тази схема:

Използвайте нови технологии

Съвременната технология на дизайна на уебсайтове ви позволява да предадете идеята на дизайнера и дизайнера, така че сега можете да си позволите реализацията на по-смели идеи, отколкото в зората на интернет технологиите. Вече не е необходимо сериозно да се замисляте за какъв размер трябва да бъде сайтът. С пристигането на такива неща като блок адаптивно оформление, динамично зареждане на съдържание и шрифтове, развитието на сайта стана многократно по-приятно. В крайна сметка такива технологии имат по-малко ограничения, макар и да са такива. Но както знаете, без ограничения няма да има изкуство. Предлагаме да използвате един наистина творчески подход към дизайна - златен раздел. С него можете ефективно и добре да запълвате работното пространство, независимо от размерите на сайтовете, които посочвате във вашите шаблони.

Как да увеличите работното пространство на сайта

Има голяма вероятност да нямате достатъчно място, за да се поберат всички елементи на интерфейса в оформление с малък размер. В този случай трябва да започнете да мислите творчески или дори по-творчески, отколкото преди.

Увеличаването на пространството в сайта може да бъде чрез скриване на навигацията в изскачащото меню. Този подход е логичен да се използва не само на мобилни устройства, но и на настолни компютри. В края на краищата, потребителят не трябва да гледа през цялото време кои категории са на вашия сайт - той дойде за съдържанието. И желанията на потребителя трябва да бъдат спазвани.

Пример за добър начин да скриете менюто е следното оформление (снимка по-долу).

В горния ъгъл на червената зона можете да видите кръст, като кликнете върху това, което ще скрие менюто в малка икона, оставяйки потребителя сам със съдържанието на уебсайта.

Въпреки това, не е необходимо да правите това, можете да оставите навигацията, която винаги ще бъде видима. Но можете да го направите красив дизайн елемент, а не само списък на популярните връзки на сайта. Използвайте интуитивни икони в допълнение към текстовите връзки или дори вместо тях. Това също така ще позволи на сайта Ви по-ефективно да използва пространството на екрана на устройството на потребителя.

Най-добър сайт - адаптивен

Ако не знаете кое оформление да изберете за сайта, тогава всичко е лесно за вас. За да спестите разходи за разработка и все още да не губите аудитория поради лошото оформление на устройството, използвайте адаптивен дизайн.

Adaptive се нарича дизайн, който изглежда на различни устройства еднакво добре. Този подход ще позволи на сайта Ви да бъде разбираем и удобен дори на лаптоп, поне на таблет, дори на смартфон. Този ефект се постига благодарение на автоматичните промени в ширината на работната площ на екрана. Използвайки адаптивни стилови листа за сайта, вие правите възможно най-правилното решение.

Каква е разликата между адаптивния дизайн и наличието на различни версии на сайта

Адаптивният дизайн се различава от мобилната версия на сайта, тъй като в последния случай потребителят получава html код, който се различава от версията за настолни компютри. Това е недостатък по отношение на оптимизирането на ефективността на сървъра, както и оптимизирането на търсачките. Освен това става по-трудно да се отчитат статистическите данни за различните версии на сайта. Адаптивния подход е лишен от такива недостатъци.

Адаптивност за различни устройства се постига благодарение на ширината на оформление или проценти чрез транспортни блокове в наличното пространство (във вертикалната равнина, а хоризонталната смартфони на настолен) или отделните оформления чрез създаване на различни екрани.

Повече информация за адаптивния дизайн и неговото развитие можете да намерите в учебниците.