Любой качественный сайт должен иметь мобильную версию сайта, ведь мобильный трафик постепенно растёт, а отсутствие адаптивной верстки сайта приводит к отказом. Это так же заметили в Google, после чего было решено проверять сайты на наличие мобильной версии сайта, а с 21 апреля 2015 года и во все станет фактором для ранжирования.
Так как же сделать мобильную версию сайта, что бы избежать отказов и понижения позиций? Для решения этой проблемы существуют два способа. Первый способ — сделать адаптивную вёрстку, второй способ — сделать отдельный дизайн мобильной версии сайта. Так как мой сайт на WordPress покажу решения только для данного CMS движка.

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

Однако, если вы довольный своим шаблоном и вам не хочется плагинов, есть вариант сделать ваш шаблон растягивающимся без плагина, как мой. Для этого достаточно прописать в css — «width: 100%» . Ну а что бы дизайн не сильно растягивался добавить строчку:

#content {
max-width: 1280px;
}

Кроме этого в вашей теме картинки могут быть фиксированного размера и не растягиваться, исправляем это такими строками:

img, embed, video {
max-width: 100%;
}

Недостатки такого способа:

• Тяжело разместить каждый эллемент красиво для разных экранов.
• Медленная загрузка сайта из-за не сжатых картинок + подгрузки лишних не оптимизированных скриптов.

Безусловно такой способ позволяет сделать мобильную версию сайта, но мне не нравятся эти недостатки. Поэтому разберём второй вариант, где нету таких недостатков, однако есть другие, более серьёзные для SEO.

Самый удобный вариант для пользователей, это иметь отдельный поддомен с мобильной версией, так поступают сайты гиганты, популярные сайты ну и конечно различные успешные сервисы. Обычно создают поддомен m.website.ru либо mobile.website.ru.

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

В чем недостаток этого способа:
1. По сути вы создаёте дубликат сайта, выходит что нужно наполнять 2 сайта, конечно можно сделать авторепостинг с помощью NextScripts: Social Networks Auto-Poster, но следить за двумя сайтами не практично.
2. Так как мобильная версия дублирует контент, поэтому нужно либо запрещать к индексации поддомен, тогда поисковики не оценят ваш труд. Либо прописывать в head — rel=»canonical», показывая что контент дублируется, однако в выдачи первой страницы m. версии уже не будут.
3. Как не стараться SEO оптимизация таких страниц превращается в тяжёлую работу, либо вы пишите уникальный контент для мобильной версии, либо не выйти в топ таким страницам.

Какие в этом плюсы:
1. Максимальная настройка юзабилити для мобильных телефонов, а это увеличение продаж, больше спрос, посещаемость, легче распростронить среди пользователей информацию.
2. Сумашедшая загрузка страниц, из-за того, что вы убираете лишние элементы сайта, загружается маленькие картинки, нету ненужных скриптов.

Порядок действий как сделать отдельную мобильную версию сайта WordPress:
1. Создаём поддомен (пример m.сайт) на хостинге;
2. Покупаем платный шаблон, либо создаём собственный для мобильных телефонов. Так же есть вариант организовать мобильную версию отдельно с помощь тех же плагинов, о которых писал в первом методе;
3. Загружаем заново весь контент, который должен быть на мобильной версии сайта;
4. Настраиваем индексации и прописываем необходимые параметры для поисковиков.
5. Настраиваем проверку на вход с мобильных устройств на основном домене и поддомене с помощью веб-сервера nginx.

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

И теперь настало время заняться очень важным вопросом: как сделать мобильную версию сайта для этого и других моих блогов? Хотя создать мобильную версию сайта для этого блога не нужно, тут адаптивный дизайн, а вот на других, более старых сайтах, такого нет.

Это очень важный этап оптимизации сайта, так как сегодня все больше людей имеют телефоны, смартфоны и планшеты, подключенные к интернету. И если на большом мониторе ваш сайт выглядит просто прекрасно, то на телефоне его, возможно, просто невозможно будет просматривать: шрифты будут ОЧЕНЬ маленькими, а дизайн будет СИЛЬНО перекошен. Человек сразу закроет сайт, а поисковая система поставит себе галочку: ОТКАЗ!

