Сәлем, құрметті блог оқырмандары. Адаптивті дизайн ресейлік Интернетте танымал бола түсуі таңқаларлық емес. Және, әрине, макет дизайнерлері оны зерттеуі керек. Жауапты дизайн жақында барлық дерлік веб-сайттарда болады, өйткені мобильді құрылғыларды көбірек адамдар пайдаланады.
Мен онымен сайттар онсыз қарағанда мұндай құрылғыларда оқу әлдеқайда ыңғайлы екенін айтқым келеді.
Бүгін мен сізді 5 өте пайдалы және керемет қызметпен таныстырғым келеді, олардың көмегімен сіз өзіңіздің веб-сайтыңыздың бейімделуін тексере аласыз.
Сонымен, кеттік.
Веб-сайтыңыздың бейімделуін тексеруге болатын 5 қызмет. www.responsivedesigntest.netСайттарды тексеруге арналған жақсы қызмет. Планшеттер мен телефондар үшін көптеген экран ажыратымдылығы бар.
mattkersley.comМэтт Керслидің веб-сайтты тексеруге арналған қарапайым қызметі. Барлық танымал мобильді құрылғы рұқсаттары да қол жетімді.
Кез келген сайтты тексеретін өте керемет қызмет. Маған дизайн, сонымен қатар функционалдылық өте ұнады.
Өте әдемі және функционалды қызмет. Тіпті сайттың теледидарда қалай көрінетінін тексеруге болады :-)
Жауапты веб-сайтты қалай тексеруге болады? Веб-сайттарды тестілеу кезінде қандай мәселелер туындайды әртүрлі құрылғылар? Веб-сайтты жұмыс үстелі мониторында сынау ұялы телефон сияқты қол құрылғысында тестілеуден қалай ерекшеленеді? Жауапты веб-сайттарды тексеру үшін қандай құралдарды пайдалана аламыз? Біздің
Жауапты веб-дизайн дегеніміз не?Жауапты веб-дизайн (RWD) - оңтайлы тәжірибені қамтамасыз ету мақсатымен веб-сайттарды құруға бағытталған веб-дизайн тәсілінің анықтамасы - ең аз өлшеммен оқуға және шарлауға оңай, панорамалау және жылжыту кең ауқымқұрылғылар (жұмыс үстелінен компьютер мониторларыұялы телефондарға).
RWD көмегімен құрастырылған сайт келесі жолдармен сұйықтықты, пропорционалды торларды, жауап беретін кескіндерді және CSS3 медиа сұрауларын пайдалана отырып, оның орналасуын көру ортасына бейімдейді:
- Сұйық тор тұжырымдамасы бет элементтерінің өлшемдері пикселдер немесе нүктелер сияқты абсолютті бірліктер емес, пайыздар сияқты салыстырмалы бірліктерде болуын талап етеді.
- Икемді кескіндерсонымен қатар оларды қамтитын элементтен тыс көрсетілуін болдырмау үшін салыстырмалы бірліктерде бағаланады.
- Мультимедиалық сұраулар бетке сайт көрсетілетін құрылғының сипаттамаларына, көбінесе браузер еніне негізделген әртүрлі CSS сәндеу ережелерін пайдалануға мүмкіндік береді.
Көптеген адамдар қазір веб-сайттарға кіру үшін ұялы телефондарын немесе планшеттерін пайдаланады, сондықтан жауап беретін веб-дизайнды тексеру маңызды, себебі мобильді құрылғылардағы пайдаланушы тәжірибесі жұмыс үстелі компьютерлерінен өте ерекшеленеді.
Сәйкес веб-сайтты тестілеудің ең қиын бөлігі веб-сайттың бірнеше құрылғылар мен платформаларда күткендей жұмыс істеуі, бірақ нарықтағы әрбір мобильді құрылғыда тестілеу көпшілігіміз үшін мүмкін емес.
Жауапты веб-дизайнды сынай бастайтын көптеген тестерлер әдетте шолу терезесінің өлшемін қарау терезесінің өлшеміне сәйкестендіруден бастайды. ұялы телефон, планшет және жұмыс үстелі. Бұл әдіс әдетте әртүрлі көру порттарында веб-сайтты жылдам визуалды тексеру үшін қолайлы және браузер терезесін кішірейткен немесе үлкейткен кезде негізгі дисплей мәселелерін анықтауға көмектеседі.
Дегенмен, нақты мобильді құрылғыларда тестілеу мүлдем басқа тәжірибе.
Эмуляторларды пайдалану
Мобильді эмулятор – веб-сайттар мен қолданбалардың мобильді ортада қалай көрсетілетінін және жұмыс істейтінін веб негізіндегі модельдеу.
Эмуляторлар сізге қажет нақты тестілеу құралдарын ұсынбауы мүмкін, бірақ олар әлі де веб-сайттың жоғары деңгейлі функционалдығын тексеру үшін үнемді шешім болып табылады.
Google DevTools
DevTools қолданбасында Google ChromeЖауап беретін жобаларды сынауға және жөндеуге арналған пайдалы құралдармен жүктелген құрылғы режимі деп аталатын мүмкіндік бар.
Экранның өлшемін жай ғана өзгертетін басқа жауап беретін дизайнды тестілеу құралдарының көпшілігінен айырмашылығы, бұл құрал шын мәнінде мобильді құрылғы тәжірибесін, әсіресе веб-шолғышыңызда түрту және айналдыру сияқты түрту әрекетін эмуляциялайды.
Кейбір жалпы ережелержауап беретін веб-дизайнды тестілеу:
Модульдердің орналасуын шолғыш терезесін кішірейту және кеңейту немесе мобильді құрылғыны айналдыру кезінде тексеріңіз. Түрлі модульдер ауысқан кезде жоғалып кетуі мүмкін жұмыс үстелі компьютеріұялы телефонда, бірақ қай көру терезесінде қандай модульдер пайда болуы керектігін нақты білетініңізге көз жеткізіңіз.
Қорытындысында
Веб-қолданбаңыздың қалай пайдаланылып жатқанын біліңіз. Сіз аласыз орасан зор соматұтынушыларыңыздың веб-сайтыңызға кіру үшін қандай құрылғыларды пайдаланатынын көру үшін Google Analytics құралындағы ақпарат. Негізгі тексерулер мен жоғары деңгейлі функционалдық сынақтарды орындау үшін автоматтандырылған құралдар мен эмуляторларды пайдаланыңыз және оны нақты қолмен құрылғы сынауымен біріктіріңіз.
Веб-технологиялардың дамуымен веб-әзірлеуге қойылатын талаптар да артады. Веб-әзірлеушілер, макет дизайнерлері немесе оларды бүгінгі таңда фронтонды әзірлеушілер деп атайтындар ең көп қысымды сезінеді.
Бұл мақалада біз адаптивті орналасу туралы аздап сөйлесетін боламыз, өйткені бұл «трюк» қазір өте қымбат. Бейімделетін макет туралы айтатын болсақ, кез келген деңгейдегі макет дизайнерлері клиенттерге немесе жоба менеджерлеріне, жұмсақ тілмен айтқанда, ашумен қарайды, өйткені олар мұның қаншалықты қиын екенін түсінеді.
Көптеген адамдар адаптивті орналасуды икемді орналасумен шатастыра бастайды, бұл жаңадан орналасу дизайнерлерінің жиі кездесетін қателігі; Сіз сұрайсыз, айырмашылығы неде?
Алдымен, сізге түсінікті болуы үшін және былайша айтқанда, барлық нүктелерді қойып, орналасудың қандай түрлері бар екенін қарастырайық.
Орналасудың 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 стильдері, бірақ сіз барлық әдістерді білуіңіз керек, кейде кейбір жерлерде кейбіреулері жұмыс істемейді, ал кейбіреулері дұрыс болады;
Бейімделетін орналасу сценарийі:
/* Кодта ыңғайлы пайдалану үшін моногест кластарын қоюға болатын айнымалыны жасайық.< 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") } });
Яғни, мұнда ол оларды бір рет анықтайды және бұл әр үлгінің алдында емес! бұл пайдалы мүмкіндік */ var my = ( терезе: $(терезе) );
/*Шын мәнінде функцияның өзі*/ $(терезе).resize(функция () ( /*Терезенің енін анықтайтын және оны ен айнымалысына қоятын айнымалы*/ var width = my.window.width( ); /*терезені түрлендіру шарты, яғни терезе ені белгілі бір өлшемге жеткенде орындалатын шарт */ if(my.window.width()
Міне бітті. Егер сізде сұрақтар туындаса, түсініктемелерде жазыңыз, өтіңіз
Автордан: «Бұл шолғыштың өлшемін өзгертуді тоқтатыңыз, ол жақында жойылады!» Сіз мұны қаншалықты жиі естисіз? Жарайды, мүмкін бұл жиі емес, бірақ егер сіз жауап беретін веб-сайттарды дамытсаңыз, сіз менің не айтып тұрғанымды білесіз: DOM немесе CSS өңдеген сайын сіз шолғыштың шетін алға және артқа сүйреп, өзгерістерді тексересіз. және дәлсіздіктерді іздеу.
Жалпы, бұл әрекеттердің көпшілігі әртүрлі құрылғылардың экран өлшемдерін еліктеу әрекеті болып табылады. Егер сіз кәсіпорынды дамытумен айналысып жатсаңыз, сізде тестілеу үшін компания ұсынатын көптеген құрылғылар болуы мүмкін. Мен жұмыс істейтін жерде бізде iPad, iPhone, тағы бір немесе екі планшет, ноутбук және жұмыс үстелі бар. Егер сізде мұндай сән-салтанат болмаса, сіз қолыңыздағы нәрсені пайдалануыңыз керек.: 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
Көптеген ұқсас құралдар сияқты, шағын құрылғыларда айналдыру жолақтары пайда болады. IN нақты құрылғыолар көрсетілмейді, бірақ сенсорлық емес құрылғыда сынақ көрінісін айналдыру мүмкіндігіне ие болу үшін кейбір жеңілдіктер жасау керек.
Құрылғыға жауап беретін сияқты, жауап беретін сынақ сайтыңызды бірнеше құрылғыларда көрсетеді, бірақ олардың барлығын бір бетте көрсетудің орнына, беттің жоғарғы жағындағы қарапайым мәзірден қай құрылғыны көру керектігін таңдайсыз. Бұл сайтты орташа өлшемді ноутбукте қарап отырып, мен сынап жатқан құрылғының терезесінің ішіндегі бүкіл сайтты көруге мүмкіндік беретін бетті кішірейту тамаша жұмыс істейтінін білдім.
Мұнда он үш түрлі қарау терезесі бар үлкен мониторжұмыс үстелі компьютерін «Crappy Android» деп атайды (әділдік үшін, оларда « Android жақсырақ«(Әдемі Android).
Firefox тағы да осы сайтта біраз сүрінді. Скриншотта назар аударыңыз - жасыл тақырып пен ақ фондық мазмұн аймағы арасында - кескін сырғытпасы пайда болуы керек тек көк жолақ бар.
Бұл алдыңғы екеуіне өте ұқсас және олардан responsive.is-ті ерекшелендіретін жалғыз нәрсе - дисплейдің бір құрылғыдан екіншісіне тегіс анимациясы, сондай-ақ сайттың жылжымайтын мүлкінің көру терезесінен құлап кетуін көрсететін мөлдір қабаттасуы. .
Мұнда тек қол жетімді құрылғы опциялары - браузер терезесін толтыратын, сайтты басқан кезде көретіндей көрсететін автоматты нұсқалар: Жұмыс үстелі; Планшет (ландшафттық бағдар); Планшет (портреттік бағдарлау); Смартфон (ландшафттық бағдар) және смартфон (портреттік бағдар), пиксель өлшемдері берілмейді.
Тағы да бірнеше түрлі мүмкіндіктер мен опциялар Screenqueries-ті басқа сайттардан ерекшелендіреді. Портрет пен арасында ауысуға арналған бөлек элементі бар 14 телефон және 12 планшет құрылғысы бар ландшафттық бағдар. Олар өлшемдері сынақ дисплейінің төменгі оң жағында көрсетілген нөмірленген пиксельдік торда көрсетіледі. Дисплейдің жиектері сүйреп апарылады, сондықтан реттелетін өлшемдерді тексеруге болады. Сынақ аймағына сүйреңіз немесе нұқыңыз және фон сұр түске боялады, сыртқы түрі азырақ ретсіз болады.
Қызықты қасиетосы сайттың – бірнеше құрылғылар үшін «Шынайы көрініс» опциясы бар, ол сіздің сайтыңызды сол құрылғыға сәйкес көрініске оралғанын көрсетеді Chrome браузері. Өкінішке орай, мен бұған үйреніп қалдым, Firefox сынақ сайтының кескін сырғытпасын көрсете алмайды. Уайымдамаңыз, мен браузерлерге келгенде Firefox-ты ұнатамын, бірақ бақытымызға орай бізде опциялар бар.
Screenfly шынымен ыңғайлылық факторын арттырады. Ол 10 дюймдік ноутбуктен 24 дюймдік жұмыс үстеліне дейін, планшеттерден үлкен тоғыз құрылғыны, бес планшетті, тоғыз смартфонды, үш теледидар өлшемін және таңдамалы экран өлшемі опциясын ұсынады. Сіз таңдаған кез келген опцияны пайдалану арқылы портреттік немесе альбомдық күйде бұруға болады жеке элементмәзір басқару элементтері. Жылжытуға рұқсат беруді немесе бермеуді таңдай аласыз және бір түймені басу арқылы ортақ сілтеме жасай аласыз.
Сайт пиксель өлшемі туралы ақпаратты ұсыну жолында белсенді түрде пайдалы. Мәзірдегі әрбір құрылғы атымен және пиксель өлшемдерімен көрсетіледі, өзіңіздің браузеріңіздің терезесінің өлшемі терезенің жоғарғы оң жақ бұрышында көрсетіледі және таңдалған опцияның өлшемдері дисплейдің астындағы төменгі колонтитулда көрсетіледі. Тексерілетін сайттың URL мекенжайы. Бұл шағын мүмкіндік скриншоттарды құжаттауды және клиенттермен ақпаратты бөлісуді жеңілдетеді.
Жоғарыда айтылғандардың барлығы оны тамаша құралға айналдырады, бірақ Screenfly әзірлеушілері оны қарапайым ету мүмкіндігін тапты жоғарғы сыныпжәне прокси сипатын қамтамасыз етті. Олардың веб-сайтынан дәйексөз келтіре отырып: «Screenfly олардың веб-сайттарын көргенде құрылғылардың атын көрсету үшін прокси серверді пайдалануы мүмкін. Прокси сіз таңдаған құрылғылардың пайдаланушы агентінің жолын имитациялайды, бірақ бұл құрылғылардың әрекетін емес." Мұнда қарастырылған барлық басқа құралдар тек CSS-пен жұмыс істейді. Screenfly - пайдаланушы агент жолына негізделген тестілеуге мүмкіндік беретін жалғыз.
Осылайша бір сайтты сынап, бар сайтпен құрдым мобильді нұсқасы, Нәтижелері өте жақсы болды деп айта аламын. Барлығы мен күткендей көрсетілді және мүмкіндіктер тексерілді. Пайдаланушы агентінің жолдарын сынау дәстүрлі болып қалғанын айту керек, бірақ бұл сайт бұрыннан жасалған және прокси сипаты оған өте пайдалы қосымша болып шықты.
Сонымен, сіз жауап беретін веб-сайттарды сынау үшін көптеген ресурстар бар екенін көре аласыз. Олар бірегей қасиеттерімен ерекшеленеді; қай сайттарды пайдаланатыныңыз сіздің жеке қалауларыңыз бен талаптарыңызға байланысты болады және мен сізді олармен зерттеуге және тәжірибе жасауға шақыруға тырысамын. Бізде әзірлеушілер шынымен көбірек пайдалы құралдар, соғұрлым жақсы.
Бет орналасуын айтарлықтай жеңілдететін және жылдамдататын немесе сияқты жақтаулар.
барлық құрылғыларда және монитор кеңейтімдерінде веб-беттің тамаша көрсетілуін білдіреді. Мүмкін, әрбір макет дизайнерінде олардың орналасуын тексеру үшін барлық ықтимал дисплей кеңейтімдері бар құрылғылардың толық жиынтығы жоқ. Бұл таңқаларлық емес, өйткені қазіргі уақытта технология арзан емес.
Сонымен. Ұялы телефондар мен планшеттерді сатып алу мүмкін емес - біз бұзыламыз. Не істеу керек? Бұл тапсырмалар үшін бейімделген веб-сайттарды тестілеуге арналған қызметтер әзірленді. Олардың жұмыс істеу принципі өте қарапайым. Көбінесе бет ашылатын жерде белгілі бір өлшемдегі жақтау бар. Әсер шамамен қарау кезіндегідей болады мобильді құрылғы. Қызмет телефонда немесе планшетте беттің дисплейін әрдайым дәл көрсетпейтінін атап өткім келеді. Кодтау кезінде сіз қызметтерді пайдаланып сынақтан өтуіңіз керек, бірақ аяқталғаннан кейін, мүмкін болса, ең көп таралған құрылғыларда сынақтан өткізіңіз.
Сонымен. Назарларыңызға ең жақсы құралдарбейімделген веб-сайттарды сынауға арналған.
Adobe-дан жауап беретін веб-сайттарды сынауға арналған құрал. Оны пайдалану үшін оны компьютерге орнату керек.
Бағдарлама құрылғыларыңызды WIFI арқылы синхрондауға және құрылғыңызда көрсетілетін сайтты көруге мүмкіндік береді. Қосулы қазірКелесі операциялық жүйелері бар құрылғыларға қолдау көрсетіледі: iOS, Android, Kindle Fire.