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

Оптимизация сайта для мобильных устройств

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

Есть три основные и две дополнительные возможности оптимизации для мобильной выдачи.

1. Мобильные сайты

Содержание для десктопов и мобильных устройств находится на разных страницах с разными URL. Обычно мобильный сайт размещают на поддомене m.site.ru.

Если разработали мобильный сайт, не забудьте связать его страницы с десктопными специальными атрибутами. Для этого нужно на мобильных страницах настроить тег
с элементом rel=»canonical», указывающим на страницу для компьютеров. А на десктопных страницах — с элементом rel=»alternate», который укажет на соответствующую мобильную страницу. Каждой десктопной должна соответствовать только одна мобильная страница, а каждой мобильной — одна десктопная. Задать rel=»alternate» можно также с помощью специальных атрибутов в Sitemap. Поисковики поддерживают такие теги в sitemap.xml:

Настройте переадресацию. Необходимо настроить автоматическую переадресацию с помощью HTTP-запроса или JS. HTTP-запрос учитывает агент пользователя и перенаправляет посетителя на соответствующую версию сайта. В документации Google рекомендуется настроить 302-й ответ сервера для такого перенаправления. Перенаправление с помощью JS будет отнимать драгоценные секунды при загрузке страницы. Принцип работы скрипта: если минимальная ширина экрана устройства равна определенному значению в пикселях, то необходимо перенаправить пользователя на соответствующую страницу rel=”alternate”. Сначала браузер загрузит страницу, затем выполнит JS, а потом при необходимости перенаправит пользователя на подходящую версию.

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

URL и HTML-код страниц на разных устройствах одинаковые, меняется только CSS — размеры и расположение элементов на странице в зависимости от величины экрана устройства.

Нужно разрешить Googlebot сканировать CSS, JS, изображения на страницах.

При реализации адаптивной версии важно настроить тег meta name=»viewport».

Метатег передает браузеру информацию о ширине экрана устройства. В соответствии с этими данными браузер строит модель CSSOM. Справка Google

3. Динамический показ

По одному URL отдается разный HTML и CSS. Чтобы отправить корректный вариант кода страницы, сервер обращается к агенту пользователя через HTTP-запрос Vary. Если у пользователя мобильный агент, то сервер отдаст соответствующий код.

Важно настроить Vary.

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

Сравнение трех основных вариантов адаптации сайта

Для наглядности занесем все, что можно сравнить, в таблицу:

Десктопная и мобильная версия остаются доступными по одному URL с одним HTML-кодом, сайт подстраивается под размер экрана любых устройств. Не возникает ошибок при определении агента пользователя и перенаправлении, потому что таких запросов просто нет. К тому же Google рекомендует использовать именно адаптивный дизайн для оптимизации ресурса. Однако в преимуществах адаптива кроются и его недостатки. Поскольку HTML одинаковый, нельзя точечно изменить контент для смартфонов и планшетов. Трудно добиться высокой скорости загрузки: «лишние» элементы скрыты от пользователя, но все равно время загрузки из-за них увеличивается.

При динамическом обновлении URL остается одинаковым для разных устройств. Чтобы реализовать динамическое изменение сайта, не нужно настраивать переадресацию, а HTML и CSS можно изменить или упростить для мобильных, что повышает скорость загрузки. Однако при динамическом показе необходимо настраивать HTTP-запрос Vary для определения агента пользователя, а это создает дополнительную нагрузку на сервер. К тому же нужно создать варианты кода для разных устройств, сложно учесть непопулярные диагонали экранов, поэтому определение агента может работать с ошибками.

Хорошо поддаются оптимизации по скорости загрузки, снижают нагрузку на сервер, а страницы можно сделать удобными для пользователей с мобильными устройствами. К тому же есть возможность выбрать версию отображения. Поскольку это отдельный мобильный сайт, как правило, поддомен, то HTML, стили, URL одних структурных страниц будут разными. Необходимо настраивать HTTP- или JS-перенаправление пользователей с десктопов на мобильный сайт и наоборот. Помимо настройки перенаправлений, нужно связать десктопную и мобильную версию специальными атрибутами. Могут быть проблемы с дублированием контента.

Каким бы беспристрастным ни пытался казаться Google, официальная позиция по мобильным сайтам, как о способе оптимизации, четкая:

4. AMP

