7 чудесни инструмента за тестване на вашия отзивчив уеб дизайн
Всеки съвременен уеб дизайнер трябва да знае принципите на отзивчивия уеб дизайн - как да накарате сайтовете ви да се изобразяват перфектно на каквото и да е устройство или размер на екрана. (Ако имате нужда от опресняване, разгледайте нашия професионално ръководство за отзивчив уеб дизайн ).
Но теорията е едно, а практиката е друго. За да сте сигурни, че сайтът ви отговаря напълно, всъщност трябва да го тествате на различни устройства.
Повечето от нас обаче нямат бюджета, за да се доберат до стотиците физически устройства, от които се нуждаете, за да извършите тест от реалния свят. Но не се страхувайте! Тези инструменти осигуряват половин път, като ви позволяват да тествате отзивчивите си проекти във виртуална среда.
01. Отговорник
Красотата на Responsinator се крие в неговата простота. Просто въведете URL адреса на вашата уеб страница и този безплатен, базиран на браузър инструмент ви показва как вашата уеб страница се изобразява в най-популярните форми и размери на екрана.
Блестящо, след това можете да взаимодействате със страницата си, като щраквате върху връзки, пишете в полета за търсене и така нататък. Имайте предвид, че това са общи устройства, но не конкретни.
02. Screenfly
Screenfly е безплатен инструмент за тестване на уебсайт на различни размери на екрана и различни устройства. Той съществува от няколко години, но все още е популярен и върши работата си изключително добре.
Просто въведете своя URL адрес, изберете устройството и размера на екрана от менютата и ще видите колко добре работи уебсайтът ви върху него. Препоръчаните устройства включват настолни компютри, таблети, телевизори и смартфони.
03. Режим на устройство на Google DevTools
Устройственият режим на DevTools предлага лесен начин за разработчици да симулират мобилни устройства в браузъра Chrome. Използвайте го, за да научите как изглежда вашият сайт при различни размери на екрана и резолюции, включително екрани на Retina.
Можете дори да симулирате входове на устройството за докосване, геолокация и ориентация на устройството в емулатора.
04. Google Resizer
Указанията на Google за материален дизайн включват съвети относно използването на точки на прекъсване, отзивчиви мрежи, поведение на повърхността и модели на потребителски интерфейс. И миналата година пусна безплатен инструмент, за да можете да видите как изглежда следването на това ръководство на устройства от реалния свят.
Google Resizer ви позволява да въведете персонализиран URL адрес и да прегледате сайт през точките за прекъсване на Material Design за настолни компютри и мобилни устройства. Ако искате първо да видите демонстрация, щракнете върху адресната лента и изберете „ Песто ' или ' Храм ’От падащото меню.
05. Ghostlab
Приложение за тестване на платени уебсайтове, Ghostlab ви позволява да тествате уебсайта си едновременно в множество браузъри и мобилни устройства. Започнете да тествате в един браузър или устройство и всички останали ще отразяват вашите действия, независимо дали щраквате върху връзки, избирате бутони, попълвате формуляри или презареждате страницата.
Лесно можете също така да вземете screengrab от всяко устройство, да го анотирате и да го плъзнете и пуснете в своя инструмент за проследяване на грешки. Вижте го в действие в това видео .
06. Браузър стек
Browser Stack е един от най-модерните, пълнофункционални инструменти за тестване наоколо. Платеното приложение предлага достъп до повече от 1000 мобилни и настолни браузъри за целите на тестването, списък, който непрекъснато се актуализира, въз основа на пазарните тенденции и статистически данни за използването, базирани на 36 000 клиенти на Browser Stack.
С потребители, включително Twitter, Microsoft, AirBnB и Mastercard, очевидно прави нещо правилно.
07. CrossBrowserTesting
Най-големият съперник на Browser Stack в тестовото пространство е CrossBrowserTesting, който предлага над 1500 браузъра и устройства, за да тествате вашия отзивчив уебсайт.
Неговата многофункционална платформа ви позволява да провеждате паралелни автоматизирани тестове, да сравнявате визуални снимки на екрани, да плъзгате и да взаимодействате с вашия уебсайт на устройства от реалния свят и да отстранявате грешки от вашия код, докато вървите.
