10 Инструменти и приложения за тестване на вашия отзивчив дизайн
Никога не е било по-важно да се уверите, че вашият дизайн е готов за всеки тип потребители - и устройство - преди старта. Въпреки че може да бъде трудно да се тества физически на всяко устройство, има някои инструменти и приложения, които ще ви помогнат да копирате различни отзивчиви сценарии.
С безплатни и премиум опции за инструменти няма причина да не тествате отзивчивия си дизайн преди внедряването. Просто не забравяйте да използвате тази информация за много необходими настройки на дизайна! Днес ви представяме подбор от инструменти за тестване на отзивчив дизайн.
Разгледайте елементи Envato
1. Тест за удобство на Google за мобилни устройства
Google Mobile-Friendly Test е един от онези идеални инструменти, които по някакъв начин се пренебрегват. Трябва ви дизайн на уебсайта, за да преминете стандартите на Google, за да помогнете за видимостта на търсенето; това е толкова просто.
Използването е лесно, просто въведете URL адрес и вижте как страницата ви оценява на мобилни устройства. Най-добрата част от този инструмент е, че той определя къде уебсайтът ви може да се забави или да не се представи добре на мобилни устройства, за да можете да правите корекциите.
Цена: безплатно
2. Отговорник
Responsiator ви позволява да видите дизайна на уебсайта си в много различни среди на устройството. (Това е чудесен начин да копирате устройства, без да имате купчина телефони в чекмеджето някъде.)
Най-хубавото в този сайт е, че новите устройства се добавят бързо и всяко всъщност ви позволява да превъртате, така че да виждате цяла страница, а не само това, което се появява над превъртането. Устройствата се предлагат и в портретен и пейзажен изглед. Плюс това, всяко визуализиране на устройството е етикетирано, така че да знаете точно какво гледате и къде могат да витаят проблеми.
Цена: безплатно, но с реклами (премахване на реклами за дарение)
3. Отзивчива проверка на дизайна
Отзивчивият дизайнер проверява вашия уебсайт в прозорец, където можете ръчно да коригирате размери - чудесно за проверка на точки на прекъсване - и да видите различни насоки на устройството.
Когато този инструмент се отличава е, че показва размери на работния плот, както и мобилни и таблетни устройства. (Някои от другите инструменти наистина поставят акцента върху мобилните, а не по-големите екрани.)
Хубавото е, че можете да виждате различни размери, без да променяте размера на браузъра си. Друга изящна употреба за този инструмент? Използвайте го, за да вземете скрийншоти за макети.
Цена: безплатно
4. XRespond
XRespond ви позволява да сравнявате няколко версии на вашия сайт на различни устройства едновременно. Красотата на този инструмент е, че можете да разберете колко сте в съответствие с потребителското изживяване, което предоставяте от едно устройство на друго. (Потребителите очакват уебсайтовете да са същите, където и да имат достъп до тях.)
Тествайте дизайна в пейзажен или портретен изглед и изберете устройства от същия производител - като Apple или Samsung - или сравнете в различни устройства с подобни размери. Единственият недостатък на този инструмент е, че той не включва всички най-нови устройства, въпреки че са изброени много от най-популярните модели.
Цена: безплатно
5. Screenfly
Screenfly има някои приятни инструменти, като споделяне, така че можете да работите като екип за тестване и преглед на отзивчив дизайн. Тя включва повече типове устройства, отколкото някои други инструменти - настолни компютри, телефони, таблети, телевизори и възможност за добавяне на произволен размер на екрана, който искате.
Инструментите ви позволяват да въртите, превъртате и още с прости бутони за щракване в горната част и всичко работи точно в браузъра.
Цена: безплатно
6. LambdaTest
LambdaTest е един от по-здравите инструменти в този списък. Тя включва възможността за тестване на повече от 2000 реални браузъри и операционни системи.
Този инструмент е повече от просто да видите как ще изглежда уебсайтът ви, той тества за съвместимост, потребителско изживяване, съвършенство на пикселите и други неща в жива среда. Тества се на множество устройства, браузъри и версии на браузъри, така че да знаете как точно работи уебсайтът ви.
Можете да получите скрийншоти как изглежда всичко и дори да си сътрудничите с инструмента (и екипа) онлайн. Плюс това, бонусът на премиум инструмент като този е, че включва функции за отстраняване на грешки, за да ви помогне да решите дизайнерски проблеми, тъй като те възникват.
Цена: Lite версията е безплатна; платени планове започват от $ 15 на месец
7. Чувствителен дизайн илюстриран
Отзивчивият дизайн Illustrated е по-скоро инструмент за планиране, отколкото инструмент за тестване. Обмислете тази опция за начинаещи нещо, което можете да използвате, за да ви помогнете да визуализирате съотношенията на страните и как да планирате дизайнерски елементи за различни размери на устройството и екрана.
Правиш всичко добре в браузъра, за да можеш визуално да проучиш как да мислиш за дизайна в различни размери.
Цена: безплатно
8. Чувствителен инструмент за тестване на уеб дизайн
Реактивният инструмент за тестване на уеб дизайн е обикновен зрител, базиран на URL, който ви позволява да сравнявате устройства по размер или тип устройство.
Хубавото на този инструмент са опциите за превключване, за да видите различни ориентации, дължини или изгледи само с едно кликване. Ако искате да хоствате този инструмент за тестване в собствената си среда, това също е опция. (Така че можете да тествате, преди даден сайт да започне да работи.)
Разработчикът на инструмента, Мат Керсли, го е предоставил на Github.
Цена: безплатно
9. Designmodo-отзивчив тест
Чувствителният тест на Designmodo може да бъде един от най-добре изглеждащите инструменти за тестване на дизайна на вашия уебсайт. Тя включва много лесни превключватели, много опции на устройството и чист интерфейс като среда за гледане.
Потребителите могат също да добавят персонализирани величини и да виждат в различни насоки. Той се актуализира често с нови устройства, така че можете да тествате лесно.
Цена: безплатно
10. CrossBrowserTesting
CrossBrowserTesting е първокласен инструмент, който предлага ръчно и автоматизирано тестване. Потребителите могат да пускат ръчни, визуални и Selenium тестове в облака на повече от 1500 истински настолни и мобилни браузъри.
Инструментът е силно мащабируем - дори за операции на ниво предприятие. Той е лесен за внедряване, включва инструменти за отстраняване на грешки, работи на редица браузъри, версии и устройства и има стабилна тестова конфигурация, така че можете да намерите проблеми в теста, преди да станат големи проблеми.
Цена: Плановете започват от $ 29 на месец
заключение
Имате ли любим инструмент, който не е в този списък? Споделете го с нас. Обичаме да виждаме инструменти, за които не знаехме.
Както при всеки инструмент за дизайн и разработка на уебсайтове, добре е да играете с няколко опции, преди да се установите само върху едно нещо. Повечето от тези инструменти могат да ви помогнат да разберете дали вашият дизайн работи, но всички работят по малко различни начини и имат различни нива на потребителски контрол. Играйте наоколо и намерете най-удобния за вас.
