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

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

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

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

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

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

Поэтому для создания мобильной версии выбирают минимальное устройство в своем классе. Можно отталкиваться от ширины экрана для первых моделей iPhone — 320px.

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

Создаем в Sketch новый артборд с шириной 320px. Для этого выбираем Insert → Artboard или просто клавишу A на клавиатуре, а затем выбираем нужное разрешение. Подойдет шаблон Mobile с шириной в 320px.

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

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

Мобильная страница будет значительно длиннее десктопной. Поэтому все большие блоки с контентом из широкого артборда в мобильной версии необходимо разместить друг под другом.

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

Длинный артборд для мобильного

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

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

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

Для такого меню можно использовать одну из готовых иконок или нарисовать свою. Простой вариант — сделать ее с помощью трех линий и прямоугольника.

Рисуем три линии (Insert — Shape — Line). Вокруг них добавляем прямоугольник (Insert — Shape — Rounded).

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

Готовое бургер-меню

Кнопку с обратным звонком и телефон можно поместить внутри раскрывающегося меню — так мы сэкономим место.

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

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

Переносим контент

После этого адаптируем изображение под мобильный макет — уменьшаем размеры.

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

Десктопная и мобильная версии главного экрана

У заголовков уменьшаем размер, меняем начертание и сам текст, чтобы смотрелось лаконично.

Второй экран сайта — описание строительного блока и его основные преимущества. Разместим их один под другим.

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

Сначала дорисуем серый фон

Чтобы увеличить длину фона в мобильной версии, редактируем контур. Кликаем несколько раз по серому контуру, пока не появятся направляющие.

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

Выделяем узловые точки

Затем тянем их вниз курсором.

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

Фон готов

Переносим изображение блока и текст. Кегль шрифта и размер изображения оставляем таким же.

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

Следующая строка на сайте — описание преимуществ. Иконки и текст из этого блока логично также расположить друг под другом.

Переносим иконки

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

Чтобы сделать мобильный макет удобным для пользователя, нужно:

  • упрощать интерфейс сайта,
  • располагать блоки один под другим,
  • следить за масштабом шрифтов и картинок.

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

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

Глеб Летушов

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

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

Конструктор сайтов REG.RU

Готовый сайт с почтой совершенно бесплатно! Попробуйте прямо сейчас!

Попробовать

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

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

После того как вы создали основную версию сайта в режиме «Широкий», вы можете перейти в режимы «Десктоп», «Планшет» и «Смартфон» и отредактировать сайт для этих версий.

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

  1. 1.

    Чтобы выбрать режим отображения, кликните на значок Адаптивный:

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

  2. 2.

    • В выпадающем меню выберите Смартфон:
    • Как сделать мобильную версию сайта правильно: пошаговая инструкция
    • Здесь вы можете выбрать другие режимы для редактирования (например: Десктоп — для десктопной версии, Планшет — для планшетной).
  3. 3.

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

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

  4. 4.

    Теперь вы можете отредактировать модули мобильной версии сайта. Для этого нажмите на Карандаш и выберите нужное действие. О том, как редактировать модули, читайте в статье: Работа с модулями в Конструкторе REG.RU.

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

    Важно:

    • При редактировании не перемещайте объекты из одного раздела в другой, чтобы не вызвать конфликта версий. Если в режиме «Широкий» модуль «Меню» располагается в шапке сайта, то и в других версиях он должен находиться в шапке сайта (перемещать этот элемент, например, в подвал сайта не рекомендуется).
    • При редактировании в одном из режимов не удаляйте модуль, который не нужен для этой версии. Он удалится и в остальных версиях. В таком случае модуль нужно скрыть: нажмите на Карандаш и выберите Скрыть. Данный элемент скроется только для режима, в котором вы сейчас редактируете сайт.
    • Если шрифт в какой-то из версий слишком большой или маленький (например, в версии «Широкий» шрифт отображается корректно, а в версии «Смартфон» он слишком крупный), то можно изменить его масштаб для одной из версий.

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

  1. 1.

    Кликните на текст, чтобы посмотреть его стиль (в примере это стиль Page Title):

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

  2. 2.

    Кликните на значок Шестерёнка и в выпадающем меню выберите Стили:

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

  3. 3.

    В открывшемся окне перейдите на вкладку «Ещё». Выберите в списке слева стиль, который используется в тексте мобильной версии. В поле «Смартфон» выберите масштаб шрифта в процентах. Нажмите Применить:

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

    Здесь вы можете выбрать другие режимы для редактирования (например, Десктоп и Планшет).

  4. 4.
    После сохранения стиля он применится к тексту.
  1. 5.

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

    1. Как сделать мобильную версию сайта правильно: пошаговая инструкция
    2. Статус поменяется на Включено:
    3. Как сделать мобильную версию сайта правильно: пошаговая инструкция
  2. 6.
    Для сохранения внесённых изменений опубликуйте сайт.

