Как сделать сайт Mobile Friendly для Google за 1 минуту

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

Как сделать сайт Mobile Friendly для Google за 1 минуту

21 апреля 2015 года в Google стартовал алгоритм #ДляМобильных. Делать выводы пока рано, а вот адаптировать сайт под мобильные устройства не помешает. Сергей Кокшаров предложил для этого очень простой и эффективный способ, который я решил развить и автоматизировать.

Напомню, что Google учитывает всего четыре составляющие адаптации сайта под мобильные устройства:

  • размер шрифта (рекомендуется 16px),
  • размер активных элементов (не менее 48px),
  • область просмотра (viewport),
  • размер контента (не более 100%).

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

Шаг 1: скачайте архив mobilefriendly.zip по этой ссылке.

Шаг 2: в секции <head>…</head>укажите метатег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Шаг 3: разархивируйте и загрузите на сервер файл mob-style.css.

Примечание: mob-style.css это простейшая таблица стилей, которая учитывает ряд перечисленных выше рекомендаций Google. Она делает ссылки кнопками, таблицы строками, картинки резиновыми, списки строковыми и многое другое. При необходимости, вы всегда можете подправить её так, как вам это нужно.

Шаг 4: перед закрывающим тегом </body>добавьте следующий JavaScript-код:

<script>
function mobilefriendly() {
  if ( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) return;
  var styles = document.styleSheets;
  if ( styles.length > 0 ) for ( i = 0; i < styles.length; i++ ) styles[i].disabled = true;
  var link = document.createElement('link');
  link.rel="stylesheet";
  link.type = 'text/css';
  link.href='/2015/04/mob-style.css';
  document.head.appendChild(link)
}
</script>

Скрипт проверяет, является ли браузер мобильным или нет. Если да, он отключит в HTML-документе все таблицы стилей и добавит mob-style.css.

Примечание: для link.href вы должны прописать путь к своему файлу mob-style.css.

Шаг 5: в открывающийся тег <body> добавьте атрибут onload с вызовом JavaScript-функции mobilefriendly(), выглядит это так:

<body onload="mobilefriendly()">

Вот собственно и всё. Теперь идём на страницу Google инструмента проверки удобства просмотра на мобильных устройствах (http://goo.gl/OaXdEs), вводим URL веб-сайта и кликаем кнопку «Анализировать». Наслаждаемся результатом!

Короткая ссылка: http://goo.gl/F9P58a