Ellada-flowers.ru

Заработок и деньги
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как создать мобильный сайт

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

Из этой статьи вы узнаете, как за 5 минут и бесплатно создать мобильную версию вашего веб-сайта. Здесь вы также найдете ссылки на популярные сервисы, которые позволяют создавать мобильные версии веб-сайтов.

Мобильный Интернет растет гигантскими шагами, и очень скоро количество пользователей мобильного Интернета превысит количество пользователей, которые выходят в Интернет с обычного компьютера. Например, компания comScore прогнозирует, что в США количество мобильных пользователей Интернета превысит количество обычных пользователей в 2014 году.

Для создания мобильной версии своего сайта можно использовать сервис, созданный компанией dudamobile.com и ставший партнером программы Google: Google GO|MO. Cайт Google GO|MO доступен на многих языках, но, к сожалению, русского среди них нет, однако это вам не помешает создать мобильную версию вашего веб-сайта, так как там все очень просто и интуитивно понятно. Тем более что далее я подробно расскажу, как пользоваться этим сервисом. В последнем разделе этой статьи речь пойдет о многочисленных конкурентах этого сервиса.

Проверьте, как выглядит ваш текущий веб-сайт на экранах мобильных телефонов

Для начала вы можете воспользоваться разделом веб-сайта GOMO MOBIL METER, чтобы посмотреть, как выглядит ваш текущий веб-сайт на экранах мобильных телефонов. Если вы хотите сразу же создать мобильную версию своего веб-сайта, то переходите к следующему разделу. Для просмотра того, как выглядит ваш текущий сайт на экране мобильного телефона, перейдите по ссылке MOBIL METER, введите адрес вашего веб-сайта в появившееся окно и нажмите кнопку «TEST YOUR SITE». После непродолжительного ожидания вы увидите свой веб-сайт на экране мобильного телефона, и вам будет предложено выбрать одну из категорий, которая лучше всего описывает ваш бизнес:

  1. Online-Only. Вы ведете свой бизнес только в режиме онлайн. Ваша цель — продажи и вовлеченность. Примеры бизнесов: продажа онлайновых товаров или онлайн-игры.
  2. Lead Generation. Лидогенерация. Ваша цель — привлечение клиентов. Примеры бизнесов: автодилеры, недвижимость, рестораны, страхование.
  3. Brand Driven. Ваша цель — узнавание и вовлеченность. Построение бренда. Примеры бизнесов: развлечения, фармакология, товары широкого потребления.
  4. Multichannel. Вы ведете бизнес и онлайн, и оффлайн. Ваша цель — обеспечить их незаметный переход из онлайн в оффлайн, и наоборот. Примеры бизнесов: ритейлеры, финансы, телекоммуникации.
  5. Publisher. Ваш бизнес — это создание и продажа контента в электронном или физическом виде. Ваша цель — вовлеченность и продажи.

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

  1. Видите ли вы испорченные изображения или отсутствующий контент?
  2. Можете ли вы читать текст без увеличения и прокрутки?
  3. Можно ли кликать ссылки и кнопки большим пальцем?
  4. Хорошо ли видны ваш номер телефона и адрес?
  5. Можно ли кликнуть на номер телефона, чтобы начать звонок?

После ответа на все вопросы нажмите кнопку «GET RESULTS», и вы получите краткий отчет о состоянии мобильной версии вашего веб-сайта. Спуститесь ниже, и вы сможете получить полный отчет, нажав на одну из ссылок: VIEW FULL REPORT или EMAIL FULL REPORT.

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

