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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

Работа с цветом — важнейший навык любого веб-дизайнера. Грамотное владение им может принести сайту успех, а даже небольшая ошибка в создании гаммы доставить много хлопот в будущем. В этой статье специалисты сервиса AskUsers разберут 10 ошибок, которые дизайнеры допускают при работе с цветом на сайте, и расскажут вам, как их избежать. 

далее →

18 апреля / Комментарии

Правила оформления шапки интернет-магазина

Известно, что шапка является одной из главных составляющих интернет-магазина. Зачастую именно на нее посетитель обращает взгляд в первую очередь. В этой статье эксперты сервиса AskUsers поделятся приемами правильной компоновки шапки, расскажут как добиться того, чтобы посетитель обратил внимание на самую важную информацию, а не задавался вопросом “где тут вообще что?”.

далее →

17 апреля / Комментарии

Как психология цвета может увеличить конверсию вашего сайта

Пользователю хватает всего 90 секунд, чтоб сформировать в голове решающее мнение о продукте. Как достучаться до него за такой короткий промежуток времени? Понятно, что красочное описание чудодейственной функциональности продукта, удачный нейминг и прочие маркетинговые фишки эффективны, но как сыграть на эмоциях клиента? Цвет – вот что мотивирует (или демотивирует) пользователя – в 62-90% случаев цвет становится главным аргументом в пользу совершения покупки!

далее →

12 апреля / Комментарии

Что, как, зачем, куда: проверенные принципы компоновки элементов интернет-магазина

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

далее →

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