{"id":14276,"url":"\/distributions\/14276\/click?bit=1&hash=721b78297d313f451e61a17537482715c74771bae8c8ce438ed30c5ac3bb4196","title":"\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0432\u0430\u0440 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u0431\u0435\u0437 \u0431\u0438\u0440\u0436\u0438","buttonText":"","imageUuid":""}

Проверяем адаптивную версию сайта в один клик без Google DevTools

При работе над дизайном сайтов для Тильды я уделяю особое внимание его адаптивной версии. Но, часто бывает так, что заказчик просто не видит этой работы, потому что проверяет одну или максимум две версии. Рассказываю, как это исправить.

Не обязательно иметь много девайсов или использовать Google DevTools для того, чтобы проверить дизайн. Достаточно установить расширение Responsive Viewer, которое существенно упрощает проверку адаптива: это удобно как для заказчиков, так и для дизайнеров.

Так чем же он лучше обычного Google DevTools?

1. Параллельный скроллинг макетов

Если делаю скролл на Айфоне, вижу, как сайт скроллится на остальных девайсах. Этот существенно экономит время при разработке дизайна, так как видишь всю ситуацию сразу

Чтобы проверить сайт в Responsive Viewer, мне понадобилось около 10 секунд

2. Сайт сразу во всех нужных расширениях на одном холсте

В DevTools мне пришлось бы либо переключаться с устройства на устройство в одной вкладке, либо открывать несколько вкладок с разными девайсами и переключаться между ними.

3. В один клик могу скрыть интерфейс расширения и смотреть макеты во весь экран

И ничего лишнего.

Ок, а как пользоваться?

  1. Переходите на свой сайт и кликаете на иконку Responsive Viewer в строке расширений
  2. Добавляете устройства для просмотра: я использую 3 устройства для проверки: iPhone, iPad, MacBook
  3. Кайфуете от удобства и скорости 👌

А как вы проверяете адаптивную версию? Напишите в комментариях.

Ставьте «+1» и добавляйтесь в друзья, если было полезно!

0
65 комментариев
Написать комментарий...
Michael Solar

Тут голову ломаешь на чем лучше сделать, на django или asp core, хотя и drupal с лихвой покрывает большинство задач, а тут делают сайт на тильде и считают, что делают сайт ))

Ответить
Развернуть ветку
Илона Кравченко
Автор

У каждого проекта свои цели, задачи и сроки. И иногда ну просто нецелесообразно делать сайт с помощью кода. Говорю это и как дизайнер, и как человек, который работал с десятками стартапов, зная, как это всё работает изнутри.

Ответить
Развернуть ветку
7 комментариев
Evil Pechenka

Ужасная ловушка в которую технически грамотные люди затаскивают бизнес: человеку достаточно Wordpress или Tilda для решения 100% задач, а его затаскивают на Laravel или 1C с учётом «перспективы». Перспектива не наступает, зато время разработки улетает в космос, цена догоняет. И всё это никому не нужно.

Вижу такое постоянно. 

Ответить
Развернуть ветку
22 комментария
Mike Kosulin
на django или asp core, хотя и drupal с лихвой покрывает большинство задач

ну так же и тильды с лихвой покрывает кому-то.
Протестировать что-то перед запуском и тильды хватит. Лендосы пилить в уже существующем продукте тоже будет быстрее с любым конструктором. Да, они будут возможно кривее/медленнее по скорости работы, но точно быстрее по созданию 

nocode решений в целом полно.

Ответить
Развернуть ветку
2 комментария
Артем Перевалов

А почему проекты на тильде не считаются сайтами?

Ответить
Развернуть ветку
2 комментария
Mikhail Bajenov

для недвиги например отличный вариант под ежемесячные обновления утп, конверсия с лендоса на тильде была овердохуёвая

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Yes, Your Grace

Ну хз, я не нашёл, где врубить одновременную прокрутку, которая есть, например, в https://responsively.app/

Ответить
Развернуть ветку
Илона Кравченко
Автор

Спасибо!

Ответить
Развернуть ветку
Eugene Danilov

В macOS Safari это нативная функция

Ответить
Развернуть ветку
Alexey Rusanov

Нативная функция - какая? Видеть несколько резолюшенов на канвасе с параллельным скроллом?

Ответить
Развернуть ветку
2 комментария
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Максим Пряник

Когда выпил, т9 включай

Ответить
Развернуть ветку
Илона Кравченко
Автор

И вообще, споры по поводу сайтов на Тильде — это целая отдельная ветка для обсуждений...

Ответить
Развернуть ветку
Максим Пряник

Да какие тут споры могут быть - одностраничный тест гипотезы да пожалуйста, seo и что то более менее сложное - гавно лютое.

Ответить
Развернуть ветку
9 комментариев
Вадим Д.

Тоже давненько пользуюсь, очень удобно, полностью согласен с автором заметки.

Ответить
Развернуть ветку
Nickolai Vasiliev

До сей статьи в Хроме использовал Ctrl-Shift-I

Ответить
Развернуть ветку
Сергей Александрович

Открою тайну, это проверка на разных разрешениях, но не на разных устройствах. Сервисы проверки на разных устройствах стоят денег и не эмулируют, а реально проверяют на устройстве.

Ответить
Развернуть ветку
Anton Kuzmin

Спасибо за совет!

Ответить
Развернуть ветку
FTOH

Не на всех сайтах работает

Ответить
Развернуть ветку
Александр

Маловато так проверять адаптивность верстки, для более точного результата в разных ОС и на устройствах нужен эмулятор. Ловите ссылку https://app.lambdatest.com/console/realtime
На free аккаунте можно сделать десятки тестов и быть уверенным, что например яблочники увидят тоже самое, что и пользователи с андройдов, хотя конечно здесь идёт речь не только об адаптивности, но и вообще о верстке в целом. Бизнес с тильдовскими сайтами может жутко обломаться, ибо сайты на тильде как правило идут с кривой версткой, у некоторых брейкпоинты могут ломать верстку, например на iPhone в Safari, если без верстальщика делался сайт на тильде и на странице множество элементов верстки, то почти наверняка сайт на тильде окажется кривым.

Ответить
Развернуть ветку
Bela Lugosi's Dead
Сайт сразу во всех нужных расширениях на одном холсте

в чат входит представитель секты отличия расширения от разрешения (и аутентификации от авторизации)

поправь, пожалуйста

Ответить
Развернуть ветку
62 комментария
Раскрывать всегда