Как проверить сайт?

Это первый вопрос, который нужно поставить себе: как проверить, оптимизирован ли мой сайт для просмотра на маленьких экранах? Тут есть два подхода: доверить анализ специальному сервису или открыть свой сайт на том же телефоне (на большом планшете даже не оптимизированный сайт, скорее всего, будет вполне читабельным).

Начнём с сервиса, и воспользуемся инструментом от Google - . Вот какую печальную картину имеет мой сайт:

Как показано на картинке, мой сайт на смартфоне отображается так же, как отражался бы на обычном компьютере, и поэтому читать его будет ОЧЕНЬ трудно. К тому же, как сообщил мне Google, в шаблоне сайта есть элементы, которые мешают моему сайту быстро открываться на мобильных устройствах. И вот тут требуется пояснение.

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

Как решить проблему?

Тут есть несколько вариантов.

1. Оптимизировать данный шаблон, устранить ошибки и так далее

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

3. Мобильная версия сайта

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

Решение правильное, то технически довольно сложное, и простые блогеры никогда им не пользуются (не встречал таких:). Это не подходит и мне, я не твиттер, не фейсбук и даже не вконтакте. Поэтому мне остаётся самый последний, но самый верный и простой вариант.

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

Установил плагин WordPress Mobile Pack (Mobile Switcher) и сразу всё улучшилось!

Вроде всё хорошо, и проблема решена, но....

Если вторую проблему можно легко решить, то первую решить будет сложно. А как сами понимаете, если сайт живёт рекламой, то такой минус критичен.

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

Ну что же, попробую поискать что нибудь получше.

Нашёл ещё один плагин, который раньше как раз у меня стоял - WP Mobile Detector . На нём реклама отлично показывается, хотя ссылки в подвале тоже есть. Да и к тому же не отображаются картинки на сайте, а это тоже очень плохо.

Ещё плагин имеет три варианта шаблонов, выбор не большой, но есть. Осталась мелочь - удалить ссылки в подвале, так, на всякий случай.

Тут оказалось все не так сложно. Идём в папку с установленным плагином и открываем файл base-functions.php - путь к нему: ВАШ САЙТ/wp-content/plugins/wpsmart-mobile/themes/base/base-functions.php

Удаляем этот кусок кода и все, ссылок в футере нет. Можно не удалять, а поставить свои ссылки. Но учтите, что при обновлении плагина всё, скорее всего, вернётся на круги своя. Или не обновляйте плагин, или всегда удаляйте.

ОЧЕНЬ ВАЖНО! В связи с тем, что google предъявляет теперь большие требования к мобильной версии сайта, именно ему нужно угодит. А он требует при своих тестах доступ в robots.txt к мобильному шаблону. Поэтому в robots.txt нужно ОБЯЗАТЕЛЬНО прописать:

Allow: /wp-content/plugins/wpsmart-mobile/themes

Только после этого будет успешен:

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

Дальнейшая доработка плагина WPSmart Mobile

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

ВАЖНО! После внесения изменений не обновляйте плагин, иначе вы потеряете все внесенные изменения!

Центровка картинок . Изначально картинки в шаблоне прижимаются к левому краю. На планшете это некрасиво. Нужно вот эту секцию в css привести к такому виду:

Body img { display: block; margin: 0 auto; }

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Payoneer - Самая популярная в мире платежная система для фрилансеров. Выдает карты, находится в США.

2. EpayService - Американская платежная система, очень популярна во многих странах, бесплатно дает карту MasterCard в EVRO для жителей СНГ и Европы.

3. Skrill - Единственная платежная система которая работает с криптовалютами и при этом выпускает бесплатные банковские карты MasterCard.

4. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

5. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

6. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

7. Capitalist - Можно создать счета в долларах, евро и рублях. Низкие тарифы на вывод. Компания зарегистрирована в юрисдикции Британских Виргинских Островов.

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

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

Немного теории

