Памятка по мобильному дизайну: адаптивный дизайн, динамическое обслуживание и мобильные сайты

Обновление редактора (июль 2015 г.): В апреле 2015 г. компания Google выпустила заранее анонсированное обновление алгоритма ранжирования результатов мобильного поиска. Мобильное удобство веб-сайта является подтвержденным сигналом ранжирования для мобильного поиска. Примите к сведению и сделайте свой сайт мобильным с помощью следующей статьи.

Все мы слышали статистику: 2014 год — это год, когда больше людей выходит в Интернет со смартфона, чем с компьютера или ноутбука. Мобильный дизайн — это будущее. Вы не хотите, чтобы ваш сайт остался позади, но как именно вы программируете его для этого все более мобильного Интернета? Есть три основных варианта, каждый со своими преимуществами и недостатками. В этом посте я расскажу о ваших вариантах готовности к мобильным устройствам, предоставив вам плюсы и минусы каждого из них, чтобы помочь вам выбрать лучший путь для вашего веб-сайта и стратегии SEO.

Вариант 1: Адаптивный дизайн

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

Плюсы :

1. Существует только одна версия каждой страницы. Одна и та же страница адаптируется к типу устройства, на котором она отображается (вместо того, чтобы определять тип устройства и затем отображать другой контент на его основе). Наличие одного и того же HTML и URL на всех устройствах упрощает обслуживание вашего сайта.
2. Отзывчивый дизайн не зависит от обнаружения пользовательского агента, как это делают два других варианта. Обнаружение пользовательского агента (т. е. определение того, какой браузер или устройство запрашивает веб-страницу) само по себе неплохо, но не идеально, и если в процессе возникнет сбой, пользователи могут получить неправильную версию вашего сайта. Кроме того, это избавляет пауков поисковых систем от необходимости сканировать ваш сайт как несколько разных пользовательских агентов, а это означает, что сканируется больше вашего сайта.
3. Адаптивные обычно быстрее загружаются в браузерах. Поскольку все устройства получают один и тот же контент, нет процесса перенаправления запроса-обнаружения пользовательского агента. И любой, кто когда-либо был голоден и искал хороший ресторан на своем смартфоне, знает, что скорость имеет значение.

Минусы:

1. Редизайн существующего сайта может быть долгим и интенсивным процессом. Итак, если у вас большой сайт, переход на адаптивный дизайн может быть не лучшим выбором.
2. В зависимости от макета вашего сайта может быть слишком сложно втиснуть содержимое на экран мобильного устройства. Такие сайты, как NYTimes.com, поддерживают отдельные мобильные сайты, потому что легче разбить контент, чем поместить его на одну страницу.
3. Элементы навигации не всегда корректно изменяются; Элементы наведения вообще не работают на сенсорном экране. Таким образом, переход на отзывчивость может означать изменение вашей навигации.
4. Были случаи, когда адаптивные страницы с большим количеством изображений загружались медленнее с адаптивным дизайном. Подчеркну, что это не норма, но такое бывало.

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

Вариант 2. Динамическое обслуживание

Иногда это называют «обнюхиванием» пользовательского агента. Динамическое обслуживание может осуществляться двумя способами, и его сложно реализовать. Фактически, Google описывает некоторые распространенные ошибки, допускаемые при динамическом обслуживании. Этот метод определяет агент пользователя посетителя (т. е. какое устройство он использует для просмотра вашего сайта), а затем перенаправляет на уровне сервера . Одним из способов реализации динамического обслуживания является однонаправленное перенаправление , при котором ссылки на сайт по умолчанию ведут на сайт для настольных компьютеров, но мобильные устройства перенаправляются с сайта для настольных компьютеров на сайт для мобильных устройств.

Второй тип, двунаправленное перенаправление , имеет код как на настольных, так и на мобильных сайтах, гарантируя, что любой посетитель, независимо от устройства, получит соответствующий контент. (Эти фрагменты кода иногда называют тегами коммутатора.) Реализация означает размещение тега rel="alternate" на рабочем столе, указывающего на мобильный сайт; а на мобильном сайте поместите тег rel="canonical", указывающий на сайт для ПК.

