Что такое mobile first – Журнал «Код» программирование без снобизма

Что выбрать mobile first vs desktop first?

Если стоит задача создания интернет ресурса, будь то интернет магазин или сайт компании, то шаблонный вариант
неприемлем сразу (надеюсь, причина отказа от шаблона понятна ). Встает нелегкая задача: определиться по какой
технологии стоит заказывать разработку сайта? Перечислим плюсы и минусы каждого метода и облегчим принятие решения.

Плюсы Mobile first

  • Понятные и простые интерфейсы
  • Отличная оптимизация под все разрешения
  • UX / UI проектирование
  • Легкое восприятие сайта
  • Сразу видно, что сайт качественный и не шаблонный
  • Высокая скорость загрузки
  • Проработаны все элементы для различных разрешений
  • По дизайн-макету сразу можно оценить как будет выглядеть мобильная версия сайта
  • Поисковые системы “любят” такие сайты
  • Отсеивание неквалифицированных специалистов
  • Повышенная конверсия с мобильных устройств
  • Перспектива на будущее

Минусы Mobile first

  • Высокая стоимость проекта
  • Долгое время изготовления
  • Ограничение в креатив-проектах

Плюсы Desktop First

  • Низкая стоимость изготовления
  • Высокая скорость изготовления
  • Не требует высокой квалификации
  • Возможность креативить

Минусы Desktop First

  • Уходящая технология
  • Рано или поздно придётся менять формат
  • Невысокое качество изготовления
  • Посредственное качество верстки
  • Возможность использования «костылей»
  • Сходство с шаблонными сайтами
  • Плохая оптимизация для маленьких разрешений
  • Повышенные отказы с мобильных девайсов

Вывод напрашивается сам собой: дестоп ферст пора отправлять на заслуженный покой, и не за чем продлевать ему рабочую
деятельность, создавая новые ресурсы. Да и поисковые системы с каждым годом дают понять: -Продвигая технологии турбо
страницы, AMP, ребятки, настала эпоха мобилизации и, если вы хотите зарабатывать деньги при помощи веб-ресурса, то
извольте подготовить его должным образом.

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

Читайте про операторов:  Как вставить СИМ-карту в Samsung Galaxy A3

Что делать?

В первую очередь, не паниковать.

Если вы используете динамический показ или у мобильной и десктопной страниц вашего сайта разные URL, вам следует обратить внимание на следующее:

Контент. Убедитесь, что контент на вашей странице высокого качества и только тех форматов, которые Google сможет просканировать и проиндексировать. Список таких файлов можно изучить в Справке Google.

Структурированные данные. Разметка должна присутствовать на обеих версиях сайта. Все URL, добавленные в мобильную разметку, должны вести на страницы мобильной версии. Не используйте структурированные данные просто для галочки, разметка должна быть релевантна контенту на странице. Подробнее о структурированных данных можно узнать из Справки Google.

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

Если у десктопной и мобильной версий вашего сайта разные URL, то помимо вышеуказанных советов, вам также стоит обратить внимание на:

Верификацию в Search Console. Необходимо подтвердить право собственности не только на десктопную версию сайта, но и на мобильную.

Метатег hreflang. Если вы используете метатег rel=hreflang для управления мультиязычным сайтом, URL в мобильном hreflang должны вести на мобильную версию сайта, а в десктопном – на десктопную.

Что изменится?

Мы уже выяснили, что в целом изменится модель, по которой Google ранжирует сайты в выдаче: теперь в первую очередь Google будет сканировать мобильные версии, по ним и будут ранжироваться сайты. Теперь давайте разберемся, как mobile-first повлияет на разные типы сайтов:

Тип сайта

Что изменится?

Только десктоп

Ничего. Поисковый робот Google продолжит индексировать десктопную версию. Однако помните, что предпочтение будет отдаваться mobile-friendly сайтам. Может быть, стоит задуматься об оптимизации под мобайл?

Адаптивный дизайн

Ничего

Канонические AMP-страницы

Ничего.

Разные URL

Поисковый робот Google будет отдавать предпочтение мобильной версии. Сайт стоит подготовить к переходу на новое индексирование.

Динамический показ

