3 способа быстро адаптировать сайт под мобильные устройства. Мобильная версия сайта на поддомене


Чек-лист для оптимизации мобильного сайта

О том, что каждый уважающий себя сайт должен быть адаптирован под смартфоны и планшеты, сейчас не говорит только ленивый. К концу прошлого года доля мобильного трафика в России достигла 62%, и прогнозируется ее рост (в мире в 2017 году до 75%). Согласитесь, игнорировать такой объем трафика становится попросту невозможно. А с запуском Mobile first от Гугл и Владивостока от Яндекса – еще и опасно для позиций сайта в выдаче.

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

По этой причине сегодня в меню в блоге – чек-лист по оптимизации мобильного сайта. Можно сразу скачать в формате pdf, если что.

Немного теории о мобильных сайтах

(можно пропустить и сразу перейти к чек-листу)

Буквально в нескольких словах о 3 типах мобильности:

1. Мобильная версия на поддомене. По сути это отдельный вариант сайта на отдельном поддомене (как правило, m.site.ru).

Пример: Сайт vk.com и его мобильная версия m.vk.com

Пример мобильной версии сайта на поддомене

2. Динамический контент. Адрес для десктопной и мобильной версий одинаковый, но контент в них различается. Обычно в мобильной версии показывают меньше второстепенного контента (слайдеров, рекламы, дополнительных текстов).

Пример: Сайт ozon.ru – на мобильных он загружается так же по адресу ozon.ru, но контент отличается, например, на главной странице нет блока с популярными товарами:

Мобильная версия с динамическим контентом

3. Адаптивная верстка. Адрес не меняется, да и контент остается одинаковым. Меняется только внешнее отображение контента – все блоки на сайте как бы «подстраиваются» под ширину того устройства, на котором открыт сайт (меню сворачиваются до «гамбургеров», блоки из нескольких в ряд выстраиваются друг под другом и т.д.).

Пример: Сайт mvideo.ru

Пример адаптивной верстки

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

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

Оптимизация мобильного сайта

Перед тем как оптимизировать мобильную версию своего сайта, проведите оптимизацию основного сайта. Ведь все, что справедливо для десктопной версии (теги title и description, заголовки, оптимизированные тексты, перелинковка, микроразметка и прочее), в равной мере работает и для мобильной версии.

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

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

Чек-лист по оптимизации мобильного сайта

Начнем с технической части:

1. Robots.txt

Проверьте, что в файле robots.txt не закрыт доступ к картинкам, js- и css-файлам для поисковых роботов. По этому вопросу у нас есть отдельная статья, здесь повторяться не буду.

2. Скорость загрузки

Проверьте, что скорость загрузки по PageSpeed Insights не ниже 70 на вкладке «Для мобильных»:

Скорость загрузки сайта drom.ru

Лучше, конечно, чтобы скорость загрузки была выше 85 (а в идеале, близко к 100), хотя такая ситуация пока достигается редко:

Идеальная скорость загрузки сайта

Но стремиться к ней нужно. Под выставленной оценкой Гугл дает рекомендации по улучшению скорости загрузки – ориентируйтесь на них.

3. Тег viewport (для сайтов с адаптивной версткой)

Проверьте, что в коде страниц прописан мета-тег viewport:

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

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

Если же viewport не указан, то на мобильном будет показана страница как для компьютера, только «втиснутая» в экран мобильника. Работать с ней будет весьма неудобно.

Пример работы тега viewport

Подробности про viewport смотрите в справке Гугла.

4. HTTP-заголовок Vary (для динамического контента)

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

Сделать это можно с помощью HTTP-заголовка Vary со значением User-Agent, выглядит он так:

HTTP/1.1 200 OKContent-Type: text/htmlVary: User-AgentContent-Length: 5710

В таком случае поисковый робот Google для смартфонов будет сканировать именно контент мобильной версии (у Яндекса пока нет отдельного робота для мобильного поиска).

Посмотреть HTTP-заголовки, которые отдает ваш сайт, можно с помощью инструмента Проверка ответа сервера в Яндекс.Вебмастере. Подробнее про Vary так же написано в справке.

5. Переадресация (для мобильной версии на поддомене)

Проверьте, что настроена и работает корректно переадресация с полной версии сайта на мобильную (с site.ru на m.site.ru) при просмотре с мобильных устройств.

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

