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

Топ мобильных сайтов: что нужно знать

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

Простая навигация и читабельность

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

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

Совет: просматривать мобильные сайты удобнее, когда их можно скролить — учитывайте это. Разные шрифты могут выгодно расставить акценты, но не стоит использовать больше 2−3. Выбирайте шрифты без засечек (Sans-serif), которые будут гармонировать между собой.

Шрифт Nround

Оптимизация для пользователя

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

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

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

На страницы сайта где проводятся валютные операции для большей безопасности можно добавить идентификацию по Touch ID.

Шаблон сайта с AMP — Mobillaso

Интеграция с соцсетями

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

Совет: тщательно продумайте профиль в соцсетях. Создайте брендированный аккаунт, с логотипом и в корпоративных цветах. Подробнее о запуске бизнеса в Facebook, ВКонтакте и Instagram.

Локальная релевантность

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

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

***

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