Digital-ART: цифровой креатив

Работаем дистанционно! 8(951)11-89-425

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

Время прочтения: 10,5 минут
Для кого статья: владельцев сайтов
Элемент
Просмотров: 220

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

Элемент
26 сентября 2019

Понимая, что и зачем делается, вы сможете контролировать исполнителя и создать mobile version самостоятельно

Уже давно веб-мастера осознали, что им предстоит делать двойную работу: сначала готовить полноценный веб-ресурс для просмотра на ПК, затем – его мобильную версию. И не абы какую, а чтобы выглядела также презентабельно, как и прототип:

  • - имела удобную навигацию, с доступом на главную страницу из любой позиции,
  • - быстро загружалась, без всплывающих окон, flash, слайдеров, онлайн-чатов и прочих «тяжелых» и перекрывающих экран элементов, с минимумом JavaScript,
  • - имела вертикальную прокрутку (а для карусели с товарами и горизонтальную),
  • - имела адекватно (в поле зрения) расположенные элементы, достаточно крупные (особенно кнопки, ссылки, текст), легко читаемые с небольшого экрана,
  • - с телефонным номером в формате <a href="tel:+**********">8 (***)***-**-**</a> для быстрого набора. Возможно даже стоит заменить все формы (форму заявки, обратной связи) на номер телефона, оставив кое-где заказ обратного звонка.

В этом году необходимость создания мобильной версии сайтов стала перед мастерами ещё острее, ведь теперь (по данным Яндекс.Радара и других аналитических агентств) более 50% пользователей выходят в сеть и ищут информацию именно со смартфонов (ещё в 2017 году пользователей ПК было больше половины). Теперь вопрос – делать или нет – не стоит. Веб-мастерам приходится лишь выбирать способ как сделать: на каком сервисе или ПО создать версию сайта, адаптированную под мобильные устройства.

Способ 1. Технология создания турбо-страниц от Яндекса

Метод имеет множество преимущества (именно поэтому мы обозначили его в качестве первого):

  • - страницы открываются быстро даже при медленном мобильном Интернете;
  • - сайты с турбо-страницами помечаются в поиске специальным значком в виде ракеты (если пользователь ищет информацию с мобильного устройства), а значит вероятность клика повышается; кстати аналогичная пометка есть и в поиске Google (при условии, что ваш мобильный сайт соответствует требованиям, проверьте здесь);
  • -  технология предоставляется бесплатно;
  • - есть специальные плагины для сайтов на ВордПресс, Джумла, Drupal, 1С-Bitrix, OpenCart, позволят автоматически создать RSS-ленту;
  • - можно подключить рекламу РСЯ (размещается автоматически в наиболее удачных местах), метрику;
  • - сохраняется фирменный стиль сайта (если стилизовать с помощью CSS),
  • - после подключения увеличивается глубина просмотра, время на сайте и доход от рекламы РСЯ.

Турбо-страницы Яндекса используют многие популярные порталы.

Как создаются mobile version? Автоматически, из вашего RSS-канала (вы его создаете и отправляете файл через аккаунт в «Веб-мастере» Яндекса). Насколько сложна процедура? Если вы зарегистрированы в «Веб-мастере» и ваш сайт добавлен в аккаунт, права на него подтверждены, вы внимательно изучили инструкцию и разобрались, что делать, то на создание мобильного сайта у вас уйдёт от получаса.

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

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

Способ 2. Создать адаптивный («резиновый») шаблон для сайта

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

Минусы этого метода:

  • - местами шаблон отображается на мобильных устройствах неадекватно (особенно, если в шапку встроен слайдер или есть gif на фоне);
  • - размер шрифта не меняется при изменении размера экрана (отображается, как изначально был настроен, приходится подбирать один - наиболее подходящий размер букв и для мобильного, и для ПК);
  • - нет возможности переключится на полную версию сайта;
  • - способ дает обманчивые ощущения, что всё уже настроено. Администратор сайта продолжает работать с ним, как с полноценным ресурсом: устанавливает приложения, плагины, добавляет кнопки и т.д., не проверяя, а поддерживают ли они адаптивный режим работы. Такой подход приводит к тому, что при открытии на смартфоне новые элементы сайта не масштабируются в соответствии с размером экрана, а «съезжают» и не попадают в область просмотра.

Изъяны видны далеко не всегда, в основном адаптивный шаблон отображается адекватно: меню «собирается» под удобную навигационную кнопку, всем уже привычную и знакомую, элементы масштабируются (адаптируются под размер экрана).

Решение пойти этим путем может быть выгодным, если сайту давно требуется редизайн и не помешает мобильная версия («убьете двух зайцев сразу»). И всё же второй способ объективно сложнее первого.

Способ 3. Специальные плагины для CMS

Удобно пользоваться сторонними плагинами (приложениями), разработанными специально для вашей системы управления сайтом: WordPress, Joomla и пр. Например, Google Accelerated Mobile Pages (AMP) для ВордПресс – создает копию сайта, отключает все тяжело загружающиеся элементы. Есть несколько настроек, с помощью которых можно скорректировать внешний вид.