То есть вот так будет правильно:

https://vk.com/feed   --->   https://m.vk.com/feed https://avito.ru/irkutsk/transport   --->   https://m.avito.ru/irkutsk/transport

А вот так – нет:

https://vk.com/feed   --->   https://m.vk.com/ https://vk.com/video   --->   https://m.vk.com/apps https://avito.ru/irkutsk/transport   --->   https://avito.ru/moskva/transport

6. Тег <link rel="alternate"> (для мобильной версии на поддомене)

Проверьте, что в коде страниц основного сайта (в блоке <head>) прописаны теги <link rel="alternate"> с адресами соответствующих страниц мобильного сайта.

Вот пример для страницы https://avito.ru/irkutsk/transport:

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.avito.ru/irkutsk/transport">

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

Теперь перейдем к визуальной составляющей:

7. Favicon для мобильных

Сделайте и загрузите на сайт отдельный фавикон для мобильных устройств. В коде сайта он прописывается наряду с обычным favicon.ico в блоке <head>. Рекомендуют делать фавикон в 3-10 разных размерах, например, как на сайте М.Видео:

<link rel="apple-touch-icon-precomposed" href="http://static.mvideo.ru/assets/img/ico/apple-touch-icon-114x114-precomposed.png"><link rel="apple-touch-icon-precomposed" href="http://static.mvideo.ru/assets/img/ico/apple-touch-icon-72x72-precomposed.png"><link rel="apple-touch-icon-precomposed" href="http://static.mvideo.ru/assets/img/ico/apple-touch-icon-57x57-precomposed.png">

Но будет вполне достаточно и одного размера (114 на 114 пикселей):

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>

Этот фавикон показывается в Избранном (для некоторых устройств), в Истории просмотров:

Иконки в истории просмотра

И на рабочем столе телефона, если ваш сайт сохранили на главный экран (смотрите 3 иконки во втором ряду):

Иконки на экране мобильного

Обратите внимание на не очень четкий фавикон сайта Пегас Туристик – для него нет отдельного файла, используется обычный favicon.ico.

8. Контент под ширину экрана

Все содержимое сайта должно входить по ширине в экран устройства. Внизу не должно быть горизонтальной прокрутки, или справа – пустого пространства:

Контент должен помещаться в ширину экрана

9. Размер шрифта

Проверьте, что все тексты на сайте удобно читать с мобильных – что нет ни слишком мелкого шрифта, ни слишком крупного:

Оптимизируйте размер шрифта на мобильных

10. Размер кнопок

Проверьте, что во все интерактивные элементы – элементы, на которые можно кликнуть – легко  попасть пальцем (и желательно мужским, а не детским):

Пример кнопок в мобильной версии

11. Расстояние между ссылками

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

Расстояние между ссылками на мобильных

12. Картинки меньшего размера (для динамического контента)

Если ваш сайт выдает отдельный html-код при просмотре с мобильного устройства, то можно в нем указать ссылки на уменьшенные копии изображений. Вряд ли на телефоне сильно нужна фотография товара шириной 1400 пикселей, вполне хватит и картинки в 800 пикселей – а это экономия в весе картинки, а следовательно, и в скорости загрузки сайта.

13. Убрать Flash

Технология Flash не поддерживается мобильными устройствами. Да и современные десктопные браузеры постепенно отказываются от поддержки Flash. Поэтому не используйте ее. Для вставки видеороликов используйте теги HTML5, вот тут есть подробная инструкция.

14. Скрыть излишний контент

Помните, что экран мобильного устройства в разы меньше экрана компьютера, поэтому старайтесь по возможности сократить объем контента в мобильной версии. Например, в мобильной версии habrahabr.ru не выводятся превью-картинки к статьям и краткие описания, что позволяет вместить в один экран мобильного 3-4 статьи из списка.

Мобильная версия сайта habrahabr

15. Меньше рекламы

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

Полностью отказываться от рекламы я, конечно, не призываю, но сократить число рекламных объявлений вполне возможно. В пример все тот же habrahabr, в полной версии которого в правом блоке штук 7-8 рекламных объявлений, а в мобильной – всего одно.

16. Не использовать pop-up окна

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

У Google есть хороший инструмент для проверки оптимизации для мобильных – он даст информацию о визуальной части оптимизации (и некоторых технических параметрах).