Готово, мобильная версия сайта создана.

В Конструкторе есть режим «Автокомпоновка». Он включает автоматическую адаптацию сайта под различную ширину устройств.

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

Данный режим активно дорабатывается и находится в режиме beta-тестирования.

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

Была ли эта статья полезной?

Пользователи, считающие этот материал полезным: 2 из 2

Руководство по созданию мобильных сайтов

Запустив более 100 мобильных сайтов за последние 3 года (включая крупные проекты для OZON, «Эльдорадо», «Леруа Мерлен», «Финам» и другие), я всё ещё вижу много непонимания в области адаптации среди разработчиков и руководителей.

Непонимание как стратегическое, так и практическое. Чтобы сэкономить время — определите, в какой группе вы находитесь (с помощью схемы ниже), и перейдите сразу к разделу Технологии, Особенности адаптации или Дизайн.

Или просто продолжайте читать.

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

Мобильные сайты: от «самой большой глупости на свете» до «глобального изменения сценария»

  • Если вы владелец или менеджер сайта, эта серия статей должна помочь увидеть всю картину со стороны и предоставить практические советы о том, как всё-таки начать правильно работать с мобильной аудиторией, впитав суть подхода mobile first.
  • Когда в 2013 Артемий Лебедев заявил о бесполезности мобильных сайтов, многие менеджеры и руководители — в том числе, наши потенциальные клиенты — с ним согласились и заморозили процесс.
Читайте также:  Производительность труда: что это такое в экономике и от чего она зависит, формула расчета и факторы ее повышения

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

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

Узнать в спецпроекте Cossa & Twice →

Реклама

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

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

Спустя какое-то время в портфолио студии Лебедева начали появляться работы для клиентов «кому некуда деньги девать» — для «Русского стандарта» и других. В общем, если есть спрос — будет и предложение. А буквально недавно Лебедев заявил, что мобильные сайты всё-таки нужны.

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

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

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

Сайт пенсионного фонда с ежемесячной посещаемостью 300 000 юзеров

К чему вся эта предыстория? Три вывода:

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

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

  • Адаптивная верстка. Фактически клиенты и с десктопов, и с мобильных открывают один и тот же сайт, просто отображается он по-разному, на основе специальных правил, прописанных в 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 (на ПК и на мобильных).
  • Сейчас большая редкость встретить шаблон, который не умеет адаптироваться к экранам смартфонов.
Читайте также:  Как сделать гифку из фото или видео: инструкция по созданию gif анимации для сайта

Смена шаблона 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 это будет читаться примерно так (стили мы намеренно написали русскими буквами для понятности, но на практике такое недопустимо, так как это приведёт к ошибке!):

Guest profile Main article Sidebar

Стили для этих контейнеров (задаются в 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; (обтекание по правому краю)
}

}

Мобильная версия WordPress. Оптимизация сайта для мобильных устройств

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

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

Хотите создать собственный сайт, рекомендую воспользоваться услугами хостинга TimeWeb:Как сделать мобильную версию сайта правильно: пошаговая инструкция

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

Зачем вообще делать мобильную версию сайта? Почти каждый житель планеты носит с собой мобильное устройство определенной марки. Даже дети играют в игры и смотрят YouTubee на планшетах и смартфонах.

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

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

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

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

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

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

Например, Twenty Fourteen – тема, установленная в WordPress по умолчанию, идеально подходит для многих сайтов.

Тема имеет адаптивный дизайн, поэтому страницы сайта будут автоматически подстраиваться под устройства, с которых они просматриваются.

Соответственно, если вы создаете собственный сайт, изначально подбирайте тему, которая адаптирована для мобильных устройств. Если у вас установлена тема, не адаптированная под мобильный устройства, следуйте дальнейшим рекомендациям.

Мобильные плагины для WordPress

Наличие плагинов — огромный плюс WordPress. Плагины служат для множества целей, в том числе помогают сделать сайт мобильным.

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

Плагин WPSmart Mobile (мобильная тема)

Обновление 21.05.2020. До марта 2020 года я использовал многофункциональный плагин JetPack. Однако данный плагин прекратил поддержку мобильной темы. Но я быстро нашел более качественную замену в виде плагина WPSmart Mobile.

Читайте также:  Кросс-маркетинг: что это такое, примеры кросс-маркетинговых акций и мероприятий

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