Поисковый робот Google будет отдавать предпочтение мобильной версии. Сайт стоит подготовить к переходу на новое индексирование.

Обычные и AMP-страницы (две разные версии одной страницы с разными URL)

Поисковый робот Google будет отдавать предпочтение мобильным версиям страниц. Если для страниц используется динамический показ или разные URL, подготовьте их к переходу на mobile-first

Адаптивная верстка

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

Для планшетов показываем только корзину, а товары размещаем в два столбика; у смартфонов – прячем все в кнопку меню для мобильной версии, товары располагаем по одному на каждую строку.

мобильная версия сайта адаптивная верстка
Адаптивная верстка

Главный плюс такой адаптивности сайта в том, что и мобильная, и десктопная версии – это один и тот же сайт.

А значит и любые изменения достаточно внести один раз, после чего адаптация сайта для всех экранов произойдет автоматически. Это может быть добавление статьи, смена сортировки, новый цвет кнопок. Другие плюсы адаптива:

  • Дешево и просто – разрабатывается относительно быстро и недорого, можно даже внедрить адаптив в уже существующий сайт;
  • Один адрес страниц – удобно для пользователей и корректно в техническом плане (меньше мороки с поисковой оптимизацией);
  • Так рекомендует Гугл. На странице для разработчиков есть официальная рекомендация использовать именно адаптивную верстку. Конкретных аргументов там нет, но это же сам Гугл.

Минусы адаптивной вёрстки также имеются. Хотя относительно других вариантов они довольно незаметные. Но всё же, как уже сказал, они есть:

  • Сайт с большой функциональностью трудно адаптировать под мобильники. Это будет или неудобно, или придется пожертвовать некоторыми возможностями;
  • Медленная загрузка. Помните мы говорили, что и для телефонов и для компьютеров загружается один и тот же сайт?
    Это и тяжёлые картинки, и длинные менюшки, и весь остальной объем информации. Чтобы решить проблему, некоторые разработчики используют сжатие страниц, но и они требуют дополнительных запросов на сервер, а значит и времени;
  • Невозможно переключиться на полную версию. Пользователь не сможет в случае чего перейти на десктопный вариант, чтоб использовать все возможности, потому что сайт сам решает, какую версию ему показать.

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

Кстати. Создайте собственный сайт с мобильной версией через конструктор за один день и без программистов. В арсенале готовые шаблоны, корзина, платежи и еще 10 инструментов. Кликайте и тестируйте -> InSales (по промокоду “inscale” 30 дней бесплатно).

Определение контекста страницы

Дизайн для мобильных устройств сложнее сделать удобным для пользователей, чем для десктопа. То, что пользователь не может увидеть сразу всю страницу — самая серьезная и наиболее распространенная проблема, с которой сталкиваются пользователи в m-commerce.

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

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

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

Если пользователь прокручивает страницу с длинной формой, то название формы вместе с ранее введенными данными исчезает из вида. И пользователю сложнее понять, какие значения требуется ввести сейчас — больше вероятность допустить и не заметить ошибку.

Техническая проверка

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

1.1 Google Search Console – официальный сервис от Гугла. Он покажет, как выглядит сайт на среднестатистическом экране смартфона и даст рекомендации по улучшению.

Помните, мы говорили про алгоритм Mobile-first Index? Сервис как раз основан на его работе, поэтому не пренебрегайте этим пунктом.

мобильная версия сайта google
Google Search Console

2. Яндекс Вебмастер – аналогичный сервис от Яндекса. Прежде чем провериться здесь, нужно добавить сайт в панель Вебмастера и подтвердит на него права (загрузить небольшой выданный файлик).

Только потом можно использовать сервис, перейдя в “Инструменты -> Проверка мобильных страниц”. Штука тоже полезная – с рекомендациями и комментариями.

мобильная версия сайта проверка яндекс вебмастер
Яндекс Вебмастер

3. Проверка от поиска Bing. Да-да, такой поисковик тоже есть. Пусть им пользуется очень мало людей, но сейчас Вам нужны не они. Сервис может увидеть ошибки, на которые предыдущие два не обратят внимание. Ну и, как говорится, хуже не будет.

