Проверка сайта на адаптивность: ручные и автоматизированные методы.

В статье рассказывается:

Определение адаптивности сайта
Важность адаптивности сайта в современных реалиях
9 ключевых принципов адаптивности сайта
Популярные сервисы проверки сайта на адаптивность
Проверка сайта на адаптивность в браузере
Чек-лист: Как добиваться своих целей в переговорах с клиентами

Скачать бесплатно

Проверка сайта на адаптивность будет особенно актуальна для тех порталов, чей возраст переваливает за 5–7 лет, так как требования и подходы с тех пор сильно изменились. Однако это не значит, что и более современные странички не нужно проверять, потому что никто не застрахован от ошибок при разработке.

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

Определение адаптивности сайта

Что такое адаптивность сайта (иначе адаптивный веб-дизайн)? Это возможность автоматической смены размера веб-страниц в зависимости от типа устройства, через которое они просматриваются. Проверка сайта на адаптивность сегодня осуществляется через мониторы стационарных компьютеров, экраны смартфонов, планшетов, ноутбуков — в каждом случае его страницы должны открываться корректно и быть удобными для восприятия пользователями.

Определение адаптивности сайта

Адаптивный дизайн заточен под создание сайта с разными элементами, которые будут по-разному себя вести при просмотре страниц на устройствах разных типов. В наши дни невозможно игнорировать необходимость адаптивного дизайна — это обязательное условие развития бизнеса. Клиент, который не может нормально ознакомиться с продукцией компании, потому что ее сайт не имеет мобильной версии, найдет другую возможность приобрести нужный ему товар. То есть адаптивность — это одно из условий удержания клиентов.

Рассмотрим тему подробнее. К примеру, вы смотрите традиционный «фиксированный» сайт с монитора компьютера. Он отображает три столбца. Потом вы открываете его же на планшете и видите, что сайт не помещается на экране, что заставляет вас перевернуть планшет горизонтально. Обычно это раздражает пользователей.

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

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

Важность адаптивности сайта в современных реалиях

Уже сегодня просмотры сайтов со смартфонов составляют 52,68 % относительно их общего числа (данные Яндекс.Радара). И есть основания полагать, что эта цифра будет только расти. Соответственно, неадаптированные сайты просто-напросто потеряют аудиторию ввиду невозможности их нормального просмотра, а значит, у компаний не будет лидов. Сейчас никто не желает тратить время на манипуляции с неадаптированными сайтами: это вызывает негативные эмоции и желание уйти к тому, кто заботится о своих клиентах.

При этом есть одно «но». Даже при наличии адаптивного дизайна сайт может открываться по-своему в разных браузерах и операционных системах. Допустим, в Google Chrome он выглядит нормально, а в Яндекс.Браузере открывается криво, что опять-таки влечет потенциальную потерю клиентов. То же самое может происходить с iOS и Android.

По данным нового исследования AccuraCast, монитор конвертирует на 60 % больше мобайла, а ПК-конверсии стоят на 93 % дороже мобильных (несмотря на то, что количество действий на сайтах, совершаемых именно со смартфонов, растет). При этом очень важно уделять повышенное внимание мобильному маркетингу, так как статистику портит огромное количество неадаптивных сайтов, с которыми трудно работать.

Важный момент — адаптивность существенно влияет на ранжирование сайта как в Google, так и в «Яндексе» (двух основных поисковиках в России) и его попадание в топ-30 (в случае с Google имеется связь с позицией сайта).

9 ключевых принципов адаптивности сайта

Поточность

Допустим, сайт был разработан для обычных мониторов. В браузере все выглядит красиво. Когда происходит его открытие в мобильном телефоне, блоки меняют положение, располагаются друг под другом. Это и есть поток. На данный момент без поточности сложно представить адаптивный дизайн.
Относительность единиц измерения

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

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

Расположение контрольных точек меняется в случае просмотра сайта с определенного устройства с заданными параметрами экрана. Они используются, чтобы зафиксировать элементы страницы, если они начинают смещаться.
Минимальные и максимальные значения

В ряде случаев необходимо указывать определенные свойства. Допустим, при ширине экрана менее 1000 px содержимое страницы должно отображаться во весь экран, в противном случае устанавливается максимальная ширина в 1000 px. Иначе можно столкнуться с тем, что текст на планшете смотрится нормально, но, когда вы открываете статью на большом мониторе, она растягивается на весь экран и становится нечитабельной.
Вложенность объектов

На сайте может присутствовать большое количество элементов, которые зависят от положения других блоков. Для того чтобы проконтролировать эти сложные объекты, их можно вложить в один контейнер. Однако так можно поступать с теми блоками, которые не нужно адаптировать под параметры экрана, — кнопками, логотипами и т. д.
Правильные шрифты

Шрифты нужно выбирать с учетом того, что они могут влиять на скорость загрузки страниц сайта.
Правильное использование растровой и векторной графики

Кейс: VT-metall

Узнай как мы снизили стоимость привлечения заявки в 13 раз для металлообрабатывающей компании в Москве
Узнать как

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

Макет должен иметь определенный размер. При создании сайта на базе адаптивного дизайна нужно ориентироваться на контрольные точки (параметры, передающиеся в медиафункциях). Они показывают, какое разрешение повлечет смену дизайна.

Стандартное разрешение:
- смартфоны — 320 px, 480 px;
- планшеты — 768 px;
- ноутбуки и ряд планшетов — 1024 px;
- ПК — 1280 px и более.
При этом нет жесткой привязки к определенному разрешению. Все зависит от настроек и параметров устройств. Бывает, что макет нормально отображается на мониторах и экранах в интервале 320–768 px, поэтому нет необходимости делать дополнительные макеты с промежуточным разрешением.

Когда макет ломается, то есть открывается некорректно на устройстве с определенным разрешением, точками перелома становятся фактические значения экрана этого устройства.
Медиазапросы

Сайты с адаптивным дизайном создаются с помощью media queries (медиазапросов), которые помогают определять параметры стилей, типы устройств (проекторы, смартфоны, мониторы, телевизоры и пр.) и условия.
Рекомендуемые статьи по данной теме:
Когда послан определенный запрос и получен соответствующий ответ, сайт будет отображаться на устройстве определенным образом (будут использованы соответствующие ему параметры отображения из файла стилей css).

Проверка сайта на адаптивность в браузере

Проверка адаптивности сайта онлайн может осуществляться путем его открытия на устройстве и изучения вариантов отображения элементов. Это самый простой и очевидный способ. Он позволяет понять, как обычные пользователи видят сайт на своих телефонах и планшетах, а также как он реагирует на определенные команды. Недостаток способа заключается в невозможности отследить абсолютно все варианты отображения сайта, так как устройств с разным разрешением в мире довольно много.

Проверка сайта на адаптивность в браузере

Для проверки в браузере Google Chrome нужно нажать на F12 (варианты: щелкнуть правой кнопкой мыши на экране — «Просмотреть код» в выпавшем контекстном меню; перейти в «Настройка и управление» — «Дополнительные инструменты» — «Инструменты разработчика»). Это позволит увидеть на экране, как смотрится сайт на конкретном устройстве, которое можно выбрать сверху из списка. Кроме того, есть возможность самостоятельно ввести необходимое разрешение экрана. При пользовании этим инструментом доступен даже переход по ссылкам на другие страницы сайта.

В браузере Mozilla Firefox имеется похожая опция (только искать ее нужно в нижней части экрана). Ее также можно вызвать клавишей F12. В меню инструмент находится в пункте «исследовать элемент».

Скачайте полезный документ по теме:

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

Автор статьи