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

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

Сегодня большая часть российских пользователей (61%) выходит в интернет с мобильных устройств, а 35% —исключительно с мобильных. Поэтому адаптировать сайт под смартфоны и планшеты не просто можно — это обязательно.

Android — 50.6%
Windows 7 — 16.9%
Windows 10 — 12.7%
iOS iPhone — 10.8%
Windows — 8 3.2%

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

Сайт, который динамически подстраивается под характеристики устройства, называется адаптивным. Адаптивная верстка меняет дизайн страницы в зависимости от платформы, разрешения и ориентации экрана. Благодаря такой верстке, не нужно делать отдельную версию сайта для каждого разрешения экрана. Вместо этого один дизайн сам подстраивается под характеристики устройства. Адаптивная верстка сайта делается с помощью стилей CSS и языка разметки HTML5.

Почему важно использовать адаптивный дизайн

Адаптивность сайта влияет на позицию сайта в поисковой выдаче. Поисковые системы учитывают оптимизацию под мобильные устройства при ранжировании результатов поиска. Для пользователей смартфонов и планшетов в мобильном поиске Яндекса и Google адаптированные сайты помечаются специальной отметками mobile-friendly в Гугл и «мобильная версия» в Яндексе. Им отдается предпочтение при ранжировании поисковой выдачи.

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

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

Как сделать сайт адаптивным на все экраны

Создание адаптивного сайта базируется на нескольких принципах:

1Использование мета-тега. Если сайт использует адаптивную верстку, то он должен сообщить об этом браузеру. Этот код сообщает браузеру, что ширина контента должна быть равна ширине экрана браузера, а значит и страницы, а также контролирует масштаб при загрузке страницы.

2Медиа-запросы. Это правила, в которых указывается, для какого типа устройства будут применяться данные CSS стили. В них может писать разрешение экрана, тип устройства (print, screen), ориентация, соотношение сторон экрана и другие условия. Можно прописать правила сразу для нескольких устройств.
Самые популярные разрешения экрана: 320px, 480px, 600px, 768px, 900px, 1024px, 1200px. Например, можно прописать отдельный набор CSS параметров для экранов с шириной 480px, а другой — для экранов 1024px.

3Гибкая сетка. Это разметка сайта, где размер и расположение элементов подстраивается под ширину экрана. То есть используются относительные размеры, а не абсолютные. Размеры изображений, таблиц, текстовых блоков и других элементов на странице указываются не в пикселях, а в процентах. Расположение, масштаб, координаты блока задаются относительно какого-то элемента, например, верхней границы.
Например: ширина главного блока на сайте, где располагается основной контент, равняется 650 пикселям. А ширина боковой колонки: 350 px. При верстке адаптивного макета эти размеры будут указаны в процентах: 65% и 35% соответственно.

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

Проверка адаптивности сайта

Cамый простой и быстрый способ провести тест адаптивности сайта — открыть сайт на компьютере в обычном браузере и постепенно сужать мышкой размер окна. Адаптивный сайт подстроится под размер окна и перейдет в мобильный формат.

Разработка SEO-сайтов с пожизненной гарантиейСоздаем невероятные SEO-сайты, оптимизированные по 69 параметрам уже на этапе разработки

Еще один способ — это открыть сайт в Google Chrome на компьютере и нажать F12. Вверху появится панель с настройками разрешения экрана, масштаба, модели смартфона. Меняя эти параметры, можно увидеть, как выглядит сайт на разных устройствах.

Или же можно воспользоваться специальными сервисами. Например, в Google Search Console есть инструмент проверки оптимизации для мобильных устройств. Там нужно просто ввести адрес сайта и получить результат.

В Вебмастере также инструмент проверки адаптивности — «Проверка мобильных страниц».

Другие сервисы проверки адаптивности сайта: Quirktools, Aresponsivedesign.is, Deviceponsive.

Если после проверки адаптации сайта под мобильные устройства обнаружилось, что ресурс неадаптивный и плохо показывается на смартфонах, то логичнее и экономнее всего — сверстать новый шаблон. Само содержание сайта останется прежним, но на него будет сделан новый адаптивный дизайн. Это проще и эффективнее, чем пытаться «исправить» статичный сайт. Цена такой услуги составляет примерно 30-50% цены нового сайта.