Вариантов создания сайтов, правильно работающих с мобильными устройствами, не так уж и много:
- Адаптивная верстка. Фактически клиенты и с десктопов, и с мобильных открывают один и тот же сайт, просто отображается он по-разному, на основе специальных правил, прописанных в CSS-стилях.
- Отдельная мобильная версия сайта. Концепция mobile-only. Это когда у вас параллельно работают сразу два самостоятельных интерфейса, они даже часто располагаются на разных доменах (например, один на основном домене, второй на поддомене).
- Полноценное мобильное приложение. Это может быть самостоятельный продукт с нативной архитектурой, скомпилированный под нужную платформу, а может быть упакованный просмотрщик (своего рода web-браузер), который работает только с одним единственным сайтом.
Каждый из них оптимален для своих задач. Плюс, всегда нужно учитывать пожелания клиента (владельца сайта).
Мы рассмотрим техническую часть процесса немного под другим углом – применительно к наиболее частым ситуациям.
Создаем мобильную версию сайта:
Как сделать мобильную версию сайта в конструкторе
Если сайта у вас ещё нет, то проще сразу начинать с сервисов, которые поддерживают адаптивность и/или имеют отдельные редакторы для мобильной версии. Многие популярные онлайн-конструкторы изначально предусматривают этот момент, и все блоки, виджеты или иные элементы интерфейса делают адаптивными. Они одинаково хорошо выглядят как на экранах персональных компьютеров, так и на экранах смартфонов. Никакая отдельная мобильная версия даже не требуется.
Ниже самые лучшие облачные платформы, популярные в Рунете.
uKit – простой и понятный конструктор сайтов для бизнеса
| Официальный сайт: |
ukit.com |
| Год основания: |
2015 |
| Страна: |
Россия |
| Бесплатный период: |
14 дней |
| Платные тарифы: |
от $2,5 в мес. |
| Мобильная версия: |
адаптивный сайт |
Все создаваемые здесь сайты изначально адаптированы под экраны мобильных устройств. Это достигается за счёт использования специальных блоков дизайна и дополнительных функций платформы:
- Отложенная загрузка стилей CSS (на старте прогружаются только необходимые для отрисовки главного экрана, а далее – по мере скролла страницы);
- Lazy-load («ленивая» загрузка) для изображений (картинки загружаются уже после отрисовки основного дизайна, тем самым ускоряя процесс готовности интерфейса для пользователя даже на устройствах с медленным интернетом);
- Оптимизация изображений (зачем загружать картинку в полном размере, если на экране смартфона она будет отображаться как миниатюра? Логично сразу формировать и загружать на устройства с маленьким экраном небольшие по размеру и объёму изображения).
Плюс, у uKit есть гибкая настройка интерфейса отдельно для планшетов и отдельно для смартфонов. Вы можете скрыть выбранные элементы вёрстки или оформить их стиль не так, как в desktop-версии сайта. Для планшетов доступен вывод виджетов/блоков в один или в два столбца.
Если у вас на сайте выводится одновременно несколько плавающих кнопок (заказ звонка, кнопка «Поделиться» и т.п.), система предложит отображать только одну из них на мобильной версии страницы, чтобы не загромождать интерфейс. А ещё система позволяет связывать между собой иконки и подписи к ним (поэтому в мобильной версии не будут отдельно группироваться иконки, и отдельно текст).
Wix – комплексная платформа для запуска любых сайтов
| Официальный сайт: |
wix.com |
| Год основания: |
2006 |
| Страна: |
Израиль |
| Бесплатный период: |
неограниченный |
| Платные тарифы: |
от 80 руб. в мес. |
| Мобильная версия: |
отдельный редактор |
На Wix можно создать и обслуживать сайты любого типа: блоги, форумы, полноценные сайты гостиниц с системой бронирования, интернет-магазины и т.д. Все готовые дизайны в каталоге и страницы, создаваемые пользователями с нуля, автоматически адаптируются для мобильных устройств.
Как и в uKit, здесь тоже можно настраивать отдельно десктопную версию сайта и отдельно мобильную (но отдельного интерфейса для планшетов нет). Вы сможете скрывать выбранные блоки и элементы интерфейса, менять/настраивать оригинальный фон, а ещё у Wix есть специфические функции для мобильных:
- Отображение панели быстрых действий (сюда можно добавить кнопку телефонного вызова, ссылки на социальные сети/мессенджеры и т.п.);
- Экран приветствия (своего рода анимированный экран загрузки, который позволяет добавить ярких эмоций или познакомить с брендом/товарным знаком до перехода на сайт);
- Кнопка «Наверх»;
- Своя цветовая схема для панели браузера Chrome;
- Сервис автоматической оптимизации контента и макета страницы для мобильных устройств (очень удобно, если страницу создавал непрофессиональный дизайнер).
У Wix имеется приложение для мобильных, с помощью которого можно управлять своим сайтом, если активна подписка на профессиональные инструменты для бизнеса.
Как сделать мобильную версию сайта с CMS (на примере WordPress)
Как и любой другой CMS-системе, ВордПрессу не важно с какого устройства его посещает пользователь. Движок просто отдаёт браузеру тот вариант дизайна, который определён в настройках по умолчанию.
Хотя, стоит отдать должное разработчикам, WordPress – это одна из немногих CMS, у которой дизайн админ-панели умеет адаптироваться под мобильные устройства (это значит, что сайт будет удобен не только посетителям, но и владельцу, который сможет редактировать, настраивать и наполнять свой сайт с мобильного). Кроме того, есть приложения для смартфонов, они подходят не только для работы с классическим движком, но и для облачной платформы Wordpress.com.
Получается, что мобильная версия сайта – это в 99% случаев заслуга самого шаблона. Исключение составляют специальные плагины или скрипты, которые могут перенаправлять пользователей (например, на основе разрешения экрана или на основе модели устройства) на отдельный дизайн для мобильных.
Мобильная версия сайта на WordPress с нуля
Если у вы только планируете запускать сайт, то проблема стоит не так остро – достаточно выбрать правильный шаблон. Адаптивных шаблонов даже в официальном каталоге движка более чем достаточно. Главное удостовериться, что выбранный дизайн точно отрабатывает заявленные функции.
Аналогичная ситуация с альтернативными площадками, такими как ThemeForest или TemplateMonster.
Если вам важна скорость загрузки и высокие показатели метрики PageSpeed Insights, то существуют специальные темы, которые обеспечивают до 100 баллов в профильных тестах, например, как тема Neve (на ПК и на мобильных).
Сейчас большая редкость встретить шаблон, который не умеет адаптироваться к экранам смартфонов.
Смена шаблона WordPress на адаптивный
Если у вас уже состоявшийся проект, но шаблон морально устарел, так как рассчитан исключительно на широкий формат (например, у него фиксированная ширина), то в этом случае вам стоит задуматься о смене старого дизайна на новый.
Этот подход логичен тем, что:
- Будет выдержан единый стиль между мобильной и десктопной версией сайта;
- Не придётся обслуживать сразу два вида интерфейсов;
- Не нужно писать сложных функций и алгоритмов по определению разрешения и типа устройства пользователя для его переадресации на отдельный дизайн;
- У коммерческих шаблонов часто предоставляется техподдержка, поэтому вы сможете получить ответы на все свои вопросы и настроить новую тему ничуть не хуже предыдущей.
Без минусов тут тоже никак. Часто в шаблонах прописываются коды аналитик, счётчиков, блоков рекламы и т.п. Некоторые шаблоны вообще вводят отдельные виды материалов. Всё это придётся переносить в новый шаблон. Ошибки могут стоить позиций в поиске. А если у вас есть постоянные пользователи, они могут не оценить инновации и просто отказаться от посещения вашего сайта. Поэтому предварительно нужно очень детально проанализировать предстоящую смену дизайна и учесть все возможные нюансы.
Переделка старого шаблона в адаптивный
На самом деле затея не так сложна, как кажется изначально. Правда, без профильных знаний, или хотя бы без знания основ верстки, браться за неё точно не стоит. В лучшем случае можно привлечь/попросить знакомого дизайнера/верстальщика, а лучше нанять.
Основная идея – добавить медиазапросы CSS, на основе которых будут добавлены каскадные стили специально для нужных разрешений экрана. Для примера:
@media screen and (max-width: 479px) {
….Здесь таблицы стилей, которые будут применяться исключительно для экранов с шириной не более 479 пикселей, то есть для смартфонов в портретной ориентации…
@media screen and (max-width: 479px) {
….Здесь таблицы стилей, которые будут применяться исключительно для экранов с шириной не более 479 пикселей, то есть для смартфонов в портретной ориентации…
}
@media screen and (min-width:480px) and (max-width:800px) {
…А здесь CSS-стили, которые будут отработаны для экранов с шириной от 480 до 800 пикселей, например, на смартфонах с горизонтальным положением экрана
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
…Здесь стили для планшетов в вертикальном и горизонтальном положении
}
Например, если ваша основная сетка выглядела так:
В HTML это будет читаться примерно так (стили мы намеренно написали русскими буквами для понятности, но на практике такое недопустимо, так как это приведёт к ошибке!):
<div class="основной-контейнер-страницы">
<div class="контейнер-профиля">Guest profile</div>
<div class="контейнер-статьи">Main article</div>
<div class="контейнер-боковой-панели">Sidebar</div>
</div>
Стили для этих контейнеров (задаются в CSS-файлах шаблона, точка в начале указывает на то, что это CSS-класс):
.основной-контейнер-страницы {
width: 1280px; (или любое другое значение, оно может быть задано в процентах - width: 100%;)
}
.контейнер-профиля {
width: 280px; (ширина может быть задана в том числе в процентах - width: 25%;)
float: left; (обтекание по правому краю)
}
.контейнер-статьи {
width: 600px; (ширина может быть задана в процентах - width: 50%;)
float: left; (обтекание по правому краю)
}
.контейнер-боковой-панели {
width: 400px; (ширина может быть задана в процентах - width: 25%;)
float: left; (обтекание по правому краю)
}
Если мы заменим фиксированную или относительную ширину на 100% для заданного разрешения экрана, то сетка примет вид
Чтобы этого добиться, достаточно добавить в таблицы стилей медизапрос (в примере ниже – для всех устройств с шириной экрана 1024 пикселя и меньше):
@media only screen and (max-device-width: 1024px) {
.основной-контейнер-страницы {
width: 100%; (на всю ширину)
}
.контейнер-профиля {
width: 100%; (на всю ширину)
float: left; (обтекание по правому краю)
}
.контейнер-статьи {
width: 100%; (на всю ширину)
float: left; (обтекание по правому краю)
}
.контейнер-боковой-панели {
width: 100%; (на всю ширину)
float: left; (обтекание по правому краю)
}
}
Комментарии в скобках тоже приведены исключительно для примера, их в реальный CSS-код переносить нельзя.
Какие подводные камни могут всплыть при такой адаптации? На самом деле очень много:
- Может съехать вся вёрстка страниц, так как фиксированную ширину могут иметь не только ключевые блоки на странице. Это могут быть и изображения, и блоки новостей на главной/в категории, и блоки описания автора, и любые другие элементы. Все их сразу не определить. Править нужно будет каждый из них – по мере обнаружения.
- Объём страницы не изменится, что негативно будет отражаться на скорости загрузки при медленном соединении с интернетом (ни о какой оптимизации при такой переделке речи даже не идёт).
- По рекомендациям поисковых систем шрифт на мобильных устройствах должен легко читаться без увеличения масштаба, поэтому придётся переопределить все размеры шрифтов – заголовков, основного текста, цитат, списков (нумерованных и ненумерованных) и т.д.
- Шапку и особенно сложное меню придётся полностью переделать. В норме логично оставить только небольшое лого вашего сайта, иконку поиска (если поиск у вас есть) и значок профиля (если используется система авторизации). Десктопное меню лучше полностью скрыть и заменить его иконкой «сэндвича» (иконкой меню). В большинстве популярных адаптивных шаблонов это реализуется двумя параллельными меню: перовое для десктопов, оно показывается только на ПК, второе – только для мобильных устройств (показывается на основе тех же медиа запросов только на мобильных).
- Если структура основных контейнеров отличается, например, сайдбар выводится слева, а не справа, перед основным контентом будут выводиться все виджеты, хотя их логично разместить наоборот – ниже.
- Помимо CSS-фалов, стили сайта могут менять JS-скрипты, их найти и отредактировать будет сложнее.
И т.д. Именно поэтому переделкой лучше заниматься опытным верстальщикам.
Преимущества медиа запросов таковы, что в любой момент времени свой неудачный код можно просто удалить, на основном сайте эти стили никак не отражаются.
Добавление адаптивной версии с помощью плагинов
У разных CMS для этих целей могут быть свои наборы расширений, а может и не быть совсем. У WordPress самые яркие представители класса:
- Jetpack – с марта 2020 года опция создания автоматической мобильной версии была отключена.
- WPtouch – имеется бесплатная и платная версия, у самого дополнения есть свои плагины и темы, например, есть плагин организации отдельного кэша, плагин для создания web-приложения, плагин оптимизации изображений, плагин для AMP-страниц и т.д. Подмена десктопного шаблона на мобильный в WPtouch происходит без изменения URL-страниц, что важно для SEO.
- WP Mobile Menu – адаптивное меню для мобильных устройств (пригодится, если вам нужно заменить громоздкое и сложное меню десктопной-версии сайта на адаптивное и компактное для мобильных устройств).
- WP Mobile Detect – расширение фактически только определяет, что устройство пользователя – мобильный гаджет, и предоставляет результат только в виде истина/ложь, поэтому расширение можно использовать для построения условий переключения тем или для вывода тех или иных блоков интерфейса.
- WP Mobile Edition – умеет преобразовывать WordPress-сайты в полноценные web-приложения. Пользователи могут добавить иконку сайта на рабочий стол смартфона или планшета и пользоваться вашим сайтом в полноэкранном режиме (без рамок и вкладок браузера).
- Mobile Smart – плагин обнаруживает, что устройство пользователя относится к классу мобильных и на основе этого переключает вывод темы на альтернативную, совместимую с мобильными. В Pro-версии есть встроенная поддержка мобильных меню, специальных виджетов, управление набором плагинов (для мобильных может быть задан свой набор), переключение домена (для реализации работы двух независимых версий сайта) и т.п.
Практика разработчиков показала, что расширения остались невостребованными, многие владельцы сайтов предпочли перейти на адаптивные версии шаблонов. Поэтому большинство из этих расширений давно не обновлялись, совместимость с текущей версией движка может быть нарушена. Исключение – WPtouch.
Работа с каждым из расширений будет иметь свои особенности, какие-то из них предлагают готовые шаблоны для мобильных, а какие-то предлагают скачивать сторонние решения или создавать свои.
Если вы выбираете работу мобильной версии сайта на поддомене/альтернативном адресе, то важно знать следующие нюансы:
- Для поисковых систем это разные сайты, и это очень нехорошо, что их контент идентичен.
-
Чтобы поисковые системы «склеивали» URL и понимали, что это один и тот же сайт, нужно правильно организовать атрибуты ссылок:
- Атрибут link … rel=”alternate” href=“URL-мобильной страницы” – на десктопах;
- Атрибут link … rel=”canonical” href=“URL-страницы-на-десктопе” – в мобильном шаблоне.
- Если контент на разных версиях страниц будет отличаться, можно получить санкции за клоакинг (за подмену контента).
Как создать мобильную версию сайта HTML
Так как у HTML-сайтов нет динамических функций, вы не сможете проанализировать разрешение экрана пользователя и на основании этого переключить шаблон с десктопного на мобильный. Всё, что вам остаётся – только полностью переработать сетку вёрстки и стили проблемных элементов.
Как это сделать мы рассмотрели выше – с помощью медиа запросов. Наиболее сложные в адаптации макеты с фиксированной шириной и положением элементов.
Без профильных знаний и погружения в CSS и HTML-код ничего не получится. Лучше или сразу нанять профи, или сменить дизайн на другой (купить, заказать и т.д.), или просто разработать страницу заново, например, с помощью оффлайн-конструктора Mobirise. А может быть настала наконец пора переехать в облачную инфраструктуру и выбрать один из онлайн-конструкторов.
Сколько стоит мобильная версия сайта
Если вы выбрали онлайн-платформу, такую как Wix, использование её может быть полностью бесплатным. Правда на бесплатном тарифе вы не сможете привязать свой домен. Для адекватной работы (без рекламных блоков и копирайта) лучше сразу переходить на тариф «Базовый» – от 125 руб./месяц. Это совсем немного. Хотя у Wix много разных тарифов и дополнительных платных функций. Так что итоговая цена может подрасти вместе с вашими аппетитами.
У uKit бесплатных тарифов нет, зато деление на тарифные планы простое. Самые доступные тарифы: «Минимальный» – от 2,5 USD/месяц (но с копирайтом в подвале) и «Базовый» – от 5 USD/месяц (со всеми самыми важными возможностями без ограничений).
Расширения для WordPress часто позиционируются как бесплатные, но на деле часть функций выносится в PRO-версию. Например, WPtouch Pro будет стоить от 79 до 359 USD/год (нельзя просто единоразово купить это расширение).
Именно поэтому смена на готовый адаптивный шаблон выглядит более разумной, даже на профильных площадках они обойдутся 40-80 USD единоразово.
Переделка старого шаблона силами профессионального дизайнера будет обсуждаться индивидуально (смотря какой объём и сложность работ).
Если вы хотите сами собрать страницу в Mobirise, то базовый дистрибутив распространяется совершенно бесплатно. Правда в нём ограничен набор блоков и нет готовых шаблонов/тем и других важных функций. Их можно докупить отдельно, примерно по 25-45 USD за лот. А можно сразу всем пакетом – около 149 USD на один год. В программе можно создавать любое количество сайтов, после их выгрузки программа вам больше не нужна (сайт работать не перестанет, даже если у вас закончится лицензия на дополнения).
Выводы
Без мобильной версии сайта современный сайт работать уже не может. Слишком большой процент интернет-трафика перешёл на портативные гаджеты.
Процесс адаптации для мобильных напрямую будет зависеть от выбранной или текущей платформы/движка сайта.
Если у вас малостраничный сайт и вы только планируете его запускать – проще всего выбрать один из популярных онлайн-конструкторов. Если ваш сайт работает на CMS, то проще сменить шаблон на адаптивный. Расширения, добавляющие поддержку мобильных, могут оказаться слишком дорогими, а переделка шаблона – слишком сложной (особенно своими силами).
Точно не нужно делать параллельную мобильную версию. Это сложно как в реализации, так и в дальнейшей поддержке. Такое могут себе позволить только крупные интернет-проекты.