Большинство современных сайтов работают на основе той или иной системы управления контентом (Content management system - CMS) или по простому web движке. За внешний вид сайта в web движке, т.е. то каким его видят посетители ресурса отвечают так называемые шаблоны.
Шаблон - это, как правило, набор файлов определяющий внешний вид сайта. Для каждого движка используются свои шаблоны, но у всех них есть нечто общее - это файл(ы) с таблицами стилей CSS и файл(ы) отвечающие за разметку страницы, это может быть PHP, ASP и т. д. Возможны и более экзотические варианты, но в любом случае на выходе web движка будет CSS и HTML и возможно что-то ещё. Ну да я отвлёкся.

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

• Первый - для полноценного компьютера, ноутбука, планшета, другими словами для устройства с большим экраном.
• Второй - для смартфона, или другого устройства экран которого существенно меньше.

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

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

По большому счёту такой шаблон представляет собой облегчённый вариант полного, отличающийся по дизайну, размерами и расположением элементов.
Такое упрощение прежде всего связано с тем, что разрешение экрана современных смартфонов начинается, как правило, с 800x480 точек при размере экрана порядка 4"" дюйма.
Это значит, что примерно на этот размер и надо рассчитывать при разработке.

Малое разрешение экрана ведёт к тому, что большие элементы, и элементы расположенные в ряд, просто не будут вмещаться горизонтально.

Особенно это касается случая если и само устройство расположено горизонтально.

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

Настройка web движка

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

Для примера я покажу настройку Mobile Detector от BlackRed Designs, он имеет минимум настроек, и всё что необходимо сделать после его установки это опубликовать его и выбрать шаблон который будет использоваться для отображения страниц на мобильных устройствах.

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

Создание шаблона

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

Метатеги и масштабирование

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

Этот мататег должен быть расположен в разделе head рядом с остальными метатегами и выглядеть примерно следующим образом:

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

Помните, в самом начале я писал о том чтобы рассмотреть тот или иной элемент на странице на не оптимизированных сайтах частенько приходиться пользоваться зумом, приближая и отдаляя отдельные участки страницы? Так вот, параметр initial-scale=1.0 как раз устанавливает изначальное масштабирование страницы в 100%.
Если не указать мобильному устройству изначальный масштаб, то он может выставить его самостоятельно в зависимости от системы устройства, как то Android, iOS, Windows Phone, а также используемого браузера например Firefox, Chrome, Safari, Opera и т. д.
Лучше изначально избежать этого. Для кого же масштаб покажется не удобным смогут отмасштабировать его по собственному желанию, соответствующим жестом.

Границы сайта

Если для полной версии сайта в шаблоне используются отступы от границ браузера, например для того чтоб выделить содержание:

body {
margin-top: 20px;
margin-left:100px;
margin-right:100px;
border: 1px solid #dfdfdf;
}

То для мобильной версии это уже потеря и так небольшого полезного пространства, которое лучше использовать на все 100%;

body {
width:100%;
}

Шапка

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

Header-search
{
text-align:right;
float:right;
}

На уровень ниже и расположить по левому краю:

Header-search
{
margin-top:5px;
text-align:left;
}

Меню

У меня на сайте, в стандартной версии, элементы меню расположены горизонтально, друг за другом.

Topmenu ul li
{
display: inline;
}

Topmenu li a
{
display:block;
float: left;
}

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

Topmenu ul li {
display: block;
}

Topmenu li a {
display:block;
}

Шрифт

Как правило для полной версии сайта используется шрифт 12-13px:

p, li, dt, dd, legend
{
font-size: 13px;
}

Но, как уже было написано ранее, телефон имеет значительно большую плотность пикселей, очевидно, что и размер шрифта тоже должен быть больше, иначе текст будет слишком мелок и плохо читаем. По этому основной шрифт рекомендуется делать 16 пикселей:

p, li, dt, dd, legend
{
font-size: 16px;
}

Из этих же соображений выбирается размер шрифта и для остальных текстовых элементов, например так:

h1 {
font-size: 24px;
}

h2 {
font-size: 22px;
font-weight: normal;
}

h3 {
font-size: 17px;
margin-top: 5px;
margin-bottom:0px;
}

h4 {
font-size: 16px;
}

Изображения

