Как создать мобильную версию сайта
|
Содержание 1. Что такое мобильная версия и для чего она нужна |
Об авторе: Павел Швальгин В интернет-маркетинге с 2009 года |
Сегодня адаптация сайта является важным инструментом продвижения любого более или менее крупного проекта, потому что с каждым становится все больше пользователей с мобильных устройств.
Мобильные версии порталов позволяют определить тип устройства. Если гаджет дает ответ как мобильный, код сайта интерпретирует это и загружает адаптированную под экран версию с нужным разрешением.
Благодаря этому пользователи могут легко пролистывать страницы без нажатия крошечных ссылок и кнопок, лишнего зума. Если таких удобств нет, посетители скорее всего быстро покинут сайт.
Мобильная версия позволяет пользователям работать с несколькими версиями ресурса – для мобильных и десктопных устройств. Это может быть связка из двух сайтов: только для десктопа или только для мобильных, иногда с префиксом m. Чаще всего применяется адаптивный подход – одинаковыйURL с гибкими настройками фронтенда для показа на разных экранах.
Универсальное решение отсутствует. В каких-то случаях лучше подходит концепция mobile-only с отдельным порталом для мобильных, в других – общий сайт для всех устройств.
Что такое мобильная версия и для чего она нужна
Мобильная версия представляет собой адаптацию под мобильные устройства для удобства пользователей. С ее помощью происходит полный охват целевой аудитории, т.к. владельцы смартфонов часто не остаются на сайтах с низкой скоростью загрузки страниц или нечитабельным текстом. В то же время комфортный доступ к порталу и удобная навигация удерживают посетителей. Кроме того, поисковые системы отдают предпочтение ресурсам с адаптивным дизайном. По статистике Яндекс.Радара, большее количество пользователей в России посещают сайты с мобильных устройств.
Мобильная версия повышает показатель конверсии и помогает увеличить органический трафик. Чтобы росли продажи, следует при разработке постараться решить все проблемы, возникающие у посетителей:
• сделать комфортным просмотр страниц. Данный пункт включает в себя адаптацию изображений под размер экрана гаджета, устранение рекламы на весь экран, использование шрифта 16рх;
• увеличить скорость загрузки страниц;
• обеспечить удобную навигацию и взаимодействие с элементами ресурса. К примеру, добавить кнопки для покупки в один клик, меню и ссылку на главную страницу на первом экране. Также важно сделать номера телефонов кликабельными, добавив коды регионов, убрать сложные и длинные формы для заполнения.
Одновременно с мобильной версией сайта есть другой вариант – адаптивный дизайн. Это не отдельная, специально разработанная версия ресурса. Это основной сайт, подстраивающийся под устройство в автоматическом режиме.
Адаптивная версия имеет один адрес с основным ресурсом, поэтому нет необходимости совершать перенаправление. Это усиливает позиции сайта при ранжировании поисковыми системами. Вся информация отображается в том же объеме и формате, только подстраивается под размеры окна.
Среди преимуществ мобильной версии можно отметить:
• удобную навигацию;
• высокую скорость загрузки;
• минимум лишней информации, что увеличивает шансы совершения пользователями целевых действий;
• полностью автономную от основного сайта версию, которую можно настраивать отдельно.
Минусом данной модели можно назвать сложности в SEO-продвижении. Они связаны с дублированием контента, что требует определенных действий по минимизации негативного влияния на процесс раскрутки сайта. Помимо этого, мобильная версия может некорректно отображаться на экранах планшетов, также в ней отсутствует полный функционал основной версии ресурса.
Способы реализации, плюсы и минусы способов
Самостоятельная разработка
Лучшим вариантом является разработка самописной мобильной версии сайта с нуля, если есть достаточно ресурсов, и проект в меру большой.
Создание уникальной мобильной версии позволяет вносить тонкие изменения, которые недоступны при использовании CMS и конструкторов.
При отсутствии собственного штата разработчиков или опыта, следует обратиться в веб-студию или digital-агентство.
Когда разработка сайта связана с продвижением, лучшим выбором станет агентство, поскольку сайты создаются для роста прибыли, а не для галочки. В дополнение к ресурсу агентство сможет разработать план продвижения.
• Первый этап разработки – бриф со стороны исполнителя. Необходимо описать свои требования и ожидания. На их основе будет сформирован процесс разработки сайта.
• После разрабатываются макеты ресурса для определения структуры, наполнения и внешнего вида.
• Далее собирается семантическое ядро, благодаря которому структура будет спроектирована оптимально.
• Согласовывается дизайн ресурса.
• Разрабатываетсяback-end и front-end.
• Выполняется тестирование – функциональное, нагрузочное, юзабилити.
• Осуществляются доработки.
Если необходимо реализовать дополнительный функционал или внести исправления, можно обратиться к разработчикам и внедрить любые новшества в рамках имеющегося бюджета.
CMS
Среди удобных и мощных CMS стоит выделить Webasyst и WordPress.
Webasyst
Webasyst является не обычной CMS, а, скорее, платформой с широким спектром возможностей, среди них собственная CMS. Однако, если говорить конкретно о системах управления ресурсом, то разработка Webasyst выделяется среди прочих.
Данный продукт позволяет строить нагруженные интернет-магазины и веб-сайты благодаря встроенным системам CRM, CMS, E-commerce движок Shop-script и т.д.
WordPress
Система менее мощная, но предоставляющая при этом серьезные возможности и поддержку. Это всемирно признанный продукт для управления информационными ресурсами, блогами и не нагруженными интернет-магазинами.
В Webasyst и WordPress присутствуют:
• Сотни интеграций и плагинов;
• Продуманная админ-панель;
• Встроенная поддержка мобильной версии.
Если вы настроены решительно и от мобильной версии требуете большего, то вам помогут дополнительные плагины для WordPress – JetPack и WPtouch.
Если ресурс размещен на wordpress.com, платформа автоматически предложит мобильную тему для портала в зависимости от основной уже установленной темы. Если используется другой хостинг, проверить свою тему версию и тему WordPress можно одним из способов:
• проверить панель администрирования. В ней присутствует номер версии – в нижнем колонтитуле или верхней части панели инструментов;
• перейти на сайт с установленным WordPress и с помощью функции просмотра исходного кода в браузере найти на странице тег generator, в нем содержится номер версии. Кроме того, номер версии находится в файле /wp-includes/version.php.
Joomla
Если используется Joomla, проверить версию можно в панели администрирования, с помощью файла /version.php, который, как правило, находится в /libraries/joomla/filesили на странице информации о системе.
Drupal
Чтобы перевести ресурс на Drupal на новую тему, удобную для мобильных устройств, изучите руководство по адаптивному веб-дизайну Drupal. Можно найти список адаптивных тем и подобрать применимую к сайту.
Конструкторы сайтов
Данные сервисы предназначены для непрофессионалов и для тех проектов, для которых не имеет смысла дорогостоящая разработка. Их удобство заключается в возможности создать ресурс силами одного человека. Буквально за несколько часов можно собрать целый ресурс или прототип, не уступающий по оформлению и дизайну дорогим сайтам.
Хотя конструкторы предоставляют полный контроль над процессом разработки и дизайном без посторонней помощи, они ограничивают возможности. К примеру, вам придется полагаться на шаблоны, которые могут не содержать нужных функций.
Онлайн сервисы
Не обязательно обладать знаниями в разработке, чтобы создать мобильную версию сайта. Достаточно использовать специальные сервисы для адаптации ресурсов под смартфоны. К их числу относятся:
• MobiSiteGalore
• MobStac
• Mofuse
• Mobile App America
• bMobilized
• Mobify.
Что учесть при создании мобильной версии сайта
Как только было решено создать мобильную версию веб-ресурса – на CMS, конструкторе или с помощью агентства, можно начинать процесс. Нужно тщательно исследовать все варианты, чтобы принять лучшее решение по имеющемуся бюджету и удовлетворить запросы целевой аудитории.
Начиная верстку мобильной версии сайта, соблюдайте следующие рекомендации:
• Вертикальная прокрутка. Страница должна быть удобной для скроллинга.
• Совместимость с жестами. Экран гаджета – специфический способ взаимодействия со страницей. Все ссылки должно быть удобно нажимать.
• Дополнительная графика. Страницы следует освободить от ненужных видео и изображений.
• Размещение информации. Вся важная информация должна находиться вверху страницы.
• Большие поля формы.
• Минимальные требования к форме. Для заполнения рекомендуется оставить минимум полей.
• Современный код. Используйте HTML5, новые php и js фреймворки.
Перед тем как запускать финальную мобильную версию ресурса, обязательно ее протестируйте. Посетителям важно предоставить положительный опыт. Если пользователи столкнутся с проблемами, то могут не вернуться.
Полезные советы по созданию мобильной версии сайта
Облегчите поиск информации
Ряд пользователей не против уделить время для поиска и изучения контента, но для кого-то скорость становится важна. Организуйте версию под нужды посетителей, заходящих на сайт с мобильных устройств. Сделайте навигацию, элементы управления максимально комфортными при использовании смартфона. Не пренебрегайте разделом FAQ – в него можно добавить информацию по использованию сайта с разных устройств.
Сделайте большие кнопки, элементы навигации и формы
На компьютере достаточно просто кликнуть курсором мыши на маленькую кнопку. Но если загрузить сайт на мобильном и попытаться нажать кнопку, это получится далеко не сразу. Возрастает также риск неверного нажатия при расположении двух или более кнопок вблизи друг друга.
Используйте шрифты большего кегля
Тяжело читать с экрана телефона – особенно когда текст не удается разобрать из-за размера. Необходимо провести замеры на различных устройствах, чтобы точно знать, для какого из экранов подходит тот или иной размер шрифта.
Сжимайте CSS и изображения
Скорость загрузки сайта критически важна для пользователей мобильных устройств. Если процесс затягивается, многие пользователи отказываются от посещения страницы. Перед загрузкой на ресурс необходимо использовать средства сжатия файлов, чтобы оптимизировать страницы.
Другие статьи в данном разделе:
