Электрондық гаджеттер тұтынатын интернет трафигі күн сайын артып келеді. Қазіргі заманғы пайдаланушыларға олар үшін ең ыңғайлы интерфейсі бар ресурстар қажет. Дәл сол сияқты бейімделгіш орналасу бұл қажеттілікті қанағаттандыруға мүмкіндік береді, өйткені ол веб-беттерді мобильді құрылғылардың сипаттамаларына автоматты түрде өзгертуге мүмкіндік береді.
Бұл не
Ұялы телефонға ыңғайлы деп те белгілі жауап беретін орналасу әртүрлі экран ажыратымдылығына бейімделе алатын веб-беттерді әзірлеуге бағытталған белгілі әрекеттерді орындауды қамтиды.
Бірнеше жыл бұрын өрістегі адамдар әртүрлі терезе сипаттамалары бар 'ktrnhjyys[' гаджеттерінде ресурс дұрыс көрсетілу үшін веб-беттердің бірнеше нұсқасын жасауға мәжбүр болды. Макет дизайнерлері 2010 жылға дейін осылай жұмыс істеді. Содан кейін сайтты қалай бейімдеу туралы идея күрт өзгерді. Содан кейін бұл функцияны орындау үшін арнайы бағдарламалау тілі қолданылды - JavaScript.
Веб-сайтты барлық экрандарда қалай жауап беруге боладыбүгін мобильді құрылғылар? Енді орналасу CCS3 кестелерімен, сондай-ақ арнайы HTML5 тілі арқылы жүзеге асырылады.
Сізге жауап беретін веб-сайт не үшін керек
- Әр түрлі дисплей ажыратымдылығы бар гаджеттерді пайдаланып Интернетке кіруге болады. Бүгінде адамдар тұрмыстық қажеттіліктер үшін де, Интернетті пайдалану үшін де көптеген әртүрлі құрылғыларды пайдаланады. Әрине, бір сайт жоғары сапада көрсетіліп, өлшемдері мен экран ажыратымдылығы әртүрлі құрылғыларда жақсы көрінуі керек. Пайдаланушылар белгілі бір гаджетпен жұмыс істегенде ыңғайсыздықты сезінбеуі керек.
- Интернет трафигінің артуы, мобильді қолданбалар мен құрылғылардың танымалдылығы. Желіге кіруге болатын электронды гаджеттерге қазіргі сұраныс өте орынды және бұл фактімен дауласатын ешкім жоқ. Мұндай танымалдылықты елемеу мүмкін емес, өйткені бұл пайдаланушылар сіздің бүкіл аудиторияңыздың негізгі үлесін білдіруі мүмкін. Сонымен, егер сіз өзіңіздің ресурсыңызға келушілер санын сол қалпында қалдырғыңыз келсе немесе оны көбейткіңіз келсе, олардың қажеттіліктері мен мүдделеріне мұқият назар аудару керек. Басқаша айтқанда, сайт тәжірибесін мүмкіндігінше ыңғайлы ету үшін бар күшіңізді салуыңыз керек, әйтпесе тұтынушыларыңыз жай ғана бәсекелестеріңізге баруы мүмкін.
Төтенше ақпарат. Егер сіздің мамандануыңыз жаңалықтар мен басқа да шұғыл ақпаратты беру болса, онда, әрине, пайдаланушыға бұл шұғыл қажет болуы мүмкін жәнесол кезде оның қолында телефоннан басқа ештеңе болмауы мүмкін. Сондықтан сіздің міндетіңіз оның қажетті ақпаратты мүмкіндігінше жылдам алуын қамтамасыз ету
Жауапты орналасу мен мобильді қолданбаны салыстыру
Тиісті гаджеттері үшін мобильді нұсқаларды пайдаланатын бағдарламалар мен сайттардың барлық түрлері де жақсы қадам, бірақ олардың бірқатар кемшіліктері бар.
- Мобильді қолданба міндетті түрде операциялық жүйе түріне сәйкес келуі керек. Ал ол үшін уақытты ғана емес, ақшаны да жұмсау керек.
- Бағдарламаны жүктеп алу керек. Қолданбаны пайдалану үшін, әрине, оны орнату керек. Әрине, пайдаланушы мұны істей алады, бірақ ол жиі қажет болған жағдайда ғана. Егер оның мұндай қажеттілігі болмаса, онда ол бұл міндеттемеден бас тартады. Нәтижесінде аудиторияңыздың едәуір бөлігін жоғалтасыз.
Қолданбалардан неге шығу керек
- Трафикті бөлу. Қолданбаны пайдалану ресурсқа қатысу деңгейін көрсетпейді. Басқаша айтқанда, бағдарлама мен сайттың трафигі қорытындыланбайды, бұл сізді қызықтыратын көрсеткіштің төмендеуіне әкеледі.
- Ресурс материалдарын біріктіру. Егер сіз қосымшаны сатып алсаңыз, барлық материалдарды синхрондау үшін қосымша ақша жұмсауға тура келеді немесе сайтты толтырып, мазмұнды бағдарламаға көшіру керек. Нәтижесінде сіз қайтадан ақшаңыз бен уақытыңызды жоғалтасыз.
Адаптивті қалай жасауға боладывеб-сайт дизайны
Алғашқы қадам - барлық жұмысты жобалау. Бұл процесте дизайнер салыстырмалы түрде шағын дисплей мен бір ғана мәзір бағанының көмегімен мәнді және негізгі идеяларды шебер жеткізуі керек.
Қажет болса, ақпараттық блоктар қысқартылады, тек ең маңызды элементтер қалады. Жаңадан бастаушыларға арналған нұсқаулық әдетте мыналарды қамтиды:
- бірінші мобильді - электронды гаджеттерге арналған дизайн;
- икемді кескіндер - икемді кескіндерді пайдаланыңыз;
- торға негізделген орналасу - икемді торға негізделген орналасуларды пайдаланыңыз;
- медиа сұраулары - медиа сұрауларын өңдеу.
Веб-сайтты қалай жауап беруге болады? Ол үшін макеттердің бірнеше түрін пайдалануға болады.
- Резеңке. Бұл түрді жүзеге асыру оңай, ол тіпті жаңадан бастағандар үшін сирек қиындықтар тудырады. Ресурстың негізгі блоктары мобильді экрандардың өлшеміне сәйкес келгенше қысылады. Егер қысу мүмкін болмаса, олар таспа түрінде орналастырылады.
- Блоктарды жылжыту. Бұл әдіс бірнеше бағандары бар ресурстар үшін тамаша жұмыс істейді. Қосымша блоктарды орналастыру экранның өлшемдеріне сәйкес өзгереді. Егер дисплей кішірейсе, бүйірлік жолақтар төменге жылжиды.
- Орналасуларды ауыстыру. Бұл әр экран ажыратымдылығы үшін арнайы жасалған орналасуды пайдалануды қамтитын өте көп уақытты қажет ететін әдіс. Бұл әдіс сайтты зерттеуді айтарлықтай жеңілдетеді, бірақ жұмыстың күрделілігі оны талап етілмейтін етеді.
- Бастауыш орналасу. Әдістеме, мінсізқарапайым ресурстар үшін қолайлы. Дизайнер суреттер мен типографияны жай ғана масштабтайды. Бұл әдіс икемділіктің болмауына байланысты сұранысқа ие бола алмайды.
- Панельдер. Бұл техника дисплейдің кез келген орнында көмекші мәзір пайда болатын мобильді қолданбалардан келеді. Енді бұл әдіс өте танымал емес, өйткені сайттағы мобильді навигация пайдаланушыларға әрқашан түсінікті бола бермейді.
Сипатталған орналасулардың ешқайсысын әмбебап деп атауға болмайды. Веб-сайтты қалай жауап беруге болады? Ең алдымен, жобаға байланысты қолайлы орналасуды таңдау керек. Ол ресурс мүмкіндіктеріне толығымен сәйкес келуі және барлық қажеттіліктерді қанағаттандыруы керек.
Жауапты веб-сайт макетін қалай жасауға болады
Бүгін бұл үшін CSS3 және HTML5 пайдаланылады. Бірінші технология - каскадты кестелердің жетілдірілген буыны. Оның көмегімен ережелер әзірленеді, соған сәйкес сайттың мәліметтері пайдаланушы дисплейінде көрсетіледі.
CSS3 көмегімен бірнеше параметрді орнатуға болады: бос орын пайызы және белгілі бір ажыратымдылықтағы элемент өлшемдері. Бұл технологияның көмегімен дизайнерлер белгілі бір сипаттамаларға сәйкес келетін әртүрлі сыныптар жасай алады.
HTML5 белгілі бір мәліметтердің орнын көрсету үшін, басқаша айтқанда, бетті белгілеу үшін пайдаланылады. Жасалған CSS3 сыныптары HTML тегтерінде көрсетілген, осылайша пайдаланылатын нысандар ажыратымдылыққа байланысты өзгертілуі мүмкін.
Сонымен, html көмегімен жауап беретін веб-сайт дизайнын қалай жасауға болады? Сіз қарапайым суретті әзірлеуден бастауыңыз керексодан кейін созыңыз.
Бұл кескін өңдеу қабығын жасайды.
CSS көмегімен веб-сайтты қалай жауап беруге болады? Келесі параметрлерді орнатыңыз:
div {
ені: 100%;
}
div img {
ені: 100%;
биіктігі: автоматты;
}
Содан кейін div ені бойынша суреттің енін орнатыңыз.
Осылайша сіз кез келген ажыратымдылықта дисплей кеңістігін толығымен алатын кескін аласыз.
Жеке элементтерді реттеу
Сайт тақырыбы. Тақырыпқа бірнеше элементтерді орналастырыңыз:
логотип -
мәзірді жасыру түймесі -
негізгі мәзір -
сайт іздеу -
- Мәтін мазмұнымен блоктау. Мақаланы орау үшін элементті пайдаланыңыз.
- Бүйірлік баған. Санаттар тізімін табу үшін пайдаланыңыз, пошталық тізімге және соңғы жазбаларға өтіңіз.
- Веб-сайт үшін адаптивті мәзірді қалай жасауға болады? Белгілеуге элемент қосыңыз. Бұл код мазмұнды қажетті өлшемдерге сәйкестендіріп, мәзірдің биіктігін өзгертеді.
Шағын галерея жасау
Жауапты html және css веб-сайтын жасауды біле отырып, сіз ресурсыңызды кез келген гаджеттерге, мысалы, шағын галереяға жарамды пайдалы және қызықты мазмұнмен толтыра аласыз.
HTML-ге бірнеше сурет қосу үшін келесі элементтерді пайдаланыңыз:
Әр суреттің әртүрлі ажыратымдылықтармен әрекеттесуі және оның өлшемін өзгертуі үшін CSS3 пайдаланыңыз:
div.image_gallery {
маржа: 0 авто;
ені: 1000px;
мин-ені: 500px;
}
img {
макс. ені: 48%;
толтырғыш: 1%; / суреттер үшін аздап толтыру /
}
Болды, мини-галерея дайын. Енді сіз веб-сайтыңызды әртүрлі құрылғыларға қалай жауап беретінін білесіз.
Жұмыс сапасын қалай тексеруге болады
- Google Chrome. Браузерге кіргеннен кейін F12 пернесін басыңыз. Осыдан кейін панель ашылады - сізді қызықтыратын гаджеттің белгішесін басыңыз, мысалы, планшет немесе смартфон. Келесі мәзірден қажетті ажыратымдылықты таңдаңыз.
- Құрылғыға қарсы. Сайтты IFrame арқылы жүктеу арқылы адаптивті орналасуды тексеруге болатын бағдарлама. Онда әртүрлі ажыратымдылықтағы құрылғылар тізімін көресіз.
- Aresponsivedesign.is. Бұл ойын-сауық ресурсы. Алдымен сайт IFrame терезелеріне жүктеледі, содан кейін Apple экрандарына тасымалданады. Бұл дисплейлердің скриншоттарын жасауды өте ыңғайлы етеді.