И напоследок об удобстве для пользователя (UX):

17. Удобная навигация

Проверьте, что все необходимые пункты меню доступны в мобильной версии (включая выпадающие подменю). И не забудьте про «хлебные крошки» – они помогут посетителю понять, в каком разделе сайта он находится.

Пример, где с мобильного нет возможности открыть второй уровень подменю:

Пример навигации с ошибкой

А здесь все хорошо, подменю открываются (вплоть до третьего уровня вложенности), хлебные крошки есть:

Навигация работает правильно

18. Ссылки с номеров телефонов

Поставьте ссылки с номеров телефонов для быстрого набора их с мобильных устройств. Делается это так:

<a href="tel:88002007775">8-800-200-777-5</a>

После этого пользователь просто кликает по номеру телефона на вашем сайте и сразу же переходит к звонку:

Пример работы ссылки с номера телефона

19. Учет местоположения

На многих мобильных устройствах включена передача геоданных (информации о местоположении устройства).

Вы можете использовать эту информацию на своем мобильном сайте, например, при заполнении адреса доставки или при поиске объектов неподалеку, как это сделано на сайте booking.com:

Учет местоположения пользователя на сайте booking.com

20. Ссылка «Перейти на полную версию сайта» (для динамического контента, для мобильной версии на поддомене)

Оставьте пользователям мобильных устройств возможность посмотреть полную версию сайта. Например, на моем планшете для некоторых сайтов открывается мобильная версия, но размер экрана и так достаточно большой, поэтому я могу спокойно смотреть на нем полную версию. Ссылка «Перейти на полную версию» помогает мне в этом:

Ссылка на полную версию сайта

Итог

Вспомните, как пытались оформить срочный заказ с телефона, когда компьютера не было рядом, и не могли попасть в кнопку «Отправить заказ», а потом оказалось, что вы заказали не тот размер, т.к. выбор размера остался за границей экрана. Вспомните и постарайтесь уберечь посетителей своего сайта от таких неприятных ситуаций.

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

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

Продублирую еще раз ссылку на чек-лист по оптимизации мобильного сайта в pdf. Чек-лист для оптимизации десктопной версии есть тут.

Если у вас нет времени заниматься оптимизацией сайта, мы можем вам помочь – список работ, которые мы выполняем, и цены – всё здесь. А если ваш сайт и вовсе не адаптирован под мобильные – вам сюда.

P.S. Если есть что еще подсказать по оптимизации мобильных сайтов – пишите в комментариях.

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

1ps.ru

Как оптимизировать мобильную версию сайта для поисковых систем? - E-pepper.ru

Игорь Бахарев

Понравилась статья — поделись с коллегами

Facebook

Twitter

Вконтакте

Google+

Поисковые флагманы уже давно анонсировали, что приоритет поисковой выдачи на смартфонах будет отдан мобильным версиям сайтов. Это значит, что если ваш сайт не проходит проверку mobile-friendly, то велика вероятность, что на смартфоне его позиции в выдаче будут ниже. Но создание удачной мобильной версии — это только половина дела. Важно настроить сайт для его индексации поисковыми системами. О том, как сделать это правильно, нам рассказал ведущий SEO-специалист компании «Директ Лайн» Константин Жуков.

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

Правильная настройка мобильной версии зависит от способа ее реализации. Существует три вида:

1. Адаптивный дизайн основного сайта. Предполагает, что у вас существует одна версия сайта, которая автоматически адаптируется под размеры разных экранов: десктопов или мобильных устройств.

Как оптимизировать мобильную версию сайта для поисковых систем? - 1

2. Динамический показ. Мобильная и десктопная версии выглядят по-разному, имеют разные коды (HTML, либо CSS), но находятся по одному адресу (URL). При запросе этого адреса с разных устройств выдаются либо страницы, написанные для мобильных устройств, либо десктопные версии.

3. Собственный URL для мобильной версии (размещение на поддомене). Мобильная версия отличается от декстопной и имеет другой адрес. Например, версия для сайта site.ru , версия на поддомене будет иметь адрес m.site.ru.

Подробнее об этом можно почитать у Google.

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

А пока давайте рассмотрим основные действия по настройке при реализации каждого сценария для правильной интерпретации поисковыми системами.

Настройка адаптивной версии сайта