Перейдите на веб-сайт gomo.dudamobile.com, введите адрес вашего веб-сайта в появившееся окно и нажмите зеленую кнопку «Make My Site Mobile». Далее вам будет предложено выполнить четыре простых шага:

  1. Выбрать макет вашего веб-сайта.
  2. Отредактировать ваш веб-сайт. В этом разделе вы сможете:
    1. Изменить оформление шапки и логотипа.
    2. Отредактировать навигационное меню.
    3. Удалить контент.
    4. Добавить номер телефона.
    5. Добавить мобильную карту.
  3. Вы регистрируетесь и сохраняете созданный веб-сайт.
  4. Вы публикуете ваш мобильный веб-сайт:
    1. На этом этапе вы должны выбрать тарифный план либо бесплатное обслуживание, но с такими ограничениями, что вы не сможете полноценно пользоваться своим мобильным сайтом, так как вы сможете создавать не более 10 страниц, повсюду будет реклама и т.д. Либо вы можете выбрать платный тариф за $9 в месяц. Однако когда вы зарегистрируетесь первый раз, то для вас будет автоматически создан полноценный мобильный сайт за счет Google, и система не будет предлагать вам выбрать тарифный план. Вы сможете пользоваться этим веб-сайтом один год бесплатно, т.е. $108 за вас заплатит Google. При этом, если вы удалите впервые созданный веб-сайт, то создать новый со скидкой от Google в размере $108 уже не получится. Поэтому при создании аккаунта регистрируйте его сразу же на нужный вам веб-сайт.
    2. Сама публикация веб-сайта не отнимает много времени. После создания веб-сайта вам будет предоставлена ссылка на мобильную версию вашего веб-сайта вида http://mobile.dudamobile.com/site/yoursite, и все, что нужно будет, — это настроить редирект на нее с вашего веб-сайта для мобильных пользователей. Если ваш веб-сайт сделан на WordPress, то вам предложат скачать и установить плагин, а если у вас веб-сайт на какой-либо другой CMS, то вам предложат добавить две строчки кода на главную страницу вашего веб-сайта.

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

Популярные онлайн-сервисы по созданию мобильных версий веб-сайтов

Если вам не нравится решение, предложенное компанией dudamobile.com, то имеет смысл попробовать решения других разработчиков. В русскоязычном Интернете я, к сожалению, не нашел подобных сервисов. Хотя и потратил на поиски с помощью Google не менее одного часа. А вот в англоязычном Интернете таких сервисов много. В статье авторитетного техноблога mashable.com «8 инструментов для легкого создания мобильной версии вашего веб-сайта» приводится 8 сервисов для создания мобильных версий веб-сайтов. Но почти все они мне не понравились по сравнению с GOMO, кроме того, все они платные, бесплатных тарифных планов в них нет. Самый крутой из них — это wirenode.com. Этим сервисом пользуются (или пользовались!) такие компании, как: Reebok, Ford, Nivea, Nokia. Airfrance, Vodafone, и там есть очень ограниченная бесплатная версия. Стоимость полноценной версии начинается от $7 в месяц.

Читать еще:  Продающие сайты с высокой конверсией

По данным Techcrunch, основным серьезным конкурентом gomo.dudamobile.com является нью-йоркский стартап www.bmobilized.com, который, кстати, доступен на русском языке. Он предлагает более 30 функций, позволяющих улучшить ваш мобильный веб-сайт, таких как меню контактов, карты, кнопки «Поделиться в соц. сетях» (Facebook, Twitter, YouTube, Flickr on LinkedIn) и др. Стоимость использования — $9 в месяц. Можно бесплатно протестировать сервис в течение 7 дней. Мне этот сервис понравился, но после создания мобильной версии моего сайта у меня не работал один пункт меню, я мучился полчаса, но так и не смог удалить его. Верстка самого веб-сайта www.bmobilized.com расползается в браузере Google Chrome (последняя версия на текущий момент). Так что я не уверен, что захочу пользоваться этим сервисом еще. Хотя в целом видно, что он классный, но надо разбираться, тратить время.

Журналист Techcrunch Sarah Perez составила список из более чем полусотни сервисов для создания мобильных приложений и веб-сайтов, а также помогающих создать мобильную версию вашего веб-сайта: Перечень сервисов для создания мобильных приложений и веб-сайтов от Сары Перез в «Гугл Докс». Я просмотрел все сервисы, и мне запомнился только один — shoutem.com. Это легкий в освоении сервис, который позволяет «мобилизировать» ваш веб-сайт. Об этом сервисе писали ведущие техноблоги: mashable.com, thenextweb.com, mobileindustryreview.com, thefastertimes.com, siliconangle.com. Этим сервисом пользуются такие компании, как: T-Mobile, TheNextWeb, IBM, USAToday. Стоимость использования этого сервиса начинается от $20 в месяц.

