Мобильная версия сайта и мобильная аналитика
2014 год показал самую быструю динамику увеличения доли мобильного трафика за всю историю существования интернета. Сегодня это 25% и выше, дальше - больше. Очевидно, что без адаптации сайта под просмотры с мобильных устройств сегодня не обойтись. C чего начать?
Начинать, как всегда, нужно со статистики. И Яндекс.Метрика и Google Analytics показывают мобильный трафик, приходящий на сайт, сегментируя его по типам устройств. Тщательно проанализировав свой мобильный трафик, можно понять, является ли сайт удобным для мобильных пользователей, а также разработать стратегию его продвижения в мобильном поиске.
Далее Артем назвал четыре тренда мобильной разработки: - адаптивная верстка - динамический показ - разработка мобильного приложения - мобильный сайт
Адаптивная верстка предполагает создание «резинового» макета с учетом пропорций каждого элемента, создание «резиновых» изображений, использование различных стилей в зависимости от типа устройства и размеров экрана, а также распределение приоритетов на отображение каждого элемента.
Преимущества адаптивной верстки:
1. Сайт одинаково отображается на различных типах устройств
2. Сайт имеет единую структуру и контент
3. Экономия времени на создание дополнительных версий сайта
4. Ниже вероятность допустить ошибки
5. Отсутствие переадресации снижает время загрузки
6. Экономия ресурсов при сканировании сайта роботами ПС
К минусам адаптивной верстки Артем отнес ограничения в рамках одного сайта (контент, структура, навигация, функционал), а также тот факт, что скорость загрузки контента не для всех одинакова.
Мобильная версия сайта, по мнению докладчика, должна отличаться от основной контентом, шрифтом, количеством представленных товаров, размером кнопок, навигацией, внутренним кодом и поиском по сайту.
При создании отдельного мобильного сайта, ограничения в рамках одного сайта снимаются (контент, структура, навигация, функционал), а скорость загрузки страниц оптимизируется под мобильные устройства. Среди минусов докладчик отметил необходимость продумывать текстовую оптимизацию, высокую вероятность допустить технические ошибки при реализации, дополнительные временные и материальные затраты. Техническая поддержка Google, например, рекомендует сильно не изменять контент на мобильной версии сайта, а отображать контент выборочно, ненужные элементы текста пряча с помощью display: none, к примеру. Есть и нюансы: важно не переусердствовать со скрытием контента, чтобы поисковая система не заподозрила сайт в клоакинге
Для
продвижения мобильных сайтов в поиске Яндекса Артем рекомендует использовать сервис Яндекс.Детектор, который определяет модель и характеристики мобильного устройства по заголовкам HTTP-запросов, передаваемых его браузером.
API Яндекс.Детектора показывает следующие параметры и настройки:
1. модель и производитель
2. разрешение экрана
3. разновидность используемой платформы
4. возможности Java-приложений (доступ к камере и файловой системе устройства, тип корневого сертификата и размер значка приложения)
При помощи этого инструмента, можно сделать так, чтобы каждый посетитель видел подходящую для его устройства версию сайта. Можно выборочно отображать контент пользователям разных устройств - например, создать страницу, видимую только на iOS и Android.
Продвижение мобильного сайта в Google. При
адаптивной верстке используется тег meta name="viewport", чтобы указать браузеру, как корректировать содержание страницы. Для адаптивных изображений используется элемент <picture>.
Динамический показ. HTTP-заголовок Vary, чтобы сигнализировать об изменениях в зависимости от агента пользователя. Необходимо корректное распознавание строки агентов пользователя.
Мобильный сайт. Два URL-адреса соотносятся при помощи тегов rel="canonical" и rel="alternate". Корректное определение строки агента пользователя для перенаправления на нужную версию сайта.
Для доработки мобильных сайтов Артем рекомендует использовать все инструменты,
предоставляемые Google вебмастерам -
Mobile Friendly Test,
PageSpeed Insights.
Илья Сабуров, директор производства WebProfy, представил доклад под названием
«Таможня дает добро: опыт взаимодействия веб-студии и внешнего отдела веб-аналитики», где на примере собственной компании рассказал о том, как подружить отдел аналитики и отдел разработки для проектирования сайтов, включая мобильные версии.
Источник
