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

[newshop]

Выдержки из статьи The SEO of Responsive Web Design by Kristina Kledzik

Адаптивному дизайну в последнее время было посвящено множество статей, но действительно ли адаптивный дизайн станет общепринятым стандартом?

Если коротко: да.

Целью адаптивного дизайна является универсальность сайта для различных устройств. Для того, чтобы сайт было удобно просматривать с устройств различных разрешений и форматов, по технологии адаптивного дизайна не нужно создавать отдельные версии сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет.

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

Как он работает?

Слишком хорошо, что бы быть правдой? Все началось со статьи Итана Маркотта "Responsive Web Design" в 2010 году. Вместо создания страницы размером 800 пикселей и растягивания ее на экране, адаптивная страница сама подстраивается под размеры экрана.
Для большей наглядности перейдите на сайт и поиграйте с разными браузерами.

В своей мобильной версии, Microsoft сохранила все элементы десктопной. Но на это идут не все. Одно из отличий мобильной версии - малый объем памяти браузера и соответственно возникают трудности с размещением больших объемов контента на экране. Посмотрите, как Smashing magazine избавились от лишней информации.
Влияет ли адаптивный дизайн на SEO?

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

Юзабилити.

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

Если мобильная версия вашего сайта значительно отличается от того, что пользователи привыкли видеть на десктопной или у вас нет мобильной версии, вы уже потеряли 61 % пользователей, которые вернуться в Гугл, что бы найти более читабельный сайт. В любом случае, ваш показатель отказов будет расти, а позиции снижаться. С адаптивным дизайном ваши посетители получат все что им требуется в нужном формате.

Дублированный контент.

Не волнуйтесь, даже если контент на мобильной версии сайта дублирует основной, вы не попадете под Панду. Но факт остается фактом: у вас 2 версии сайта и посетители могут случайно попасть не туда. Использование адаптивного дизайна означает, что контент расположен только в одном месте в сети Интернет.

Ранжирование.

Сам Гугл говорил, что сайты оптимизированные под мобильный поиск ранжируются выше. Он рекомендует адаптивный дизайн, разъясняя: сайты, использующие адаптивный дизайн, будут ранжироваться так же хорошо, как сайты, разработанные специально для мобильных устройств. Это особенно хорошо для:

Построение ссылок.

Используя адаптивный дизайн, при постановке ссылки на основной сайт, вы получаете ссылку и на мобильную версию. Мобильные сайты — относительно новое явление и соответственно у ваших конкурентов будет меньше обратных ссылок. Это даст вам преимущество.

Примеры.

Вот несколько замечательных примеров таких сайтов.




Ну и конечно же Microsoft и Smashing Magazine уже упоминавшиеся ранее.

Минусы.

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

Временные затраты.

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

Большие страницы.

Если у вас на странице много контента, использование адаптивного дизайна означает, что он ВЕСЬ будет отображен на экране мобильного устройства.

Вот почему сайты вроде NYTimes.com и CNN.com имеют отдельные мобильные версии, где отображена только основная информация. Если у вас такой же огромный сайт, имеет смысл задуматься об отдельной мобильной версии сайта.

Малые размеры экрана.

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

Нужен ли мне адаптивный дизайн?

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

Итан Маркотт, в своей статье подробно рассказывает о возможностях адаптивного дизайна и рекомендует использовать облегченные темы популярных CMS (примеры для WordPress, Drupal and Joomla).

1. Используйте сжатые изображения.
74% мобильных посетителей покидают сайт через 5 секунд ожидания загрузки страницы. Smush.it — хороший сервис для сжатия картинок.

2. Ориентируйтесь на все размеры экранов.
Многие дизайнеры были бы рады сделать 1 вариант для мобильных телефонов, 1 для планшетов и 1 для компьютеров, а затем показывать соответствующий дизайн. На самом деле, мобильные устройства намного многообразнее. Есть большие и маленькие смартфоны, планшеты от Kindle Fire до Samsung Galaxy и декстопные мониторы размером до 30 дюймов.

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

4. Оптимизируйте под сенсорные телефоны.
Если вы до сих пор не используете onmouseover JavaScript, имейте ввиду что пользователи планшетов не всегда пользуются мышью, а десктопные пользователи могли установить Windows 8, поддерживающую сенсорный ввод.

5. Тестируйте на всех браузерах.
Помните старые добрые времена, когда вы жаловались, что вам приходится тестировать сайт и на IE и Firefox? Теперь у вас есть:

Компьютер:

IE9 для Windows 7
IE10 для Windows 8
Firefox
Chrome
Safari

Планшет/мобильный

Safari
Default Android browser
Chrome beta
Dolphin
Opera
Firefox

И это только самые популярные! А вам еще придется проверить на них разные разрешения. Но поверьте, это того стоит.

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

Оригинал на английском языке:

[Aglok]

Да мобильная версия реально нужна! Даже для маленьких сайтов.