Стандардни димензии сајтови: карактеристики, барања и препораки

технологија за развој на веб-сајтови - многу мулти-фацетирани процесот. Сепак, сите фази може да се подели во две главни компоненти - функционална и надворешна обвивка. Или, како што на среден вебмастерот Бег Енд и преден крај соодветно. Луѓе кои купиле нивните веб-сајтови во студиото веб развој, често наивно веруваат дека тоа е потребно да се фокусира само на функционални, и тоа ќе биде правилна одлука. Но ова е вистина во многу, многу ретко, обично за започнување со работа на проекти во фаза на бета тестирање. Остатокот од графички дизајн и кориснички интерфејс едноставно се должни да се усогласат со стандардите на веб развојот и да се чувствуваме удобно.

Првиот камен-темелник на соочување со интерфејс дизајнер, или дизајнер - е ширината на изгледот на страницата. Впрочем, тоа е неопходно да се интерфејси за неа. Интуитивно постојат два пристапи - или да се направи посебен распоред за секоја од најпопуларните Резолуција на екранот, или може да се создаде една верзија на сајтот за сите карти. И двете опции ќе биде во ред, но првите нешта прво.

Стандардна ширина во пиксели за сајт Дали некогаш сте ќе треба

Пред развојот на адаптивни распоред масовен феномен е развојот на еден сајт со илјадници пиксели. Оваа бројка беше избрана за една едноставна причина - дека местото беше ставен на секој екран. И постои одредена логика, но да претпоставиме дека некое лице е уште најмалку HD-монитор на работната површина. Во овој случај, вашиот распоред ќе изгледа мал лента во средината на екранот, каде што сè е замислена во еден куп, и на двете страни на огромниот не-простор. Сега да претпоставиме дека некое лице дојде до вашиот веб-сајт од таблет со екран од 800 пиксели во ширина, и се проверува во подесувањата "Прикажи ја веб-страницата на целосна верзија". Во овој случај, вашиот сајт, исто така, ќе бидат прикажани погрешно, што едноставно не се вклопуваат во екранот.

Од овие причини, може да се заклучи дека одредена ширина за изгледот, ние едноставно не се вклопуваат и сакате да се најде друг начин. Ајде да се анализира идејата за посебен распоред за секоја ширина на екранот.

Распоред за сите прилики

Ако сте ја одбрале како стратегија да се создаде распоред за големини на располагање сите екран на пазарот, тогаш вашиот сајт ќе биде на повеќето единствен во интернет. Впрочем, денес тоа е едноставно невозможно да се покрие целиот опсег на уреди во обид да се направи точна амбиент за секоја опција. Но, ако се фокусираат на најпопуларните монитор резолуција и екран уреди, идејата е добра. Нејзината само недостаток - на финансиските трошоци. Впрочем, кога дизајнер дизајнер интерфејс и coder ќе бидат принудени да 5 или 6 пати за вршење на истата работа, проектот ќе чини несразмерно првично поставена во буџетот цени.

Затоа се пофали со изобилство на верзии за различни екрани може да биде освен дека сајтови-odnostranichniki чија цел - да го продаде еден производ и не заборавајте да го прават добро. Па, ако не сте еден од оние слетување, мулти-сајт, тоа стои на разумот понатаму.

Од најпопуларните големини на сајтови

Компромисот меѓу двете крајности е цртеж на распоред за три или четири екран големини. Меѓу нив, еден мора да биде распоред за мобилни уреди. Остатокот треба да се прилагодат за мали, средни и големи десктоп екран. Како да се избере на ширината на сајт? Подолу ви го претставуваме HotLog служба за статистика за месец мај 2017 година, што ни покажува дистрибуцијата на популарноста на разни резолуцијата на екранот на уредот, како и динамиката на промените во овој индикатор.

Од табелата е да се научат како да се одреди големината на сајт сакате да го користите. Покрај тоа, може да се заклучи дека денес најчестиот формат е на екранот во 1366 со 768 поени. Овие екрани се инсталирани во буџетот лаптоп, па нивната популарност е природно. Следниот најпопуларните е Full HD-монитор, кој е златен стандард за филмови, игри, и, според тоа, да се создаде распоред сајт. Понатаму во табелата гледаме дозволи мобилни уреди 360 x 640 пиксели, како и разни олицетворение на десктоп и мобилни екрани потоа.

дизајн распоред

Значи, по анализата на статистиките, можеме да заклучиме дека оптимална ширина на сајтот има 4 варијанти:

1. Верзија лаптопи со 1366 пиксели.
2. Full HD верзија.
3. 800 пиксели во ширина големина распоред за прикажување на мали десктоп монитори.
4. Мобилната верзија на сајтот - 360 пиксели во ширина.

Да претпоставиме дека ние одлучи што сакате да го користите на големината на генерирана изворниот код за сајт. Но, таков проект, сепак, ќе биде скап. Така сметаат повеќе опции, овој пат без употреба на фиксна ширина.

Направете флексибилен распоред

