Мобильный конструктор сайтов

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

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

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

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

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

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

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

Функциональные возможности

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

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

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

1. Дизайн – опции для настройки внешнего вида сайта в виде подпунктов:

• Макет – выберите структуру страницы для подачи материалов. Доступно 5 вариантов. Здесь же можно задать стиль для блока меню.
• Стиль – выбор цветовой схемы главных элементов, фонового изображения и шрифтовых схем для кнопок, заголовков и ссылок/текста;
• Хедер – выбор типа шапки (текст или изображение), размера этой области, выравнивания, фона и возможности фиксированного перемещения блока хедера по мере прокрутки страниц.

2. Страницы – редактирование каждой статической страницы сайта. Здесь можно настроить SEO, выбрать индивидуальный шаблон, задать правила открытия, ссылку, добавить свой код и т. д.

Самое интересное в том, что вы можете добавить виджеты – различные типы контента и функциональности на страницу. Все они разделены на 3 категории: бизнес, дизайн, социальные. Всего здесь 40 виджетов. Среди них: обратный звонок, меню ресторана, галерея, 2 колонки, карта, купон, список, табы, код HTML, кнопка, абзац (текст), блоки лайков и «поделиться», RSS.

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

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

Далее при помощи правок дизайна и довольно большого набора виджетов вы можете довести внешний вид и функциональность сайта до желаемой кондиции. Виджеты можно вставлять в любое место страницы. То есть всё-таки строительство мобильного макета в DudaMobile включает классический инструментарий WYSIWYG-конструкторов, позволяя наращивать функционал. Каждый виджет имеет настройки, соответствующие контексту его назначения: например, внешний вид, фон, ссылки, названия полей, отступы, вставка кода и т. д. В общем, кастомизация встраиваемых элементов вполне приличная.

Также вы сможете настроить SEO-параметры мобильной версии отдельно от основной: добавить аналитику от Google, заполнить мета-теги, включить оповещения о сохранении файлов cookies, добавить свой код в … и выбрать скрипты с десктопной версии сайта, которые необходимо выполнять и в мобильной версии.

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

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

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

Стоимость мобильной версии сайта сопоставима с таковой у готового сайта в каком-нибудь сайтбилдере среднего ценового сегмента. Например, в популярном конструкторе uKit сайт с уже готовым мобильным дизайном обойдется в $5/мес (или $48/год), а если применить поромокод UGUIDE-25 можно еще сэкономить –25%. Где логика, где разум?

За $159 вы получите мобильный сайт навсегда без необходимости продления услуг DudaMobile. Можно заплатить за год $60 или помесячно – по $6.

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

Какой должна быть мобильная версия сайта?

Мобильная версия сайта необходима не только для комфорта посетителей, увеличения продаж, но и для поисковой оптимизации, ведущей к увеличению трафика/конверсии при прочих равных. Да, Google и Yandex обращают пристальное внимание на наличие и качество мобильной версии сайта, учитывая эти факторы при ранжировании страниц. От себя поделимся полезными рекомендациями о том, как повысить эффективность мобильной версии сайта:

• Должна быть достаточно заметная и удобная для нажатия кнопка заказа товара/услуги в 1 клик, желательно на первом же экране;
• Ссылка на главную страницу должна быть на первом экране (обычно её зашивают в логотип с названием сайта), то же касается и корзины в случае с магазином – всегда должна быть на виду;
• Меню сайта также размещено на первом экране (обычно в формате гамбургера);
• Номера телефонов должны быть кликабельными и соответствовать формату набора региона, в котором продвигается сайт;
• Все изображения должны быть адаптированы для показа на мобильных устройствах;
• Нигде не должно быть горизонтальной прокрутки – только вертикальный скроллинг, по мере которого всё чётко видно;
• Для поисковых систем желательно размещать мобильную версию на поддомене сайта со своим отдельным URL, то есть иметь 2 копии сайта для показа на разных устройствах;
• Пользователи мобильных устройств должны автоматически перенаправляться на мобильную версию посредством настройки серверного редиректа;
• Стилистика мобильной версии по общим очертаниям должна соответствовать десктопной;
• В мобильной версии не должно быть назойливой рекламы на весь экран, окно онлайн-консультанта, виджеты обратного звонка, блоки социальных сетей на полэкрана, баннеры, всплывающие окна тоже ни к чему здесь: они утяжеляют страницу, перекрывают важный контент, отвлекая от него внимание посетителя;
• Где-нибудь на виду должна быть кнопка перехода на десктопную версию сайта, причём при клике по ней не должны срабатывать перенаправления обратно на мобильную версию – необходимо разместить аналогичная кнопку обратного перехода в том же месте;
• Не нужно делать слишком сложных и длинных форм для заполнения, поскольку печатать с мобильника далеко не всем удобно – чем проще, понятнее и короче будут формы для отправки данных, тем лучше;
• Мелкий шрифт (меньше 16px), межстрочный интервал, отступы от полей, ссылки одна поверх другой – всё это физически мешает воспринимать контент (нагрузка на зрение, неудобные клики), превращает его в кашу и отпугивает посетителей.

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

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

Выводы

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

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

При таком сценарии DudaMobile – хороший вариант. Никакого кодинга, делается всё просто, выглядит нормально в итоге. Лёгкий способ увеличить стабильность мобильного трафика. За $60/год либо за $159 навсегда. Наверное, вы иронично подумали, что «навсегда» закончится в момент смерти платформы. Да, это так. Но! Сервис был основан в 2009 году, его услугами пользуются именитые клиенты и, в целом, дела у разработчиков идут хорошо. Так что опасения в этом плане лишены оснований.

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