мобильная версия сайта проверка bing
Проверка от поиска Bing

Удобство для пользователей

Аналитики из StatCounter первыми заметили, что доля мобильного трафика превысила долю десктопа: 51,3% против 48,7. Это значит, что в среднем любой сайт в интернете с телефона посещают чаще, чем с компьютера.

В России картина примерно такая же: доля смартфонов выше, чем доля компьютеров и других устройств. Об этом говорит исследование компании GfK Rus:

мобильная версия сайта статистика пользователей
Статистика

С каждым годом отрыв растет все сильнее — например, в 2022 году рост составил 20%. Причём, аналитики говорят, что это еще не предел.

Такой расклад точно должен заставить Вас задуматься: как же Ваш сайт смотрится на экране смартфонов.

И скорее всего ответ – плохо. Когда открываешь обычный неадаптированный сайт с мобильника, просмотр превращается в квест – приходится масштабировать страницы, целиться в мелкие ссылки, ждать долгой загрузки.

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

. Прерывистое восприятие информации

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

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

Во время тестирования Baymard Institute, пользователей в среднем отвлекали каждые 20 минут — звонком, сообщением или другим уведомлением. Некоторых пользователей прерывали гораздо чаще — каждые 4,5 минуты. Частота прерываний зависит от целевой аудитории.

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

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

Это увеличит вероятность того, что пользователь быстро сориентируется, вернувшись к покупкам, и продолжит путь по этапам воронки интернет-магазина.

Отдельная мобильная версия

В этом случае у Вас будут два разных сайта – у каждого свой адрес, дизайн и возможности. Это и есть ответ на вопрос: “Чем отличается мобильная версия сайта от адаптивной?”.

Сайт сам определяет размер экрана посетителя и решает, что будет отображаться – мобильная версия сайта или десктопная. Чаще всего именно мобильная версия начинается в ссылке с буквы m (в переводе как “мобильная”).

мобильная версия сайта отдельный сайт
Отдельная мобильная версия

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

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

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

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

Справедливости ради – у отдельной версии сайта для мобильных устройств есть и недостатки:

  • Разные адреса сайта у мобильников и десктопа. Это может создать неприятности при SEO – поисковики видят два разных сайта с одинаковым содержимым. И понижают позиции за дублирование. Чтобы обойти проблему, придется подключать дополнительные ресурсы;
  • Неудобно сидеть с планшета – на нем элементы расплываются по всему экрану. А для десктопной версии экран планшета окажется недостаточно большим. Получается, что посетитель попадает в тупик;
  • Обходится дороже. Хоть у мобильной версии и ограниченный функционал, но все равно, считайте, что это новый сайт, который нужно создавать с нуля. Поэтому на разработку мобильной версии сайта закладывайте бюджет заранее;
  • Дополнительное время на управление. Сайтов-то два, поддерживать работу и следить за актуальностью нужно и там, и тут.

Как видите, забот немало. Но многие крупные интернет-магазины выбирают именно этот способ, так как каждое неправильное действие может спугнуть клиента от совершения покупки.

Если у Вас такие же “опасные” продажи, то значит и Вам нужно обратить внимание на развитие сайтов электронной торговли.

мобильная версия сайта интернет магазин
Сайт интернет-магазина

Предпочтения поисковых систем

Гугл и Яндекс топят за мобильные версии уже давно. Первый для этого выпустил специальный алгоритм Mobile-first Index, по которому он оценивает удобство мобильного сайта и в зависимости от этого определяет его позицию в поиске.

У второго алгоритм вышел позже, но по важности он примерно на том же уровне. Называется – “Владивосток”.

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

Если пользователь зайдет с мобильника на обычный десктопный сайт, то долго он там не пробудет. А значит и поведенческие характеристики ухудшатся. Как следствие – Вы на последних необитаемых страницах Яндекса и Гугла по seo-продвижению.

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

Сделать это можно в Google Analytics в отчете “Аудитория -> Мобильные устройства -> Обзор”. Если у Вас Яндекс.Метрика, тогда перейдите в “Отчеты -> Технологии -> Устройства”.

мобильная версия сайта проверка трафика в метрике
Аналитика