Accelerated Mobile Pages — технология Google для создания ускоренных мобильных страниц сайта. Рекомендуется внедрение AMP в первую очередь для информационных и новостных ресурсов, блогов. Обычная AMP открывается меньше чем за секунду, поэтому UX ускоренных страниц успешнее, чем на обычных. Это достигается за счет полного отказа от пользовательского JS. Не поддерживаются некоторые HTML-теги, страницы реализуются по одному шаблону, отсутствуют формы, виджеты. Чтобы автоматизировать настройку AMP, можно использовать специальные плагины для популярных CMS.

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

«Яндекс» не поддерживает AMP и не уважает атрибут rel=»canonical», поэтому иногда ускоренные страницы оказываются в выдаче «Яндекса». Их можно закрыть от индексации для робота ПС в robots.txt — с помощью метатега robots или с помощью HTTP-заголовка X-Robots Tag.

5. Яндекс.Турбо

Турбо-страницы — технология «Яндекса» для создания быстрых страниц даже при плохом интернет-соединении. Высокая скорость загрузки достигается за счет шаблонизированного создания страниц, отсутствия пользовательского JS. Сделать страницы похожими на основной сайт можно с помощью юзерского CSS. Создать Турбо можно в панели «Вебмастера» двумя способами: с RSS-каналом или YML-фидом. Турбо можно делать для информационных ресурсов и для интернет-магазинов. Турборезультаты в выдаче «Яндекса» помечаются специальным значком в виде ракеты.

В «Яндекс.Турбо» можно реализовать внутренний поиск (с переходом на десктопную версию), минимальную перелинковку для интернет-магазина, покупку в один клик и с корзиной.

Главное отличие «Яндекс.Турбо» от AMP заключается в том, что турбостраницы располагаются на домене «Яндекса», соответственно, ПС получает трафик, а бизнес — только возможность получить трафик на обычной версии.

Стоит внедрить ускоренные страницы «Яндекса» и Google, особенно для ситуативного и информационного контента. Однако не думайте, что Турбо и AMP заменят адаптивные и динамические сайты. По крайней мере, пока ограничено внедрение пользовательского функционала.

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

PWA — технология Google, которая сообщает сайту функциональность мобильного приложения. Прогрессивные веб-приложения — дополнительный способ оптимизации ресурса. Рекомендуется использовать их для оптимизации скорости и для доступа с мобильных устройств при плохом интернет-соединении.

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

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

Из дополнительных плюсов: у вас появляется возможность отправлять push-уведомления пользователю, установившему сайт-приложение.

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

Проверить, оптимизирован ли сайт для смартфонов и планшетов, можно с помощью популярных официальных инструментов Google и Яндекс.

1. PageSpeed Insights

PageSpeed Insights — инструмент Google для проверки скорости загрузки страницы. Если мы говорим про оптимизацию, ускорение загрузки сайта и его версий — первая стратегическая задача. Из PageSpeed можно вытащить информацию об изображениях, которые нужно оптимизировать, о минификации CSS и JS, загрузке текста без веб-шрифтов. Рекомендации PageSpeed Insights хороши, однако не всегда объективны.

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

Читать еще: Создание сайта визитки самостоятельно

2. Google Mobile Friendly Test

Это инструмент, который заточен на проверку юзабилити мобильных страниц. Требуется только выбрать URL, вставить его в строку, далее следовать рекомендациям. Если вы увидели зеленое объявление: « Страница оптимизирована для мобильных устройств », не торопитесь радостно закрывать вкладку. Обратите внимание на подсказку: «Проблемы при загрузке страницы».

Там будет информация о ресурсах, которые Googlebot не смог загрузить. Обратите внимание на стили и скрипты, которые заблокированы для робота Google, по возможности откройте их для сканирования.

3. Яндекс.Вебмастер. Проверка мобильных страниц

Простой инструмент в «Яндекс.Вебмастере» с понятным отчетом. Дополнительно напоминает про отсутствие или наличие турбостраницы для проверяемого URL.

Отображаемые проблемы: наличие viewport, Flash-элементов, Java-апплетов, Silverlight-плагинов, Турбо-версии; горизонтальная прокрутка контента, величина шрифта.

1. Google Search Console. Удобство для мобильных

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

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

Небольшой чек-лист по проверке мобильной версии

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

