Мобилдик түзмөктөр канчалык популярдуу болсо, көпчүлүк сайттарда сыдыруу ошончолук ыңгайсыз сезилет. Мына ошондуктан, 2012-жылдан бери веб-мастерлер ресурстарды азыраак чечилиши бар экрандарда көрүүнү ыңгайлуураак кылган чечимди колдонуп келишет - адаптацияланган макет.
Заманбап тренд
Бүгүн жер жүзүндө беш миллиардга жакын адам уюлдук телефондорду колдонушат, алардын үчтөн биринде смартфондор бар. Ошондуктан, мобилдик трафик веб-сайт ээлери үчүн барган сайын маанилүү болуп баратат. Бул зыяратчылардын булагы убакыттын өтүшү менен гана көбөйөт окшойт. Издөө машиналары бул тенденцияга тез жооп беришти. Ири корпорациялар "Яндекс" жана Google ылайыкташтырылган макеттин жана дизайндын болушун эске алуу менен издөө натыйжаларында сайттарды рейтингдөө үчүн алгоритмдерине олуттуу өзгөртүүлөрдү киргизишти. Жөнөкөй сөз менен айтканда, уюлдук телефондор, смартфондор жана планшеттер үчүн оптималдаштырылган веб-ресурстар атаандаштарынан бир аз артыкчылыкка ээ болот.
Жауаптуу калыптын аныктамасы
Адаптивдүү макет – бул веб-баракча алкагын түзүү ыкмасы,автоматтык түрдө блоктордун жайгашкан жерин ал каралып жаткан аппараттын экрандын резолюциясына ылайык өзгөртүү. Башкача айтканда, бул ыкма менен ар кандай резолюциялар үчүн өзүнчө стилдер түзүлөт. Бул эффект атайын CSS файлдарын жазуу аркылуу жетишилет.
Буга чейин маселе бир аз башкача чечилчү. Иштеп чыгуучулар сайттын негизги версиясынын макетін жана дизайнын түзүп, мобилдик үчүн дагы "дене кыймылдарын" жасашы керек болчу. Жеткиликтүү мобилдик платформасы бар интернет долбоору каралган түзмөктүн экранына жараша сайттын тиешелүү версиясы ишке киргизилди.
Бул ыкма өзүн көп жагынан актаган жок жана көпчүлүк вебмастерлер эч качан мобилдик версиясын түзүшкөн эмес. Эми бул тартип адаптивдик макет менен алмаштырылды. Бул технологияны колдонуу менен сайттын скелетин түзүү менен, веб-мастер бардык күч-аракетин долбоордун бир версиясын түзүүгө топтойт жана коноктор аны чоң компьютер экранынан да, уюлдук телефондон, смартфондон же планшеттен да бирдей деңгээлде көрө алышат.
Responsive макеттин артыкчылыктары
Адаптивдүү веб-сайттын макетинин кандай артыкчылыктары бар? Артыкчылык бардык барак блокторун каалаган түзмөктө туура көрсөтүү деп мурда белгиленген. Ошондой эле, шаблонду түзүүдө бул ыкманын оң жагы - өзгөрүүлөрдү ишке ашыруунун ылдамдыгы. Бул эмнени билдирет?
Эгер сайттын эки платформасы болсо, макетке киргизилген өзгөртүүлөрадегенде жумушчу версиясында, андан кийин мобилдик версияда ишке ашырыңыз. Эгерде кодекстеги өзгөртүүлөр кыйла олуттуу болсо, анда мындай өзгөртүүлөрдү киргизүү процесси көпкө созулушу мүмкүн. Адаптивдүү макет менен сайтта иштөө бир файлда жүргүзүлөт. Веб баракчанын калыбына киргизилген өзгөртүүлөр жакында өндүрүштүк жана мобилдик версияларда бирдей чагылдырылат.
Бул ыкманын кемчилиги, кээ бир вебмастерлер аны ишке ашыруунун татаалдыгы деп аташат. Бирок CSS 3 пайда болушу менен, жооп берүүчү макет шаблонун түзүү абдан жөнөкөй болуп калды. Тажрыйбасыз веб-мастерлер да сайттарын мобилдик колдонууга ылайыктуу кыла алышат.
Адаптивдүү макеттин принциптери жана өзгөчөлүктөрү
Веб-дизайндагы жооп берүү ыкмасынын негизинде кандай принциптер жатат?
- Суюктукту жайгаштыруу түрүн колдонуу.
- "Каучук" сүрөттөр.
- Медиа сурамдарды колдонуу (медиа-суроолор).
- Макеттин башынан эле мобилдик түзмөктөр жөнүндө ойлонуу керек.
Шаблонду түзүүнүн бул ыкмасынын бул негизги принциптеринен ылайыкташтырылган макеттин төмөнкү өзгөчөлүктөрү келип чыгат:
1. Резолюциялардын бардык диапазонундагы иштерди эске алуу менен веб-сайттын дизайнын иштеп чыгуу жана түзүү: мобилдик дисплейден кең экранга чейин.
2. CSS 3'те киргизилген медиа сурам технологиясын колдонуу менен каскаддык стилдик барактары бар макет.
3. Кичирээк өлчөмдөгү жана дааналыктагы мобилдик түзмөктөргө сүрөттөрдү жөнөтүү үчүн кардар жана сервер тарапта программалоо.
Маанилүү аспект болуп, ыңгайлаштырылган макет түзүлөтпопулярдуу электрондук аппараттардын чечим матрицасы. Дизайнды иштеп чыгууга мындай мамиле каалаган экранда интернетте серептөө абдан ыңгайлуу болот. Бирок кайсынысын стилдерге кошууну кайдан билесиз?
Жайгамдуу макетти эмнеден баштоо керек?
Көбүнчө веб-сайттар смартфондордун жана планшеттердин экрандарында сыдырма тилкелери пайда боло тургандай кылып жасалган, алар серфинг үчүн анчалык деле ыңгайсыз, ал эми көптөгөн интернет долбоорлордун дизайны жана макети жөн гана «сүзүп» турат. Веб-дизайнды үйрөтүү үчүн түзүлгөн веб-сайттар ар кандай түзмөктөрдүн экранынын ар кандай резолюцияларын камтыйт, алардын астында сайтыңыздын барактарын жайгаштыруу керек.
Адаптивдүү макет, анын мисалдарын көп табууга болот, көптөгөн артыкчылыктарга ээ. Барактын түзүлүшүнө ушундай жол менен жакындаганда эмнени эске алуу керек?
Шаблондун үстүндө иштей баштаганда, мазмун жана макет блоктору ар кандай экрандарда канчалык жакшы көрсөтүлөрүн мезгил-мезгили менен текшерип туруу маанилүү. Бул үчүн, кээде жөн гана браузер терезесинин туурасын өзгөртүү үчүн жетиштүү болот. Стил файлы медиа суроо-талапты кабыл алып, блоктордун ордун өзгөртүп, олуттуу өзгөртүүлөрдү киргизет. Ар кандай моделдердин мобилдик түзүлүштөрүнүн экрандарын туураган сайттар жооп берүүчү макет шаблонун сыноо үчүн жакшы курал болушу мүмкүн. Мындай кызматтар ар кандай мобилдик түзүлүштөрдүн дисплейлеринде дизайн кандай көрүнөрүн кылдат карап чыгууга жана баалоого мүмкүндүк берет.
Мындай жооп берүүчү макеттин технологиясы анчалык деле жөнөкөй болбосо да, аны өздөштүрүү жакында өз жемишин берет.
