Трафик со смартфонов
Долю, которую дают мобильные устройства, показываем по вашей Метрике.
Для нового проекта рисуем адаптивный веб-дизайн сайта для мобильных устройств в Figma, а сложному сервису с другим сценарием на телефоне проектируем отдельную версию. Готовый ресурс адаптируем под узкие экраны. Начинаем с бесплатного разбора.
Зачем сайту адаптивный дизайн для заявок и SEO
Заявки и звонки
Крупные кнопки и короткие формы поднимают конверсию с телефона.
SEO
Яндекс учитывает удобство на смартфоне с алгоритма «Владивосток», мобильная индексация Google смотрит версию для телефона, статья Mobile First.
Поведение
Отказы и время на странице с телефона влияют на ранжирование.
горизонтальная прокрутка;
мелкий текст;
тесные кнопки;
меню перекрывает контент;
Яндекс Вебмастер показывает ошибки мобильных страниц;
начать можно с аудита мобильной версии.
Чем адаптивный дизайн отличается от мобильной версии сайта
Адаптивный дизайн (adaptive, responsive design) дает один ресурс на одном адресе: макет перестраивается под ширину экрана устройства. Мобильная версия сайта живет на поддомене с приставкой m., у нее свои макеты и набор функций. Пользователей смартфонов туда перенаправляет сервер. Плюсы и минусы у двух вариантов разные, а выбор зависит от сценария на смартфоне.
Когда выбирать адаптив
Корпоративные проекты, лендинги, интернет-магазины, страницы услуг.
Когда нужна отдельная мобильная версия
Портал или сервис с тяжелым десктопным интерфейсом и своим сценарием на смартфоне.
Способы адаптации
Адаптивная верстка на контрольных точках, резиновая верстка (отзывчивый дизайн), mobile first. Разбор в статьях о подходах и о верстке.
Мобильное приложение
| Критерий | Адаптив | Мобильная версия |
|---|---|---|
| Адреса | один URL | два адреса |
| SEO | без дублей | риск дублей |
| Разработка | дешевле | дороже |
| Сроки | короче | дольше |
| Поддержка | одна админка | правки дважды |
| Скорость загрузки | общий вес | облегчается отдельно |
| Свой сценарий | ограничен | возможен |
| Кому подходит | большинству | порталам и сервисам |
Делаем дизайн нового сайта и адаптируем готовый
Новый проект
Адаптивные макеты всех шаблонов страниц, сборка ресурса с нуля входит в разработку сайтов.
Адаптация готового ресурса
Экраны для существующих шаблонов в прежнем фирменном стиле, новый облик дает редизайн.
Отдельная мобильная версия
Свой сценарий и набор функций для смартфона.
Что прорабатываем в макетах под смартфоны и планшеты
Навигация
Бургер-меню, нижняя панель, закрепленная кнопка звонка.
Области нажатия
Кнопки под палец с отступами.
Типографика
Текст хорошо читается без увеличения.
Порядок контента
Главное первым, остальное под раскрытие.
Формы
Нужный тип клавиатуры, автозаполнение, минимум полей.
Изображения
Слайдеры и таблицы помещаются в экран.
Всплывающие окна
Виджеты не перекрывают контент.
Ориентация
Вертикальный и горизонтальный режим.
Скорость загрузки
Легкие страницы, статья о скорости мобильной версии.
| Ширина экрана | Что меняется |
|---|---|
| Смартфон | одна колонка |
| Планшет | две колонки |
| Ноутбук | полное меню |
| Десктоп (desktop) | широкая сетка |
Примеры адаптивного дизайна из наших проектов
В карточке кейса показываем нишу, задачу и один экран рядом на смартфоне, планшете, десктопе. Для адаптации готового ресурса добавляем пару «было» и «стало» на телефоне, а результат берем только из Метрики клиента с периодом сравнения: доля заявок со смартфонов, отказы на мобильных, срок проекта. Здесь показываем свои проекты, чужие интерфейсы крупных сервисов не разбираем.
Как создаем дизайн по этапам и проверяем на устройствах
Бриф и анализ трафика
Смотрим визиты со смартфонов в Метрике и Вебмастере.
Прототипы
Ключевые страницы для телефона, услуга Прототипирование.
Макеты
Все контрольные точки от смартфона до десктопа, согласование с вами.
Передача верстальщику
Согласованные экраны уходят в верстку.
Авторский надзор
Сверка верстки с макетами, если он входит в работу.
СТОИМОСТЬ
Сколько стоит адаптивный дизайн сайта и от чего зависит цена
Состав работ и стоимость согласуем после обсуждения задачи.
Гарантии по договору и команда, которая рисует макеты
Работаем по договору от ИП без НДС, со счетом и актом. Показатели записываем в приложение к договору: при невыполнении разбираем причины и доделываем без повышения цены. Доступы и материалы клиента передаются по акту. В группе проекта 8 специалистов, среди них дизайнер, разработчик, копирайтер, а само агентство с 2020 года работает в 6 направлениях и ведет до 15 проектов одновременно.
FAQ
Частые вопросы о поддомене и позициях в поиске
Можно ли сделать адаптив для готового сайта без полного редизайна?
Да, если структура и фирменный стиль работают. Меняем раскладку шаблонов под узкий экран, а логотип, цвета и шрифты оставляем. Если нужна новая визуальная концепция, это уже редизайн.
Сколько контрольных точек нужно и под какие экраны рисуете?
Число точек зависит от того, с каких экранов приходят посетители. Базовый набор закрывает смартфон, планшет и десктоп, а промежуточные ширины добавляем под заметную долю визитов.
Входит ли верстка и перенос на сайт?
Это решаем на брифе под вашу задачу, до подписания договора. Если у вас свой программист, он работает по согласованным макетам. Если нет, обсуждаем, кто и как перенесет макеты на ваш движок.
У нас уже есть мобильная версия на поддомене, можно ли перейти на адаптив и не потерять позиции?
Перейти можно через постраничные редиректы с поддомена на основной адрес. Позиции могут колебаться, поэтому индексацию после переезда проверяют в Яндекс Вебмастере и Search Console.
Влияет ли адаптивный дизайн на позиции в Яндексе и Google?
Да, через удобство и поведение: неудобная на телефоне страница собирает отказы, поисковики это видят. На место в выдаче влияют также тексты, ссылки и техническое состояние ресурса.
Как проверить, адаптирован ли сайт?
Откройте в Яндекс Вебмастере инструмент «Проверка мобильных страниц» и прогоните адрес через Lighthouse в Chrome. Затем пройдите сценарий заявки на телефоне: меню, форма, кнопка звонка.
На каких CMS работаете?
Макеты рисуем без привязки к движку: сетку и компоненты можно сверстать под вашу CMS. Если движок не поддерживает адаптивные шаблоны, на брифе обсуждаем переезд или доработку темы.
Рассчитать стоимость адаптивного дизайна для вашего сайта
После заявки смотрим ваш ресурс и нишу: без оплаты, без обязательств. Расчет и рекомендацию, какой вариант подходит вашему проекту, готовим после брифа. Для заявки хватит ссылки на ресурс и телефона, остальные поля уточняют расчет. Оставьте заявку, и мы свяжемся по контакту из формы.
Другие услуги веб-дизайна и полезные статьи
Что такое UX/UI-дизайн
Современный веб-дизайн