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

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

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

Стандартна ширина в пиксели за сайта, който някога ще се нуждаете

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

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

Формати за всички поводи

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

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

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

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

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

вътрешен дизайн,

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

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

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

Направи гъвкава оформление

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

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

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

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

Да се върнем към уеб дизайн

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

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

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

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

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

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

Един пример за един добър начин да се скрие менюто е следния вид (на снимката долу).

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

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

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

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

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

Това, което отличава адаптивен дизайн на наличието на различни версии на вашия сайт

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

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

Можете да научите повече за адаптивен дизайн и разработване можете от книги.