Главное достоинство этого метода – множество настроек. Можно сделать следующее:

  1. изменить контент, который будет отображаться на мобильных устройствах (что-то убрать, что-то добавить, скорректировать внешний вид элементов);
  2. задать условия (указать конкретный размер экрана), при которых будет отображаться/скрываться тот или иной элемент;
  3. задать отдельный url, на котором будет открываться адаптивная версия сайта (например, m.site.com).

Способ 4. Сторонние платформы (конструкторы) для создания лендингов

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

Некоторые платформы позволяют создавать не просто лендинги, а современные полноценные интернет-сайты, но это дорогое удовольствие (дороже, чем работать в привычных CMS). Наиболее популярные: LPGenerator, uLanding, Ukit, Tilda, Tobiz, Wix, Umi, Nethouse, Ucraft и прочие. Смотрите нашу сравнительную таблицу "Лучшие конструкторы сайтов и лендингов 2019 г", чтобы выбрать наиболее подходящий. А здесь click-service.me адаптивный лендинг создадут за вас за 5 тыс. руб (чат-бот бесплатно).

Этот способ вам не подойдет, если сайт уже создан не на конструкторе лендингов, а на CMS. Если только вы не пожелаете иметь и сайт, и версию для мобильных устройств на отдельном домене или поддомене (m.site.com). А почему бы и нет? Веб-мастера и так делают.

Если сайт ещё не создан, а вы уже задумались о версии для смартфонов, советуем сначала разработать мобильную версию, а затем для ПК (так вы потратите меньше времени на разработку).

Способ 5. Расширение-конструктор для вашего сайта

Также возможен альтернативный вариант. Существует несколько дополнительных приложений для CMS, которые позволяют внутри вашего сайта построить (на поддомене или отдельной странице) лендинг, адаптированный под все устройства. Одно из самых популярных расширений для Joomla и WordPress – PageBuilder.

Удобный метод, позволяет получить максимум контроля над мобильной версией сайта. Прямо на главной странице сайта можно поместить ссылку (или кнопку): «Перейти на мобильную версию сайта». Но… делать её приходится с нуля (создаются аналогичные страницы, наполняются той же информацией и т.д.).

Способ 6. Разделение как способ получить полный контроль

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

Как создавали (и до сих пор создают)?

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

Второй способ создать «уменьшенную» версию – создать её с нуля с помощью конструктора мобильных сайтов. Идеальный вариант для интернет-магазинов и сайтов для малого бизнеса – moaction.mobi.

Такой метод – метод разделения одного ресурса на две раздельно существующие версии – дает возможность получить полный контроль над мобильным содержимым. Макет может сильно отличаться от основного ресурса: только самое необходимое. Выделенные мобильные сайты используют Amazon, BBC. В отличие от адаптивных их отделенные версии сайтов загружаются ощутимо быстрее.

Но…

  • 1) При наличии дополнительного сайта требуется в 2 раза больше трудозатрат. Приходится обновлять его каждый раз при обновлении основного: поэтому метод не подходит для крупных интернет-магазинов (тяжело обновлять каждую карточку товара дважды).
  • 2) Да и услуги по созданию мобильной версии таким способом обойдутся дороже, чем, например, подключение турбо-страниц или создание адаптивного шаблона.
  • 3) Трудности возникнут при продвижении сайтов в поисковиках и социальных сетях. В первом случае придется провести техническую работу, чтобы поисковики не понизили сайт в позициях за дублирование контента. Во втором – придется настраивать перенаправления практически для каждой страницы, чтобы пользователи ПК, переходя по «мобильным» ссылкам в соцсетях, попадали на полную версию сайта.

 

Как видим каждый из способов имеет и плюсы, и минусы. Выбор владельца ресурса всегда зависит от того, как лично ему (или его сотруднику) удобнее работать с сайтом и его mobile version – в CMS или в стороннем конструкторе.

Идеальный с технической точки зрения вариант придумали крупные IT-компании: научились создавать оболочку для мобильной версии и загружать в неё содержимое основного портала (по API). Так, например, работают соцсети FB, WK, Twitter.

Если вам потребуется помощь с адаптацией вашего сайта под мобильные устройства. Мы всегда к вашим услугам. Узнайте стоимость услуги "Адаптация сайта". Или сразу ЗАКАЖИТЕ услугу через форму обратной связи.

Последние новости блога

ВСЕ УСЛУГИ

Разработка сайтов

Продвижение сайтов

Наполнение, ведение сайтов

Редизайн

Пассивный доход: размещений объявлений Рекламной сети Яндекса

Контент для сайта (статьи, новости, изображения, пресс-релизы)

Мобильная версия сайта (адаптация под смартфоны)

Создание, ведение групп в социальных сетях

Ведение рекламных кампаний в Яндекс.Директ, GoogleAdWords

Реклама в соцсетях

Размещение объявлений в магазинах Avito

Создание презентаций PowerPoint

Разработка макетов полиграфической продукции (брошюры, журналы, визитки)

Услуги для бизнеса (маркетинг, реклама в интернете, внедрение CRM, фирменный стиль, регистрация торговой марки)

МЫ В СОЦСЕТЯХ

         

НАШ КАНАЛ О БИЗНЕСЕ

 

Креативное IT-агентство Digital-ART © 2017-2020.

 

Челябинск. Тел.: 8 (951) 118-94-25.

 

Все права защищены, копирование материалов запрещено.

 

*Цены, указанные на сайте, не являются публичной офертой.