7 чудесни инструмента за тестване на вашия отзивчив уеб дизайн

Всеки съвременен уеб дизайнер трябва да знае принципите на отзивчивия уеб дизайн - как да накарате сайтовете ви да се изобразяват перфектно на каквото и да е устройство или размер на екрана. (Ако имате нужда от опресняване, разгледайте нашия професионално ръководство за отзивчив уеб дизайн ).

Но теорията е едно, а практиката е друго. За да сте сигурни, че сайтът ви отговаря напълно, всъщност трябва да го тествате на различни устройства.

Повечето от нас обаче нямат бюджета, за да се доберат до стотиците физически устройства, от които се нуждаете, за да извършите тест от реалния свят. Но не се страхувайте! Тези инструменти осигуряват половин път, като ви позволяват да тествате отзивчивите си проекти във виртуална среда.



01. Отговорник

Вижте как изглежда вашият сайт в различни изгледи с Responsinator

Вижте как изглежда вашият сайт в различни изгледи с Responsinator

Красотата на Responsinator се крие в неговата простота. Просто въведете URL адреса на вашата уеб страница и този безплатен, базиран на браузър инструмент ви показва как вашата уеб страница се изобразява в най-популярните форми и размери на екрана.

Блестящо, след това можете да взаимодействате със страницата си, като щраквате върху връзки, пишете в полета за търсене и така нататък. Имайте предвид, че това са общи устройства, но не конкретни.

imac срещу macbook pro за редактиране на видео

02. Screenfly

Проверете как вашият уебсайт се появява на различни устройства, включително телевизори, с Screenfly

Проверете как вашият уебсайт се появява на различни устройства, включително телевизори, с Screenfly

Screenfly е безплатен инструмент за тестване на уебсайт на различни размери на екрана и различни устройства. Той съществува от няколко години, но все още е популярен и върши работата си изключително добре.

Просто въведете своя URL адрес, изберете устройството и размера на екрана от менютата и ще видите колко добре работи уебсайтът ви върху него. Препоръчаните устройства включват настолни компютри, таблети, телевизори и смартфони.

03. Режим на устройство на Google DevTools

DevTools Device Mode емулира различни устройства в Chrome

DevTools Device Mode емулира различни устройства в Chrome

Устройственият режим на DevTools предлага лесен начин за разработчици да симулират мобилни устройства в браузъра Chrome. Използвайте го, за да научите как изглежда вашият сайт при различни размери на екрана и резолюции, включително екрани на Retina.

Можете дори да симулирате входове на устройството за докосване, геолокация и ориентация на устройството в емулатора.

лесни рисунки за рисуване с молив

04. Google Resizer

Resizer ви помага да установите точки за прекъсване на материалния дизайн за вашия отзивчив сайт

Resizer ви помага да установите точки за прекъсване на материалния дизайн за вашия отзивчив сайт

Указанията на Google за материален дизайн включват съвети относно използването на точки на прекъсване, отзивчиви мрежи, поведение на повърхността и модели на потребителски интерфейс. И миналата година пусна безплатен инструмент, за да можете да видите как изглежда следването на това ръководство на устройства от реалния свят.

Google Resizer ви позволява да въведете персонализиран URL адрес и да прегледате сайт през точките за прекъсване на Material Design за настолни компютри и мобилни устройства. Ако искате първо да видите демонстрация, щракнете върху адресната лента и изберете „ Песто ' или ' Храм ’От падащото меню.

05. Ghostlab

Фокусът на Ghostlab е върху едновременното тестване на куп устройства и браузъри

Фокусът на Ghostlab е върху едновременното тестване на куп устройства и браузъри

Приложение за тестване на платени уебсайтове, Ghostlab ви позволява да тествате уебсайта си едновременно в множество браузъри и мобилни устройства. Започнете да тествате в един браузър или устройство и всички останали ще отразяват вашите действия, независимо дали щраквате върху връзки, избирате бутони, попълвате формуляри или презареждате страницата.

артикули за изкуство, които всеки художник трябва да има

Лесно можете също така да вземете screengrab от всяко устройство, да го анотирате и да го плъзнете и пуснете в своя инструмент за проследяване на грешки. Вижте го в действие в това видео .

06. Браузър стек

Browser Stack е платен инструмент за тестване, насочен към предприятието

Browser Stack е платен инструмент за тестване, насочен към предприятието

Browser Stack е един от най-модерните, пълнофункционални инструменти за тестване наоколо. Платеното приложение предлага достъп до повече от 1000 мобилни и настолни браузъри за целите на тестването, списък, който непрекъснато се актуализира, въз основа на пазарните тенденции и статистически данни за използването, базирани на 36 000 клиенти на Browser Stack.

С потребители, включително Twitter, Microsoft, AirBnB и Mastercard, очевидно прави нещо правилно.

07. CrossBrowserTesting

CrossBrowserTesting предлага огромен набор от реални устройства и функции за тестване

Хари Потър и проклетото лого на детето
CrossBrowserTesting предлага огромен набор от реални устройства и функции за тестване

Най-големият съперник на Browser Stack в тестовото пространство е CrossBrowserTesting, който предлага над 1500 браузъра и устройства, за да тествате вашия отзивчив уебсайт.

Неговата многофункционална платформа ви позволява да провеждате паралелни автоматизирани тестове, да сравнявате визуални снимки на екрани, да плъзгате и да взаимодействате с вашия уебсайт на устройства от реалния свят и да отстранявате грешки от вашия код, докато вървите.