Плагины для создания мобильной версии веб-сайта на WordPress

Если ваш веб-сайт создан на CMS WordPress, то вам повезло, так как имеется много бесплатных плагинов, позволяющих сделать ваш сайт мобильным. Я думаю, что нашел практически все популярные плагины, стоящие рассмотрения, так как прочел не менее 7-и англоязычных обзоров и интенсивно искал плагины на сайте wordpress.org. Перечислю найденные мной плагины:

  1. Jetpack Mobile Theme. Это «родной» плагин от создателей WordPress. Я проверял работу версии Jetpack 2.0.2. В этом плагине функция «мобилизации» сайта появилась совсем недавно, и она пока очень примитивна. Эту функцию невозможно настраивать, а мне не понравилось, как отображается мой сайт. Настроить плагин невозможно, и если ваш мобильный сайт отобразился «криво», то это не изменишь. Я надеюсь, что разработчики будут развивать этот плагин, и в скором времени он предоставит намного больше возможностей. Есть и еще один недостаток: если у вас активирован Jetpaсk, то установить отдельно другие плагины, «мобилизирующие» ваш сайт, не получится. Поэтому если вам не нужна «мобилизирующая» функция Jetpack, то вам придется отключить его полностью, отключить отдельно мобильную тему Jetpack нельзя.
  2. WPtouch. Это очень популярный плагин (около 4 000 000 скачиваний, более 400 хороших отзывов, чуть более 100 плохих). Есть платная и бесплатная версии, платная версия стоит $49. Плагин хороший, но мне не понравился базовый дизайн и админка плагина в бесплатной версии.
  3. WordPress Mobile Pack. Популярный плагин (около 500 000 скачиваний, более 130 хороших отзывов, чуть более 30 плохих). Бесплатен. Мне плагин не понравился, так как он сложен в установке, некрасив, глючит.
  4. Wapple Architect Mobile Plugin. Относительно популярный плагин (около 90 000 скачиваний, более 30 хороших отзывов, чуть более 20 плохих). Платный плагин, с ежемесячными платежами от $2,5, а чтобы посмотреть, как он работает, надо регистрироваться, заполнять длинную форму. Я не стал.
  5. UppSite — Go Mobile. Относительно популярный плагин (около 60 000 скачиваний, 9 хороших отзывов, 3 плохих). Это плагин израильского стартапа, получившего инвестиции в размере $2 000 000, о котором написали в Techcrunch, но у меня после установки этого плагина мобильная версия веб-сайта не загружалась. В статье Techcrunch написано, что сервис очень прост в использовании, но его нельзя настраивать.
  6. Duda Mobile Website Builder. Не самый популярный плагин (около 20 000 скачиваний, более 50 хороших отзывов, около 5 плохих). Но это плагин рассмотренного выше сервиса, который мне понравился, — dudamobile.com. Если у вас веб-сайт на WordPress, то для работы с этим сервисом необходимо установить этот плагин на свой веб-сайт. Мне этот плагин понравился.
  7. WP Mobile Detector Относительно популярный плагин (около 120 000 скачиваний, около 30 хороших отзывов, около 10 плохих). Этот плагин я не тестировал.
  8. WordPress Multi Site Mobile Edition Не самый популярный плагин (около 22 000 скачиваний, около 10 хороших отзывов, несколько плохих). Этот плагин я не тестировал.

Из всех рассмотренных мной плагинов, позволяющих создать мобильную версию вашего веб-сайта на WordPress, наиболее интересными мне показались следующие: WPtouch, Duda Mobile Website Builder.

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

Тем не менее, существуют и другие подходы. Например, можно отдельно создать только лишь мобильную версию уже имеющегося сайта в сервисе 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%. Где логика, где разум?

Читать еще:  Шаблоны сайтов визиток html

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

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

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

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

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

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

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

Выводы

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

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

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

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

Ссылка на основную публикацию
Adblock
detector