Responsive design - или же, адаптивность вашего сайта

Хорошая, но для кого то скучная тема поста. Я очень много раз ошибался просто не делая хороший адаптив, он тоже требует длительного времени как для проверки, так и для исправлений.

И в адаптивность желательно включить вообще все, даже простое добавление мобильной версии далеко не финальный результат. Ведь у потенциальных пользователей вашего проекта существует бесконечное множество устройств: маленькие, большие телефоны, планшеты, ноутбуки, или же просто огромные мониторы.

Все это проверять в ручную - пиздец полный. Поэтому я и хотел найти инструмент делающий адаптив за меня.

Пошёл искать скиллы и плагины на GitHub. И нашёл инструменты, из которых можно собрать довольно удобный процесс.

1. Web Design Reviewer - описывает порядок работы: открыть сайт на разных размерах экрана, найти места, где всё поехало, исправить код и проверить ещё раз.

2. Impeccable - это более крупный проект для работы с дизайном сайта. У него есть отдельная команда adapt как раз для адаптации под разные экраны.

Она предлагает агенту не просто уменьшить десктопную версию, а пересмотреть сетку, навигацию и порядок контента на телефоне. Ещё проверить, удобно ли нажимать на кнопки и не завязано ли что то важное на наведение мышью.

3. Responsively App - это браузер, в котором сайт можно одновременно смотреть на нескольких устройствах. Нажимаешь на элемент в одном окне - действие повторяется в остальных. Можно быстро сравнить экраны и сделать снимки, после чего скинуть их агенту и исправить все недочеты.

Но даже если вы установите эти инструменты, косяки все равно будут, так что просматривать все же придется все самостоятельно! Еще увидимся.