Жауапты дизайнды қалай тегін тексеруге болады. JavaScript сценарийін қолданатын жауапты орналасу Жауапты дизайнды сынау
Сәлем, құрметті блог оқырмандары. Адаптивті дизайн ресейлік Интернетте танымал бола түсуі таңқаларлық емес. Және, әрине, макет дизайнерлері оны зерттеуі керек. Жауапты дизайн жақында барлық дерлік веб-сайттарда болады, өйткені мобильді құрылғыларды көбірек адамдар пайдаланады.
Мен онымен сайттар онсыз қарағанда мұндай құрылғыларда оқу әлдеқайда ыңғайлы екенін айтқым келеді.
Бүгін мен сізді 5 өте пайдалы және керемет қызметпен таныстырғым келеді, олардың көмегімен сіз өзіңіздің веб-сайтыңыздың бейімделуін тексере аласыз.
Сонымен, кеттік.
Веб-сайтыңыздың бейімделуін тексеруге болатын 5 қызмет. www.responsivedesigntest.netСайттарды тексеруге арналған жақсы қызмет. Планшеттер мен телефондар үшін көптеген экран ажыратымдылығы бар.
mattkersley.comМэтт Керслидің веб-сайтты тексеруге арналған қарапайым қызметі. Барлық танымал мобильді құрылғы рұқсаттары да қол жетімді.
Кез келген сайтты тексеретін өте керемет қызмет. Маған дизайн, сонымен қатар функционалдылық өте ұнады.
Өте әдемі және функционалды қызмет. Тіпті сайттың теледидарда қалай көрінетінін тексеруге болады :-)
Автордан: «Бұл шолғыштың өлшемін өзгертуді тоқтатыңыз, ол жақында жойылады!» Сіз мұны қаншалықты жиі естисіз? Жарайды, мүмкін бұл жиі емес, бірақ егер сіз жауап беретін веб-сайттарды дамытсаңыз, сіз менің не айтып тұрғанымды білесіз: DOM немесе CSS өңдеген сайын сіз шолғыштың шетін алға және артқа сүйреп, өзгерістерді тексересіз. және дәлсіздіктерді іздеу.
Жалпы, бұл әрекеттердің көпшілігі әртүрлі құрылғылардың экран өлшемдерін имитациялау әрекеті болып табылады.
Егер сіз кәсіпорынды дамытумен айналысып жатсаңыз, сізде сынау үшін компания ұсынатын құрылғылар көп болуы мүмкін. Мен жұмыс істейтін жерде бізде iPad, iPhone, тағы бір немесе екі планшет, ноутбук және жұмыс үстелі бар. Егер сізде мұндай сән-салтанат болмаса, сіз қолыңыздағы нәрсені пайдалануыңыз керек.
Үйде екі түрлі ноутбук бар, екеуі басқа Android құрылғылары: Kindle және Nexus 7. Мен бұл құрылғыларды өзімнің штаттан тыс әзірлемелерімді тексеру үшін қолданамын, бірақ бұл толық таңдау емес екені анық. Мүлде жоқ iOS құрылғылары, және мен ертерек қолданушы болып саналғанмен, мен әрбір жаңа телефон/планшет/планшет сатылымға шыққан бойда сатып алуды жоспарламаймын.
Сонымен, әзірлеуші не істеу керек? Бақытымызға орай, әртүрлі құрылғылардың экран өлшемдерін имитациялайтын браузерге негізделген құралдардың саны артып келеді. Әртүрлі құралдар, әрине, әртүрлі мүмкіндіктер жиынтығымен және әртүрлі тиімділік деңгейлерімен келеді. Біз олардың кейбірін осы жерде қарастырамыз.
Тестілеу мақсатында мен алғаш жасаған шынайы жауап беретін PajamasOnYourFeet.com веб-сайтын алдым. Ол EGrappler жүйесіндегі әзірлеушілер қауымдастығына өте жомарт және еркін берілген Brownie HTML5 үлгісіне негізделген.
Мен жауап беремін бе?Мен жауап беремін бе? – төрт түрлі құрылғыда қалай көрінетіні тұрғысынан сайтыңызды толығымен оңай, жылдам алдын ала қарау. Төртеуі де iOS, ал әзірлеуші өз таңдауын веб-сайтта түсіндіреді. Ол ешқандай басқару элементтерін немесе таңдауларды ұсынбайды, өте қарапайым және талғампаз дисплей. Терезе өлшемдерін көру:
Жұмыс үстелі - 1600 x 992px, масштаб бойынша кішірейеді (0,3181)
Ноутбук - 1280 x 802px, масштабта кішірейеді (0,277)
Планшет - 768 x 1024px, масштаб бойынша кішірейеді (0,219)
Мобильді - 320 x 480px, масштаб бойынша кішірейеді (0,219)
Әзірлеушіден дәйексөз келтіру үшін: «Бұл тестілеу құралы емес, мұны нақты құрылғыларда жасау өте маңызды. Бірақ бұл жылдам скриншоттарды түсіруге арналған құрал (мен үшін) және клиент кездесулерінде сіз айтқыңыз келген нәрсені «бұрынғылау» үшін көрнекі мүмкіндікті қамтамасыз етеді.
deviceponsive қолданбасы мен жауап беремін бе? сайтыңызды қарапайым және ұқыпты көрсетеді, бірақ құрылғыларға қатысты басқару элементтері немесе қолжетімді опциялары жоқ. Олардың барлығы бір ұзын бетте бір уақытта көрсетіледі. Оның қызықты қасиеті бар - тақырыпты оның өң түсін өңдеу және өзіңіздің логотипіңізді енгізу арқылы өзгертуге, содан кейін оны «басып шығаруға» болады. Осылайша, сіз клиентке скриншоттарды көрсеткенде, белгілі бір мағынада сайтыңызды брендтей аласыз. Осы сайтта имитацияланған құрылғылар мен экран өлшемдері:
Macbook - 1280 x 800
iPad (портрет) - 768 x 1024
iPad (пейзаж) - 1024 x 768
Kindle (портрет) - 600 x 1024
Kindle (пейзаж) - 1024 x 600
iPhone (портреттік бағдар) - 320 x 480
iPhone (пейзаж) - 480 x 320
Галактика (портрет) - 240 x 320
Галактика(пейзаж) - 320 x 240
Көптеген ұқсас құралдар сияқты, шағын құрылғыларда айналдыру жолақтары пайда болады. Олар нақты құрылғыда көрсетілмейді, бірақ сенсорлық емес құрылғыда сынақ көрінісін айналдыру мүмкіндігіне ие болу үшін кейбір жеңілдіктер жасау керек.
Құрылғыға жауап беретін сияқты, жауап беретін сынақ сайтыңызды бірнеше құрылғыларда көрсетеді, бірақ олардың барлығын бір бетте көрсетудің орнына, беттің жоғарғы жағындағы қарапайым мәзірден қай құрылғыны көру керектігін таңдайсыз. Бұл сайтты орташа өлшемді ноутбукте қарап отырып, мен сынап жатқан құрылғының терезесіндегі бүкіл сайтты көруге мүмкіндік беретін бетті кішірейту тамаша жұмыс істейтінін білдім.
Мұнда үлкен монитордан он үш түрлі қарау терезесі ұсынылады жұмыс үстелі компьютері«Crappy Android» деп аталатынға (шынымды айтсам, оларда « Android жақсырақ«(Әдемі Android).
Firefox тағы да осы сайтта біраз сүрінді. Скриншотта назар аударыңыз - жасыл тақырып пен ақ фондық мазмұн аймағы арасында - кескін сырғытпасы пайда болуы керек тек көк жолақ бар.
Бұл алдыңғы екеуіне өте ұқсас және олардан responsive.is-ті ерекшелендіретін жалғыз нәрсе - дисплейдің бір құрылғыдан екіншісіне тегіс анимациясы, сондай-ақ сайттың жылжымайтын мүлкінің көру терезесінен құлап кетуін көрсететін мөлдір қабаттасуы. .
Мұнда жалғыз қолжетімді құрылғы опциялары - браузер терезесін толтыратын, сайтқа кірген кезде көретіндей етіп көрсететін автоматты опциялар: Жұмыс үстелі; Планшет (ландшафттық бағдар); Планшет (портреттік бағдарлау); Смартфон (ландшафттық бағдар) және смартфон (портреттік бағдар), пиксель өлшемдері берілмейді.
Тағы да бірнеше түрлі мүмкіндіктер мен опциялар Screenqueries-ті басқа сайттардан ерекшелендіреді. Портреттік және ландшафттық режимдерді ауыстыруға арналған бөлек элементі бар 14 телефон және 12 планшет құрылғысы бар. Олар өлшемдері сынақ дисплейінің төменгі оң жағында көрсетілген нөмірленген пиксельдік торда көрсетіледі. Дисплейдің жиектері сүйреп апарылады, сондықтан реттелетін өлшемдерді тексеруге болады. Сынақ аймағына сүйреңіз немесе нұқыңыз және фон сұр түске боялады, сыртқы түрі азырақ ретсіз болады.
Қызықты қасиетбұл сайт - бірнеше құрылғылар үшін «Шынайы көрініс» опциясы бар, ол сіздің сайтыңызды осы құрылғыға тағайындалған хром браузеріне оралғанын көрсетеді. Өкінішке орай, мен бұған үйреніп қалдым, Firefox сынақ сайтының кескін сырғытпасын көрсете алмайды. Уайымдамаңыз, мен браузерлерге келгенде Firefox-ты ұнатамын, бірақ бақытымызға орай бізде опциялар бар.
Screenfly шынымен ыңғайлылық факторын арттырады. Ол 10 дюймдік ноутбуктен 24 дюймдік жұмыс үстеліне дейін, планшеттерден үлкен тоғыз құрылғыны, бес планшетті, тоғыз смартфонды, үш теледидар өлшемін және таңдамалы экран өлшемі опциясын ұсынады. Сіз таңдаған кез келген опцияны мәзірдегі бөлек басқару элементі арқылы портреттік немесе альбомдық бағытта бұруға болады. Жылжытуға рұқсат беруді немесе бермеуді таңдай аласыз және бір түймені басу арқылы ортақ сілтеме жасай аласыз.
Сайт пиксель өлшемі туралы ақпаратты ұсыну жолында белсенді түрде пайдалы. Мәзірдегі әрбір құрылғы атымен және пиксель өлшемдерімен көрсетіледі, жеке браузер терезесінің өлшемі терезенің жоғарғы оң жақ бұрышында көрсетіледі және таңдалған опцияның өлшемдері дисплейдің астындағы төменгі деректемеде Тексерілетін сайттың URL мекенжайы. Бұл шағын мүмкіндік скриншоттарды құжаттауды және клиенттермен ақпаратты бөлісуді жеңілдетеді.
Жоғарыда айтылғандардың барлығы оны тамаша құралға айналдырған болар еді, бірақ Screenfly әзірлеушілері оны жай ғана жоғары деңгейге шығару мүмкіндігін тапты және прокси сервер сипатын қамтамасыз етті. Олардың веб-сайтынан дәйексөз келтіре отырып: «Screenfly олардың веб-сайттарын көргенде құрылғылардың атын көрсету үшін прокси серверді пайдалануы мүмкін. Прокси сіз таңдаған құрылғылардың пайдаланушы агенті жолын имитациялайды, бірақ бұл құрылғылардың әрекетін емес." Мұнда қарастырылған барлық басқа құралдар тек CSS-пен жұмыс істейді. Screenfly - пайдаланушы агент жолына негізделген тестілеуге мүмкіндік беретін жалғыз.
Осы жолмен бір сайтты сынап, мен бар сайтпен жасадым мобильді нұсқасы, Нәтижелері өте жақсы болды деп айта аламын. Барлығы мен күткендей көрсетілді және мүмкіндіктер тексерілді. Айта кету керек, пайдаланушы агентінің жолдарын тестілеу дәстүрлі болды, бірақ бұл сайт бұрыннан жасалған және прокси сипаты оған өте пайдалы қосымша болып шықты.
Сонымен, сіз жауап беретін веб-сайттарды сынау үшін көптеген ресурстар бар екенін көре аласыз. Олар бірегей қасиеттерімен ерекшеленеді; қай сайттарды пайдаланатыныңыз сіздің жеке қалауларыңыз бен талаптарыңызға байланысты болады және мен сізді олармен зерттеуге және тәжірибе жасауға шақыруға тырысамын. Бізде әзірлеушілер шынымен көбірек пайдалы құралдар, бәрі жақсы.
Интернет-дүкен мобильді құрылғылар үшін оңтайландырылған болуы керек. Бұл мәселе сайтты кез келген платформада дұрыс көрсетуге мүмкіндік беретін адаптивті дизайн көмегімен шешіледі. Дегенмен, жауап беретін дизайнды енгізу стандартты қателер жиынтығымен бірге келеді. Интернеттегі сауда сайттарына тән ең жиі кездесетін 8 мәселені тізіп көрейік.
Келушілердің мінез-құлық талдауын елемеуМобильді сегментке кіруге асығу бөлшек саудагерлерді келушілердің мінез-құлқының елеулі талдауынсыз веб-сайтты жобалауға мәжбүр етеді. Келушілердің мінез-құлқын талдау - ең танымал мобильді құрылғыларды анықтауға және алдымен олар үшін сайтты оңтайландыруға мүмкіндік беретін дайындықтың ең маңызды кезеңі. Analytics пайдаланушының ең «танымал» әрекетін анықтауға көмектеседі, мысалы, өнім кескінін үлкейту; мобильді келушілердің түрлендіру жылдамдығын және т.б. көрсетеді. Бұл деректер пайдаланушының мінез-құлық қалаулары туралы түсінік береді және мобильді аудиторияның үміттерін қанағаттандыруға көмектеседі. Талдау мобильді трафикнәтижелерді жүйелі және дәйекті түрде жүзеге асыру, тұтынушылардың қажеттіліктерін қанағаттандыру үшін сайтты пысықтау және оңтайландыру қажет.
Жұмыс үстелі дүкенін жобалауӘдетте, интернет-дүкеннің жұмыс үстелі нұсқасы мобильді экрандар үшін қайта жасақталған, бірақ мобильді құрылғының шағын экранын алып, содан кейін оны жұмыс үстеліне масштабтау қисындырақ. Сатушылар көбінесе жұмыс үстеліне арналған веб-сайтты смартфон өлшеміне жеткізудің техникалық мәселелерін түсінбейді. 
үшін дизайнды бастау мобильді экрандар, сіз мобильді пайдаланушы тәжірибесіне назар аударасыз. Нәтижесінде сізге екі арна үшін де дизайн жасау оңайырақ болады: жұмыс үстелі және мобильді.
Интернет-дүкеннің мобильді орналасуын тестілеу - іске қосудың міндетті кезеңі, бірақ көптеген иелер оны елемейді және тестілеусіз іске қосады. Нәтижесінде, мобильді құрылғыларға арналған сайттың тікелей нұсқасында қателер тіпті сатып алу және тапсырыс беру процесінде пайда болуы мүмкін.
Бейімделетін дизайнның кемшіліктері интернет-дүкеннің алдын ала тестілеуімен оңай анықталады, бірақ көптеген сатушылар бұл үшін ресурстарға ие емес. Ақшаны жоғалту қаупін азайту үшін негізгі браузерлерде - Chrome, IE, Firefox, Safari және сайттағы негізгі пайдаланушы маршруттарын тексеріңіз. операциялық жүйелер– Windows, Mac OS, Android, IOS бойынша танымал мобильді құрылғылар. Өзгерістерді енгізген сайын тексеріңіз; BrowserStack немесе Viewport Resizer сияқты қызметтер сынақ уақытын бірнеше сағатқа дейін қысқартуға көмектеседі.
Ұялы экрандарға арналған шағын элементтерСмартфон экранында көбірек орын алу үшін интернет-дүкен иелері «әрекетке шақыру» түймелерінің өлшемін үнемдейді. Пайдаланушыларды «Сатып алу» түймесін басу үшін масштабтауға мәжбүрлемеңіз және шағын элементтерді бір-біріне тым жақын орналастырмаңыз, әйтпесе пайдаланушылар ыңғайлырақ сайтқа өтуді таңдайды. Үлкен шарлау элементтері және әрекетке шақыру түймелерінің өлшемдері бар интерфейстерді құрастырыңыз.
Баяу бетті жүктеу жылдамдығыМобильді аудитория жылдам сайттарды және ең аз жүктеу уақыттарын жақсы көреді. Құрамдас бөліктерді бағалаңыз мобильді беттер– суреттер, түймелер, мәтін, сценарийлер – олар мобильді құрылғылар үшін оңтайландырылған болуы керек. Google өзінің SERP жүйесінде бетті жүктеу уақытын ескереді және мобильді сайттарды реттейді және «жеңіл» сайттар қосымша маңызды артықшылыққа ие болу үшін оларға жоғарыда артықшылық береді.
Мазмұнды әртүрлі қойындыларға бөліңіз, мысалы, өнім бетінде тек негізгі сурет, сипаттама, баға және «Сатып алу» түймесі болуы мүмкін. Тұтынушының шолулары мен бейнелері бөлек қойындыға орналастырылуы мүмкін және беттің негізгі бөлігінің «салмағын» азайтады. Мазмұнға қосымша, жүктеу жылдамдығына әсер ететін басқа элементтерді оңтайландырыңыз - CSS файлдары, кескіндер және сценарийлер, тек қажетті деректерді жіберіңіз. Ресурс файлдарының өлшемін және олардың жүктелу уақытын азайтатын құралдар сізге осыған көмектеседі: Uglify немесе JSCompress.
Мобильді пайдаланушылар үшін мазмұнды кесуКөбінесе әзірлеушілер мобильді құрылғыларға жүктеу жылдамырақ болуы үшін кейбір мазмұнды жасырады. Дегенмен, көбінесе бет өлшемі іс жүзінде азайтылмайды және мазмұн пайдаланушыға жай ғана көрсетілмейді. Сіздің дүкеніңіз мобильді келушілер үшін бет салмағын және жүктеу уақытын азайтатын бетті динамикалық түрде жасай алуы керек. Сонымен қатар, мобильді пайдаланушыларға аз мазмұн беру жаман және тұтынушы тәжірибесіне теріс әсер етеді. Әдетте, олар сатып алу процесінде пайдаланады әртүрлі құрылғылар, Интернеттегі сатып алушылардың шамамен 90% мұны жасайды. Оларды жауап беретін дизайн әдістерімен шектеу - үлкен қателік.
Бір ғана ажыратымдылықтағы кескіндерді қолдайдыЖауапты дизайны бар жақсы веб-сайт құрылғы түріне байланысты кескіндердің ажыратымдылығын автоматты түрде өзгертеді; ауыр кескіндер жүктеу уақытын арттырады. Сурет өлшемдерін сәйкестендіру үшін автоматты түрде реттеудің бірнеше жолы бар арнайы құрылғы. «Икемді» кескіндер (сұйық кескіндер) - құрамындағы элементтің еніне байланысты кескінді сығуға және созуға мүмкіндік беретін CSS негізіндегі әдіс немесе әрқайсысы үшін қажетті өлшемдегі кескінді жүктеуге мүмкіндік беретін HTML5 элементі. құрылғы түрі.
«Жауап бермейтін» электрондық пошталарСайттың өзінде бәрі жақсы, жауап беретін дизайн жұмыс үстелінде және мобильді құрылғыларда жақсы жұмыс істейді. Бірақ электрондық пошталар жауап бермейді, сондықтан ұялы телефон пайдаланушылары тапсырыс мәліметтерін тексеруге немесе аяқталған сатып алуларына жету үшін ұсынылған өнімдердің шексіз тізімін айналдыруға тырысуы керек. 
Электрондық пошталар тұтынушылардың негізгі байланыс нүктесі болып табылады, сондықтан жауап беретін электрондық пошта дизайнын мобильді стратегияңызға біріктіріңіз. Хаттар мен ақпараттық бюллетеньдерді құрастырыңыз және сынаңыз; хат үлгілері «жеңіл» болуы және тек маңызды ақпаратты қамтуы керек.
Веб-технологиялардың дамуымен веб-әзірлеуге қойылатын талаптар да артады. Веб-әзірлеушілер, макет дизайнерлері немесе оларды бүгінгі таңда фронтонды әзірлеушілер деп атайтындар ең көп қысымды сезінеді.
Бұл мақалада біз адаптивті орналасу туралы аздап сөйлесетін боламыз, өйткені бұл «трюк» қазір өте қымбат. Бейімделетін макет туралы сөз болғанда, кез келген деңгейдегі макет дизайнерлері клиенттерге немесе жоба менеджерлеріне, жұмсақ тілмен айтқанда, ашумен қарайды, өйткені олар мұның қаншалықты қиын екенін түсінеді.
Көптеген адамдар адаптивті орналасуды икемді орналасумен шатастыра бастайды; бұл жаңадан орналасу дизайнерлерінің жиі кездесетін қателігі. Сіз сұрайсыз, айырмашылығы неде?
Алдымен, сізге түсінікті болуы үшін және былайша айтқанда, барлық нүктелерді қойып, орналасудың қандай түрлері бар екенін қарастырайық.
Орналасудың 4 түрі бар:
Барлық түрлерін толығырақ қарастырайық.
1. Бекітілген орналасу
Блоктар енін өзгертпейді. Ажыратымдылығы төмен мониторларда көлденең айналдыру жолағы пайда болады.
#temnyi, #svetlyi ( ені: 440px; )
2. Резеңке макет
Блоктар браузер терезесінің өлшеміне байланысты енін өзгертеді. Ол максималды және ең аз мәндерді қабылдай алады (максималды ен қасиеті). Бірақ экран кішірейген сайын 50% -дан 100% -ға дейін 50% жасай алмайсыз.
#темный, #светлый ( ені: 50%; )
3. Адаптивті орналасу
@media немесе сценарийлер арқылы жүзеге асырылады. Белгілі белгілі құрылғыларға теңшелген (320, 768, 1024, т.б.). Кез келген өзгеріс белгіленген деңгейлердің біріне жеткеннен кейін серпілулерде орын алады. Міндетті түрде қолайлы
#temnyi, #svetlyi ( ені: 430px; ) @media (макс-ені: 1220px) ( #temnyi, #svetlyi ( ені: 380px; ) ) @media (макс.ені: 1120px) ( #temnyi, #svetlyi ( ені: ені: 380px; ) : 325px; ) ) @media (макс. ені: 680px) ( #temnyi, #svetlyi (ені: 200px; ) )
4. Жауапты орналасу
Бұл сұйық және бейімделгіш орналасудың үйлесімі. Іске асыру ең қиын. Бірақ нәтиже ең қолайлы. Сайт кез келген құрылғыға бейімделеді деп айтуға болады.
#temnyi, #svetlyi ( ені: 50%; ) @media (max-ені: 1006px) ( #temnyi, #svetlyi ( ені: 100%; ) )
Сонымен, біз веб-сайт макетінің 4 түрі туралы айттық. Енді біздің ғажайып бейімделу сценарийінің уақыты келді. Мен ештеңені түсіндірудің қажеті жоқ деп үміттенемін, сценарий өте қарапайым, біз жай ғана айтып отырмыз, сіз өзгерткен кезде кейбір блоктар бір жерде араласып кетеді және бәрі де солай. Әрине, бұл CSS стильдері арқылы да мүмкін, бірақ сіз барлық әдістерді білуіңіз керек; кейде кейбір жерлерде кейбіреулері жұмыс істемейді, ал кейбіреулері дұрыс болады.
Бейімделетін орналасу сценарийі:
/* Кодта ыңғайлы пайдалану үшін моногест кластарын қоюға болатын айнымалыны жасайық. Яғни, мұнда ол оларды бір рет анықтайды және бұл әр үлгінің алдында емес! бұл пайдалы мүмкіндік */ var my = ( терезе: $(терезе) ); /*Шын мәнінде функцияның өзі*/ $(терезе).resize(функция () ( /*Терезенің енін анықтайтын және оны ен айнымалысына қоятын айнымалы*/ var width = my.window.width( ); /*терезені түрлендіру шарты, яғни терезе ені белгілі бір өлшемге жеткенде орындалатын шарт */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
Осымен болды. Егер сізде сұрақтар туындаса, түсініктемелерде жазыңыз, өтіңіз