Если видите, что смартфонов больше 15%, то для Вас это тревожный звоночек и, поверьте, ничего не остаётся, как адаптировать сайт под мобильные устройства. Поэтому давайте разбираться, какие вообще есть способы это сделать.

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

Динамический показ (RESS)

И третий способ – симбиоз двух предыдущих вариантов. Сначала сайт определяет устройство посетителей и, в зависимости от размера экрана, открывает десктопную, мобильную или планшетную версию.

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

Главный недостаток RESS – это долго и дорого. Разработать динамический показ – все равно, что с нуля создать несколько разных сайтов.

Да и технология не совершенна. RESS относительно молодой инструмент, поэтому может случится такое, что устройство определится неправильно или не определится совсем.

К видным деятелям, которые используют RESS, можно отнести Гугл. В целом же, как обратил внимание, технология не обжита, и если у Вас ограниченный бюджет или поджимает время, лучше не рисковать. А обратить внимание на два предыдущих варианта.

Ещё есть такое понятие, как резиновая вёрстка. Некоторые считают, что это вариант мобильного сайта, но это не так.

Важно. Резиновая вёрстка – это лишь когда сайт также аккуратно отображается на телефоне, как и на пк. Причём, полностью без изменений.

Ограничение контента

Согласно исследованиям Baymard Institute, ограничение контента в мобильной версии приводило к ухудшению пользовательского опыта и отказу от покупок. Пользователи ожидают, что в мобильной версии будет доступен весь контент, но это сложно реализовать, особенно полноценный каталог товаров.

Например, на одном из сайтов выводился неполный перечень категорий в мобильной версии — это негативно сказалось на понимании полноты ассортимента испытуемыми. Респонденты думали, что видят весь каталог и разочаровывались в ассортименте. Некоторые пытались найти другие товары, полагая что они должны быть где-то на сайте. В среднем испытуемые тратили на поиски более 10 минут, а затем покидали магазин.

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

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

Хотя и каталог, и сервисная информация должны быть в мобильной версии, форма контента может или должна меняться в зависимости от контекста.

Mobile first web design элементы

Убедитесь, что элементы, присутствующие на сайте работают. Это очень важно для мобильных сайтов. Если на сайте есть не
работающие элементы, то с 90% вероятностью посетитель покинет страницу. Перечислим проблемные места, с которыми можно
столкнуться.

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

Спросите: -Чем вредят призывы к действию, и попытки получить от пользователя контактные данные? Они не вредят, но если
они не оптимизированы под мобильные ресурсы или конкретно под сайт, на котором находятся, то процент отказов резко
увеличится.

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

А представьте, что будет при медленном интернете… На территории России это сплошь и рядом. Даже в Москве стоит
отъехать на 20км от МКАД и о LTE можно забыть, в лучшем случае 3G. Мало того что потенциальный посетитель ждал 5 минут
пока загрузится веб-ресурс, еще и тут он нажимает на неработающую ссылку, ждет и видит 404 ошибку. Как вы думаете,
какую реакцию стоит ожидать?

Совет:

Когда заказываете сайт, уточните: будет ли проведено финальное тестирование на всех разрешениях с предоставлением
отчетов? Эта процедура поможет сохранить в будущем нервы и деньги.

Адаптивный мобильный дизайн кончился

Ответ на вопрос очевиден. Если, конечно, вы не старовер со своими традициями. А вот в сайтостроении, при видимой
пользе современных технологий, большинство все равно используют Desktop First. Потом тратят деньги, пытаясь улучшить
сайт, нанимая дизайнеров для редизайна, и программисты лепят JS костыли для адаптации, при этом теряется скорость
загрузки, возрастают отказы, а в итоге падает конверсия, а с ней и доход.

Давайте разберемся, в чем разница адаптивного мобильного дизайна и проектируемого Mobile first дизайна? Можно
подумать, что это одно и тоже, но это не так.

Адаптивный дизайн – это подход, ориентируемый на изменения размеров блоков, шрифтов посредством CSS и множества
медиа-запросов. Такой код получается громоздким и трудно читаемым. Этот подход больше адаптирован под дизайн PC версии
и как необходимость подключается мобильная версия, но не прорабатывается.