Так для правильной интерпретации поисковыми системами созданного адаптивного дизайна необходимо добавить в заголовок документа метатег “viewport”. <meta name="viewport" content="width=device-width">Он содержит инструкции для браузера по корректировке размеров и масштабированию страницы по ширине экрана устройства. Если этого элемента нет, мобильные браузеры по умолчанию показывают страницу для экрана компьютера.

Как оптимизировать мобильную версию сайта для поисковых систем? - 2

Настройка динамического показа разных версий сайта

Для динамического показа важно, чтобы поисковый бот правильно определял устройство, с которого пользователь просматривает сайт и выдавал в ответ верный код. Для этого можно воспользоваться HTTP-заголовком “Vary” или добавить элемент “User-Agent”.

Размещение мобильной версии на собственном URL

В случае с созданием собственного URL существует 2 способа размещения:• В отдельный раздел сайта (в папку). При этом мобильная версия сайта будет иметь вид: site.ru/m/.• На отдельный поддомен. При этом мобильная версия сайта будет иметь вид: m.site.ruПри этом если Google однозначно интерпретирует оба варианта, то Яндекс может неверно воспринять размещения в папке. В связи с этим рекомендуется размещать мобильную версию сайта на поддомене.

Настройка мобильной версии на поддомене

Но когда мы размещаем версию на поддомене, мы фактически частично или полностью дублируем контент собственного сайта. Уникальность предоставленной информации — это важный фактор ранжирования, и, создавая собственную копию, мы рискуем потерять позиции. Чтобы этого не произошло, необходимо показать поисковому боту, что перед ним две версии одного сайта. Для этого нужно связать версии метатегами <link> и настроить переадресацию.

Еще один момент, который необходимо учесть с точки зрения SEO: на мобильной версии важно присутствие всех продвигаемых разделов — основных точек входа. Если у вас нет «мобильного дубля» для продвигаемой страницы, то в построении мобильной выдачи будет участвовать десктопная версия. Вполне логично, что она может ранжироваться хуже, чем страницы других сайтов, заточенные под смартфоны.

Как настроить метатеги

На мобильном сайте в коде прописываем метатег “canonical”, указывающий в качестве канонической страницу десктопного сайта. На десктопном сайте — метатег “alternate”, указывающий в качестве альтернативной страницу мобильного сайта.Например, для главной страницы сайта http://site.ru прописываем следующее:<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.site.ru" >

Для главной страницы мобильного сайта http://m.site.ru прописываем <link rel="canonical" href="http://site.ru">

Как настроить редирект (переадресацию)

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

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

Техническая оптимизация мобильной версии — достаточно сложный процесс. Сами поисковые системы еще не до конца сформировали требования к мобильной выдаче и постоянно вносят дополнения в список критериев. При этом Яндекс и Google могут по-разному интерпретировать одни и те же действия и иногда даже противоречат друг другу. Чтобы сохранять позиции в поисковых системах, важно постоянно отслеживать изменения, происходящие в алгоритмах работы ботов и дорабатывать мобильные версии с учетом меняющихся требований.

Константин Жуков, «Директ Лайн»

e-pepper.ru

Как сделать мобильную версию сайта WordPress

Любой качественный сайт должен иметь мобильную версию сайта, ведь мобильный трафик постепенно растёт, а отсутствие адаптивной верстки сайта приводит к отказом. Это так же заметили в Google, после чего было решено проверять сайты на наличие мобильной версии сайта, а с 21 апреля 2015 года и во все станет фактором для ранжирования.Как сделать мобильную версию сайтаТак как же сделать мобильную версию сайта, что бы избежать отказов и понижения позиций? Для решения этой проблемы существуют два способа. Первый способ — сделать адаптивную вёрстку, второй способ — сделать отдельный дизайн мобильной версии сайта. Так как мой сайт на WordPress покажу решения только для данного CMS движка.

Как сделать мобильную версию сайта WordPress

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

1. Адаптивная верстка сайта

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

Эффективность и удобство плагинов мобильной версии сайта:wp_plugins_mobile_adoptetion

Как оказалось различные плагины не только по разному выглядят, но и по разному влияют на скорость, самым быстрым оказался Wp mobil edition на главной скорость на главной странице 69, в записях 77 (лучший результат).

Вот ссылки на бесплатные плагины:1. WiziApp2. WpTouch4. WP mobile edition

