Методы создания мобильных версий сайтов

Как известно, в последнее время для поисковых систем (Google, Яндекс) важно наличие мобильной версии сайта. Преимущества объясняются тем, что для пользователей, зашедших с мобильных устройств, ранжироваться выше будут те сайты, которые имеют мобильную версию, нежели обычные. Стоит заметить, что ресурс в выдаче на ПК никаких существенных плюсов не получает, но использование гаджетов с каждым годом растет и, соответственно, доля в поиске тоже. Наверняка большинство владельцев собственных сайтов желают охватить как можно больший процент гостей с поисковых систем.

Методы создания мобильных версий сайтов

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

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

В данном случае устройству (компьютеру, планшету, мобильному телефону, телевизору) отправляется с сервера один и тот же код HTML с адаптированной областью просмотра, полученной с помощью CSS3. Наиболее популярный и менее затратный по времени способ.

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

• Более предпочтительный метод для Google.
• Удобство разработки видимого контента, основываясь на изначальном содержимом веб-страницы.
• Один URL, благодаря чему не потребуется настраивать перенаправление (редирект).
• Сохранность контента и HTML разметки.

Недостатки

• Большой вес страниц сайта из-за невозможности заменить объемные элементы на более облегченные.
• Невозможность с адаптивной верстки перейти на обычную десктопную версию сайта.

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

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

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

• Сохранность одного URL для сайта.
• Структура навигации и представления контента может быть по разному настроена на тот или иной вид устройства.
• Меньший объем HTML и CSS кода.
• Быстрая загрузка за счет отключения ненужных JS скриптов, смены изображений и пр.

Недостатки

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

Отдельный мобильный сайт на поддомене

Система определяет устройство зашедшего на сайт пользователя и отправляет на нужную страницу с помощью переадресации HTTP и HTTP-заголовка Vary. Наиболее распространенная практика с использованием двух различных адресов: домена верхнего уровня для основной версии сайта (site.ru) и поддомена с мобильной версией (m.site.ru).

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

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

Недостатки

• Более затратный по времени способ.
• Необходимость настраивания редиректов и мета-тегов rel="alternative" и rel="canonical" во избежании дублированного контента.
• Соответствие количеству веб-страниц: если пользователь будет автоматически перенаправлен на мобильную версию страницы, а ее не существует, с большой вероятностью он покинет сайт.
• Большее время загрузки страницы из-за необходимости определения устройства и редиректа на нужную версию.

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

 899 total views,  1 views today