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

Разработка мобильных версий сайтов

По данным Яндекс Метрики, мобильный трафик обогнал десктопный ещё в 2019 году. В конце 2023 года его доля достигла 70%. При таком соотношении, очевидно, что адаптивный сайт – это не опция, а необходимость для эффективных продаж.

Зачем нужна мобильная версия сайта?

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

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

 

Сайт без мобильной версии – тоже нормальный

Безусловно, сайт без мобильной версии может быть полезным, информативным и даже стильным… на большом экране. Но дизайн такого проекта на смартфоне будет однозначно плохим: горизонтальная прокрутка, мелкий нечитаемый шрифт и неудобные кнопки оставят у пользователя не лучшие впечатления. Давайте сравним.
 
Без мобильной версии
С мобильной версией
Изображения
Картинки загружаются медленнее. Они могут неудачно кадрироваться в маленьких экранах или сжиматься, иногда даже без учёта пропорций.
Картинки оптимизированы и быстро загружаются. Они масштабированы, располагаются по ширине экрана.
Шрифт
Текст часто нечитаемый. При просмотре сайта с телефона кегли 14 и 15 выглядят очень мелкими. Приходится растягивать экран, чтобы увидеть хоть что-то. Это сильно затрудняет чтение.
Шрифт в мобильной версии увеличивается до 17-18 px, чтобы обеспечить лучшую читаемость на маленьких экранах. Он выбирается с учётом оптимального отображения на разных устройствах. Отступы между блоками и от края экрана контролируются стилями.
Таблицы
Таблицы вылетают за ширину экрана телефона. Отсутствует горизонтальная прокрутка, приходится постоянно перемещаться из стороны в сторону, чтобы понять соотношение данных.
Таблицы удобны для восприятия. У них фиксированная шапка, ширина – по контентной области. Шрифт достаточно крупный, плавный скроллинг.
Кнопки
Кнопки мелкие, по ним сложно попасть, поэтому пользователь «промахивается». Часто они располагаются в неудобном месте. Если случайно переместиться по экрану – кнопку и вовсе можно потерять из вида.
Кнопки зафиксированы, располагаются в зоне досягаемости большого пальца и выделяются контрастными цветами для привлечения внимания. Достаточно крупные, их удобно нажимать подушечками пальцев.
Формы обратной связи
Крошечные компоненты формы сложны для взаимодействия. Нужно увеличивать макет и двигаться по экрану в разных направлениях (нет скроллинга, навигации). Случайное нажатие мимо формы может закрыть её и не сохранить уже заполненные данные.
В конверсионный элемент включены только самые важные поля для заполнения, кнопка занимает 1/3 от всего блока, она яркая, большая, заметная. Форму легко просматривать, заполнять и отправлять через смартфон.

 

 

 

Мобильная версия или адаптивная вёрстка?

Эти понятия часто путают, да и мы не разделяем их принципиально. Для бизнеса суть едина – современный сайт должен быть адекватным и удобным, как и просмотре с компьютера, так и при визите с планшета или смартфона. Но есть разница в деталях и технологиях.
 
Адаптивная вёрстка
Это когда весь контент сайта адаптируется под размер экрана устройства. Шрифты становятся крупнее, картинки встают отдельно на всю ширину смартфона и т.д. В большинстве случаев это разумное решение без лишних вложений и однозначный must have.
Мобильная версия
Это самостоятельная, отдельная версия сайта, которая автоматически открывается при визитах со смартфонов. В этом случае может быть по-другому реализован даже функционал. Для понимания зайдите на сайт ВКонтакте с телефона и попробуйте переключиться на версию для ПК. Разница кардинальная, это уже не просто адаптив.

 

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

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

Почему разработку мобильной версии сайта стоит доверить нам?

Глобальный опыт
Запускаем сайты с 2001 года и следим за трендами рынка. Каждый современный проект адаптирован под мобильные.
Объективность
Вместе с вами рассмотрим задачи проекта и примем обоснованное решение о том, нужна вам мобильная версия или просто качественный адаптив.
Штатная команда
У нас есть дизайнеры, программисты, SEO-специалисты и верстальщики – искать сторонних специалистов не придётся.
№ 1
По Рейтингу Рунета 2023 мы занимаем 1 место среди комплексных digital-агентств Челябинска.

Вопрос-ответ

  • Правда ли, что не адаптированные под мобильные устройства сайты не показываются в топ-10 Google и Яндекс?

    — Да, это правда. С апреля 2015 года заработал алгоритм поиска Google, призванный понизить в выдаче сайты, не адаптированные для мобильных устройств. Эти нововведения связаны со всемирным ростом объемов мобильного трафика. Через год и Яндекс объявил о версии поискового алгоритма, в которой сайты без адаптивной вёрстки стали показываться ниже в выдаче.

  • Чем мобильная версия сайта отличается от адаптивной на практике и в продвижении?

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

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

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

  • У меня получится создать адаптивную вёрстку самостоятельно с помощью онлайн-сервисов?

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

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

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

    — Чтобы мобильная версия была удобна, её необходимо оптимизировать для просмотра с небольших устройств. Расскажем о нескольких постулатах:

    Заголовки на сайте нужно делать короткими – в одну строку. Размер шрифта 12-14 px. Если буквы меньше – читается сложно. Краткие подсказки, пояснения размещайте прямо в текстовом поле. Выделить их можно светло-серым цветом. Откажитесь от больших всплывающих блоков. Они делают мобильную версию тяжелой, неудобной. Выводите только самые важные элементы. Не пытайтесь вместить всю информацию в одну маленькую колонку.

Хотите узнать больше о нашей специализации в вашей отрасли?

Нужен точный расчёт проекта? Выберите удобный способ связи по кнопке ниже, и мы ответим на все вопросы.

Связаться с нами

Связаться с нами

Контакты

Все поля обязательны для заполнения.

* — поля со звёздочкой обязательны для заполнения.

class="ipseudocheckbox__checkbox"/>

Получите подарок

Оставив заявку на обратный звонок сейчас, Вы получите подарок – уникальный чек-лист «Профессиональные фишки для самостоятельного аудита сайта».

* — поля со звёздочкой обязательны для заполнения.

Получить консультацию

* — поля со звёздочкой обязательны для заполнения.

Задать вопрос

Получить план работ

* — поля со звёздочкой обязательны для заполнения.

Рассчитать стоимость продвижения

* — поля со звёздочкой обязательны для заполнения.

Укажите свои контактные данные и мы свяжемся с вами в ближайшее время.

Спасибо!

Закрыть