Има алтернатива пристап кој ние треба само да се прилагоди за минималната големина на екранот, и големината на веб-сајтови ќе биде побарано проценти. Во овој случај, елементи на интерфејсот како што се менија, копчиња и логоа, може да се дефинира во апсолутна смисла, фокусирајќи се на минималната големина на ширина на екранот во пиксели. Блокови со содржина, напротив, ќе се протегала според зададените проценти од ширината на екранот област. Овој пристап не дозволува откривање на големината на локалитетот како ограничувања за дизајнер и талент да се победи оваа нијанса.

Што е златниот сооднос, и како да го користите веб-страници на распоред?

Дури и во ренесансата многу архитекти и уметници се обиделе да им даде на своите креации совршениот облик и пропорција. За одговори на прашања во врска со последиците од такви размери, тие се сврте кон кралица на сите науки - математика.

Уште од времето на антиката бил измислен од уделот што нашето око гледа како најголем природен и елегантен, бидејќи тоа е присутно во природата. Откривач на формулата на овој сооднос беше талентиран архитект грчкиот име Фидиј. Пресметано е дека ако повеќето од пропорциите се однесува на ниско, како целина обезбедува поголема, тогаш овој процент ќе изгледа добро. Но, во овој случај, ако сакате да се подели асиметрично објект. Овој процент подоцна наречен златниот сооднос, кои се уште не се прецени нејзиното значење за светската културна историја.

Да се вратиме во веб дизајн

Тоа е многу едноставен - со користење на златната сооднос, можете да го дизајн страници кои ќе биде многу пријатен за човечкото око. Пресметува според формулата на златниот дел, ќе најдеме ирационален број 1,6180339887 ..., но за практичноста можете да го користите заоблени вредност од 1,62. Ова ќе значи дека нашата страница блокови треба да биде 62% и 38% од целина, без разлика каква големина генерирана изворниот код за сајт кој го користите. На пример може да се види на следната шема:

Употреба на нови технологии

Модерните веб-сајтови технологија распоред ќе ви овозможи точно да се пренесе идеи на дизајнер и дизајнер, па сега ќе можат да си дозволат спроведување на посмели идеи отколку во зората на интернет технологијата. Веќе не треба многу да се чудат на тоа што треба да биде со големина на еден сајт. Со доаѓањето на такви нешта како блок адаптивни распоред, динамичен вчитување на содржината и фонтови, развој на веб стана многу пати повеќе пријатно. Впрочем, овие технологии имаат помалку ограничувања, и покрај тоа што се. Но, како што знаете, без ограничување, нема да има уметност. Ние Ви препорачуваме да се користи навистина креативен пристап кон дизајнирање - златниот дел. Со тоа, ќе бидете во можност да се ефикасно и убаво се пополни простор, без разлика каква големина или сајтовите што побара во вашиот шаблони.

Како да се зголеми сајт на работниот простор

Шансите се дека нема да има доволно простор за да се приспособат на сите елементи на интерфејсот во изгледот на малата големина. Во овој случај, ќе мора да почнат да размислуваат креативно, или дури и повеќе креативни отколку што беше порано.

Максимална слободен простор на сајт што е можно, се крие на навигација во pop-up менито. Овој пристап е логично да се користи не само мобилни, но, исто така, на работната површина. Впрочем, корисникот не треба цело време да се погледне во она што го има наслови на вашиот сајт - тоа дојде за содржината. Корисникот сака да се почитуваат.

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

Во горниот агол на црвена површина, може да се види на крст, кликнете на менито што се крие во една мала икона, оставајќи на корисникот сам со содржината на веб страната.

Сепак, ова не е задолжително, можете да го напуштите за навигација кој секогаш е на повидок. Но можете да го прекрасен дизајн елемент, а не само листа на линкови на популарниот сајт се направи. Користете интуитивен икони во прилог на текстот врски или дури и да ги замени. Исто така, ќе им овозможи на вашиот сајт да се поефикасно користење на место на екранот на Вашиот уред.

Најдобрите веб-страница - адаптивни

Ако не знаете која еден да се избере распоред за сајт, сите само за вас. Да ги зачувате на трошоци за развој, а во исто време да не губат публиката, бидејќи на сиромашните распоред за некој уред, користете одговора веб дизајн.

Адаптивно нарекува дизајн кој изгледа на различни уреди подеднакво добро. Овој пристап ќе им овозможи на вашиот сајт да биде јасен и лесен дури и за лаптоп, барем на таблета, дури и на телефон. Го постигне овој ефект се должи на автоматските промени на работната површина на ширина на екранот. Користење на адаптивни стилски листови за сајт, се застанува на вистинската одлука е можно.

Она што го разликува адаптивни дизајн на достапноста на различни верзии на вашиот сајт

Одговора дизајн е различна од мобилен сајт, така што во вториот случај, корисникот добива HTML-кодот, која е различна од работната околина. Ова е неповолна положба од аспект на оптимизирање на перформансите на серверот, како и оптимизација на. Покрај тоа, толку потешко станува да се разгледа на статистички податоци во согласност со различни верзии на сајтот. Адаптивни пристап е лишен од недостатоци.

Прилагодливост за различни уреди се постигнува поради големината на распоред или проценти преку транспорт блокови во слободниот простор (во вертикална рамнина, наместо на хоризонтална паметен телефон на десктоп) или индивидуални распоред преку создавање на различни екрани.

Можете да дознаете повеќе за одговора дизајн и развој може да се од книги.