Лично мною было протестировано около 10 плагинов, только WPSmart Mobile смог создать качественную мобильную версию моего сайта.

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

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

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

После активации рекомендую в настройках включить отображение меню. Для этого перейдите в «WPSmart» в админке WordPress, выберите «Menu», поставьте галочку напротив надписи «Enable drop-down pages/links menu.», добавьте нужные вам статьи и нажмите на кнопку «Save All Changes». После проделанных манипуляций в мобильных устройствах буде отображаться аккуратная иконка с меню.

Адаптивные таблицы WordPress

Плагин WPSmart Mobile адаптирует все элементы сайта, кроме таблиц, которые продолжают некорректно отображаться на мобильных устройствах даже после активации мобильной темы. Чтобы это исправить, достаточно установить и активировать плагин «Make Tables Responsive».

Настроек в плагине нет, после его активации все таблицы на сайте станут адаптивными для всех мобильных устройств. Вот так таблицы выглядели до установки плагина «Make Tables Responsive»: А вот так выглядят таблицы после установки плагина: Соответственно, чтобы создать мобильную версию WordPress сайта в автоматическом режиме, нужно установить и активировать два плагина: «WPSmart Mobile» и «Make Tables Responsive» (адаптивные таблицы в WordPress).

Кейс Skyeng: Пошаговая инструкция по созданию мобильной версии сайта — Офтоп на vc.ru

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

Скорость роста мобильной активности поразительна. По статистике Liveinternet по России, за последние два года люди стали выходить в интернет с мобильных устройств в два раза чаще. Похожую картинку мы наблюдали и среди посетителей нашего сайта: с мобильных устройств к нам, уже два года как, заходят в 1,5 раза чаще.

Доля нашей мобильной аудитории росла вместе с общей посещаемостью сайта. Проблема в том, что среди мобильных посетителей показатель отказов был больше в два раза — 22% не задерживались на странице более 15 секунд. Когда мобильная аудитория достигла 20%, стало понятно, что мы не должны терять этих клиентов. Пришло время делать мобильную версию сайта школы.

Постановка задач

Помимо очевидной борьбы с потерей потенциальных клиентов перед мобильной версией мы поставили несколько задач:

  • актуализировать информацию о предоставляемой услуге и компании (десктопный сайт запустили в 2012 году и с тех пор лишь дополняли);
  • сделать обзор преимуществ и показать собственную разработку — платформу для занятий Vimbox;
  • сделать доступнее обратную связь для клиентов.

Этапы дизайнерской работы

  • Сбор актуальной информации.
  • Создание информационной архитектуры.
  • Эскизирование и прототипирование.
  • Отрисовка в графике.

Сбор актуальной информации

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

Эти тезисы я затем объединил в общий список (Урок, Преподаватель, Платформа, Биллинг, Безопасность, Call-центр, Бизнес-процессы, Школа, Бренд) и проставил по ним приоритетные оценки.

Список фишек

Информационная архитектура

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

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

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

Майндмап мобильной версии

Прототипирование

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

Для создания интерактивных прототипов я использую Axure. Фичи для проектирования мобильного сайта или приложения:

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

Откройте на своем телефоне прямо сейчас — http://pauel.me/skyeng-mobile/main.html

Доработка концепции

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

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

Так мы договорились о подходе pipeline. Страницы, через которые мы хотели провести пользователя, собрали в единую последовательность и оставили на них по одной, но очень заметной ссылке («хей, смотри, тебе дальше туда») — на следующую страницу в цепочке.

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

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

Отрисовка в графике

Мы посмотрели статистику по размерам экранов устройств посетителей сайта и определили диапазон ширины мобильного сайта. Статистика нам говорила:

  • основной пик ширины экрана приходится на интервал 300-400px;
  • следующий пик — 700-800px;
  • остальные размеры не значительны.

Дизайн отрисовали под основную ширину — 320px. На примере главной страницы сделали «широкий» вариант. Остальные страницы адаптировали уже на этапе верстки.

И несмотря на то, что из-за ограниченных ресурсов не смогли сделать полноценную адаптивную верстку, некоторые простые приемы все же применили:

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

Несколько пар картинок узкого и широкого вариантов:

  • Картинки интерфейсов с лупой и без:

Немного цифр

  • С релизом мобильной версии конверсия в подачу заявки у мобильных посетителей выросла с 1,1% до 1,7%.
  • Показатель отказов у мобильных посетителей снижен с 22% до 17%.
  • Глубина просмотра увеличилась на 11%.
  • Время на сайте увеличилось на 12%.
Ссылка на основную публикацию