Есть две концепции создания сайтов для мобильных телефонов: создание отдельного мобильного сайта или использование адаптивной верстки. Обычно мобильная версия сайта находится на отдельном домене и при этом выглядит сильно упрощенной.
Чтобы не создавать две версии сайта, используют адаптивную верстку. Она автоматически подстраивается под разрешение экрана пользователя, поэтому сайт всегда хорошо выглядит и с компьютера, и с планшета, и с мобильного телефона.
Как сделать мобильную версию сайта
На каждом из разных экранов макет меняется: на планшете становится меньше колонок, а на мобильном блоки собираются в одну колонку, меню складывается в кнопку. Технически сайт остается одним и тем же, но дизайнеру приходится перерисовывать макеты под разные разрешения.
Для создания варианта адаптивной верстки под мобильные важно уместить весь сайт в ограниченную ширину. Это сделать тяжелее, чем растягивать сайт до заданной ширины. Поэтому для создания мобильной версии выбирают минимальное устройство в своем классе. Можно отталкиваться от ширины экрана для первых моделей iPhone — 320px.
Создаем в Sketch новый артборд с шириной 320px. Для этого выбираем Insert → Artboard или просто клавишу A на клавиатуре, а затем выбираем нужное разрешение. Подойдет шаблон Mobile с шириной в 320px.
Новый артборд готов. Так как наш макет будет длинным, артборд можно увеличить. Можно задать длину в px в колонке свойств или просто потянуть за край артборда.
Мобильная страница будет значительно длиннее десктопной. Поэтому все большие блоки с контентом из широкого артборда в мобильной версии необходимо разместить друг под другом.
Ширина макета для мобильного сильно ограничена, поэтому главная задача дизайнера — поместить на него всю важную информацию из компьютерной версии. Для этого некоторые блоки прячут под кнопки или в раскрывающиеся списки. Частный вид такого списка — это меню сайта.
Обычно меню сайта занимает широкую область вверху экрана и состоит из нескольких пунктов. Если пунктов в меню много, то перенести их в мобильный макет не получится: придется либо уменьшать шрифт, либо размещать его в две строки.
Если уменьшить шрифт у пунктов меню или разместить их рядом, то пользователю мобильного телефона будет тяжело попасть в них пальцем. Одно из решений этой проблемы — меню-бургер. Это кнопка в мобильном макете, нажатие на которую открывает полноценное меню сайта.
Для такого меню можно использовать одну из готовых иконок или нарисовать свою. Простой вариант — сделать ее с помощью трех линий и прямоугольника. Рисуем три линии (Insert — Shape — Line). Вокруг них добавляем прямоугольник (Insert — Shape — Rounded).
Кнопку с обратным звонком и телефон можно поместить внутри раскрывающегося меню — так мы сэкономим место.
Перенесем первый блок сайта в мобильный макет. Для этого выделяем нужные слои на артборде и перетаскиваем их на другой макет с зажатым Alt. Также слои можно вырезать и вставить в нужном месте.
Переносим контент. После этого адаптируем изображение под мобильный макет — уменьшаем размеры.
У заголовков уменьшаем размер, меняем начертание и сам текст, чтобы смотрелось лаконично. Второй экран сайта — описание строительного блока и его основные преимущества. Разместим их один под другим.
Сначала дорисуем серый фон. Чтобы увеличить длину фона в мобильной версии, редактируем контур. Кликаем несколько раз по серому контуру, пока не появятся направляющие.
Выделяем узловые точки. Затем тянем их вниз курсором.
Переносим изображение блока и текст. Кегль шрифта и размер изображения оставляем таким же.
Следующая строка на сайте — описание преимуществ. Иконки и текст из этого блока логично также расположить друг под другом. Переносим иконки. Похожим образом располагаем и остальные элементы: слайдеры, кнопки, карточки.
Чтобы сделать мобильный макет удобным для пользователя, нужно:
- упрощать интерфейс сайта,
- располагать блоки один под другим,
- следить за масштабом шрифтов и картинок.
Когда хороший дизайнер думает над сайтом, он сразу должен просчитать, как будут выглядеть его мобильная и планшетная версии, как расположить контент на небольшим дисплее.
Как создать мобильную версию сайта в Конструкторе
Сайт, который вы создаёте в Конструкторе, посетители могут смотреть с разных устройств: ПК, ноутбуков, планшетов, смартфонов.
Когда вы редактируете содержимое шаблона в Конструкторе, автоматически выбирается режим «Широкий». Добавленные вами элементы сайта присутствуют во всех версиях, но некоторые из них необходимо поправить: например, корректно разместить на странице, уменьшить или увеличить модули, скрыть какие-либо элементы.
После того как вы создали основную версию сайта в режиме «Широкий», вы можете перейти в режимы «Десктоп», «Планшет» и «Смартфон» и отредактировать сайт для этих версий.
Как создать мобильную версию сайта
- Чтобы выбрать режим отображения, кликните на значок Адаптивный:
- В выпадающем меню выберите Смартфон:
Здесь вы можете выбрать другие режимы для редактирования (например: Десктоп — для десктопной версии, Планшет — для планшетной).
- Появится разметка для редактирования мобильной версии сайта:
- Теперь вы можете отредактировать модули мобильной версии сайта. Для этого нажмите на Карандаш и выберите нужное действие.
Важно:
- При редактировании не перемещайте объекты из одного раздела в другой, чтобы не вызвать конфликта версий. Если в режиме «Широкий» модуль «Меню» располагается в шапке сайта, то и в других версиях он должен находиться в шапке сайта (перемещать этот элемент, например, в подвал сайта не рекомендуется).
- При редактировании в одном из режимов не удаляйте модуль, который не нужен для этой версии. Он удалится и в остальных версиях. В таком случае модуль нужно скрыть: нажмите на Карандаш и выберите Скрыть. Данный элемент скроется только для режима, в котором вы сейчас редактируете сайт.
- Если шрифт в какой-то из версий слишком большой или маленький (например, в версии «Широкий» шрифт отображается корректно, а в версии «Смартфон» он слишком крупный), то можно изменить его масштаб для одной из версий.
Как изменить масштаб текста в мобильной версии:
- Кликните на текст, чтобы посмотреть его стиль (в примере это стиль Page Title):
- Кликните на значок Шестерёнка и в выпадающем меню выберите Стили:
- В открывшемся окне перейдите на вкладку «Ещё». Выберите в списке слева стиль, который используется в тексте мобильной версии. В поле «Смартфон» выберите масштаб шрифта в процентах. Нажмите Применить:
Здесь вы можете выбрать другие режимы для редактирования (например, Десктоп и Планшет).
- После сохранения стиля он применится к тексту.
- После редактирования мобильной версии сайта активируйте её. Нажмите на опцию Выключено в правом верхнем углу.
Статус поменяется на Включено:
- Для сохранения внесённых изменений опубликуйте сайт.
Готово, мобильная версия сайта создана.
В Конструкторе есть режим «Автокомпоновка». Он включает автоматическую адаптацию сайта под различную ширину устройств.
Данный режим активно дорабатывается и находится в режиме beta-тестирования. Если включить режим «Автокомпоновка», модули на опубликованном сайте будут отображаться в размере, который отличается от установленного вами при редактировании.
Этот размер зависит от ширины экрана устройства, с которого открывается сайт. Также элементы могут иметь другое положение на страницах опубликованного сайта.
Как сделать мобильную версию для любого сайта
Вариантов создания сайтов, правильно работающих с мобильными устройствами, не так уж и много:
- Адаптивная верстка. Фактически клиенты и с десктопов, и с мобильных открывают один и тот же сайт, просто отображается он по-разному, на основе специальных правил, прописанных в CSS-стилях.
- Отдельная мобильная версия сайта. Концепция mobile-only. Это когда у вас параллельно работают сразу два самостоятельных интерфейса, они даже часто располагаются на разных доменах (например, один на основном домене, второй на поддомене).
- Полноценное мобильное приложение. Это может быть самостоятельный продукт с нативной архитектурой, скомпилированный под нужную платформу, а может быть упакованный просмотрщик (своего рода web-браузер), который работает только с одним единственным сайтом.
Каждый из них оптимален для своих задач. Плюс, всегда нужно учитывать пожелания клиента (владельца сайта).
Мы рассмотрим техническую часть процесса немного под другим углом – применительно к наиболее частым ситуациям.
Как сделать мобильную версию сайта в конструкторе
Если сайта у вас ещё нет, то проще сразу начинать с сервисов, которые поддерживают адаптивность и/или имеют отдельные редакторы для мобильной версии.
Многие популярные онлайн-конструкторы изначально предусматривают этот момент, и все блоки, виджеты или иные элементы интерфейса делают адаптивными.
Они одинаково хорошо выглядят как на экранах персональных компьютеров, так и на экранах смартфонов. Никакая отдельная мобильная версия даже не требуется. Ниже самые лучшие облачные платформы, популярные в Рунете.
uKit – простой и понятный конструктор сайтов для бизнеса
| Официальный сайт: | ukit |
| Год основания: | 2015 |
| Страна: | Россия |
| Бесплатный период: | 14 дней |
| Платные тарифы: | от $2,5 в мес. |
| Мобильная версия: | адаптивный сайт |
Все создаваемые здесь сайты изначально адаптированы под экраны мобильных устройств. Это достигается за счёт использования специальных блоков дизайна и дополнительных функций платформы:
- Отложенная загрузка стилей CSS (на старте прогружаются только необходимые для отрисовки главного экрана, а далее – по мере скролла страницы);
- Lazy-load («ленивая» загрузка) для изображений (картинки загружаются уже после отрисовки основного дизайна, тем самым ускоряя процесс готовности интерфейса для пользователя даже на устройствах с медленным интернетом);
- Оптимизация изображений (зачем загружать картинку в полном размере, если на экране смартфона она будет отображаться как миниатюра? Логично сразу формировать и загружать на устройства с маленьким экраном небольшие по размеру и объёму изображения).
Плюс, у uKit есть гибкая настройка интерфейса отдельно для планшетов и отдельно для смартфонов. Вы можете скрыть выбранные элементы вёрстки или оформить их стиль не так, как в desktop-версии сайта. Для планшетов доступен вывод виджетов/блоков в один или в два столбца.
Если у вас на сайте выводится одновременно несколько плавающих кнопок (заказ звонка, кнопка «Поделиться» и т.п.), система предложит отображать только одну из них на мобильной версии страницы, чтобы не загромождать интерфейс. А ещё система позволяет связывать между собой иконки и подписи к ним (поэтому в мобильной версии не будут отдельно группироваться иконки, и отдельно текст).
Wix – комплексная платформа для запуска любых сайтов
| Официальный сайт: | wix |
| Год основания: | 2006 |
| Страна: | Израиль |
| Бесплатный период: | неограниченный |
| Платные тарифы: | от 80 руб. в мес. |
| Мобильная версия: | отдельный редактор |
На Wix можно создать и обслуживать сайты любого типа: блоги, форумы, полноценные сайты гостиниц с системой бронирования, интернет-магазины и т.д. Все готовые дизайны в каталоге и страницы, создаваемые пользователями с нуля, автоматически адаптируются для мобильных устройств.
Как и в uKit, здесь тоже можно настраивать отдельно десктопную версию сайта и отдельно мобильную (но отдельного интерфейса для планшетов нет). Вы сможете скрывать выбранные блоки и элементы интерфейса, менять/настраивать оригинальный фон, а ещё у Wix есть специфические функции для мобильных:
- Отображение панели быстрых действий (сюда можно добавить кнопку телефонного вызова, ссылки на социальные сети/мессенджеры и т.п.);
- Экран приветствия (своего рода анимированный экран загрузки, который позволяет добавить ярких эмоций или познакомить с брендом/товарным знаком до перехода на сайт);
- Кнопка «Наверх»;
- Своя цветовая схема для панели браузера Chrome;
- Сервис автоматической оптимизации контента и макета страницы для мобильных устройств (очень удобно, если страницу создавал непрофессиональный дизайнер).
У Wix имеется приложение для мобильных, с помощью которого можно управлять своим сайтом, если активна подписка на профессиональные инструменты для бизнеса.
Как сделать мобильную версию сайта с CMS (на примере WordPress)
Как и любой другой CMS-системе, ВордПрессу не важно с какого устройства его посещает пользователь. Движок просто отдаёт браузеру тот вариант дизайна, который определён в настройках по умолчанию.
Хотя, стоит отдать должное разработчикам, WordPress – это одна из немногих CMS, у которой дизайн админ-панели умеет адаптироваться под мобильные устройства (это значит, что сайт будет удобен не только посетителям, но и владельцу, который сможет редактировать, настраивать и наполнять свой сайт с мобильного). Кроме того, есть приложения для смартфонов, они подходят не только для работы с классическим движком, но и для облачной платформы WordPress.com.
Получается, что мобильная версия сайта – это в 99% случаев заслуга самого шаблона. Исключение составляют специальные плагины или скрипты, которые могут перенаправлять пользователей (например, на основе разрешения экрана или на основе модели устройства) на отдельный дизайн для мобильных.
Мобильная версия сайта на WordPress с нуля
Если у вы только планируете запускать сайт, то проблема стоит не так остро – достаточно выбрать правильный шаблон. Адаптивных шаблонов даже в официальном каталоге движка более чем достаточно. Главное удостовериться, что выбранный дизайн точно отрабатывает заявленные функции.
- Аналогичная ситуация с альтернативными площадками, такими как ThemeForest или TemplateMonster.
- Если вам важна скорость загрузки и высокие показатели метрики PageSpeed Insights, то существуют специальные темы, которые обеспечивают до 100 баллов в профильных тестах, например, как тема Neve (на ПК и на мобильных).
- Сейчас большая редкость встретить шаблон, который не умеет адаптироваться к экранам смартфонов.
Смена шаблона WordPress на адаптивный
Если у вас уже состоявшийся проект, но шаблон морально устарел, так как рассчитан исключительно на широкий формат (например, у него фиксированная ширина), то в этом случае вам стоит задуматься о смене старого дизайна на новый.
Этот подход логичен тем, что:
- Будет выдержан единый стиль между мобильной и десктопной версией сайта;
- Не придётся обслуживать сразу два вида интерфейсов;
- Не нужно писать сложных функций и алгоритмов по определению разрешения и типа устройства пользователя для его переадресации на отдельный дизайн;
- У коммерческих шаблонов часто предоставляется техподдержка, поэтому вы сможете получить ответы на все свои вопросы и настроить новую тему ничуть не хуже предыдущей.
Без минусов тут тоже никак. Часто в шаблонах прописываются коды аналитик, счётчиков, блоков рекламы и т.п. Некоторые шаблоны вообще вводят отдельные виды материалов. Всё это придётся переносить в новый шаблон.
Ошибки могут стоить позиций в поиске. А если у вас есть постоянные пользователи, они могут не оценить инновации и просто отказаться от посещения вашего сайта. Поэтому предварительно нужно очень детально проанализировать предстоящую смену дизайна и учесть все возможные нюансы.
Переделка старого шаблона в адаптивный
На самом деле затея не так сложна, как кажется изначально. Правда, без профильных знаний, или хотя бы без знания основ верстки, браться за неё точно не стоит. В лучшем случае можно привлечь/попросить знакомого дизайнера/верстальщика, а лучше нанять.
Основная идея – добавить медиазапросы CSS, на основе которых будут добавлены каскадные стили специально для нужных разрешений экрана. Например, если ваша основная сетка выглядела так:
В HTML это будет читаться примерно так (стили мы намеренно написали русскими буквами для понятности, но на практике такое недопустимо, так как это приведёт к ошибке!).
Если мы заменим фиксированную или относительную ширину на 100% для заданного разрешения экрана, то сетка примет вид:
Чтобы этого добиться, достаточно добавить в таблицы стилей медизапрос.
Загрузка...
