Мобильная адаптация. Урок 3. Особенности мобильного пользователя

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

  1.  Время – мобильный пользователь не будет долго разглядывать страницу, он хочет быстро найти нужную ему информацию, а значит,  он должен сразу увидеть объект поиска.  Проанализируйте адаптируемую страницу – что на ней самое важное: контакт, призывающая к действию кнопка, текст. Мой совет – не более 3 смысловых акцентов на одном мобильном экране .
  2. Место – экран мобильном устройства меньше стационарного как минимум в 5 раз. Конечно, есть возможность вертикального скроллинга,   но я бы не рекомендовала пользоваться ею без всякой меры. Подумайте, кто будет искать информацию, прокручивая то, что ему неинтересно до бесконечности?

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

  3. Сложности навигации – действие «попасть пальцем в ссылку на мобильном устройстве» существенно отличается от клика мышкой на большом экране.

    Помогите своему пользователю:

    • обозначайте ссылки кнопками, а не подчеркиванием текста,

    • сделайте переходы к более подробному содержимому при помощи стрелок или кнопок, отчетливо выделяйте кнопки цветом или контуром,

    • используйте знакомые и понятные иконки,

    • оставляйте больше свободного места вокруг кликабельных элементов сайта.

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

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

Мобильная адаптация. Урок 2. Что выбрать –мобильное приложение или адаптивную верстку сайта?

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

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

Google однозначно рекомендует использовать адаптивную верстку.

Я также почти всем клиентам абд-дизайна  рекомендую адаптивную верстку.

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

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

Мобильная адаптация. Урок 1. С чего начать.

Сегодня мы поговорим как пройти проверку на мобильность Гугла и Яндекса.

Что нужно сделать в первую очередь:

  • Избавиться о горизонтальной прокрутки: экран по ширине должен точно совпадать с размерами устройства.
  • Убрать флеш ролики – замените их на картинки или по возможности просто уберите. Из мобильных  выдач  Яндекс и Гугл их исключили, поскольку в большинстве мобильных браузеров они не отображаются.
  • Проверить размер шрифтов –нечитаемый шрифт  -сигнал об неадаптивности сайта.
  • Близость ссылок друг к другу – можете ли вы на мобильном устройстве нажать  одну ссылку, не задев другие ? Проверьте.
  • Используйте мобильное меню

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

Зачем нужна мобильная адаптация

Я предлагаю каждому владельцу интернет ресурса любого вида – блога, интернет –магазина, landing page, корпоративного сайта посмотреть, как выглядит его ресурс на экране мобильного телефона.

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

Вам удобно? Вашим клиентам и посетителям Вашего сайта крайне неудобно тоже.

А Вы знаете, какова доля мобильного трафика в Рунете? По данным Liveinternet за 2015 год, около 58% всего трафика в Рунете приходится на мобильные устройства.

Что будет делать пользователь, если ему неудобно пользоваться Вашим сайтом и он затрудняется в поисках нужной ему информации?

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

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

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

Так сколько же пользователей вы теряете без мобильной адаптации? Теперь Вы сможете оценить сами.

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

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

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

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