Высокая скорость загрузки на 2G, 3G.
Настроен протокол HTTP/2. Проверка: http2.pro.
Открыты для сканирования CSS и JS. Проверить можно в Google Mobile Friendly Test.
Интуитивно понятная навигация.
Шрифт не менее 12 px.
Кликабельные элементы не перекрывают друг друга. Проверить можно в Google Lighthouse.
Расстояние между интерактивными элементами не менее 48px. Проверить можно в Google Lighthouse.
Все ссылки кликабельны.
Для интернет-магазинов есть возможность покупки в один клик.
Номера телефонов кликабельные.
Есть иконки мессенджеров с переходом в этот мессенджер.
Pop-up и всплывающие окна не занимают весь экран смартфона или планшета, их удобно закрывать.
Текст занимает меньше одного экрана прокрутки.
В полях форм используется автозаполнение input type. Кстати, иногда достаточно только номера телефона, остальное узнает у клиента и заполнит ваш менеджер. Если недостаточно, то ввод телефона — первое поле в форме.
Уменьшен вес видео, аудио, изображений. Не тратим байты пользователя.
Внедрены фавиконки для разных браузеров и устройств.

Автор: Граевская Лилия, SEO Group Head,

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

В данной статье рассмотрим основные настройки мобильной версии интернет-магазина.

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

Для того чтобы включить мобильную версию и произвести настройки, необходимо перейти в пункт меню «Интернет-магазин — Мобильная версия» (рис. 1).

Рисунок 1.

Как вы видите на рис.1 QR код вашей мобильной версии. Сканируйте QR на мобильном устройстве, чтобы быстро перейти в мобильную версию.

Далее поставьте галочку в поле активность и перейдем к рассмотрению настроек (рис.2).

Рисунок 2.

Активность — настройка, позволяющая выбрать какая версия будет открываться при заходе клиента в магазин с мобильного устройства: полная или мобильная.
Полное оформление заказа (по умолчанию заказ в 1 клик) – настройка, отвечающая за тип оформления заказа, а именно, если галочка не стоит, то по умолчанию, будет форма покупки в 1 клик, если галочка стоит, то оформление будет полным, как в полной версии сайта со всеми полями заполнения: с выбором способа оплаты и способа доставки. Более подробно о данной настройке можете почитать здесь.
Перенаправлять на поддомен m. (поддомен должен быть привязан к сайту) — если включить данную настройку, то при открытии сайта с мобильного устройства, автоматически домен измениться на m.домен. Это необходимо, если хотите использовать для мобильной версии отдельный файл robots.txt (настройка файла robots.txt находится во вкладке robots.txt).
Тема дизайна по умолчанию с версии 8.5 используется тема дизайна для мобильной версии — современная (рис.3). Классическая тема дизайна выбирается, если версия интернет-магазина ниже 8.5 (рис.4).

Рисунок 3.

Рисунок 4.

Цвет панели браузера выбираете из один из трех вариантов:
- Не задано — когда цвет браузера будет белый (рис.5);
- Согласно цветовой схеме — цвет браузера будет такой же как цветовая схема магазина (рис.6);
- Свой цвет — выбираете цвет в настройках (рис.7), как выглядит с разными цветами показано на рис.8.

Рисунок 5.

Рисунок 6.

Рисунок 7.

Рисунок 8.

В теме дизайна «Современная», дополнительно доступны следующие настройки:

Цвет шапки — выбираете либо цвет белый (рис.9), либо цвет по цветовой схеме магазина, например, в интернет-магазине цветовая схема оранжевая (рис.10).

Рисунок 9.

Рисунок 10.

Вид отображения категорий — выбираете «выводить корневые категории» (то есть в меню список категорий сразу виден (рис.11)) или «отображать только ссылку» (в меню будет ссылка «каталог» и только при нажатии на нее откроется список всех категорий (рис.12)).

Рисунок 11.

Рисунок 12.

Уровень вложенности навигации категорий каталога — указываете число до какого уровня можно будет перейти в меню (рис.13).

Рисунок 13.

Высота блока изображения товара в каталоге — указываете размер высота блока (рис.14).

Рисунок 14.

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

Рисунок 15.

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

Рисунок 16.

Рисунок 20.

Варианты отображения логотипа

Рисунок 17.

Рисунок 18.

Рисунок 19.

Текст — если выбираете данный пункт, то добавляются дополнительно 2 настройки (рис.17): выбираете либо «Показывать заголовок по умолчанию» (заголовок берется из общих настроек рис.18, цифра 1), либо «Свой заголовок» (вписываете свое название рис.18, цифра 2)
Логотип десктопной версии — подгрузится логотив как в полной версии сайта.
Загрузить свой логотип — можете загрузить свой логотип конкретно для мобильной версии.

