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

Автор: Максим Димура

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

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

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

grafik

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

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

Следовательно, интерфейс мобильной версии сайта или интернет-магазина должен прорабатываться наиболее тщательным образом.

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

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

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

Иначе владелец сайта будет терять прибыль!

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

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

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

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

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

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

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

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

site

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

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

Чтобы получить профессиональную разработку UI/UX интерфейса вашего сайта обращайтесь в веб-студию BUSINESSSITE

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