Мобильный интернет ещё в 2016 году обогнал ПК, но до сих пор многие старые сайты не оптимизированы под мобильные устройства, более того, многие создают и сегодня версии сайтов, которыми удобно пользоваться лишь с ПК.
Стоит признать, что учитывать особенности мобильных устройств сегодня просто необходимо. Меньшие разрешения экрана, отсутствие клавиатуры и мыши — всё это представляет трудности при просмотре с мобильных устройств типовой модели сайта формата 1280 на 720. Из-за меньших разрешений и тактильного управления надлежит упростить навигацию, макет и содержимое ради удобного просмотра сайта. Еще больше осложняет дело разнообразие мобильных устройств, из-за которого отдельное разрешение или разновидность интерфейса может неправильно отображаться на некоторых устройствах или платформах. К счастью, есть варианты, помогающие решить такую сложную задачу. Каждый со своими проблемами и плюсами, рассмотрим их.
Отдельный мобильный сайт
Первое вероятное решение сейчас несколько устаревшее, но имеет свои выгоды.
Для отдельного мобильного сайта создается специальный набор кода и ресурсов. Данный вариант позволяет запрограммировать особые возможности мобильных устройств. Версия для мобильных устройств может иметь упрощённый интерфейс, урезанный функционал, а значит и скорость загрузки сайта возможно вывести на приемлемый уровень, хотя с сожалением стоит признать, не все преследуют эту цель.
Недостатки:
Основная проблема — согласованность. Обновление кода/контента одной версии сайта требует обновления кода/контента другого сайта, а невыполнение этого приводит к вопиющим проблемам с форматом отображения содержимого. Кроме того, поддержание двух версий сайта требует вдвое больше сотрудников.
Вторая проблема – поисковая оптимизация. Контент дублируется, а из-за разных URL двух сайтов индексация и поисковый ранг одного сайта не помогает другому.
Вывод – если вы не планируете всё время держать в штате команду разработчиков, которая будет поддерживать обе версии сайта, не используйте отдельный мобильный сайт. Некогда Google рекомендовал его, пока не распространился отзывчивый веб-дизайн. Избавьте себя от мучений и рассмотрите более простые, гибкие и удобные решения.
Специфичный для устройства HTML
Специфичный для устройства HTML является одним из удобных решений. Основа данного подхода — заголовок HTTP — Vary. Команда Vary указывает сайту учесть агент пользователя при определении применяемого формата сайта. Это позволяет использовать два набора кода HTML с некоторыми общими ресурсами, отображаемыми исходя из потребностей пользователя.
К тому же, общий URL двух версий сайта положительно влияет на позиции в поиске. Общая индексация и поисковый ранг обеих версий означает, что подходящий формат будет легко доступен через обычные каналы поиска, уменьшая путаницу, вносимую отдельным решением.
Недостаток данного решения состоит в том, что требует под собой всегда актуального списка агентов пользователей (user-agent), чтобы каждому устройству (и устаревшим в том числе) всегда выдавался нужный формат сайта. Кроме того, для грамотной реализации данного решения иногда требуется провести дополнительную настройку сервера.
Адаптивный веб-дизайн
Несколько похож на предыдущий, но устройства определяются через браузер пользователя, и уже далее выполняются дополнительные запросы к серверу со стороны клиента для загрузки и применения соответствующего макета сайта.
Минус тот же — необходимость разработки макетов под различные устройства, правильная идентификация этих устройств, коих может быть великое множество (от планшета до умных часов).
Отзывчивый дизайн (респонсивная вёрстка)
При громадном количестве платформ и устройств даже специфичный для устройства HTML не гарантирует корректное отображение сайта. Поэтому был придуман подход под названием “отзывчивый дизайн“ (он же респонсивный дизайн, он же резиновый). Это решение основывается лишь на размерах области просмотра устройства, но никак не на самом устройстве или его операционной системе. Разрабатывается один общий макет, а через специальные стили (CSS) задаётся определённый набор правил масштабирования и расположения элементов относительно друг друга, исходя из текущего размера области просмотра и текущей ориентации (вертикальное или горизонтальное положение).
На практике это означает более согласованный интерфейс для посетителей и меньше мучений для веб-разработчиков. Обновление ресурса из одного места экономит людские ресурсы и избавляет от досадных несоответствий.
Выбирайте из перечисленных вариантов тот, который лучше всего отвечает конкретным требованиям вашего бизнеса. Оцените имеющееся у вас число сотрудников и их квалификацию, прежде чем выбрать то или иное решение. Стоит лишь заметить, что наиболее популярен сейчас именно респонсивная верстка сайта. Причём делают в первую очередь макет для мобильных устройств, и лишь затем подгоняют его под ПК. В результате чего, как вы уже могли заметить, ПК-версии макетов зачастую просто копируют макеты мобильных устройств (иногда от желания следовать принципам минимализма, иногда от банальной лени разработчиков формировать новые элементы под большие экраны).