Однако, если вы довольный своим шаблоном и вам не хочется плагинов, есть вариант сделать ваш шаблон растягивающимся без плагина, как мой. Для этого достаточно прописать в css — «width: 100%» . Ну а что бы дизайн не сильно растягивался добавить строчку:

#content {max-width: 1280px;}

Кроме этого в вашей теме картинки могут быть фиксированного размера и не растягиваться, исправляем это такими строками:

img, embed, video {max-width: 100%;}

Недостатки такого способа:

  • Тяжело разместить каждый эллемент красиво для разных экранов.
  • Медленная загрузка сайта из-за не сжатых картинок + подгрузки лишних не оптимизированных скриптов.

Безусловно такой способ позволяет сделать мобильную версию сайта, но мне не нравятся эти недостатки. Поэтому разберём второй вариант, где нету таких недостатков, однако есть другие, более серьёзные для SEO.

2. Отдельная мобильная версия сайта

Отдельная мобильная версия сайтаСамый удобный вариант для пользователей, это иметь отдельный поддомен с мобильной версией, так поступают сайты гиганты, популярные сайты ну и конечно различные успешные сервисы. Обычно создают поддомен m.website.ru либо mobile.website.ru.

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

В чем недостаток этого способа:1. По сути вы создаёте дубликат сайта, выходит что нужно наполнять 2 сайта, конечно можно сделать авторепостинг с помощью NextScripts: Social Networks Auto-Poster, но следить за двумя сайтами не практично.2. Так как мобильная версия дублирует контент, поэтому нужно либо запрещать к индексации поддомен, тогда поисковики не оценят ваш труд. Либо прописывать в head — rel=»canonical», показывая что контент дублируется, однако в выдачи первой страницы m. версии уже не будут.3. Как не стараться SEO оптимизация таких страниц превращается в тяжёлую работу, либо вы пишите уникальный контент для мобильной версии, либо не выйти в топ таким страницам.

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

Порядок действий как сделать отдельную мобильную версию сайта WordPress:1. Создаём поддомен (пример m.seosko.ru) на хостинге;2. Покупаем платный шаблон, либо создаём собственный для мобильных телефонов. Так же есть вариант организовать мобильную версию отдельно с помощь тех же плагинов, о которых писал в первом методе;3. Загружаем заново весь контент, который должен быть на мобильной версии сайта;4. Настраиваем индексации и прописываем необходимые параметры для поисковиков.5. Настраиваем проверку на вход с мобильных устройств на основном домене и поддомене с помощью веб-сервера nginx.

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

seosko.ru

3 способа быстро адаптировать сайт под мобильные устройства

Для кого: веб-разработчикам, владельцам сайтов, SEO-оптимизаторам

Уровень подготовки: любой

Google объявил, что с 21 апреля в поисковый алгоритм будет включен фактор дружественности сайта к мобильным устройствам. Повлияет это нововведение на основную выдачу Google или только на результаты мобильного поиска, будет видно позднее.

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

Оно мне надо?

Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:

Если вы видите подобное сообщение — статья для вас:

Проверка удобства сайта для пользователя в PageSpeed

 

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

В каких случаях подойдет? Если у вас сайт-визитка, информационный сайт, блог, одностраничник, интернет-магазин (с простой структурой, дизайном и/или небольшим ассортиментом), сайт услуг или форум.

Как реализовать?

