Руководство по созданию мобильной версии сайта
Мобильные версии сайтов позволяют определять тип устройства пользователя. Если устройство даёт ответ как мобильное, код сайта интерпретирует это и загружает именно адаптированную версии под экран с соответствующим разрешением.
Это позволяет пользователям легко пролистывать страницы без лишнего зума или нажатия крошечных кнопок и ссылок. Если таких удобств нет, то весьма вероятно, что пользователь быстро покинет сайт.
Мобильная версия сайта даёт возможность пользователям работать с несколькими версиями сайта — для десктопных и мобильных устройств. Это может быть связка из двух сайтов: только для мобильных, иногда с префиксом m., или только для десктопа. Чаще используют именно адаптивный подход — один и тот же URL с гибкими настройками фронтенда для удобного показа на разных экранах.
Верное универсальное решение отсутствует. Иногда лучше подходит концепция mobile-only с отдельным сайтом для мобильных, а в ряде случаев целесообразно делать общий сайт для всех устройств.
Как создать мобильную версию сайта
Самостоятельная разработка
Наилучший вариант — это создать самописную мобильную версию сайта с нуля, если у вас достаточно ресурсов, и проект в меру большой.
Разработка уникальной мобильной версии позволяет вносить тонкие изменения, недоступные при использовании CMS, а также конструкторов.
При отсутствии опыта или собственного штата разработчиков, обратитесь в digital агентство или веб-студию.
Когда разработка сайта сопряжена с продвижением, приоритетным выбором станет агентство, ведь сайты создаются не для галочки, а для роста прибыли. В дополнение к сайту агентство сможет разработать эффективный план продвижения в онлайне, благодаря чему мобильная сайта будет приносить деньги.
При необходимости реализации дополнительного функционала или внесения исправлений вы можете обращаться к разработчикам и внедрять любые новшества в рамках бюджета.
Требования к разработчикам — отдельный глубокий вопрос, и его не удастся раскрыть сжато. Вкратце лишь важно отметить, что не обязательно брать полиглотов, full-stack разработчиков — часто достаточно ограниченного круга компетенций. В частности, многие онлайн-магазины требуют разработчиков 1С, что является не столь распространенным, но ценным навыком.
Среди мощных и удобных CMS стоит сразу выделить WordPress и Webasyst.
Webasyst
Webasyst, справедливости ради, является не обычной CMS, а, скорее, платформой с широким спектром возможностей, среди которых собственная CMS. Тем не менее, если говорить конкретно о системах управления сайтами, то разработка Webasyst выделяется среди других.
Этот продукт позволяет строить нагруженные веб-сайты и интернет-магазины благодаря встроенным системам:
Это далеко не полный список.
WordPress
Чуть менее мощная система, но также предоставляющая серьёзные возможности и поддержку — WordPress. Это всемирно признанный продукт для управления информационными сайтами, блогами и не нагруженными интернет-магазинами.
В WordPress и Webasyst есть:
Если сайт размещён на wordpress.com, платформа автоматически предложит мобильную тему для сайта в зависимости от основной темы, которая уже установлена. Если вы пользуетесь другим хостингом, проверить свою тему и версию WordPress можно одним из несколькими способами.
Joomla
Если вы используете Joomla, проверять версию следует в панели администрирования, на странице информации о системе или с помощью файла /version.php, который обычно находится в /libraries/joomla/files.
Если версия Joomla не самая последняя из доступных, лучше обновить её, как и шаблон. Другой вариант — установить мобильное расширение, что сделает сайт мобильным без необходимости обновления версии.
Drupal
Чтобы перевести сайт на Drupal на новую тему, удобную для мобильных, изучите руководство по адаптивному веб-дизайну Drupal. Там можно найти список адаптивных тем и выбрать ту, которая применима к сайту.
Конструкторы сайтов
Эти сервисы предназначены для непрофессионалов и для тех проектов, для которых имеет мало смысла дорогостоящая разработка. Удобство состоит в возможности создать сайт силами одного человека.
Самые популярные и мощные конструкторы на российском рынке:
С их помощью буквально за несколько часов собирается целый сайт или прототип, по дизайну и оформлению не уступающий профессиональным дорогим ресурсам.
В конструкторах вы можете использовать простые и наглядные технологии:
Интеграции Calltouch
У конструкторов есть бесплатные тарифы, на которых простейший сайт собирается быстро и легко при наличии домена.
Хотя конструкторы сайтов предоставляют полный контроль над дизайном и процессом разработки без посторонней помощи, они также ограничивают возможности. Например, вы придётся полагаться на шаблоны, которые могут не содержать тех функций, которые нужны на сайте.
Что предусмотреть перед стартом разработки
Как только вы решили, каким образом создать мобильную версию сайта — с помощью агентства, на CMS или конструкторе, можно начинать процесс. Необходимо тщательно исследовать каждый вариант, чтобы принять лучшее решение по бюджету и удовлетворить запросы целевой аудитории.
Приступая к созданию мобильной версии сайта, соблюдайте следующие ключевые рекомендации:
Прежде чем запускать финальную мобильную версию сайта, обязательно протестируйте её. Важно предоставить посетителям сайта положительный опыт. Если они столкнутся с проблемами, то могут и не вернуться.
Тестирование мобильной версии
Для выбора подходящей версии шаблона в CMS, а также в конструкторе, стоит ознакомиться с примером её отображения — как правило, ссылка на готовый результат есть в описании тем.
Как только вы собрали мобильную версию и пришла пора её запускать, протестируйте её.
Существует целый список сервисов, которые служат для оценки скорости загрузки сайта и его адаптации к мобильным устройствам.
Эти сервисы предоставляют детальные сведения о том, какие проблемы с загрузкой были обнаружены, подробную статистику и рекомендации по устранению проблем.
Инструмент Mobile-Friendly Test требует только URL сайта, после чего он быстро анализирует его и предоставляет результат в течение нескольких секунд.
Если сайт по-прежнему не подходит для мобильных устройств, Mobile-Friendly покажет причину, а также предоставит полезную информацию обо всём, что необходимо исправить для оптимизации под мобильные устройства.
Полезные советы для мобильной версии сайта
Облегчите поиск информации для пользователей
Некоторые пользователи мобильных не против уделить время для поиска и изучения контента, как они это делают за компьютером. Но для кого-то скорость становится экстремально важна.
Организуйте мобильную версию под нужды пользователей, которые заходят туда с мобильных устройств. Что они ищут?
Сделайте элементы управления, навигацию максимально комфортными при использовании со смартфона. Вам следует точно знать, как люди работают с сайтом через смартфоны и планшеты.
Не пренебрегайте разделом FAQ — добавьте туда полезную информацию по использованию ресурса с разных устройств.
Сделайте большие кнопки, формы и элементы навигации
Достаточно просто кликнуть на маленькую кнопку курсором мыши. Но если загрузить сайт на телефоне и попытаться нажать кнопку, у вас получится далеко не сразу. Тем более, возрастает риск неверного нажатия при расположении двух и более небольших кнопок вблизи друг от друга.
Лучший способ избавить посетителей от разочарования — сделать действительно удобные крупные элементы управления. Рассчитайте параметры отображения с тем, чтобы для любого разрешения кнопки и формы было удобно использовать.
Используйте шрифты большего кегля
Читать с экрана телефона тяжело — особенно когда текст еле удаётся разобрать из-за размера. Проведите замеры на разных устройствах, чтобы точно знать, для какого из экранов подходит тот или иной размер шрифта.
Сжимайте изображения и CSS
Говоря о скорости загрузки сайта: она критически значима для пользователей смартфонов. Если процесс затягивается даже на 2 секунды, многие пользователи просто отказываются от посещения страницы.
Используйте средства сжатия файлов перед загрузкой на сайт, чтобы оптимизировать страницы.
Сквозная аналитика
Мобильная версия или адаптив?
Создание отдельного мобильного сайта означает размещение мобильной версии на отдельных URL-адресах, которые могут быть мобильным поддоменом m.primer.com, директорией основного сайта primer.com/mobile или совершенно отдельным мобильным доменом primer.mobi.
При использовании отдельного мобильного сайта в любом случае придётся включать элементы адаптивного дизайна. Это позволит страницам адаптироваться к небольшим различиям в размерах экрана.
Создание отдельного мобильного сайта определённо имеет свои плюсы и минусы. Он является дополнением к основному сайту и оптимизирован для использования на ходу. Он способен помочь с органическим продвижением, так как чаще появляется при поиске на мобильных устройствах, чем сайт на обычном домене. Он также гораздо легко и поэтому быстрее.
С точки зрения мобильных пользователей, безусловно, предпочтителен отдельный мобильный сайт. Мобильные пользователи автоматически перенаправляются на мобильный URL, но пользователи планшетов заходят на десктоп, поэтому контент не одинаков для всех устройств.
Однако с точки зрения бизнеса, вы получите два отдельных сайта, которые надо обслуживать. Это занимает много времени, не говоря уже о деньгах. Также придётся заняться SEO для нового сайта с нуля.
Ещё одна очень важная вещь — у вас будет дублированный контент, за который Google может наказать. Тем не менее, эту проблему можно обойти средствами веб-мастера. Сайт не будет отображаться как дублирующий — вместо этого два URL будут рассматриваться как имеющие эквивалентное содержание.
Многие решают использовать мобильный подход. По сути, это означает, что сначала нужно создать сайт для мобильных устройств, а затем — десктоп. Это, безусловно, лучший подход, потому что, если удастся заставить сайт хорошо работать на мобильных устройствах, он будет работать ещё лучше на десктопе.
Однако, если вы не создаёте сайт с нуля и хотите просто оптимизировать для мобильных существующий, можете добавить мобильную версию по другому URL-адресу или изменить дизайн, чтобы макет адаптировался под каждое устройство.
Отзывчивый дизайн
Отзывчивый или адаптивный дизайн означает настройку существующего сайта таким образом, чтобы макет изменялся, автоматически адаптировался к различным мобильным устройствам.
Таким образом, независимо от того, на каком устройстве сайт просматривается, макет автоматически подстраивается под размер экрана и разрешение устройства, что значительно повышает удобство использования. Более того, адаптивный веб-дизайн настоятельно рекомендован Google.
Отзывчивый сайт обеспечивает быструю загрузку страниц, удобную навигацию и общую оптимизацию сайта, где пользователи могут быстро и легко найти то, что ищут.
Делаем мобильный редирект 3-мя способами
Недавно один человек написал мне с просьбой подсказать, как перенаправить пользователей мобильных устройств на другую страницу. Он занимается арбитражом трафика и нужно отделить «мобильных» посетителей от «немобильных» и автоматически отправить первых на адаптированный лендинг, причём сделать это с помощью JavaScript.
Делаем мобильный редирект на PHP
Суть здесь в том, что каждое устройство сообщает серверу свой т.н. User Agent («юзер-агент»). В этом юзер-агенте находится информация о данном устройстве. Соответственно, с помощью PHP мы эту информацию извлекаем и, если по ней ясно, что устройство — мобильное, делаем редирект.
У мобильных устройств существует просто куча разных юзер-агентов. Я нашёл код, где учтены, наверное, почти все эти агенты:
Вставьте код в самое начало документа, а вместо http://site.ru/mobile/ подставьте URL, на который должны улетать мобильные пользователи. Обратите внимание, что перед этим кодом не должно быть даже пробельных символов и переводов строк — таковы уж особенности редиректов на PHP.
Передача меток и субаккаунтов на мобильный лендинг с помощью PHP
Обычно при ведении рекламных кампаний нужно получить как можно больше информации о трафике. Для этого используются, в основном, UTM-метки и субаккаунты для CPA-сетей. Хорошо бы при перенаправлении посетителя на мобильный лендинг передать и все эти данные.
Передача UTM-меток
Передача субаккаунтов
Чтобы понять принцип действия, почитайте статью про UTM-метки и субаккаунты в CPA.
Т.е. здесь мы из UTM-меток получили данные для субаккаунтов.
Эта конструкция должна идти после строки RewriteEngine On (если её нет — добавьте).
Если же нужно отправить всех мобильных посетителей на mobile-версию сайта (с любой страницы на http://m.site.ru/ ), то последняя строчка из кода выше может иметь такой вид:
Перенаправление на мобильную версию сайта в HTML (JavaScript)
Иногда нет возможности что-то редактировать на сайте на стороне сервера — например, вы используете конструктор сайтов. Тут-то и пригодится редирект на HTML, а точнее — на JavaScript, т.к. на простом HTML нужные условия не прописать.
В этом случае все посетители, у которых ширина экрана меньше 600 px улетят на http://site.ru/mobile/. Если нужна меньшая ширина — меняйте 600 на меньшее значение.
Передача меток и субаккаунтов на мобильный лендинг с помощью JavaScript
При перенаправлении этим способом также можно сохранить данные о трафике.
Передача UTM-меток
Передача субаккаунтов
Т.е. из UTM-меток получили субаккаунты.
Какой способ мобильного редиректа лучше?
С JavaScript-редиректом юзер-агент не важен, т.к. проверяется только ширина экрана. Но здесь посетитель может заметить, как сначала попадает на одну страницу, а потом его перекидывает на другую.
Способ на ява скрипт наиболее оптимальный, но само перенаправление происходит медленнее.
Очень хорошая статья, но почему то у меня не работает способ Передача меток на мобильный лендинг с помощью PHP.
Может есть какая то хитрость?
А способ со скриптом не работает в некоторых телефонах, хотя разрешение у них явно меньше 800 px.
Хитростей нет, возможно, что-то упустили — не поставили кавычки где-нибудь и т.п.
Ошибка может быть либо при передаче меток на лендинг, либо при приёме их на лендинге.
Огромнейшее СПАСИБО. я все голову ломала, как перекинуть пользователей на мобильную версию, все сработало ОТЛИЧНО. Подробно и ясно, особенно для меня, чайника просто все разжевано. Еще раз вам ОГРОМНОЕ спасибо! =) =) =)
Пиз*дец как у меня пригорело, когда не мог допереть почему у меня телефон не редиректит на мобильную версию. Это статья баян. И телефоны уже с расширениеМ экрана получше. ВЫСТАВЛЯЙТЕ СМЕЛО 1200 ЗА МЕСТО 600. *HELP* *MACHO*
Спасибо большое! Пробовал много вариантов, но именно ваш скрипт помог =)
статья очень полезная — спасибо! но в жизни вопрос гораздо сложнее))) владельцы сайтов хотят чтоб смартфоны/телефоны получали мобильную версию, но при этом видели бы кнопку или ссылку на полную версию сайта, и могли бы ее тоже открыть. а этож надо еще что-то придумывать — куки или может еще что-то
Спасибо за информацию неделю маялся как с не адаптивного битрикса перекидывать на мобильную версию сайта, попробую сделать по вашей рекомендации — если получится отпишусь с рекомендацией
Петр, спасибо огромное! Статья крайне полезная и четкая.
Отдельное спасибо за информацию по передаче UTM!
Я, наверное, перерыл всю информацию о мобильных версиях в сети. Изначально хотел сделать самостоятельно отдельную мобильную версию сайта на поддомене. Но узнал, что поисковые системы гораздо лучше относятся именно к адаптации сайта под рвзные устройства. Потому что используется один контент и одна ссылка. Начал пробовать сделать адаптацию своими руками, но там очень много подводных камней. Стили нужно прописывать чуть ли не под каждый гаджет. Т.е. под каждую ширину экрана нужно создавать новые параметры отображения всех блоков. Решил найти специалиста, который разбирается в этом. Это тоже оказалось не так просто. Разброс цен аховый. От 500 руб до 100 000 руб. Понятное дело — решил начать с 500))
После общения, конечно же, оказалось что адаптация моего сайта стоит не 500 руб, а 17 000 руб)))
Но после долгих поисков нашел оптимальный вариант по всем параметрам. Адаптацию сайта поручил им mobile-version.ru и не пожалел. Сразу сказали адекватную стоимость уже на своем сайте и потом она не изменилась. Все мои пожелания выполнени и даже внесли свои предложения бесплатно! Теперь мой сайт проходит тесты от гугла, и яндекс вебмастер тоже счастлив, наблюдая за моим сайтом.
Для тех, кто еще сомневается — делать или не делать адаптацию — ДЕЛАЙТЕ. 8)
Поисковики заставят сделать мобильные версии всем сайтам. Вопрос времени.
Подскажите пожалуйста, у меня на хостинге нет поддержки php, сайт prestigechat.ru. В страницу HTML вписываю код:
Возможно, в других скриптах в коде этой страницы есть ошибки.