Адаптивный сайт: нет потерь "мобильных" клиентов!

Суть технологии в том, что верстка сайта и содержание страниц меняется в зависимости от размера экрана воспроизводящего устройства.   

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

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

Вот как это выглядит на различных устройствах (на примере сайта компании «Пластика Окон» digital-агентства «Бюро Пирогова»):

Стандартная ширина экрана ноутбука (1440 px)

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

Стандартная ширина экрана нетбука (1024 px)

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

iPad
     

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

Повернув гаджет в горизонтальное положение, мы получаем ту же картинку, что и на нетбуке.

iPhone
      

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

Мобильный телефон

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

Какие преимущества дает разработка адаптивного сайта по сравнению с «обычным»:

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

Какие рыночные сферы затрагивает данная модель поведения потребителей? Конечно, в первую очередь, сфера услуг: HoReCa, отдых и развлечения, банковское обслуживание, магазины по продаже брендовой одежды и обуви, учреждения экстренной помощи (срочный ремонт, медицинская помощь, коммунальные, нотариальные, полиграфические услуги и др.). Эти категории услуг объединяет характер поиска информации о них: как правило, это происходит в местах общественного пользования в условиях дефицита времени.

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

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

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

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

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

Принципиальная проблема проектирования обычных «десктопных» сайтов заключается в том, что они зародились в НЕ-мобильную эпоху, когда о возможности существования мобильного Интернета можно было только мечтать. Как бы ни пытались потом разработчики объединить два мира - web и mobile - посредством «мобильных сайтов» - это все равно развитие тупиковой ветви технологий. По сути это даже не краткосрочное решение основной проблемы, а временное «латание дыр».

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

2. Кросс-браузерность и кросс-платформенность. Об этом мы уже начали говорить выше, однако здесь следует остановиться еще на одном моменте. Потребитель сейчас воспринимает Интернет как базовую потребность, более того - 7 июня прошлого года ООН включила доступ к Интернету в список основных прав человека. Если раньше пользователь имел возможность пользоваться Сетью только  дома и на работе, то сейчас он может это делать практически где угодно. Ограничения если и есть, то только в том, какие именно сайты он может просматривать «где угодно», какие из них приспособлены для этого, а какие - нет. Разумеется, пользователь не обязан помнить наизусть список таких сайтов - он просто будет «голосовать»: рублем, своим вниманием (читай: трафиком), активностью пользования. В конечном итоге индустрия, безусловно, поймет эти «сигналы» и придет к тому, что все сайты станут универсальными. Адаптивная верстка станет общепринятым стандартом и - незаменимым инструментом работы с аудиторией в Сети.