Mobile first web design изначально проектируется под пользователей, использующих мобильные устройства. Блоки-кнопки, формы
заказа, карточки товара, создаются для удобства пользования на маленьких экранах. И после этого уже происходит
адаптация под большие экраны. Согласитесь, ведь проработанную маленькую структуру гораздо легче перенести на большие
экраны, чем наоборот.

Бум мобильных приложений

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

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

Чтобы сделать успешное приложение в 2021 году, нужно очень постараться. Сам бизнес должен выходить из зоны комфорта: использовать новые тактики, инструменты, каналы, чтобы охватить и привлечь свою ЦА, оправдать ожидания пользователей мобильных приложений. Сделать это совсем не просто.

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

Мои наблюдения после анализа ряда зарубежных СМИ:

  1. Использование больших данных (Big Data) при проектировании мобильных приложений заметно возрастет.
  2. Увеличится количество приложений, которые используют модель платной подписки.
  3. Машинное обучение ускорит разработку мобильных приложений. Возможно, появятся новые уникальные платформы, которые сами пишут и обрабатывают код.
  4. Доля мобильной коммерции станет еще более внушительной.
  5. Непредсказуемые тренды в магазинах приложений. Потребуется тщательная оптимизация по ключевым фразам для мобильной аудитории.
  6. Развитие рынка Интернета вещей даст скачок развитию приложений с соответствующим функционалом.

Достигнуть успеха на рынке мобильных приложений в 2021 станет сложно – даже бизнесу с именем и солидным бэкграундом. Составление тщательного и продуманного плана продвижения – вот секрет успеха. Всегда нужно иметь в виду, что именно маркетинговая составляющая мобильного приложения требует постоянного «обслуживания» со стороны компании.

Мобильные игры – отдельная тема. В этом материале я не буду много говорить об игровых приложениях. Скажу лишь, что в 2020 году потребительские расходы на мобильные игры превысили 100 млрд долларов. Мы все чаще обращаемся к мобильным устройствам как к основному источнику развлечений. Именно поэтому аудитория мобильных игр продолжает расти в геометрической прогрессии каждый год.

В чём нюансы проектирования под мобилку

О, их масса

  • В компьютере человек вводит данные через суперточную мышь. В телефоне ввод через огромную сосиску-палец. Поэтому десктопные кнопки и ссылки могут быть маленькими, а мобильные должны быть большими.
  • У пользователя десктопа есть быстрая клавиатура, а на мобилке она неудобная, мелкая, медленная и занимает пол-экрана. Десктопное приложение ещё может попросить нас что-то ввести с клавы, а мобильное должно этого избегать.
  • И наоборот: десктопное приложение должно со страшной силой поддерживать горячие клавиши, копировать-вставить, очистку данных из буфера. А мобильное должно полагаться на автозаполнение.
  • Мобилка хоть и большая, но меньше десктопа. Поэтому мобильный экран — это одна колонка с контентом и бесконечный скролл. Десктоп, наоборот, большой и широкий, там можно укладывать контент в несколько столбцов, делать витрины и шикарные раскладки.
  • Мобилка вытянута сверху вниз, десктоп — слева направо. Идеальный контент для мобилки — вертикальный, для десктопа — горизонтальный.
  • С мобилки можно легко позвонить, поэтому этот сценарий можно вполне рассматривать как часть приложения (например, позвонить таксисту). А с десктопа можно разве что написать в мессенджере.
  • Мобилка знает о тебе больше, чем десктоп: она может узнать тебя по отпечатку пальца и по лицу, в неё встроен платёжный модуль, мобилка знает о своём местоположении. Максимум, что может десктоп, — помнить твой номер карты и знать, в каком ты городе. Это значит, что мобилка должна сама узначать твой адрес, сама предлагать тебе способы доставки, сама предлагать оплатить встроенными средствами.
  • Мобилка — это твоё интимное пространство, поэтому любое сообщение или уведомление отвлекает на себя внимание. Нужно быть осторожным, отправляя что-то пользователю или уведомляя его. Десктоп — это терминал, к которому ты подходишь или уходишь, когда тебе нужно. Там меньше таких ограничений.