В содержимом сайтов наряду с текстовой информацией постоянно встречаются изображения. Здесь я имею в виду не элементы оформления дизайна, а изображения которые встречаются в контенте, в содержании записей, статей и т. д.
Как я уже писал ранее, разрешение экрана современных смартфонов начинается с 800x480 точек. Это означает что размер изображения не должен превышать 480 пикселей, по скольку иначе оно не поместиться на экране и потребуется масштабирование.

С другой стороны для качественной картинки 480 пикселей в полной версии сайта, довольно мало.
В качестве небольшой уловки может служить конструкция вида:

img
{
max-width:100%;
height:auto;
}

Эта запись говорит, что ширина изображения не может быть больше 100% т.е больше ширины экрана, например в 480px. Вторая запись позволяет сохранить пропорции изображения.
В идеале для полной и мобильной версии желательно использовать разные размеры картинок, но это уже не решается средствами одного шаблона и требует более серьёзных средств.

Таблицы

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

table tr td
{
display:block;
}

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

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

Проверка результата, тестирование

Очевидно, что в процессе разработки шаблона правильнее всего проверять как он выглядит непосредственно на телефоне. Желательно на нескольких разных, под управлением разных систем: Android, iOS, Windows Phone, а также на нескольких браузерах Firefox, Chrome, Safari, Opera и т. д. Только так можно быть полностью уверенным что всё выглядит так как задумано.

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

Для проверки в среде iOS, для iPhone и iPod, существует специальная среда разработки от Apple – Xcode. С её помощью можно эмулировать практически любое яблочное устройство.

К сожалению Xcode работает только под Mac OS, и практически единственным вариантом запуска её на PC является создание виртуальной машины.

Довольно интересным средством проверки является Firefox OS Simulator, который является дополнением к браузеру Firefox. Загрузить его можно по адресу:
https://addons.mozilla.org/En-us/firefox/addon/firefox-os-simulator/

По сути здесь эмулируется полноценное устройство под Firefox OS.

Также в процессе разработки шаблона довольно полезно выдать свой обычный браузер за мобильный. Для FireFox это делается при помощи дополнения User Agent Switcher, установить которое можно от сюда:
https://addons.mozilla.org/ru/firefox/addon/user-agent-switcher/

При этом вы получаете возможность использовать довольно мощные средства веб разработки встроенные в сам FireFox.

Разумеется аналогичные средства есть и в других браузерах, но это уже сугубо индивидуальные предпочтения.

По мимо всего прочего поисковик Google тоже должен проверить ресурс на его «мобильность», ведь только в этом случае сайт получит преимущество перед другими. Проверить всё ли нравиться поисковику можно по адресу:
https://www.google.com/webmasters/tools/mobile-friendly/

Для полной уверенности что Google всё устраивает желательно проверить все страницы сайта. Либо просмотреть пункт «Удобство просмотра на мобильных устройствах» в инструменте для web мастеров по адресу:
http://www.google.com/webmasters/

Заключение

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

Доброго времени суток всем друзьям и читателям – сайт!

В этой статье Вы узнаете, как сделать мобильную версию сайта.

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

Конечно, дословно все его слова я цитировать не буду. Единственное, что дало мне пищу для ума, это последнее предложение:

— Денис, Вам срочно нужна , чтобы не потерять старых и получить новых посетителей!

А ведь действительно, подумал я. Сколько же людей по всему миру используют мобильные средства связи для выхода в Интернет.

И как только я об этом подумал, то сразу решил, что не стоит тратить время на разные статистики. Тут и так всё очевидно. Нужно идти и делать мобильную версию сайта.

Единственное, меня тревожил вопрос, как лучше это сделать. Специально верстать отдельный сайт на поддомене чисто для мобильников, честно говоря, мне было лень. Да и все существующие решения в Интернете меня не впечатляли.

То, что я нашел, оказалось готовым решением от всемирной компании G o o g l e .

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

Классно, правда? Лично я в восторге от этого генератора!

Ладно, оставим все эмоции для комментариев, пришло время творить.

Для создания мобильной версии сайта переходим по ссылке на сервис — Howtogomo.com .

Последнее время на сервисе наблюдаются изменения. Вот ещё одна ссылка на этот ресурс www.dudamobile.com .

Необходимо пройти регистрацию и приступить к описанным ниже действиям.

Они могут немного отличаться, но смысл тот же.

