Главная Услуги Разработка сайтов Разработка мобильных версий сайтов

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

По данным Яндекс Метрики, мобильный трафик обогнал десктопный ещё в 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. Если буквы меньше – читается сложно. Краткие подсказки, пояснения размещайте прямо в текстовом поле. Выделить их можно светло-серым цветом. Откажитесь от больших всплывающих блоков. Они делают мобильную версию тяжелой, неудобной. Выводите только самые важные элементы. Не пытайтесь вместить всю информацию в одну маленькую колонку.