Плюсы:

1. Поскольку перенаправление выполняется на уровне сервера, вам нужен только один URL-адрес на страницу.
2. Динамическое обслуживание также хорошо работает для обычных телефонов . Согласно определению PCMag.com, многофункциональный телефон — это «мобильный телефон, который содержит фиксированный набор функций, помимо голосовых вызовов и обмена текстовыми сообщениями, но не такой обширный, как смартфон». Например, функциональные телефоны обычно не могут загружать приложения, но обычно имеют некоторые возможности просмотра веб-страниц. Согласно Google, самая большая разница заключается в том, что обычные телефоны не могут обрабатывать CSS, поэтому они не очень хорошо справляются с адаптивным дизайном. Поэтому важно знать свою аудиторию и тип мобильных устройств, которые они используют.
3. Если вы хотите иметь отдельный набор ключевых слов специально для ваших мобильных пользователей, то эта опция позволит вам сделать это, поскольку мобильные пользователи и пользователи настольных компьютеров видят отдельный HTML. (У Search Engine Land есть отличная статья, в которой обсуждаются ключевые слова для мобильных устройств.)

Минусы:

1. Динамическое перенаправление удваивает работу по обслуживанию вашего сайта, поскольку оно создает отдельный сайт для мобильных устройств с отдельным набором индексированных HTML-кодов, требующих отдельного проекта SEO.
2. Необходимый список строк пользовательского агента также требует постоянного обслуживания, поскольку новые строки должны добавляться всякий раз, когда выпускается новое мобильное устройство.
3. Наконец, имейте в виду, что вам нужно будет использовать заголовок «Vary HTTP-User Agents», если ваш сайт динамически обслуживает контент. Заголовок помогает контенту правильно обслуживаться и помогает механизмам правильно его кэшировать. У Google есть подробная информация о том, как добавить этот заголовок.

Вариант 3: Мобильный сайт

Этот вариант, как следует из названия, предполагает создание отдельного домена специально для мобильных пользователей. Наиболее распространенными примерами являются m.domain.com или mobile.domain.com . Это популярный вариант для крупных розничных продавцов; Бриджит Рэндольф отмечает, что «73% веб-сайтов, включенных в список 100 000 лучших сайтов Quantcast, использовали переадресацию URL-адресов на URL-адрес, специфичный для мобильных устройств». Как и динамическое обслуживание, этот метод предполагает разработку контента специально для посетителей, использующих мобильные устройства; однако URL-адреса отдельных мобильных сайтов различаются, поэтому перенаправление на уровне сервера отсутствует.

Плюсы:

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

Минусы :

1. Ваш мобильный сайт не выиграет от любого положительного профиля обратных ссылок, созданного вашим сайтом для настольных компьютеров (если вы не реализуете двунаправленную переадресацию). Поэтому, если вы хотите, чтобы ваши мобильные пользователи находили вас в обычном поиске, это может стать настоящей неудачей.
2. Ваш мобильный сайт потребует дополнительной работы по SEO. Вам нужно будет отправить отдельный XML-файл Sitemap в Google и Bing Webmaster Tools. Кроме того, меньшие экраны означают меньшие результаты поисковой выдачи, поэтому вам может потребоваться отредактировать свои метатеги. Метатеги для мобильных устройств должны быть короче, чем для десктопных сайтов.

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

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

Для получения информации о том, как оптимизировать ваши страницы для скорости и мобильного SEO, мы рекомендуем начать с этих ресурсов:

• Контрольный список универсального мобильного SEO и дизайна
• 7 лучших практик мобильной навигации
• Руководство по SEO: мобильное SEO и оптимизация UX
• Оптимизация изображений: первое, что вы можете сделать для улучшения мобильного UX
• Руководство для веб-мастеров по мобильным устройствам от Google Developers