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

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

Что такое мобильная версия и зачем она нужна

Мобильная версия – это та, которая адекватно отображается на небольших экранах. Обычно речь идет о разных версиях сайта – свои для смартфонов на Android, свои для смартфонов на iOS, свои для планшетов. Браузеры Google (и других вендоров) самостоятельно адаптируют сайты, если у тех нет своей мобильной верстки, но полагаться на это обычно не стоит.

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

Вообще, есть несколько способов перекладывания десктопных версий сайтов на мобильные устройства:

• Адаптивный дизайн. В этом случае берутся разрешения экранов мобильных гаджетов, проводится анализ всех блоков на сайте, после чего верстальщик создает новый CSS, в котором эти блоки ведут себя иначе – имеют другую ширину, иначе располагаются относительно друг друга и так далее. Переключение между версиями верстки чаще всего ложится на плечи JS. Это – самый простой вариант, но у него есть 2 существенных минуса. Первый – полный перенос «обычной» версии плохо влияет на загрузку страницы, потому что толком нет никакой оптимизации – а страницы на мобильных устройствах в среднем грузятся медленнее, потому что их открывают через мобильный интернет, который работает хуже, чем стандартный от провайдера. Второй минус – часто можно забыть про удобную навигацию, если на кнопку меню в «обычной» версии можно было просто кликнуть, то на мобильных устройствах на нее нужно тапнуть пальцем, и если кнопка – маленькая, то это будет крайне неудобно.
• WEB-приложение. С помощью бесплатных сервисов можно создать приложение, которое в качестве своей графической основы будет использовать разметку. Это позволяет пользоваться им и как приложением, и как сайтом. Этот подход – довольно новый, бесплатные версии сервисов по созданию такого приложения есть, но – с большим количеством ограничений. Поскольку это не является полноценной мобильной версией, мы web-приложения рассматривать не будем.
• Мобильная версия. То, о чем мы здесь говорим. Наиболее Google Mobile Friendly-версия, хороша для поисковой оптимизации, ведет к максимальному удобству пользователей. Суть проста – для экранов смартфонов создается полноценная отдельная версия сайта, которая хранится где-то на поддомене. Проверку мобильного входа и необходимость перенаправления пользователя на мобильную версию проводит непосредственно сервер в момент поступления запроса. Некоторые элементы адаптивной верстки здесь тоже есть, потому что экраны мобильных устройств могут быть разными по ширине, но в целом есть жесткое разделение – пользователями ПК используется одна версия, мобильными пользователями – другая. Под мобильную версию сайта разрабатывается отдельная версия отображения страницы, то есть отдельный шаблон дизайна (что и оптимизирует сайт для мобильных устройств, обеспечивая быструю загрузку). Технически мобильные версии сайтов можно создать с помощью специальных сервисов, но чаще на практике приходится делать все руками, из чего и проистекают основные минусы мобильной версии – дорого и долго.

Ниже мы будем говорить как о создании полноценной мобильной версии, так и «бюджетной» мобильной версии какими-либо сервисами.

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

Основные признаки мобильной версии:

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

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

Отличия мобильной версии от адаптивной

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

Плюсы и минусы адаптивной версии

Плюсы:

• Проще сделать.
• Не нужно заказывать новый дизайн.
• Немного меньше нагрузка на сервер, поскольку отрисовка перекладывается на устройство пользователя.

Минусы:

• Менее user-friendly интерфейс.
• Нет поисковой оптимизации.

Плюсы и минусы мобильной версии

Плюсы:

• Дизайн более удобен пользователю.
• Поисковые роботы ранжируют страницы с полноценной мобильной версией выше.
• Поскольку мобильная и десктопная версии – это, по сути, разные страницы, открываются некоторые дополнительные опции для продвижения сайта.

Минусы:

• Нужно заказывать отдельный дизайн.
• В целом процесс создания полноценной мобильной верстки – более дорогой и сложный.

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

Самостоятельная разработка

Если у вас есть время и/или деньги – можете заняться самостоятельной разработкой мобильной версии сайта. Для начала вам нужно выделить на хостинге какой-то каталог, который будет поддоменом – обычно его называют m, адрес мобильной версии в этом случае – m.адрес_вашего_сайта. Кроме того, вам придется немного переписать код обработки запросов сервером, чтобы сервер распознавал, куда нужно оправлять запрос пользователя (гуглите скрипты под ваш веб-сервер или плагины под вашу CMS). После того, как вы перенесете дизайн, вам нужно будет дописать код так, чтобы обе версии правильно между собой синхронизировались – здесь сложно дать какой-то конкретный совет, как минимум смотрите, чтобы не поломались зависимости.

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

Есть несколько вещей, которые вам нужно учитывать при разработке отдельной мобильной версии сайта. Вот они:

• Оптимизируйте дизайн мобильной версии так, чтобы он хорошо работал с медленным интернетом. Скорость и стабильность мобильного интернета – хуже, чем у обычного интернета от провайдера. Поэтому вам нужно использовать меньше кода на JS, пережимать картинки и безжалостно вырезать лишнее. По-хорошему нужно делать картинки разного масштаба для десктопной и мобильной версии – вы можете делать это как вручную, так и с помощью специальных плагинов для CMS. Эти плагины будут получать исходную картинку и автоматически ее пережимать для мобильной версии.
• Пересмотрите расположение ключевых блоков. Переписывать контент под мобильную версию – это перебор, но всю контактную информацию, форму обратной связи и другие вещи, обеспечивающие вам конверсию, лучше разместить так, чтобы пользователь мог добраться до них максимально быстро.
• Не злоупотребляйте скриптами. Телефоны нынче довольно мощные, но перегружать страницу скриптами все равно не стоит – обычно у пользователя на фоне висит куча открытых приложений, и прожорливый Chrome может тупить при загрузке страницы с большим количеством скриптов – вы можете потерять читателя/клиента из-за этого.
• Адаптируйте дизайн под мобильные устройства. Про этом мы уже говорили выше – если мышь позволяет делать точные позиционированные клики, то палец имеет свойство часто промахиваться по маленьким объектам. Делайте кнопки большими.

