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

Алексей Думчев
23 Марта 2020 г, 17:17
   34

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

Как можно проверить корректность адаптации на мобильные устройства

Самый простой вариант проверить оптимизацию мобильной версии сайта – зайти на него с мобильного устройства. Это может быть планшет или смартфон. Среди явных признаков проблем стоит выделить следующее:

  • Какие-то части сайта (таблицы или картинки) не помещаются в экран целиком.
  • Все чрезмерно мелкое, не удается с первого раза попасть пальцем по нужной ссылке или кнопке.
  • Приходится прокручивать несколько экранов шапки, чтобы добраться до нужной части сайта.
  • Всплывающие баннеры занимают более 50% экрана, либо рекламы попросту слишком много.

Возможно, смартфона под рукой у вас нет. В таком случае изучить мобильную адаптацию сайта можно с помощью онлайн-сервисов с ПК.

Яндекс Вебмастер и Mobile Friendly от Google

Оптимизацию сайта под смартфоны можно проверить с помощью инструмента «Проверка мобильных страниц» в Яндекс.Вебмастере. Ваш сайт уже должен быть добавлен в Вебмастер. Укажите системе нужный сайт, нажмите «Проверить» и перед вами высветится результат.

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

Похожим образом работает инструмент Mobile Friendly. Укажите адрес веб-ресурса, нажмите кнопку «Проверить» и вам высветится результат. Если страница не оптимизирована для мобильных устройств, сервис укажет вам на это. Например, слишком маленький шрифт, контент шире экрана, интерактивные элементы слишком близко друг к другу и т.д.

Эмуляция гаджета в инструментах разработчика в популярных браузерах

Еще один вариант проверки отображения сайта на телефонах – использование «Инструментов разработчика» в браузере. Для этого в своем браузере зайдите в пункт «Дополнительные инструменты», далее выберите инструменты для разработчика.

адаптация сайтов

На клавиатуре нажмите Ctrl+Shift+I. Если такое сочетание не сработало, нажмите F12. Справа или внизу браузера высветится Панель разработчика. На ней кликните иконку переключения на мобильники и укажите модель смартфона, с которой хотите изучить свой веб-ресурс.

Последний вариант проверки оптимизации сайта под мобильные устройства и планшеты - самостоятельная проверка с собственного гаджета. Для этого просто зайдите на нужный сайт со смартфона.

Механика улучшения

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

Если макет сайта для мобильных у вас пока отсутствует, вы можете обратиться к следующим специалистам:

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

Вы можете сделать адаптированную версию самостоятельно. Если вы обладаете пониманием, что хотите получить в итоге, то можете на словах или рисунках расписать для верстальщиков или дизайнеров ТЗ. Сделать это можно даже в Ворде.

Процедура адаптации

Чтобы грамотно адаптировать сайт под смартфоны, нужно соблюдать строгий алгоритм действий.

Тег Viewport

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

Если тег viewport указан не будет, браузер по умолчанию посчитает ширину контента равной стандартной ширине десктопного устройства. На телефоне с меньшей шириной пикселей контент будет урезан в 3 раза.

Обновление стилей сайта

Следующий важный момент – обновление стилей веб-ресурса. Возьмите макеты сайта для смартфонов и планшетов и добавьте в стили сайта дополнительные требования для демонстрации блоков на разной ширине экрана. В этом случае браузер будет осматривать ширину устройства и дополнительно применять необходимый блок правил для показа сайта.


Дополнительные стили помогут:

  • Сократить количество блоков в одном ряду. Если на ПК умещаются аж 4 блока в ряд, то очевидно, что на мобильном будет только 1 блок в вертикальном ряде.
  • Скрыть какие-то блоки. Товар имеет внушительное описание, занимающее весь экран компьютера. На телефоне такое описание займет до 10 экранов. Чтобы не нагружать пользователя, покажите ему первый абзац, а остальной текст спрячьте под ссылку «показать все».
  • Изменить размеры элементов. Уменьшать нужно картинки, отступы между блоками текста, чрезмерно крупные заголовки и размеры кнопок.
  • Добавить горизонтальную прокрутку таблицам. Если в таблице много столбцов, она не поместится на экране телефона. В такой ситуации добавьте правила, чтобы таблицы можно было прокрутить влево-вправо на узких экранах.

Как видим, изменение основных стилей здорово поможет в создании качественной мобильной версии сайта.

Доработка дизайна веб-ресурса

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

адаптив сайтов

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

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

Сокращение объема контента

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

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

Сокращение количества рекламы

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

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

А что вы думаете по этому поводу? Давайте обсудим в комментариях!

Понравилась статья? Получай свежие статьи первым по e-mail.
Подпишитесь на обновления:
Оцените статью:
Поделиться:
Оставить заявку