Отображать кнопку «В корзину» в списке товаров — данная настройка выводит в каталоге кнопку «добавить в корзину» (рис.20).

Число строк в названии товара — указываете число, оно означает сколько строк выводить в названии, если название слишком длинное.

Для интернет-магазинов версии ниже 8.5 используется тема дизайна «Классическая», и из настроек описанных выше для соверменного дизайна будет только тестовый логотив: либо свой заголовк, либо заголовок по умолчанию.

Автоматический переход на мобильную версию при изменении размера окна — данная настрока позволяет автоматически менять версию магазина, то есть переход с полной версии на мобильную и наоборот, если изменлся размер окна. Отключенная галочка, то переход на мобильную версию будет по запросу и желанию клиента.
Тип отображения списка товаров в каталоге (по умолчанию) — выбираете тип отображения товаров в каталоге (плитка, список, блоки). И настройка «Разрешить покупателям менять тип» — позволяет менять тип отображения клиентам на сайте.
Количество товаров на главной — поле отвечает за количество товаров на главной странице сайта.
Выводить город — настройка позволяет выводить город в мобильной версии автоматически. Если галочка стоит, то город будет выводиться, если галочку убрать, то города не будет. На рисунке 21 показано, как будет выглядеть мобильная версия с включенной настройкой. На рисунке 22 показано, как выглядит мобильная версия с отключенной настройкой вывода города.

Рисунок 21.

Рисунок 22.

Выводить карусель — настройка отвечает за вывод карусели в мобильной версии: если галочка стоит, то карусель будет включена и отображаться в мобильной версии (рис.23), если галочка выключена, то карусель не будет выводиться (рис.24).

Рисунок 23.

Рисунок 24.

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

Номер телефона

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

Читать еще: Увеличение посетителей на сайт

Основной телефон магазина для мобильной версии будет показан для всех городов, для которых не задан телефон. Телефон вводится без форматирования в разделе «Настройки» — «Общие настройки» (рис.25), вкладка «О магазине», поле «Основной телефон в числовом формате» (рис.26). Пример: 74950000000.

Рисунок 25.

Рисунок 26.

Для разных городов также можно указывать разные номера телефонов, для этого перейдите в пункт меню «Настройки — Общие настройки», под полем «Телефон» нажмите на кликабельную ссылку «Указать разные телефоны для некоторых городов», (рис.27), затем для нужного города укажите номер телефона (рис. 28).

Рисунок 27.

Рисунок 28.

Robots.txt в мобильной версии

Файл robots.txt – это файл, который необходим для роботов поисковых систем. Данное поле можно настраивать, если мобильная версия доступна по поддомену m.

Если у вас поддомена нет, то файл будет такой же, как в полной версии сайта.

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

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

Первым делом, Вы должны понять, что мобильный Интернет уступает по скорости стационарному во много раз, плюс из-за небольшого экрана просмотр страниц так же не удобен. Я уже молчу про тех, кто пытается выйти в Интернет через GPRS. Мне это удалось прочувствовать однажды, когда я был далеко в Краснодарском крае, в какой-то глубинке, где телефон по непонятным причинам более-менее (40-50%) ловил только на кладбище. С такой связью можно звонить, но вот Интернет был совершенно некудышным. Поэтому когда мне пришлось там загружать страницы размеров 200-300 КБ, из которых 90% — это ненужная графика, я проклинал создателей этого сайта.

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

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

Что касается ширины страницы, то рекомендую поставить max-width: 620px; у самого верхнего контейнера. Сильнее растягивать не требуется.

Мобильную версию сайта лучше сделать на отдельном поддомене, например, на m.mysite.ru.

Когда Ваш отдельный сайт для мобильных устройств будет готов, надо подумать, как перенаправлять пользователей с мобильными устройствами с сайта mysite.ru на m.mysite.ru. Код для определения браузера можно скачать здесь: http://detectmobilebrowsers.com/.

Скачиваете, например, для PHP. Далее вставляете в index-файл этот код и заменяете там адрес в header() на адрес Вашей мобильной версии сайта.

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

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

Это всё, что требуется сделать для того, чтобы была мобильная версия Вашего сайта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 25 ):