В специальном поле вписываем адрес своего сайта и нажимаем большую зелёную кнопку:

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

Сделав свой выбор, переходим к следующему шагу, нажав синюю кнопку «NEXT »:

Здесь Вы увидите 5 пунктов настроек. Если у Вас есть много свободного времени, то Вы досконально можете изучить каждый из них. Там особенного ничего нет. Изменение цвета шрифта, ссылок, заголовков и т. д. Всё, как в любом графическом редакторе доступно и понятно. Поэтому в отдельности описывать каждый пункт, смысла нет. Опять жмём на уже знакомую кнопку и переходим к дальнейшим действиям:

Во вновь открывшемся окне Вам нужно заполнить небольшую форму. Вписываем в неё свой действующий E-mail и два раза одинаковый пароль (любой). После этого нажимаем на синюю кнопку с надписью «SAVE MY SITE », что в переводе означает «СОХРАНИТЬ МОЙ САЙТ »:

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

В открывшемся окне копируем специальный скрипт и вставляем его перед закрывающим тегом < / head> в файле header.php Вашей активной .

Также Вы можете воспользоваться плагином (). Для этого внизу есть специальное с инструкциями разных движков и хостингов:

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

Для примера вот Вам моя – .

А Вы уже сделали мобильную версию своего сайта?

На сегодня это всё. До новых статей…

С уважением, Денис Черников!

Рассказываем, чем различаются популярные конструкторы мобильных сайтов и какие бизнес-задачи помогают решить.

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

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

1. MoAction

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

Главное достоинство MoAction - возможность работы с каталогами товаров. По сути, это самая сложная часть создания мобильной версии. Если у вас на сайте десятки и сотни товаров, заносить данные вручную вам вряд ли захочется. умеет импортировать существующий каталог в форматах «Яндекс.Маркета» (YML). Вам останется только указать период обновления, например раз в час или раз в день.

Кроме того, MoAction - единственный из представленных сервисов - позволяет создавать многоуровневые структуры и управлять списками товаров в несколько кликов.

Этот сервис предлагает самое большое количество шаблонов - 113. Все они разбиты по категориям для разных сфер бизнеса. Чем больше шаблонов, тем больше вероятность, что вы сможете найти подходящий именно вам.

Если при создании сайта вы столкнётесь с какой-то проблемой, которую не получится решить самостоятельно, вы всегда сможете обратиться за помощью: позвонить специалисту, написать в онлайн-чат или отправить email.

2. GoMobi

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

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

Но есть и ощутимые минусы. Нельзя изменять структуру шаблона, а в каждом отдельном блоке можно редактировать только текстовые поля. Кроме того, GoMobi не подойдёт владельцам интернет-магазинов. Формально в конструкторе есть карточки товаров, но каждый отдельный предмет нужно добавлять вручную со ссылкой на основной сайт: туда будут направляться желающие совершить покупку.

3. DudaMobile

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

Интерфейс минималистичный, простой и в целом приятный. Шаблонов не очень много, но все они выполнены качественно. Для каждого блока есть расширенные настройки.

4. Onbile

Onbile - очень простой конструктор. В нём немного функций для редактирования структуры и содержания блоков, поэтому вы сможете создавать только небольшие сайты: визитку или промостраницу.

Шаблонов на выбор тоже немного: всего 15, но для каждого предусмотрено ещё 2–3 вариации с незначительными отличиями дизайна, структуры и цвета.

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

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

5. Prosto.mobi

У Prosto.mobi самый лаконичный дизайн. Сервис, судя по всему, ещё молодой, поэтому на данный момент функциональность редактора достаточно ограниченная: в платной версии на выбор предлагается всего 13 блоков. Например, блок с контактными данными, блок со ссылками на социальные сети, блок с фотографией. Этого мало, чтобы собрать оригинальный сайт.

Шаблонов тоже всего 15. Но в отличие от Onbile, у которого это действительно уникальные по структуре и дизайну мобильные версии, относящиеся к 15 различным отраслям бизнеса, у Prosto.mobi это один шаблон в 15 цветовых решениях.

Функций конструктора хватит только для создания максимально простого сайта. Например, страницы-визитки.

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