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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

далее →

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

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

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

далее →

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

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

Четыре года назад была опубликована статья «22 ошибки в юзабилити интернет-магазинов, а также работающие варианты по их исправлению». Мы решили, что настала пора освежить данную информацию и задали разработчикам сайтов и CMS следующие вопросы: «Какие указанные в данном материале ошибки по-прежнему актуальны?», «С какими юзабилити-ошибками интернет-магазинов вам приходится встречаться чаще всего?», «Какие юзабилити-советы вы можете дать заказчикам?». И вот что мы узнали.

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

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