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

Технологија развој сајтова - веома више аспеката процеса. Ипак, све његове фазе могу се поделити у две главне компоненте - функционалан и спољашњег омотача. Или, као у средњем вебмастер Моли Крај и Фронт Енд респективно. Људи који су купили њихове сајтове у веб девелопмент студијима, често наивно верују да је неопходно да се фокусира само на функционална, а то ће бити права одлука. Али то је истина у врло, врло ретким случајевима, обично за старт-уп пројеката у фази бета тестирања. Остатак графичког дизајна и кориснички интерфејс су једноставно обавезни да се придржавају веб стандардима развоја и буде угодно.

Први камен темељац пред интерфејс дизајнера, или дизајнер - је ширина изглед сајта. На крају крајева, потребно је извући интерфејсе за њу. Интуитивно постоје два приступа - или да посебне распореде за сваку од резолуција популарних екрана, или можете да направите једну верзију сајта за све мапе. Обе опције би погрешно, али прво оно прво.

Стандардна ширина у пикселима за сите што ти треба

Пре развоја масовна појава прилагодљив распоред био је развој сајта са хиљадама широким пиксела. Ова бројка је изабран за једног простог разлога - да је сајт постављен на било ком екрану. И постоји одређена логика, али претпоставимо да је неко још најмање ХД монитора на радној површини. У том случају, ваш распоред ће изгледати малу траку на средини екрана, где се све ливеног у једној гомили, а на странама великог не-простора. Сада претпоставимо да је особа дошла на своју интернет страницу са таблета са екраном од 800 пиксела у ширини, а проверава у поставкама "Схов веб сајту пуну верзију." У том случају, ваш сајт ће бити приказана погрешно, јер једноставно не уклапа у екран.

Из ових разматрања, можемо закључити да је фиксни ширина за изглед, само не уклапају и желите да пронађе други начин. Хајде да анализира идеју о одвојеном распореда за сваки ширине екрана.

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

Ако сте изабрали као стратегије стварања распореда за Величине све екрана на тржишту, онда ваш сајт ће бити највише јединствен на Интернету. Уосталом, данас је немогуће да покрије читав спектар уређаја у покушају да се направи тачну поставку за сваку опцију. Али, ако се фокусирати на уређајима најпопуларнијих резолуције монитора и екрана, идеја је добра. Његова једина мана - финансијски трошкови. Уосталом, када ће Десигнер интерфејс и кодер бити приморан да 5 или 6 пута да обавља исти посао, пројекат ће коштати несразмерно првобитно засађене у буџету ценама.

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

Најпопуларније величине сајтова

Компромис између ова два екстрема је цртеж распореда за три или четири величине екрана. Међу њима, мора бити распоред за мобилне уређаје. Остатак треба да буду прилагођени за мале, средње и велике екрана рачунара. Како одабрати ширину сајта? У наставку ћемо представити СпиЛОГ сервис за статистику у мају 2017. године, која нам показује расподелу популарности различитих резолуција екрана уређаја, као и динамику промена у овом показатељу.

Из табеле је могуће научити како одредити величину сајта који желите да користите. Поред тога, може се закључити да је најчешћи данас је формат екрана од 1366 × 768 пиксела. Ови екрани су инсталирани у буџету лаптоп, тако да је њихова популарност је природно. Следећи најпопуларнији је Фулл ХД монитор, који је златни стандард за филмове, игрице, и, стога, да се створи сајта распореде. Даље у табели видимо дозволити мобилних уређаја 360 к 640 пиксела, као и различите реализације десктоп и мобилне екране после.

dizajn распоред

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

1. Верзија лаптопови са широким 1366 пиксела.
2. Фулл ХД верзија.
3. 800 пиксела по ширини распореда величине за приказивање на малим десктоп монитора.
4. Мобилна верзија сајта - 360 пиксела у ширини.

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

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

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

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

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

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

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

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

Коришћење нових технологија

Модерна технологија лаиоут веб странице дозвољавају да прецизно преносе идеје дизајнера и дизајнера, тако да сада можете приуштити спровођење храбријих идеја него у освит интернет технологије. Не треба много да се пуззле о томе шта би требало да буде величине сајта. Са појавом такве ствари као блок распоред адаптивног, динамичком оптерећењу садржаја и фонтова, веб развој сајта је постао много пута пријатнијим. На крају крајева, ове технологије имају мање ограничења, иако су. Али као што знате, без ограничења, не би било уметности. Предлажемо вам да користите заиста креативан приступ дизајнирању - златног пресека. Уз то, бићете у могућности да ефикасно и лепо попуни радни простор, без обзира на величину или сајтове сте тражили у својим шаблонима.

Како повећати радни простор сајт

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

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

Примјер добром путу да се сакрије мени је следећи распоред (на слици доле).

У горњем углу црвеног подручја, можете видети крст, кликните на мени да крије у малом иконом, остављајући кориснику сама са садржајем сајта.

Међутим, ово није обавезно, можете оставити навигацију која је увек на видику. Али можете ли то дивно елемент дизајна, не само списак линкова на популарном сајту чине. Користити интуитивне иконе поред текста везе или чак да их замени. То ће такође омогућити сајт за ефикасније коришћење простора на екрану на уређају.

Најбољи Сајт - прилагодљиво

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

Адаптиве зове дизајн који изгледа на различитим уређајима једнако добро. Овај приступ ће омогућити Ваш сајт да буде јасно и лако чак и за лаптоп, барем на таблету, чак и на смартпхоне. Је остварио овај ефекат је због аутоматске промене радног простора ширине екрана. Користећи адаптивне стилски за сајт, узимате исправну одлуку могуће.

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

Одговарајући дизајн се разликује од мобилног сајта, тако да у овом другом случају, корисник добија ХТМЛ код, који се разликује од радне површине. Ово је недостатак са становишта оптимизације перформансе сервера, као и оптимизације за претраживаче. Поред тога, теже постаје да размотре статистику према различитим верзијама сајта. Прилагодљив приступ је лишен недостатака.

Прилагодљивост за различите уређаје је постигнута захваљујући ширини распореда или процентите путем транспортних блокова у расположивом простору (у вертикалној равни уместо хоризонталне смартпхоне на десктоп) или појединачних изгледе стварањем разних екрана.

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