Адаптивный дизайн. Just do it

Смотрите в каталоге
Магазины и лендинги SAAS
Адаптивный дизайн. Just do it

Вечером иногда очень хочется пиццы. Это желание охватывает прямо утром и терзает одичавший желудок весь день: пока едешь в метро, весь день в офисе и по пути домой. И вот, уже в маршрутке, рука тянется к телефону и открывает заветный адрес любимой пиццерии. Но что-то пошло не так. Ничего не видно. Малюсенькие квадратики раздражающе мелькают перед глазами, чтобы прочесть состав, приходится увеличивать страницу вручную. И ведь ещё нужно умудриться попасть на кнопку «Заказать».

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

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

Чем плох резиновый сайт?

Вообще, конечно, это обычный сайт. Просто для него создана «резиновая» вёрстка. Это не значит, что у сайта плохой дизайн или плохо подобранный контент. Это может быть даже сайт уважаемой фирмы. Но вот в чём проблема. Такая вёрстка, не меняя содержимое сайта, подстраивает его под размер экрана. И если на планшете текст ещё может быть похож на читабельный, то на смартфоне вам придётся изрядно потрудиться, чтобы понять, о чём вообще идёт речь. И останется только увеличивать, увеличивать и ещё раз увеличивать.

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

Что такое мобильная версия?

Мобильная версия сайта — это уже совсем другая история. По своей сути это новый проект, который имеет свой отдельный домен, дизайн и структуру. С вашим главным сайтом его объединяет разве лишь логотип в шапке.

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

Однако стоит заранее оценить масштаб финансовых вложений, которые потребует мобильная версия. Мало того, что это совершенно новый проект, его придётся ещё и оптимизировать под разрешения и операционные системы (IOS, Android, Windows Phone) всех мобильных устройств. Следовательно, данный процесс является более затратным, чем реализация адаптивной версии для основного сайта.

Адаптивная вёрстка. Почему мы её так советуем?

Чтобы понять суть адаптивной вёрстки, на минуту попробуйте мыслить как верстальщик.

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

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

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

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

Компании и сервисы: SHOP2YOU
Автор: Shop2YOU

Подписаться на новости

Читайте также

21 февраля / Комментарии

Дизайн, ориентированный на конверсии

Повышение конверсии — путь часто длинный и извилистый.  Он состоит из понимания возражений (негласных) и эффективной работы с ними. В конечном итоге пользователь оказывается на распутье: один путь ведет к конверсии, а другой с кнопкой «назад». Или хуже – к вашему конкуренту. В этой статье мы разберем что такое дизайн, ориентированной на конверсию. И не забудем рассмотреть несколько реальных кейсов (с неожиданными заключениями).

далее →

1 февраля / Комментарии

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

Одежда – один из самых продаваемых товаров в интернете. Ранее мы публиковали резюме отчёта об исследовании, проведённом аналитическим агентством Nielsen, «Nielsen: какие товары россияне чаще всего покупают в интернете». Согласно результатам этого исследования, одежда не просто самый популярный товар, приобретаемый в интернете. Этот вид товаров на 14% опережает «ближайшего преследователя», потребительскую электронику. Очевидно, что у многих интернет-магазинов одежды дела идут неплохо. Могут ли они идти ещё лучше? Если они внедрят в свои товарные страницы одну маленькую деталь, ответ запросто может быть положительным.

далее →

13 декабря 2016 / Комментарии

Мобильная версия интернет-магазина: предпраздничная подготовка

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

далее →

25 октября 2016 / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября 2016 / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook