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

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

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

Сіз бір кездері қажет сайт үшін пиксель Стандартты ені

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

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

Барлық кездерге арналған Жоспарлар

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

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

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

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

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

жобалау орналасу

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

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

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

икемді орналасуын жасау

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

алтын қатынасы, және қалай орналасуға веб-беттерді пайдалануға қандай?

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

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

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

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

жаңа технологияларды қолдану

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

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

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

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

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

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

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

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

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

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

Қандай Сіздің сайттың түрлі нұсқаларын қолжетімділігін адаптивті дизайнын ерекшеленеді

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

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

Сіз жауап дизайн туралы көбірек біле аласыз және кітаптар сізді болады дамыту.