Сложно представить современный мир без смартфонов. Сегодня с помощью телефонов не только звонят и обмениваются сообщениями, но и активно работают в интернете, используют различные приложения и так далее. Многочисленные исследования показывают, что мобильная аудитория уже обогнала десктопную (т.е. пользователей компьютеров) и продолжает расти. Это крайне важно учитывать при создании сайтов.
Сегодня мы попробуем разобраться, как сделать мобильную версию сайта самостоятельно.
Зачем это нужно
Любой сайт отлично выглядит на экране монитора. Но если зайти на него со смартфона или планшета, то окажется, что контент на странице занимает много места и не выводится на экран полностью.
В некоторых случаях сайт может быть вообще обрезан. Об удобстве использования такого сайта и говорить нечего меню неудобное, по ссылкам переходить с помощью тачскрина очень сложно и так далее.
В результате пользователи покидают такие сайты. Чтобы этого не произошло, нужно адаптировать сайт под мобильные устройства. Таким образом, мобильная версия сайта как минимум помогает:
- Повысить комфорт и доверие посетителей
- Улучшить поисковую оптимизацию (Google и Яндекс учитывает этот фактор при ранжировании)
Это напрямую влияет на рост трафика, конверсии и увеличение продаж (например, если сайт является интернет-магазином).
Какой должна быть мобильная версия сайта
Если двумя словами информация на сайте должна восприниматься без усилий. Страницы должны быть максимально простыми и понятными, изображения и видео быстро загружаться и корректно отображаться, важные элементы находиться на видных местах и так далее.
Несколько советов:
- Визуально выделяйте самые важные кнопки (например, кнопку заказа/покупки), располагая их на главном экране
- Сделайте номера телефонов кликабельными
- Горизонтальная прокрутка должна отсутствовать
- Старайтесь по минимуму использовать виджеты (онлайн-консультант, коллбек и пр.). Также старайтесь избегать баннеров, всплывающих окон и других рекламных блоков, которые будут заполнять весь экран
- Расположите на видном месте кнопку для перехода на десктопную версию сайта
Адаптация сайта под мобильные устройства
Существует 3 основных способа адаптации сайтов под мобильные устройства:
- Адаптивная верстка
- Отдельный шаблон для мобильных устройств на основном домене
- Мобильная версия сайта на поддомене
Рассмотрим каждый из них, а также плюсы и минусы.
1. Адаптивный дизайн
Адаптивный дизайн актуален для визиток, информационных сайтов, небольших интернет-магазинов, блогов и пр. Для адаптации дизайна существующего сайта вам понадобится какой-нибудь CSS-фреймворк (например, Bootstrap) или CSS3 Media Queries.
Например, если вы решили воспользоваться Bootstrap, вы прописываете view-port, подключаете файлы фреймворка и добавляете в разметку классы сетки Bootstrap.
Главным преимуществом этого способа является быстрая реализация. Но если в десктопной версии есть используемые скрипты (но они не будут использоваться в мобильной) они все равно будут подгружаться, что увеличивает время загрузки.
2. Отдельный шаблон
Этот способ подходит информационным сайтам, блогам, форумам, интернет-магазинам и пр. Для визитки делать отдельный шаблон бессмысленно. Для реализации вам нужно знать РНР, поскольку придется создать скрипт, определяющий тип устройства и выводящий для него подходящий шаблон.
Если ваш сайт создан на какой-нибудь популярной CMS (например, WordPress), то будет достаточно установить соответствующий плагин для адаптации сайта WPTouch, WP Mobile Detector или подобный. При этом сможете выбрать, какие блоки будут отображаться в мобильной версии сайта.
Преимущества:
- Максимально быстрый и простой способ создания мобильной версии (если вы используете плагин)
- Упрощение и облегчение сайта (если вы создаете отдельный шаблон)
Основной недостаток способа состоит в том, что не для каждого движка сможете найти подходящие плагины. В некоторых случаях они еще и некорректно работают.
3. Мобильный сайт на поддомене
Этот способ подходит интернет-магазинам, различным порталам, соцсетям и другим крупным проектам. Как и предыдущий способ, он достаточно сложный в реализации.
Суть заключается в следующем: вы создаете поддомен с тем же движком, что и основной сайт, и используете одну базу данных если пользователь посетит сайт с мобильного устройства, он будет перенаправлен на поддомен. Для пользователей WordPress уже предусмотрены плагины, создающие мобильную версию сайта на поддомене (например, WP Mobile Edition).
Яркий пример реализации такого способа Вконтакте. Если обычная версия сайта располагается по адресу vk.com, то мобильная версия на поддомене m.vk.com. Обычно в качестве поддомена используют m, mobile, pda и пр.
Главный плюс способа увеличение скорости сайта для мобильных устройств (вы можете сильно облегчить сайт). Но при этом вам придется создавать и настраивать поддомен, писать шаблоны и скрипты. А это занимает много времени.
Как создать мобильную версию сайта
Если вы решили создавать мобильную версию сайта, то вам доступно 3 основных способа:
- Самостоятельная разработка (написание исходного кода).
- Использование CMS.
- Конструкторы сайтов.
1. Разработка с нуля
Самый сложный, но наилучший вариант разработка с нуля. Можете работать над мобильной версией сайта самостоятельно и тогда потребуется знать основы программирования, верстку и прочее, или заказать разработку у профессионалов в студии или у фрилансеров а это лишние расходы. Благодаря этому способу сможете быстро вносить любые изменения, которые будут недоступны для пользователей движков или конструкторов.
2. CMS
Если планируете работать с CMS, то обратите внимание на WordPress и Shop-Script. Вторую корректнее называть полноценной платформой, одной из составных частей которой является CMS. WordPress отлично подойдет для информационных сайтов, блогов и небольших интернет-магазинов, а Shop-Script для нагруженных сайтов и крупных магазинов.
Обе платформы отличает удобная и продуманная панель администратора, огромное количество расширений и интеграций, а также встроенная поддержка мобильной версии. Если используете другие CMS (например, Joomla или Drupal), то понадобится использовать адаптивные темы при создании сайта или устанавливать специальные мобильные расширения.
3. Конструкторы
Наконец, самый простой способ конструкторы сайтов. Если у вас небольшой проект и нужен базовый функционал, то нет смысла тратить время и деньги на разработку мобильной версии сайта. Используя конструктор, получите и обычный сайт, и мобильный все благодаря адаптивному дизайну шаблонов.
Для создания сайта подойдет практически любой современный конструктор например, InSales, Wix, Nethouse и др. Можете разрабатывать страницу с чистого листа или на основе какого-нибудь шаблона. Обычно конструктор предлагает несколько десятков или сотен вариантов для разных направлений. Понадобится всего лишь добавлять, удалять или изменять блоки и элементы страницы, а также размещать свой контент (текст, изображения, видео и пр.). При перетаскивании блоков (DragnDrop-редактор) сразу же увидите результат. На странице можно размещать практически все существующие элементы структуры кнопки, галереи, формы, видео и прочее.
Дизайн и оформление при грамотном использовании конструктора не будет уступать профессиональным сайтам. Освоить такую платформу можно в течение нескольких часов. К сожалению, возможности любого конструктора ограничены заложенными функциями. В редких случаях пользователю открывают доступ к редактору кода, благодаря чему он сможет вносить любые изменения (если умеет). Также возможности можно расширить за счет интеграций например, с CRM-системами, сервисами коммуникации с клинтами (онлайн-консультант, обратный звонок и др.), статистики и аналитики и так далее.
4. Duda
Отдельно стоит рассмотреть конструктор мобильной версии сайта DudaMobile. Вообще платформа Duda является конструктором сайтов, но так же может использоваться для превращения обычных сайтов в мобильные. К сожалению, сервис англоязычный поэтому понадобится владение английским языком хотя бы на школьном уровне.
Принцип действия сервиса следующий: DudaMobile сканирует структуру сайта и контента, конвертирует и подгоняет все это под мобильные устройства на уровне кода. Получите тот же самый сайт, но в мобильной версии. При желании можно внести небольшие правки в дизайн, добавить виджеты, настроить SEO и многое другое.
Итак, для создания мобильной версии сайта вам нужно ввести URL-адрес своего действующего сайта. Платформа проанализирует ресурс, после чего переведет вас в редактор. В нем вы увидите опции для преобразования сайта и окно предпросмотра в виде мобильного устройства. Доступно 3 категории опций:
Из прочих подобных конструкторов можем отметить Mobirise, но для его использования нужно устанавливать программу на ПК.
1. Дизайн
Здесь вы настраиваете внешний вид сайта, например:
- Layout (макет). Структура страницы для подачи материалов. Доступно несколько вариантов например, списком, матрицей и пр. Также можете выбрать стиль для меню.
- Style (стиль). Здесь выбираете цветовую схему для элементов, фона и шрифтовые схемы для кнопок, заголовков и пр.
- Header (хедер). В этом разделе выбираете тип шапки, размер и выравнивание и так далее.
2. Страницы
Используется для редактирования статических страниц. Здесь настраиваете SEO, выбираете индивидуальные шаблоны, можете добавить свой код и многое другое. Также здесь можно добавлять виджеты, расширяющие функционал страницы. Например, кнопка Поделиться, обратный звонок, RSS и пр.
3. Go Live
Наконец, предпросмотр и публикация мобильной версии. Здесь можно найти ссылки на полученный результат, посмотреть, как сайт будет выглядеть на разных устройствах (Android, iPhone и прочих), в том числе при повороте экрана.
Мобильная версия сайта обойдется вам примерно во столько же, сколько готовый сайт в каком-нибудь конструкторе среднего ценового сегмента. Можете выбрать ежемесячный (6 долларов) или ежегодный (60 долларов) платеж, а также приобрести сайт навсегда (159 долларов). Дорого, но зато никакого программирования, работы с движками и даже создания сайта с нуля в конструкторе взяли готовый сайт, перекодировали, настроили и готово.
Вывод
Как видите, существует несколько способов и инструментов для создания мобильных версий сайтов. Одни из них требуют знаний и опыта в программировании, другие финансовых вложений. Кроме того, некоторые способы лучше подходят одних сайтов, чем для других. Многое зависит от того, какой сайт вам нужен визитка, блог, интернет-магазин, социальная сеть и так далее.