Хах! Каждая статья всё лучше и лучше! Спасибо. Эта статься то что нужно! Как раз задался этим вопросом и тут бац и статья) Михаил, вы предсказатель однако

Отличная статья! А я вот наткнулся на курс как сделать мобильную версию сайта http://infosklad.org/threads/udemy-sozdanie-sajta-dlja-mobilnyx-ustrojstv-v-adobe-muse.8120/ мне очень понравился, рекомендую!

Я вспомнил как лет таки шесть назад делал на своем школьном сайте мобильную версию сайта, я реализовал яваскриптом, определялось разрешение с экрана у посетителя и перенаправляло на мобильную версию

А если это планшет? Или вы и это учли?

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

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

В панели хостинга создаются поддомены обычно. Хранить это в сессии смысла нет.

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

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

Я так, и не понял чтоб создать моб. версию сайта — надо всё скопировать с полной.версии сайта например: soft.com все скрипты, статьи,файлы игры музыка и т.д, скопировать в отдельную папку например: m.soft.com — и создать отдельную вёрстку сайта ?

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

Повлияет ли это на поисковое продвижение? Нужно ли устанавливать микроразметку на мобилюную версию? Или вообще поддомен закрыть от индексации?

А как ПРИНУДИТЕЛЬНО запустить полную версию сайта с мобильного устройства? На мобильной версии кнопка — перейти на полную версию, но срабатывает скрипт перенеправления и опять — мобильная. Сам сделал 🙂 с мобильного — ссылка на index_full.php без скрипта

Записать в cookie предпочтение пользователя, и при редиректе на мобильную версию проверять наличие этой cookie. Если она есть, то не переходить на мобильную версию сайта.

Спасибо! Но я не заморачивался с куками — скопировал index.php в index_f.php, из последнего уборал «тот самый» скрипт и в ссылке «полная версия» указал index_f.php. Таким образом index_f.php задействован только при переходе с мобильного устройства на полную версию сайта. Мне кажеться, это самый простой путь.

Михаил, а можете немного поподробнее описать этот алгоритм переадресаций? Код для определения браузера я поместил в индексной файл, перенаправление происходить на страницу set_version.php. Создал файл set_version.php. Там две кнопки — «мобильная» и «полная» версия, при нажатии на каждую происходит запись соответствующего значения в cookie. Но вот как сделать, чтобы после нажатия кнопки «Полная версия» сделался редирект на индекс? А то получается замкнутый круг — в полной версии срабатывает скрипт определения браузера, и я опять на странице set_version Уже и ставил разные условия в индексном файле, и проверял на значения куки. Но все равно не получается. Буду очень благодарен если Вы поможете мне и напишете кратенький алгоритм и механизм реализации. Спасибо.

Читать еще: Ссылка вконтакте на сайт

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

Скажите у кого есть опыт, а как быть с контентом, если он дублируется с основного сайта на мобильный? Можно ведь санкции получить от ПС. Или нет? Что делать?

Сейчас мобильная версия типа m.site.ru давно не в моде, потому что нужно продвигать практически 2 сайта! Яндекс и Google активно рекомендуют Адаптивную верстку сайта, которая подставляет одинаковый контент для разных экранов в удобной форме. Изображения, которые не несут никакой информации (фон, слайдер из клипартов) можно убрать в мобильной версии. Если пользователю не понравится мобильный дизайн, он может нажать на кнопку «обычная версия» и попасть на привычный сайт. Но загружается всё это гораздо быстрее. + поисковики в выдаче ставят метку «мобильная версия», если со смартфона смотреть. Подставляется только отдельный CCS файл, который определяет экран пользователя и подгружает нужный контент. Если интересно, можно почитать более подробно в сети про адаптивную верстку. По стоимости самое актуальное предложение нашел тут http://www.mobile-version.ru/ Статистика мобильных пользователей растет с каждым днем. А роботы Яндекса и Гугла каждый раз придумывают новые правила ранжирования. Поэтому лучше шагать в ногу со временем и дружить с поисковиками. Они плохого не посоветуют))

Спасибо за отличную статью! Есть предложение сделать статью ещё лучше, дополнив другими способами создания мобильной версии, а именно: — Конструктор мобильных сайтов. Подходит для простых сайтов и стоимость от 27 руб/день https://eski.mobi/services/go/ — LITE адаптивный дизайн. Подходит для любых сайтов, стоимость от 10 000 руб., работы выполняет ведущая студия по адаптации в РФ https://eski.mobi/services/lite/

Михаил статья супер, но боюсь сам не смогу грамотно сделать мобильную версию для нашего сайта http://conceptplus.com.ua/ может посоветуете хорошего (не очень дорогого) специалиста? Пробовал сделать через одного спеца адаптивную версию, но нам явно подсунули что-то не то, сайт с мобильного выглядел не очень, шрифт большой но прокручивать нужно и влево и вправо (вниз вверх — естественно), пришлось вернуть все на место т.е. поисковики так и хотят адаптивную версию под моб. устройства. Спасибо, если кто откликнется.

Чтобы создать мобильную версию сайта можно использовать множество способов, но я использовал наиболее приемлемый и простой для себя, при том при всем, сайт реально хорошо отображался на смартфон, да сначала подглючивал, но это мой косяк, после того как я его дошаманил, все работало очень хорошо. Я использовал плагины: WPtap News Press, WordPress PDA & iPhone, Duda Mobile Website Builder. У каждого из них есть свои недостатки и преимущества , но зато работают они четко и слажено, если их правильно настроить и иногда контролировать. Все свои сайты я переделывал только благодаря им! А как правильно все сделать и настроить, читайте здесь: http://www.mobile-version.ru/

Я тоже пыталась адаптировать сайт под мобильное устройство. Предыстория такова, что открыли с мужем интернет-магазин кондиционеров. Но с телефона конечно не удобно смотреть его. Поэтому попробовали сами адаптацию сайта под мобильные устройства. Прочитали много статей, в том числе и эту тоже. Честно- пол ночи сидели..До конца так и не разобрались. Проверяли адаптацию сайта, мучались, не выспались( Конечно расстроились, потому что время было зря потрачено и силы. У нас реклама от гугла. Из-за кривой верстки сайта на компе она помещалась, а вот при просмотре с мобильного не хочет адаптироваться и выходит за левую сторону экрана. Не адаптировались не только картинки, но и видео.((В итоге в интернете нашли вот какую страничку http://www.mobile-version.ru/ Цена приемлемая, срок исполнения вышел всего 2 дня! Сайт после адаптации проходит тесты на мобильность гугла и яндекса. Кстати на самом сайте этой компании очень интересные статьи. Все написано понятно, поэтому мы и заинтересовались. По телефону нам так же отвечали на все вопросы. Весь сайт был сделан не в горизонтальную, а в вертикальную прокрутку. Смотрится теперь сайт на телефоне очень классно! И голову ломать не пришлось и сайт теперь адаптирован и под планшеты и под мобильники)Спасибо!

Статья бородатая, уже давно поддомены не делают для мобильных версий. Плюс никаких практических рекомендаций, а только теория, типо «Хотите мобильный сайт? Сделайте его мобильным»

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

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

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

В Google Chrome

Для того, чтобы открыть мобильную версию сайта с компьютера потребуется открыть Google Chrome и перейти на нужный URL после чего кликнуть правой клавиши мыши в любом месте экрана и в выпавшем меню выбрать пункт «Посмотреть код».

В правом-верхнем углу кликаем на значок «Мобильный телефон».

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

Также доступно изменение масштаба.

Дополнительно можно выбрать способ отображения (online/offline).

При необходимости стоит изменить ориентацию экрана на альбомную или стандартную.

В Mozilla Firefox

Посмотреть мобильную версию сайта с компьютера в Mozilla можно аналогично кликнув в любую точку сайта правой клавишей мыши и в меню выбрав «Исследовать элемент».

Далее в нижнем-правом углу потребуется выбрать вид «Мобильный телефон».

При необходимости нажав на «Адаптивный» можно выбрать нужную модель смартфона.

Справа можно настроить разрешение экрана (настраивается вручную).

Далее идет возможность изменить ориентацию экрана.

После можно изменить DPR (Соотношение пикселей устройства к снимку экрана).

Как и в Google Chrome можно изменить способ подключения на 2G, 3G, GPS, 4G или

Без ограничения;
GPRS;
Regular 2G;
Goog 2G;
Regular 3G;
Good 3G;
Regular 4G/LTE;
DSL;
Wi-Fi.

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

Ручной метод

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

Для чего это нужно?

Данный навык будет полезен при:

Проверки корректности отображения верстки сайта;
Тестировании турбо-страниц (в том числе и для интернет-магазинов) и AMP;
Тестировании мобильной выдачи.