Принимая работу или выискивая моменты для улучшения своего сайта хочется относительно быстро и без лишних затрат проверить как выглядит наш инструмент на мобильных устройствах.
Что использовать
В Интернете имеется много приложений, которые за несколько секунд/минут сгенерируют скриншоты Вашего сайта на большом количестве устройств. Правда, это не совсем быстро, учитывая поиск, регистрацию и авторизацию на этих ресурсах. Это удобно, если у вас несколько сайтов и вы постоянно их улучшаете. Или если вы хотите отслеживать изменения в процессе работы над адаптивной/мобильной версией.
Вариант, установить себе эмуляторы различных устройств на ПК, тоже не самый простой способ проверить сайт, как и обложиться различными устройствами. Хотя этот вариант будет наиболее точный.
Самый быстрый, но не самый эффективный способ проверить свой сайт – это перевести свой браузер в оконный режим, и потягать мышкой за его край. Неэффективность этого способа заключается в том, что браузер будет перерисовывать все открытые вкладки и в какой-то момент начнет тормозить. Ещё в стандартном окне браузера будет учитываться боковая полоса для пролистывая (Scroll bar), которая на мобильных устройствах не влияет на размер окна и отображаемых элементов.
Самый же простой и быстрый способ проверить свой сайт на адаптивность – это использовать встроенный инструмент браузера.
Этот способ не даёт 100% точности в определении проблем с функциональностью, но с его помощью можно достаточно быстро и безболезненно посмотреть, как выглядит Ваш сайт практически на любом разрешении экрана.
Запустить инструмент можно достаточно быстро в Firefox, Google Chrome и ему подобных браузерах. На MacOS в Safari этот инструмент тоже есть, только его нужно сначала отобразить в меню. В Internet Explorer работать с этим инструментом не просто, но тоже можно.
Во всех браузерах, работающих на системе Windows, инструмент запускается клавишей F12. Также работает комбинация Ctrl+Shift+i.
Не стоит пугаться большого количества открывающихся панелей и кода в них. Если они отвлекают, мешают или пугают, то их можно ужать до приемлемого размера при помощи мыши, потянув за край блока. Для проверки адаптивной версии нужна будет всего одна кнопка, которая переключит окно Вашего браузера в режим проверки адаптивной версии сайта.
Чтобы сразу посмотреть адаптивность сайта В Firefox работает комбинация клавиш Ctrl+Shift+m. В Google Chrome она тоже работает, но только после открытия Chrome Dev Tools (F12)
После освоения этого не хитрого шаманства можно начинать играться с разрешениями экрана и принимать работу верстальщика.
В Firefox мобильное окно можно растягивать как хочется с любого заданного разрешения, и там же можно делать скриншоты того, что обнаружили одной кнопкой
В Google Chrome и ему подобных браузерах, а так же в последних версиях Firefox, есть уже предустановленный список популярных устройств.
Это удобно для тех, кто не хочет заморачиваться с реальными размерами экранов телефонов или планшетов. Для того, чтобы самостоятельно выбирать размеры экрана и смотреть точки перехода в адаптивном дизайне нужно выбрать в списке пункт «Responsive».
На что обращать внимание
В первую очередь стоит обращать внимание на удобство восприятия информации. Нет ли узких текстов, больших отступов, все ли элементы видны на странице, нет ли горизонтальной прокрутки.
Нужно, так же, оценивать дизайн в целом. Как смотрится, все ли маркетинговые инструменты хорошо видны, доступны ли элементы конверсии. На элементы конверсии, такие как цена, кнопки заказа, контакты, стоит обращать более пристальное внимание.
Стоит проверить чтобы нажимались все видимые ссылки. Иногда бывает, что во время адаптации некоторые блоки наслаиваются друг на друга и тогда ссылки могут не нажиматься.
Если у каких-то элементов есть разные состояния/тексты в зависимости от действий пользователя или других обстоятельств (например, наличие товара на складе) стоит проверить все состояния.
Можно так же проверить работоспособность элементов со скриптами (меню, карусели и пр.). Проверка не даст 100% гарантии, что эти элементы будут работать на реальных устройствах. Но если элементы не работают в браузере во время проверки, то очень большая вероятность, что они не будут работать и на устройстве.
Что дальше?
А дальше, после того как всё отсмотрели в браузере, исправили ошибки, сделали большие кнопки «купить», берём реальные устройства и тестируем работу своего сайта на нём. Смотрим что удобно, что не удобно, т.к. опыт взаимодействия с сайтом на компьютере и на телефоне иногда очень сильно отличается.
На этом, пожалуй, всё. Хорошей Вам адаптивной версии и удачи в проверке её полезности!
PS:> Ещё можно прочитать про то, что нужно знать, чтобы самому адаптировать свой сайт, и с чего стоит начать продумывание адаптивной версии своего сайта.
PS2:> Вы всегда можете обратиться к нам, если нужна профессиональная помощь или консультация по адаптации Вашего сайта.