Бесплатно

получи Анализ спроса на свой товар/услугу в интернете

Оставить заявку

Мобильные версии сайтов

На сегодняшний день большинство людей пользуются смартфонами, многие предпочитают их полноценному компьютеру, что неудивительно, ведь мобильные устройства – универсальный и эффективный способ коммуникации. С помощью телефона можно сделать все что угодно, от звонков и просмотра сайтов, до распоряжения своими финансами. По данным статистики Facebook за 2015 год, 73% людей всегда носят с собой смартфон или планшет и берут в руки устройство до 200 раз в день. При такой активности, как никогда важно обеспечить людям легкое и доступное взаимодействие с сайтами через мобильные устройства. Отсутствие адаптивной версии сайта значительно влияет на конверсию. Пользователь не захочет вернуться на сайт, если он окажется для него неудобным и не понятным. Он не станет запоминать адрес ресурса, чтобы потом просмотреть его с компьютера.

Что такое мобильный (адаптивный) дизайн сайта



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

Рассмотрим для примера сайт компании BPO, на скриншоте 1 показаны главный экран основной версии сайта, а на скриншоте 2 мобильная версия первого экрана и адаптивная шапка сайта.



Скриншот 1



Скриншот 2

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

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

Адаптивный сайт — удобство пользования.



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

В то время как на основной версии сайта, показанной на скриншоте 3, мы полностью раскрываем список и описание услуг – в адаптивном мобильном сайте (скриншот 4) мы оставляем лишь наименование услуги и добавляем кнопку «Развернуть», чтобы пользователь мог получить информацию о конкретной, интересующей его услуге, не пролистывая длинное полотно текста.



Скриншот 3



Скриншот 4

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

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

30 января 2017, 07:46  |  Просмотров: 122

Закажите обратный звонок

И мы свяжемся с вами в ближайшее время

Подарок уже ждёт Вас

Оставьте заявку, и мы свяжемся с вами в ближайшее время

Оставьте заявку

И мы свяжемся с вами в ближайшее время

Закажите обратный звонок

И мы свяжемся с вами в ближайшее время

Ваш персональный подарок

Комплексная настройка

Яндекс Метрики

* предложение действует для клиентов,
которые оставили заявку

Ваши данные отправлены

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

Ваш персональный подарок

Комплексная настройка

Яндекс Метрики

* предложение действует для клиентов,
которые оставили заявку

ТАРИФ «Попробовать»

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

Ваш персональный подарок

Комплексная настройка

Яндекс Метрики

* предложение действует для клиентов,
которые оставили заявку

ТАРИФ «Разумный выбор»

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

Ваш персональный подарок

Комплексная настройка

Яндекс Метрики

* предложение действует для клиентов,
которые оставили заявку

ТАРИФ «Квантовый скачок»

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

Яндекс Аудитория

На сколько эффективна для вашего бизнеса?

Оставьте заявку и наш менеджер сформирует для Вас
персональный план продвижения