И можно так ещё долго рассуждать. Но уже сейчас видно, что мобилка и десктоп — два разных зверя. 

Дизайн и интерфейс сайтов

Страница на смартфоне может выглядеть по-разному:

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

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

Google провозгласил философию Mobile First еще в далеком 2022 году – на Всемирном мобильном конгрессе. Эрик Шмидт, тогдашний гендиректор корпорации, предсказал, что продажи смартфонов превысят продажи ПК. Шмидт заявил, что мир должен готовиться к новому тренду – «мобильные устройства прежде всего».

Спустя десять лет концепция не только не потеряла актуальности, но и стала приоритетом в веб-разработке. Главная цель Mobile First – улучшение пользовательского опыта для владельцев мобильных устройств.

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

SEO-оптимизация и факторы ранжирования поисковых систем также напрямую связаны с удобством сайта для мобильных устройств. Мобильный трафик сегодня важен для всех ресурсов. Именно поэтому изначальный приоритет мобильных устройств при разработке UI/UX интерфейсов сегодня получает все более широкое распространение.

Использование самой платформы

62% людей владеют смартфонами, а 50% – планшетами. Поскольку мобильные приложения стали неотъемлемой частью повседневной жизни миллионов людей, на рынке технологий произошел заметный подъем. Большинство пользователей смартфонов тратят более 50% своего времени в интернете на пользование мобильных приложений.

Однако мобильные устройства также будут обеспечивать 54,8% веб-трафика со всего мира в 2021 году. Поэтому мобильная версия сайта очень важна при постоянном увеличении числа пользователей мобильных телефонов.

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

Вам нужно понимать, кто будет использовать приложение и кто посещать мобильные сайты.

Критерии идеальности

Мы уже говорили, что за компьютером пользователь максимально сосредоточен на том, что видит на экране.

За его внимание практически ничего не конкурирует. То ли дело посиделки за смартфоном – параллельные задачи, дорога, оповещения, звонки, окружающие. Это и нужно учитывать в первую очередь при разработке.

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

1. Крупный темный текст на светлом фоне

Все тексты лучше оформлять по классике – черный шрифт на белой подложке. Яндекс рекомендует использовать размер не менее 12 пикселей. Выбирайте шрифты без засечек – их легче читать в движении.

2. Короткие формы

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

Интересно. Увеличивайте количество заявок и звонков через виджеты. Сервис envybox предлагает самые ТОПовые решения: онлайн чат, обратный звонок, захватчик клиентов, персонализатор форм. Кликайте и выбирайте подходящий -> envybox (по промокоду in-scale 500 руб. на баланс).

3. Большие кликабельные элементы

Посетитель не должен целиться и ловить кнопки и переключатели. Все интерактивные элементы лучше делать крупными – попробуйте сами на них потыкать. Apple и Microsoft советуют стремиться к размерам 44 на 44 пикселя. Минимальный порог – 24х24, но это в крайнем случае.

4. Скорость загрузки сайтов

Тут конкретных стандартов нет, но всегда нужно стремиться к идеалу. Есть такая общая закономерность – каждая секунда, которая уходит на загрузку страницы, пропорционально снижает конверсию в продажи.

Проверить мобильную версию сайта на скорость загрузки можно в специальных сервисах, о них немного ниже.

5. Заданный тип формы

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

6. Кликабельные контакты

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

7. Информация в один столбец

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

Лайфхак. Если Вам просто необходима полная информация о клиенте (для доставки, например), то разбейте процесс заполнения заявки на несколько шагов. 

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

мобильная версия сайта форма захвата
Форма захвата

Предпочтения пользователя

По данным Google, более 51% пользователей смартфонов открывают для себя новый продукт или услугу во время его использования. Но в то же время настольные компьютеры никуда не денутся.

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

Миллениалы особенно любят покупки через приложения: 61% миллениалов говорят, что загружают розничные приложения, а 58% миллениалов отметили, что предпочитают покупать через приложения.

На изображении выше вы можете увидеть плюсы использования как мобильных приложений, так и мобильных веб-сайтов. Но в зависимости от ваших целей вы сами выбираете наиболее удобный способ.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *