Сізде « жауапты веб-сайт » бар ма? Бұл келушінің құрылғысы мен экран өлшеміне негізделетін орналасуы бар сайт. Жауапкершілікті веб-дизайн қазір саланың үздік тәжірибесі болып табылады. Google ұсынып , Интернеттегі миллиондаған сайттардан табылған. Дегенмен, әртүрлі экран өлшемдеріне сай келетін және шынымен жауап беретін сайт бар веб-сайттың арасында үлкен айырмашылық бар.
Мен компанияның тұрақты түрде өз веб-сайттарын қайтадан көріп, жаңа ұялы байланыс дизайнының артықшылығын мақтайтын баспасөз хабарламасын итермелеп отырамын. Мен осы сайттарға кіргенде, мен жиі тапқан нәрсе әртүрлі экрандарға сəйкестендіру үшін шынымен ауқымды жəне өзгеретін схема болып табылады, бірақ олар жауап беру идеясын қабылдағанша. Бұл жеткіліксіз. Шынайы жауап беретін веб-сайт кішігірім немесе үлкен экранды жайғастыруға қарағанда ауқымды ғана емес. Бұл сайттарда сіз келесі маңызды ерекшеліктерді табасыз.
1. Оңтайландырылған өнімділік
Веб-сайтты жүктеуді ешкім күтпейді, ал біреуі мобильді құрылғыны мінсізнен аз болуы мүмкін байланыспен пайдаланғанда, жылдам жүктеу үшін сайттың қажеттілігі одан да маңызды.
Сонымен, сіздің сайтыңыздың өнімділігін қалай оңтайландырасыз? Егер сіз жаңа сайтты қайта құрудың бір бөлігі ретінде бастасаңыз, онда осы жобаның бір бөлігі ретінде өнімділік бюджетін жасау керек . Егер сіз бұрыннан бар тораппен жұмыс істеп жатсаңыз және нөлден басталмаған болсаңыз, бірінші қадам - бүгінгі күні қайда тұратынын көру үшін сайтыңыздың жұмысын тексеру.
Сіздің сайтыңыз сіздің өнімділігіңізді көрсететін базалық сызба болғаннан кейін жүктеу жылдамдығын арттыру үшін қажетті жақсартуларды жасауға кірісуге болады. Басталатын тамаша орын, бәлкім, сіздің сайтыңыздың суреттерімен. Тым үлкен кескіндер баяу жүктеу сайттарына қатысты # 1 кінәлі болып табылады, сондықтан веб-жеткізілім үшін суреттерді оңтайландыру сайтымызға өнімділік тұрғысынан көмектеседі.
Шындығында, веб-сайттың өнімділігін жақсарту және жылдам жүктеу жылдамдығы - барлық келушілердің бағалайтын пайдасы. Өйткені, ешкім сайттың «өте жылдам» жүктелгеніне шағымданады, бірақ егер сайт жүктеуге тым ұзақ уақыт кетсе, онда ол адамдарға өз экранында жауап беретін «жауап» болып табылады ма немесе жоқ.
2. Smart Content иерархиясы
Үлкен экранда веб-торап көрсетілсе, экрандағы нақты жылжымайтын мүлік арқасында мазмұнды әртүрлі жолмен шығара аласыз. Сіз маңызды хабарлар мен бейнелерді, жаңалықтар жаңартуларын, оқиғалар туралы ақпаратты және торапты навигацияны жиі экранда бірден көре аласыз. Бұл келушіге бүкіл беттің мазмұнын оңай және жылдам сканерлеуге және олар үшін маңызды екенін шешуге мүмкіндік береді.
Бұл сценарий осы сайттың дизайнын жасап, ұялы телефон сияқты кішкентай экран құрылғыларына айналдырғанда қатты өзгереді. Сіз кенеттен экрандағы жылжымайтын мүліктің бір бөлігімен жұмыс істеп жатырсыз. Бұл дегеніміз, сіз алдымен сайтында не пайда болатындығын, содан кейін не болатынын шешуге тиіссіз. Бірден көрінетін барлық нәрселердің орнына сізге бір немесе екі нәрсені көрсету мүмкіндігі бар (олардың біреуі ең алдымен навигация). Бұл иерархия шешімдерін жасау керек дегенді білдіреді. Өкінішке орай, экранда бірінші болып келетін нәрсені жиі анықтайды, содан кейін екінші, және т.б. - бұл бет өзі кодталған. Ең алдымен, экранда бірінші кез келген кодты көрсету үшін жауапты сайтты құру кезінде оңай, одан кейін кодадағы екінші тармақ және т.б. Өкінішке орай, бір құрылғыдағы ең маңызды нәрсе басқа болуы мүмкін емес. Шынайы жауап беретін сайт мазмұнның иерархиясының әртүрлі жағдайларға байланысты өзгеруі керек екенін және қай жерде көрсетілетіні туралы ақылды болуы керек екенін түсінеді.
CSS-тің орналасу әдістемелерін жақсарту, соның ішінде CSS Grid Layout, Flexbox және тағы басқа, веб-дизайнерлер мен әзірлеушілерге HTML-кодтың нақты мазмұн тәртібі бойынша бұрмаланудың орнына мазмұнды ақылға қонымды түрде шығаруға қатысты қосымша мүмкіндіктер береді. Осы жаңа қондырғылардың артықшылықтарын пайдаланып, құрылғының ландшафты ретінде маңызды болғандықтан, біздің сайттың пайдаланушыларының қажеттіліктері дамып келеді.
3. Құрылғының күші мен әлсіздіктерін есепке алатын тәжірибе
Құрылғылар тақырыбында болу - біреу сіздің сайтқа кіру үшін пайдаланатын әрбір құрылғыда сол платформаға тән күшті және әлсіз жақтары бар. Үлкен жауап беретін сайт әртүрлі құрылғылардың мүмкіндіктері мен шектеулерін түсінеді және оларды кез келген қондырғыға кез келген қондырғыға қолайлы болуы үшін бейімделген тәжірибелерді жасау үшін пайдаланады.
Мысалы, ұялы телефон дәстүрлі жұмыс үстелі компьютерінде таба алмайтын бірқатар мүмкіндіктерді қамтиды. GPS - ұялы орталықтандырылған функцияның бір мысалы (иә, сіз де компьютерлерде жалпы орналасқан жер туралы ақпаратты ала аласыз, бірақ құрылғы GPS әлдеқайда дәл). Сіздің сайтыңыз GPS-ті қолданып, адамға дәл сол уақытта қай жерде екеніне қарай нақты және нақты қадамдық бағыт туралы ақпарат немесе арнайы ұсыныстар жіберу үшін қолдана алады.
Бұл принципті тәжірибеде қолданатын тағы бір мысал сіз қандай экранды пайдаланатындығыңызды түсінетін және осы дисплейге қолайлы суреттерді жіберетін сайт болар еді. Егер жоғары пиксель тығыздығы бар экраныңыз болса, сол бейнеге жоғары сапалы кескіндерді жіберуге шешім қабылдай аласыз. Бұл бірдей суреттер экранда кем болмауы мүмкін, алайда қосымша сапа жоғалуы мүмкін, ал қосымша файл өлшемі ешқандай нақты себеппен жүктелмеуі мүмкін.
Шынында жақсы жауап беретін сайттар бүкіл пайдаланушы тәжірибесін қарастырады және осы тәжірибені тек құрылғы түріне немесе экранның өлшеміне ғана емес, сонымен қатар аппараттық құралдың басқа да маңызды аспектілеріне сәйкес келтіруге тырысады.
4. Контекстен тұратын мазмұн
Бастапқыда, веб-дизайнға жауап беретін веб-дизайн әр түрлі экран өлшемдеріне сай келетін сайттың орналасу идеясы үшін өз атын алды, бірақ сіз тек экран өлшемінен әлдеқайда көп жауап бере аласыз. Құрылғының күшті және әлсіз жақтарын пайдаланудың алдыңғы мысалында құру үшін, веб-сайт тәжірибесін шынымен теңшеу үшін оларды және басқа да деректерді күн мен уақыт сияқты пайдалануға болады.
Үлкен сауда көрмесіне арналған веб-сайтты елестетіңіз. Дегенмен, жауап беретін веб-сайт әр түрлі экрандармен масштабтау үшін сайт беттерінің орналасуын өзгертеді, сонымен қатар көрсетілетін ең маңызды мазмұнды анықтау үшін күнді қолдануға болады. Егер бұл оқиғаға дейін уақыт болса, тіркелу туралы ақпаратты көрнекті түрде көрсетуді қаласаңыз болады. Алайда, оқиға шынымен сол кезде орын алса, тіркелу ең маңызды мазмұн болмауы мүмкін. Оның орнына, күнделікті іс-қимыл жоспарын шешуге болады, себебі ол қолданушының дереу қажеттіліктеріне сәйкес келеді.
Әрі қарай қадамдар жасай отырып, сіз сауда-саттық шоуларында қай жерде екендігін анықтау үшін құрылғыңыздың GPS-ге кіруіңіз мүмкін. Сіз интерактивті контентпен олардың орналасу орнына негізделіп, оларға жақын жерде орналасқан кабиналарды немесе сеанстарын көрсете аласыз.
5. Қол жетімділік
Сайттың келушінің қажеттілігіне шынымен қалай жауап беретінін қарастыратын соңғы мысал - бұл веб-сайттың қол жетімділігі туралы ойлау. Веб-сайттар мүмкiндiгiнше, мүмкiндiгiнше көптеген адамдардың, соның iшiнде мүгедектердi пайдалануы мүмкiн. Сіздің веб-сайтыңызды оның мазмұнына кіру үшін экраннан оқу құралын немесе басқа көмекші бағдарламалық жасақтамаға қажет біреу пайдалануы керек. Осылайша, сіздің сайтыңыз сіздің қажеттіліктеріңізге жауап береді, себебі тәжірибе, мүгедек келушілер үшін әртүрлі болса да, әлі де орынды болып табылады.
Веб-сайт тек қана «мобильді достыққа» қарағанда әлдеқайда көп болуы мүмкін, тек экран өлшемі ғана емес, мүмкіндігінше көп деректерге жауап бере отырып, бұл фразаның әрбір мағынасында шынымен жауап беретін тәжірибе болуы мүмкін.