Стандартты өлшемдері сайттар: ерекшеліктері, қойылатын талаптар мен ұсыныстар

өңдеу Технологиясы веб-сайттар өте көп қырлы процесс. Бірақ оның барлық кезеңінде бөлуге болады екі негізгі құрамдас бөліктері - функционалды және сыртқы қабығы. Немесе, әдеттегідей ортаға вебмастеров, бек енд мен фронт енд тиісінше. Адамдар тапсырыс береді өз веб-сайттары бар, студия веб-әзірлеу, көбінесе салғандарымыз болжауынша, бұл тұр назар тек функционалында, және бұл дұрыс шешім болады. Бірақ бұл әділ өте және өте сирек жағдайларда, әдетте, үшін жобалар-стартаптар кезеңінде бета-тестілеу. Қалғанында бір графикалық дизайны мен интерфейсі ғана міндетті стандарттарына сәйкес веб-әзірлеу және ыңғайлы.

Бірінші краеугольный, онымен бетпе-бет келеді жобалаушы интерфейс немесе дизайнер - бұл ені макетін сайта. Өйткені, ол үшін қажет отрисовывать интерфейстері. Таза интуитивті пайда екі амал не істеу жекелеген макеттері, әрбір көпшілік рұқсаты, экранды, немесе жасау бір нұсқасын сайттың барлық дыбыс бейнелерін көпшіліктің қабылдауына. Және екеуі де нұсқалары болады неверны, бірақ барлығын рет-ретімен айтайық.

Стандартты ені сайт пикселях үшін рунет

Дейін дамыту бейімдік беттеу жаппай құбылыс болды, сайтты ені мың пиксел. Бұл сан выбиралась бойынша бір қарапайым себеп - сайты орналастырылды кез келген экран. Бұл-өз логикасы, бірақ делік, ол барлық адамда кем дегенде HD-монитор арналған десктопе. Мұндай жағдайда сіздің макеті болады казаться крошечной жолақтың ортасында экран, онда барлық слеплено бір байламы, ал екі үлкен незадействованное кеңістік. Енді делік, бұл адам кірді сіздің веб-сайт планшеттің экраны 800 пиксель ені бойынша, әрі параметрлерінде тұр "белгі Көрсетіп, толық нұсқасын веб-сайтының". Бұл жағдайда, сіздің сайт, сондай-ақ пайда болады дұрыс, өйткені жай-напросто емес влезет дисплейіне.

Көп:

Қалай "ШҚ жою" бетін телефон арқылы? Кеңестер кезеңдері

соңғы кезге Дейін, үшін біржола жою "бетін ШҚ" жасау керек болды. сұрау техподдержку себептерін көрсете отырып, немесе жасауға әрекет, қайшы саясат "ВКонтакте". Соңғы тәсілі әкеледі бұғаттау бейіндегі және кейіннен жою. Бірақ бұл ең жақсы жолы. Сонды...

Электронды әмияндар " менің "Киви" рублі аударуға долларына?

Қазіргі заманғы интернеттің мүмкіндіктерін мүмкіндік береді ғана емес, ақпаратты табуға және қарым-қатынас Желісі, бірақ мен төлемдерді жүзеге асыруға. Үшін сатып алу үшін интернетте заттар немесе коммуналдық қызметтерге ақы төлеуге бар бірқатар элек...

Наталья Ящук. Кім ол? Блогер, вайнер немесе тележүргізуші?

интернет Пайдаланушылар шығар көрген күлкілі бейнелер деп аталатын вайнами. Желі оларды бүгін мың. Жасайды олардың мүлдем әр түрлі адамдар мен сюжеттері де әр алуан. Міне, авторларының бірі осындай ролик - керемет Наталья Ящук! Ол кім, бұл улыбчивая ...

осы тұрғыдан біз деп қорытынды жасауға тіркелген ені макетіне бізге дәл орнатылмаса және іздеу қажет басқа тәсілі. Кел талдайық идеясын жеке макетін үшін әрбір ені экран.

Макеттері барлық жағдайға мінсіз

Егер сіз таңдаған ретінде стратегиясын құру макеттері үшін барлық мөлшерін экрандар рыногына қатысушы болса, онда сіздің сайт болады бірегей бүкіл интернеттегі. Өйткені, жай ғана мүмкін емес бүгін қамту спектрін құрылғыларды жасауға тырысып нақты параметрді әрбір нұсқа. Бірақ бұл бағыт ең танымал рұқсат мониторлар мен экрандар құрылғыларын, онда идея неплоха. Жалғыз оны минус - қаржылық шығындар. Себебі интерфейстерді жобалаушы, дизайнер және беттеуші мәжбүр болады, 5 немесе 6 рет орындауға бір жұмысқа, жоба құны ақылға сыйымсыз артық бастапқыда салынған және бюджетке төленетін баға.