CMS 

Если вы используете CMS, у вас есть 3 основные опции:

1. Создание мобильной версии сайта с нуля. Очень похоже на то, что мы описывали выше, но вы создаете мобильную версию с нуля на базе CMS и уже готовой десктопной версии, а не полностью с нуля. В этом есть ряд своих преимуществ, потому что CMS (не без помощи плагинов) упрощает создание дизайна и связывание между собой мобильной версии, десктопной версии и бэкенда. Но не думайте, что все станет просто и прозрачно – хоть CMS и помогает решить ряд проблем, вопросы адаптации дизайна/перегруженности страницы все еще полностью лежат на вас, так что придется изрядно поработать.
2. Поиск нового шаблона с мобильной версией. Если у вас – простой сайт (блок, одностраничник и так далее), и вы не накручивали поверх шаблона дополнительный функционал, вы можете без лишних проблем поменять обычный шаблон на адаптивный или поддерживающий мобильную версию. Скорее всего, после перехода на новый шаблон вам придется руками исправлять небольшие ошибки вроде слетевших на мобильной версии второстепенных плагинов, но это все еще куда более простой вариант, чем создание своей собственной мобильной версии с нуля.
3. Подключение плагинов, создающих мобильную или адаптивную верстку. Основные – WPtouch, WPmobile, Mobile Smart (все – для Wordpress). WPmobile умеет даже создавать web-приложение на основе страницы. Несмотря на то, что плагины выглядят очень заманчиво, мы советуем относиться к этой идее с осторожностью, потому что такие плагины далеко не идеальны, и вам все равно придется решать проблемы переноса и совместимости руками. Если у вас – большой сайт с кучей дополнительного функционала, решение проблем, вызванных плагинами переноса, может занять намного больше времени, чем разработка своего дизайна. Как вариант – можете подключить такой плагин, посмотреть на «сырой» результат его работы и откатить все обратно, если посчитаете, что исправлять проблемы будет дольше по времени, чем создать свой дизайн. 

Конструкторы сайтов

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

Проблема здесь – в том, что вам придется с нуля связывать бэкенд (серверную часть) с новым мобильным сайтом.

Что нужно учесть и предусмотреть перед созданием мобильной версии сайта

Основные пункты:

• Продумайте кнопки и меню. Они должны быть достаточно большими, пользователь должен понимать, что ему удалось нажать на них (чаще всего меняется цвет или размер).
• Используйте одну колонку. 2 колонки на экране мобильного просто не поместятся.
• Грамотно подбирайте шрифт. Он не должен быть слишком маленьким (его будет невозможно прочитать) и не должен быть слишком большим (чтобы пользователю не нужно было скроллить текст каждые 3 секунды).
• Упростите формы ввода. Набирать текст с телефона – не самое удобное занятие, поэтому сделайте формы как можно более сухими.
• Старайтесь не использовать сложные скрипты и анимацию. Страница будет грузиться медленно и пользователь уйдет с сайта.

Тестирование мобильной версии

Основные инструменты тестирования:

• Google Mobile Friendly.
• Responsinator.
• Adaptivator.

Полезные советы и чек-листы

1. Выбираете подход: самостоятельное создание, CMS, плагины, конструкторы сайтов.
2. Выбираете инструменты: заказ дизайна, самостоятельная нарезка, конкретные плагины, конкретный конструктор.
3. Продумываете особенности мобильной адаптации: функционал страницы, шрифты, кнопки и так далее.
4. Реализовываете: все верстаете/устанавливаете/прикручиваете, затем отлаживаете.
5. Тестируете: открываете страницу на разных устройствах, прогоняете через сервисы, проверяете работоспособность формочек/кнопочек.

Курс «IT-специалист с нуля» от Skillfactory

Курс «Android-разработчик с нуля» от Нетология

Курс «Android-разработчик» от Яндекс Практикум

Что почитать по теме

• Как тестировать мобильную версию в десктопном браузере.
• Гайд по мобильным версиям от Mozilla Firefox.

FAQ

Что лучше – мобильная версия или адаптивная верстка?

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

Стоит ли рассматривать вариант с полноценным приложением?

Чаще всего – нет. У приложения свои каналы распространения, то есть вам нужно будет тратить деньги на другой маркетинг (рекламу в сторах). Если вы не знаете, зачем вам нужно приложение – оно вам не нужно, лучше создайте мобильную версию или сделайте адаптивную верстку.

Подведем итоги

Тезисно:

• Адаптировать страницу сайта для мобильных устройств можно тремя способами: адаптивная верстка, web-приложение, мобильная версия.
• Мобильная версия – это когда вы создаете полноценный сайт для мобильный устройств и кладете его на свой поддомен.
• Полноценная мобильная версия – сложный проект, зачастую требующий своего собственного дизайна (и денег на макет).
• Основные способы создания: с нуля; на базе CMS; с помощью плагинов; через конструкторы сайтов.
• Если вы не уверены в том, нужна ли вам мобильная версия – лучше просто сделайте адаптивный дизайн, он требует меньше ресурсов и времени.