Адаптивный дизайн сайта: что это и почему необходимо?


Рубрика публикации: Вебмастеру, Оформление сайта
Опубликовал:
Дата публикации: Март 27, 2013 в 22:03
Оцените статью:
1 звезда2 звезды3 звезды4 звезды5 звезд (Вы первым оцените данную публикацию)
Loading ... Loading ...

468x60_2

В последнее время все большее пользователей смартфонов делают онлайн-покупки, пользуясь своими мобильными устройствами. Трудность в том, что большая часть сайтов не приспособлены для работы с мобильным трафиком. Через это адаптивный дизайн делается не только популярным веянием, а и жизненной потребностью. Потребители потихоньку привыкают делать покупки с различных типов устройств. Изготовители – привыкают обслуживать покупателей, которые приходят со всевозможных каналов. Адаптивный дизайн дает возможность учитывать интересы и тех и других.  Например, вы можете купить игры для PC в магазине grenka.com.ua с помощью своего же мобильного устройства, ведь он превратились с «игрушек» в много функциональные девайсы. Итак…

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

s1

На этом этапе начинают возникать вопросы.
Чтобы достичь максимальной конверсии, нужно знать, какие блоки можно сократить, а которые нужно оставить?

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

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

Выделяйте основное. Отличный этому пример –  сайт красного креста, где люди могут пожертвовать деньги с помощью SMS, телефона или кредитной карты, при этом нажав лишь на одну кнопку.

s2

 

На этом этапе начинают возникать вопросы.
Чтобы достичь максимальной конверсии, нужно знать, какие блоки можно сократить, а которые нужно оставить?

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

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

Выделяйте основное. Отличный этому пример –  сайт красного креста, где люди могут пожертвовать деньги с помощью SMS, телефона или кредитной карты, при этом нажав лишь на одну кнопку.

s3

На странице изображения представлены как прокручиваемое слайд-шоу для облегчения навигации. В десктопном виде – одна крупная картинка и ряд миниатюр.

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

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

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

Предлагаем также и другой пример адаптивного дизайна для сайта «Час Земли»:

s4

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

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

s5

Несколько советов по оптимизации форм для мобильных устройств:

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

- объединение полей (например, имя и фамилия) или предложение популярных вариантов ответов в списке выбора. В неких случаях можно включить выбор по умолчанию. Люди так израсходуют меньше времени.

Вот неплохой пример мобильных форм фирмы Hertz

s6

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

 

Похожие публикации:

Бесплатный XHTML шаблон: Classic Luxury
Как я стал программистом
Что такое dns?
Правила, которые сделают интернет-магазин эффективным

Написать комментарий

You must be Необходимо авторизоваться, что бы публиковать комментарии.