+38 (096) 400-15-67
04080, г. Киев, ул. Константиновская, 73

Принцип Mobile First при разработке дизайна сайтов

Статья обновлена:

Mobile First — это принцип, согласно которому изначально разрабатывается UI/UX интерфейс сайта для расширений, которые устанавливаются на смартфоны. В последующем дизайн-макеты масштабируются под планшетные и desktop-устройства.
Данный подход позволяет качественно проработать удобство мобильной версии сайта, а не по остаточному принципу, как при типовом подходе, когда работа над макетами начинается с desktop-версии.

DesktopMobile  Принцип Mobile First при разработке дизайна сайтов

Начиная с 2017 года доля мобильного трафика интернет-пользователей, которые заходят на сайты используя смартфон превысила 50%!

На графике ниже представлена статистика за последнее десятилетие:

Mobile First при разработке дизайна сайтов  Принцип Mobile First при разработке дизайна сайтов

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

Логично предположить, что в ближайшем будущем большинство интернет-пользователей, возможно даже никогда не увидят desktop-версии тех или иных сайтов и будут взаимодействовать с ними исключительно со своего смартфона!

Такой мобильный бум еще связан с ростом популярности социальных сетей. Если каких-то 5 лет назад люди в возрасте 50+ не присутствовали в Facebook, Instagram (или мало кто имел свои страницы), то сегодня большинство имеют там свои аккаунты в социальных сетях. Представительство брендов здесь же увеличивает процент продаж именно в социальных сетях, создавая простую и доступную коммуникацию с пользователями.
Следовательно, интерфейс мобильной версии сайта или интернет-магазина должен прорабатываться наиболее тщательным образом.

Еще в 2010 году На Всемирном конгрессе мобильных устройств тогдашний генеральный директор Google Эрик Шмидт предложил дизайнером следовать правилу “сначала мобильная версия” — Mobile First

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

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

Важно проработать хорошо техническую сторону, иначе владелец сайта будет терять прибыль!

Какова выгода бизнеса от Mobile First?

Рекомендации, конгрессы и конференции — это все замечательно, но бизнесу нужны конкретные прагматичные вещи, верно же?

  1. Разрабатывая интерфейс сайта с учетом данного принципа мобильной версии будет уделено достаточно внимания. Это важно, учитывая современные тенденции, когда большая половина трафика — мобильный трафик. Т.е. большинство клиентов будут взаимодействовать с мобильной версией Вашего сайта.
    tablet  Принцип Mobile First при разработке дизайна сайтов
    Соответственно в то время, как конкуренты будут заниматься украшательством ПК-версии своих сайтов, Ваш бизнес предоставит своим клиентам качественную и хорошо продуманную мобильную версию сайта, что выделит Ваш бизнес среди конкурентов.
  2. SEO-продвижение и контекстная реклама. Естественно, в мобильной поисковой выдачи Google всегда отдает предпочтение сайтам качественно оптимизированным под мобильные устройства.site google  Принцип Mobile First при разработке дизайна сайтов
    Разрабатывая сайт по принципу Mobile First можно быть уверенным, что мобильная версия будет на 100% отвечать требованиям поисковой системы, соответственно, что в рекламной, что в органической выдаче Google Ваш сайт всегда будет ранжироваться выше, чем сайты конкурентов.

Более подробно о влиянии дизайна на SEO-продвижение читайте в этой статье «Влияет ли дизайн на SEO-продвижение сайта?»

Более того, при рекламе сайта в Facebook и Instagram алгоритмы — этих социальных сетей также анализируют сайт на предмет качества мобильной версии и при прочих равных отдают предпочтение рекламодателям с более качественной мобильной версией сайта.

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

Как сделать удобный дизайн сайта для мобильных устройств с помощью Mobile First

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

site  Принцип Mobile First при разработке дизайна сайтов

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

  1. Мобильная версия должна быть заточена на целевое действие. Если цель Вашего сайта — это привлечение лидов, звонков и заявок от клиентов, значит необходимо максимально подчеркнуть и выделить. Например, очень удачно это реализовано на нашем сайте:
    Mobile  Принцип Mobile First при разработке дизайна сайтов
    В верхней зафиксированной плашке находится номер телефона, при клике на который происходит вызов, а также кнопки популярных мессенджеров, при нажатии на которые открываются соответствующие чаты. Кликабельность контактов в разы повышает вероятность осуществления контакта. Рекомендуется делать значки социальных сетей или мессенджеров видимыми при скроллинге по всей странице. То есть: какую бы информацию не смотрел на сайте пользователь — он видит варианты для связи с компанией и может в любую секунду ими воспользоваться, не возвращаясь вверх или прокручивая страницу вниз.
  2. Кегль (размер шрифта) для мобильной версии должен быть 14-18px. Это важно чтобы придать максимальную читабельность тексту.
  3. Карты. Вместо того, чтобы грузить векторную карту Google в контакты, которая в свою очередь снижает скорость загрузки, лучше разместить ссылку с геолокацией, с помощью которой можно будет проложить маршрут к вашему офису, через соответствующие приложение на смартфоне.
  4. Ну и естественно, кроме дизайна интерфейса мобильная версия сайта должна быть выполнена технически безупречно.
Удобный и правильный интерфейс мобильной версии — крайне важен для высокой конверсии Вашего сайта.

Чтобы получить профессиональную разработку UI/UX интерфейса вашего сайта обращайтесь в веб-студию BUSINESSSITE
Дизайн сайта
мобильной версии разрабатывается командой профессионалов, которые не просто руководствуются современными тенденциями, но и учитывают особенности вашего бизнеса и данные аналитики (опрос клиентов, например).

Основные компетенции: web программирование, интернет маркетинг, продажи.
Уважаемый пользователь! C целью предоставления наиболее актуального контента, наш сайт использует файлы cookie. Продолжая взаимодействие с нашим сайтом, вы соглашаетесь с использованием файлов cookie нами.
Ок
Получите скидку -15%
Заполните эту форму