Сондықтан мақтана молшылығымен нұсқалары, әр түрлі экрандар мүмкін бұл сайттар-одностраничники, оның мақсаты - сатуға бір тауар міндетті түрде, бұл жақсы. Несі бар, егер сіз осындай бір лендингов, ал многостраничный сайт, онда тұр айтысып оқу.

Ең танымал өлшемдері сайттар

Компромиссом арасындағы екі шектен болып табылады отрисовка макетін үшін үш немесе төрт мөлшерлерін белгілеудің экрандар. Олардың ішінде біреуі міндетті түрде болуы тиіс макетімен мобильді құрылғылар үшін. Қалғандары бейімделген болуға тиіс үшін кішкентай, орта және үлкен десктопного экран. Қалай таңдау керек? ені? Төменде келтіреміз статистиканы сервис HotLog мамыр 2017 жылғы көрсетіп отырған, бізге бөлу танымалдығы, түрлі рұқсаттар экрандар құрылғыларын, сондай-ақ динамикасын осы көрсеткішті өзгерту.

- кестеден алуға болады, қалай сайт, ол пайдалану керек. Бұдан басқа, мынадай қорытынды жасауға болады, бұл ең көп тараған бүгін форматы болып табылады экран 1366 768 нүкте. Мұндай экрандар орнатылады бюджеттік ноутбуктар, сондықтан олардың танымалдығы закономерна. Келесі танымалдық болып табылады Full HD-монитор, алтын стандарт болып табылады үшін бейнероликтер, ойындар, демек, және құру үшін макет. Оқу-кестеде көріп отырмыз рұқсат мобильді құрылғылар 360 640 нүкте, сондай-ақ әр түрлі нұсқалары десктопных және жылжымалы экрандар, одан кейін де.

Проектируем макеті

Сөйтіп, статистиканы талдап, қорытынды жасауға болады, бұл оңтайлы ені сайта 4 вариация:

1. Версия для ноутбуков ені 1366 пиксел.
2. Full HD-нұсқа.
3. Макет өлшемі 800 пиксель ені бойынша бейнелеу үшін кішкентай десктопных мониторлар арқылы көрсетіледі.
4. Мобильная версия сайта - 360 пиксел ені бойынша.

Мысалы, біз анықталды, қандай пайдалану қажет мөлшері құрылатын исходника сайты үшін. Бірақ мұндай жоба бәрібір болады шығын. Сондықтан қарастырайық тағы нұсқалары, бұл жолы пайдаланбай тіркелген ені.

Жасаймыз макеті икемді

Бар баламалы тәсіл, қашан бейімделуге тұр, тек ең төменгі мөлшері, экран, ал өздері өлшемдері сайттар болады тіркелгеннен да көп. Бұл ретте мұндай элементтер интерфейс, меню, батырмалар және логотипі, сұрақ қоюға болады абсолюттік сүйене отырып, ең аз мөлшері ені экранның пикселях. Блоктар контентпен, керісінше, растягиваться сәйкес көрсетілген пайызына енін облысы экран. Мұндай тәсіл мүмкіндік береді тоқтату қабылдау мөлшері сайттарға қалай шектеу үшіндизайнер және талантливо жеңу бұл нюанс.

Бұл золотое сечение және оны қалай қолдануға беттеу веб-беттерді?

сонау қайта өрлеу дәуіріндегі көптеген сәулетшілер мен суретшілер беруге тырысты өз творениям тамаша нысаны мен пропорциясы. Бақылау сұрақтарына толық жауаптар мәні туралы осындай пропорцияда олар жүгіндік жобасы бойынша қазақтың ұлы ақыны, барлық ғылым - математика.

сонау антикалық болды шығарылғанда пропорция, ол біздің көз қабылдайды ретінде ең табиғи және изящную, өйткені ол барлық жерде кездеседі табиғатта. Открывателем формулалар мұндай арақатынасы " атты талантты ежелгі грек сәулетші атындағы Фидий. Ол рассчитал, егер көп бөлігі пропорция жатады аз да бүтін жатады үлкен болса, онда бұл пропорция көрінеді ең жақсы түрде. Бірақ бұл жағдайда, егер сіз бөлу объектісі несимметрично. Осындай пропорциясы болды кейінірек атай алтын қимасы, бәрібір асыра бағаламайды, оның мәні әлемдік мәдениет тарихы.

оралайық веб-дизайн

бұл өте оңай пайдалана отырып золотое сечение, сіз жобалау беттің барынша ұнамды болып табылады адами көзде. Рассчитав анықтау бойынша формулалар алтын қима аламыз ұтымды саны 1,6180339887..., бірақ ыңғайлы болу үшін пайдалануға болады дөңгелектенген мәні 1,62. Бұл білдіреді, бұл блоктар біздің беттері болуы тиіс 62% және 38% - бүтін қарамастан, мөлшері қандай, құрылатын исходника сайты үшін қолданасыз. Мысал көре аласыз мұндай схема:

Пайдаланыңыз жаңа технология

Қазіргі заманғы технологиялар беттеу веб-сайттар мүмкіндік береді барынша дәл беруге задумку жобалаушы және дизайнер, сондықтан енді өзіне іске асыруға батыл идеялар қарағанда, елең-интернет-технологиялар. Енді талап етілмейді және ол қатты сындыра басын жатырмыз, қандай болуы тиіс мөлшері. Келуімен мұндай заттар ретінде блоктық адаптивті беттеу, динамикалық подгрузка контент және қаріптер, сайтын әзірлеу болды бірнеше есе жағымды. Өйткені, мұндай технология бар аз шектеулерді болса да, дегенмен, олар бар. Бірақ белгілі болғандай, шектеусіз емес еді, және өнер. Біз сіздерге бір шын мәнінде шығармашылық проектировке - золотое сечение. Оның көмегімен, сіз тиімді және әдемі толтырып, жұмыс кеңістігі, қандай өлшемдері сайттар болсаңыз да, өздерін өз орнатыңыз.

Қалай арттыруға жұмыс кеңістігі сайтынан

Жоғары ықтималдығы, бұл сіз үшін жеткілікті орын сыйдыра барлық элементтері интерфейс макеті шағын мөлшері. Мұндай жағдайда бастау қажет шығармашылықпен ойлауға немесе одан да шығармашылықпен қарағанда, сіз жасадық.

Барынша босатуға орын сайтында болады, спрятав шарлау кезінде қалқымалы мәзір. Мұндай көзқарас қисынды пайдалану тек қана мобильді құрылғылар мен десктопах. Бұл қолданушының барлық уақытта қарап, қандай айдарлар бар веб-сайтында - ол үшін келіпті секілді. Ал тілектер пайдаланушы құрметтеу қажет.

Мысал жақсы тәсілін жасыру мәзір болып табылады келесі макеті (фото төмен).

жоғарғы бұрышында қызыл облысының көре аласыз крест, басқанда ол скроет мәзір кішкентай белгісіне қалдырып, пайдаланушы оңаша мазмұнмен веб-сайта.

Дегенмен, бұл емес, сіз шарлау, ол әрқашан назарда. Бірақ жасауға болады, бұл әдемі дизайн элементі ғана емес, тізбесімен танымал сілтемелер сайтында. Пайдаланыңыз интуитивті түсінікті белгішелер қосымша мәтіндік сілтемелер немесе тіпті олардың орнына. Бұл сондай-ақ, мүмкіндік береді сіздің сайтқа тиімді пайдалану экранды кеңістік құрылғыда пайдаланушы.

ең Үздік сайт - бейімдік

Егер білмесеңіз, қандай таңдау макетін сайты үшін, онда сіз үшін барлығы да оңай. Үнемдеу үшін жұмсалатын шығындарға әзірлеу кезінде жоғалтып аудиторияны нашар макетін астында қандай құрылғы пайдаланыңыз дизайнға көшті.

Адаптивным деп атайды мұндай дизайн, көрінеді, ол әр түрлі құрылғыларда әр түрлі бірдей жақсы. Мұндай тәсіл мүмкіндік береді сіздің сайтқа болуы түсінікті және ыңғайлы болсын ноутбукта болса да, планшетте, хоть смартфонда. Қол жеткізіледі бұл әсер есебінен автоматты өзгерістер енінің жұмыс экраны. Пайдалана отырып, жақсы стильсінің сайты үшін, сіз ең дұрыс шешім болуы тиіс.

Немен ерекшеленеді дизайнға көшті болуына түрлі нұсқалары сайттың

дизайнға көшті ерекшеленеді сайттың мобильдік нұсқасы, бұл соңғы жағдайда қолданушы алады html-код, айырмашылығы десктопного. Бұл кемшілігі болып табылады тұрғысынан оңтайландыру өнімділігі сервер, сондай-ақ іздеу оңтайландыру. Сол қиындау болып саналсын статистиканы, түрлі нұсқалары. Бейімдік тәсіл айырылуы осындай кемшіліктер.

Бейімділігі әр түрлі құрылғылар есебінен қол жеткізіледі макетін пайыздық тапсырмамен енін не арқылы ауыстыру блоктарын қол жетімді кеңістік (тік жазықтықта смартфонда орнына көлденең на десктопе) немесе құру жеке макеттерді, әр түрлі экрандар.

толығырақтуралы білу адаптивном дизайн және әзірлеу сіз оқулықтар.