Можно смело брать один из CSS-фреймворков (bootstrap, responsivegridsystem, Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.

Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:

  1. прописать view-port;
  2. подключить файлы фреймворка;
  3. добавить в разметку классы сетки bootstrap.

Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:

@media screen and (max-width: 1280px) { div.contentblock {width: 1200px;} }@media screen and (max-width: 1140px) { div.contentblock {width: 1024px;} }@media screen and (max-width: 992px) { div. contentblock {width: 970px;} }

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

Плюсы данного метода: быстрая реализация для перечисленных типов сайтов.

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

Что мы получим?

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

И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:

А для экранов менее 768px выглядит так (в свернутом виде):

И так, при клике на иконку в правом углу (в развернутом виде):

Отдельный шаблон для мобильных устройств на основном домене

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

Как реализовать?

Нужны знания php и база основных устройств для их определения и вывода соответствующего шаблона. Т.е. нужно написать скрипт, который будет определять тип устройства и выводить для него соответствующий шаблон.

Отдельно стоит упомянуть о CMS. Если ваш сайт на WordPress, то о вас уже позаботились, и можно обойтись установкой плагинов для адаптации сайтов под мобильные устройства.

Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям.

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

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

Минусы: не для всех CMS есть такие плагины, да и не всегда они корректно работают. Бывает, что сайт хорошо отображается на моб.устройствах, но при этом по скорости не лучше, а даже хуже, чем его полная версия. Стоит отметить, что иногда бывают баги в определении мобильного устройства, если это какой-то редкий телефон, и в этом случае на таком устройстве будет отображена полная версия сайта.

Что мы получим?

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

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

Например, вот так сайт выглядит на ПК:

А вот так выглядит этот же сайт на мобильном:

Шаблон для мобильной версии сайта

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

В каких случаях подойдет? Для интернет-магазинов, каталогов, интернет-порталов, социальных сетей.

Как реализовать?

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

Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.

Примечание (спасибо читателям за вопрос): Чтобы обезопасить себя от проблем с дублированием контента, ознакомьтесь с рекомендациями Google и Яндекс.

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

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

Если вы определились с выбором и заказали один из методов реализации, не забудьте при приеме работ проверить, как ваш сайт отображается на мобильных устройствах и в онлайн-тестах Google.

Понравилась статья? Поделитесь ссылкой со своими друзьями:

Подписывайтесь на наши группы в сообществах, чтобы быть в курсе всех SEO-событий:

Оцените статью: 

Автор: Анна Себова, Web-разработчик

[email protected]

Google+

siteclinic.ru

мобильную версию или адаптивный дизайн?

Недавно мы писали про адаптивный дизайн. Там мы разобрали, зачем нужен адаптивный дизайн, какие от него плюсы и нужен он, или нет. Как мы поняли из статьи - адаптивный дизайн нужен, и нужен всем. Сегодня же мы рассмотрим, что лучше для сайта: адаптивный дизайн или отдельная мобильная версия.

Мобильная версия

Мобильная версия сайта — это отдельная его версия, предназначенная для смартфонов и планшетов. Как правило, имеет дизайн оптимизированный под мобильные устройства, в итоге чего контент подается в удобочитаемом виде и загрузка происходит почти мгновенно. Обычно выносится на поддомен в виде m.site.ru или mobile.site.ru. 

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

Удобство

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

Скорость загрузки

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

Правки по сайту

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

Переход на основную версию

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

Недостатки

Дублирование

Дублирование контента на разных поддоменах негативно сказывается на поисковом продвижении. Как правило, созданием мобильной версии занимаются программисты, а продвижением – SEO-специалисты. И даже если на тестовом варианте учтены все пожелания SEO-специалистов, не факт, что на боевой вариант они перекочуют в исходном виде. Часто при переносе что-то меняется, что-то добавляется. В итоге можем получить проблемы с ранжированием из-за дублей в мобильной версии.

Обновление

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

Ограничение функционала

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

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

 

Адаптивная верстка

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

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

Удобство реализации

Как правило, при адаптивной верстке ширина экрана подгоняется под нужный размер дисплея. Все это можно реализовать посредством HTML и CSS. А современные CMS и фреймворки позволяют сделать это буквально в пару кликов. Да и современные шаблоны уже сразу предоставляют адаптивный дизайн. Остается только его установить? и за пару минут у вас адаптивный дизайн, который удобен для любой аудитории.

SEO

Если в мобильной версии мы сталкиваемся с дублированием контента на разных поддоменах, то здесь подобной проблемы нет. У страницы будет один адрес (URL)? и при изменении разрешения экрана либо устройства у нас не будет ломаться дизайн или нас не будут перенаправлять на мобильную версию. Этот вариант лучше решает проблему дублирования контента, нежели атрибуты rel="canonical" или запреты в robots.txt на мобильной версии.

Недостатки

Тяжеловесность

Обычно при адаптивности оставляют весь функционал, доступный пользователям. А значит мобильные посетители могут столкнуться с нагромождением скриптов и большим количеством информации, которую будет сложно сразу охватить на небольшом дисплее смартфона. Если для десктопа нормально иметь размер в 200-250 Кб, то мобильная обычно занимает менее 50 Кб.

Цели посещения

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

Нет выбора

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

 

Итог: адаптивная верстка или мобильная версия?

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

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

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

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

itb-company.com

Как сделать мобильную версию сайта на другом домене

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

Вебмастера со старыми сайтами решают задачу адаптации по-разному: некоторые особо умелые переделали свой шаблон в адаптивный, другие просто переустановили шаблон на адаптивный, поменяв дизайн полностью. И есть ещё третьи, которые не умеют переделывать шаблон, и им по каким-то причинам нельзя сменить дизайн (мешают установленные настройки, плагины, шорткоды и всё такое), и у них установлен не адаптивный шаблон.

И сейчас мы расскажем, как сделать мобильную версию сайта в этом сложном случае.

О чего такой переполох

Не так давно Google разработал и ввёл новый алгоритм, который фильтрует сайты, не дружелюбные мобильным устройствам. И сегодня при использовании этого поисковика на мобильном устройстве (надо заметить, что почти все владельцы устройств Android пользуются именно Google) все сайты, не адаптированные под устройство, будут оказываться на плохих позициях. И если раньше пользователей с мобильниками и планшетами было 10-20% от всего трафика сайта, то сегодня их 50% и более. Значит, если у сайта нет адаптивного дизайна, то он потеряет как минимум четверть трафика (учитываем ещё половину трафика из Яндекса, который пока ещё не ввёл такого алгоритма, но скоро это обязательно сделает).

Как сделать мобильную версию сайта и не менять шаблон на WordPress

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

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

Теперь на своём основном сайте установите плагин AddFunc Mobile Detect. Данный плагин определяет, с какого устройства зашёл посетитель, и выбирает, какой домен ему нужно показать. То есть, если посетитель входит с телефона или планшета, то плагин переведёт его на мобильную версию сайта с помощью редиректа.

После активации плагина перейдите в пункт «Настройки» и выберите подпункт «Mobile Detect». Включите плагин, установите галочку на «Mobile Redirect: ON». В строке «Mobile Website URL» введите адрес мобильной версии сайта и сохраните изменения. Всё. Плагин работает и пересылает всех тех, кто вошёл не с компьютера на другую версию сайта.

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

Также по этой теме:

wpuroki.ru

Мобильная версия или адаптивная верстка сайта?

Мобильная версия или адаптивная верстка

Я думаю, не стоит долго и подробно описывать, что мобильные пользователи интернета составляют в мире по итогам 2016 года уже большую (51,4%) часть. Именно по этому любой сайт должен корректно отображаться на всех видах устройств, как на ширине экрана 1900 пикселей, так и на 300. Но как это сделать корректно :?: Так, чтобы это было удобно пользователям, но и не получить «пендаля» от поисковых систем? И вот тут встает вопрос о выборе типа мобильности сайта, мобильный сайт на поддомене или адаптивная верстка сайта под все виды устройств. Я разберу оба варианта, с описанием плюсов и минусов, а так же подводя итоги расскажу свой опыт использования и мобильной версии и адаптивной верстки.

Адаптивная верстка сайта под все виды устройств

Плюсы:

  • Простая в реализации. Создать адаптивную верстку сайта, даже под у же давно существующий сайт, достаточно не сложно. Для этого необходимо просто дописать файл css и добавить в html код сайта тег viewport, который определяет ширину экрана устройства и уже в зависимости от полученного значения подстраивает указанный код из файла стилей css.
  • Не нужно ждать индексации поисковыми системами. После внедрения на сайт адаптивной верстки нет необходимости ожидания полной переиндексации сайта, в отличии от мобильной версии на поддомене, так как это для поисковых систем новый сайт.
  • Возможность корректировки в любой момент. Если в какой-то момент появилась необходимость удалить какой-то блок на сайте в определенном разрешении экрана, это легко реализуется внесением небольших правок в файл стилей css.
  • Хорошо воспринимается поисковыми системами. Как Яндекс так и Google очень хорошо воспринимают адаптивную верстку и со временем позиции сайта в мобильной выдаче повышаются.

Минусы:

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

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

Плюсы:

  • Возможность создать «легкий» дизайн. Так как мобильная версия не зависит от основного сайта, то и размер страниц можно сделать маленьким для быстрой загрузки сайта.
  • Только нужный функционал. В мобильную версию можно внедрить только то, что действительно необходимо пользователям при входе с мобильных устройств.

Минусы:

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

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

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

samodelkov.ru