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

Какой бы способ вы ни выбрали, мы настоятельно рекомендуем использовать одно доменное имя для всех вариантов сайта. Так, если обычный сайт доступен по адресу example.com, не размещайте мобильный сайт в другом домене, например a.com/example.

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

Адаптивный дизайн

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

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

Преимущества:

  • Единый URL. Благодаря единому URL пользователям легче взаимодействовать с контентом и делиться им с другими. Кроме того, поисковым системам проще обрабатывать и индексировать страницы.
  • Удобство для пользователей. Страницы адаптируются к экрану и функциям того устройства, с которого они просматриваются.
  • Динамическое изменение ориентации. Адаптивный дизайн дает возможность менять внешний вид страницы в зависимости от положения устройства (вертикальное или горизонтальное).
  • Никаких переадресаций. Благодаря этому страницы загружаются без задержек и сайт работает быстрее..

Недостатки:

  • Необходимо тщательное планирование. Поскольку используется один HTML-код, требуется тщательное планирование, чтобы он эффективно работал на разных устройствах.
  • Распространенные ошибки
    Слишком большой объем данных. Откажитесь от полноразмерных изображений – они больше подходят для крупных экранов и высокоскоростных подключений. Постарайтесь максимально сократить количество HTTP-запросов, а также объем CSS и JavaScript. Сначала загружайте видимый контент, а затем уже все остальное.

Кому подойдет этот вариант?

Адаптивный дизайн подойдет для компаний, которые стремятся создать универсальный сайт для всех устройств и у которых есть команда разработчиков, способная справиться с проектированием. Например, эта технология используется на сайтах Starbucks, PCworld и TescoBank. Благодаря адаптивному дизайну можно легко обеспечить поддержку новых устройств, появляющихся на рынке, а единый URL позволяет пользователям делиться статьями и ссылаться на них без путаницы и переадресаций.

Динамический показ

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

Преимущества:

  • Персонализация. Структура и контент подбираются для каждого устройства индивидуально.
  • Легко вносить изменения. Вы можете менять контент и макет для одного размера экрана, не затрагивая остальные.
  • Более быстрая загрузка. Разработчики могут оптимизировать контент, чтобы повысить скорость его загрузки на каждом типе устройств.
  • Единый URL. Как и в случае адаптивного дизайна, при динамическом показе используется один URL.

Недостатки:

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

Распространенные ошибки:

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

Кому подойдет этот вариант?

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

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

Третий вариант – просто создать отдельный сайт для мобильных устройств. Ваша система определяет пользователей мобильных устройств и перенаправляет их на специальный сайт (возможно, с использованием субдомена наподобие m.yourname.com). Эта версия сайта будет доступна только пользователям мобильных устройств. Пользователи планшетов, телевизоров с подключением к Интернету и других устройств будут по-прежнему видеть ваш обычный сайт.

Преимущества

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

Недостатки:

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

Распространенные ошибки:

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

Кому подойдет этот вариант?

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