Вход

Адаптивный сайт от «Бюро Пирогова»: нет потерям "мобильных" клиентов!

21.03.2012 13:26 2 4 246 просмотров
Мы делаем сайт с использованием технологии адаптивного веб-дизайна для компании «Пластика Окон». Суть технологии в том, что верстка сайта и содержание страниц меняется в зависимости от размера экрана воспроизводящего устройства.

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

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

Вот как это выглядит на примере различных устройств:

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


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

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


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

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

iPad


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



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

iPhone


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



Однако, мы сохранили полезные картинки – так, на странице контактов можно посмотреть подробные карты проезда.


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



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

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

1. Нет потерь «мобильной» аудитории.

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

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

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

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

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

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

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

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

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

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

В конечном итоге индустрия, безусловно, поймет эти «сигналы» и придет к тому, что все сайты станут универсальными. Адаптивная верстка станет общепринятым стандартом и - незаменимым инструментом работы с аудиторией в Сети.

Комментарии 2

Василий Пирогов  (vpirogov)
#
Дмитрий, технология разумеется, не нова, но о практическом внедрении ее в коммерческих сайтах речи пока не шло, максимум - новостные порталы и сайты рекламных агентств. Сейчас ситуация начнет меняться, мы об этом. smile:)
Комментарии и отзывы могут оставлять только зарегистрированные пользователи.
Авторизуйтесь или зарегистрируйтесь.

Популярные сообщения

Почему, совершая покупку онлайн, на сайте, можно попасть на платную подписку на различные услуги от торгово-сервисного предприятия ?
Почему, совершая покупку онлайн, на сайте, можно попасть на платную подписку на различные услуги от торгово-сервисного предприятия ? Отзывы в НР (Народном
0
Гневный ответ "эксперту недвижимости", который мне вчера подвернулся под руку!)
"Инвестировать в недвижимость можно будет года через два " "А пока лучше мониторить рынок и искать квартиру для себя. Уже сейчас появляются интересные
0
Дело держателей кредитных нот против Центрального Банка будет слушаться в Верховном Суде РФ.
14 августа 2017 г. судья Верховного Суда Российской Федерации Букина И.А. после изучения материалов истребованного дела по моей кассационной жалобе,
0
О ситуации в БИНБАНКе
В последнее время в прессе стали появляться статьи о, якобы, ужасной ситуации в БИНБАНКе. Так ли это? > shurik_68 пишет: > Почитайте, и всё станет понятно...
8
Рынок нефти 7 августа
Нефть сохраняет шансы на рост. Текущая неделя обещает стать весьма насыщенной для нефтяного рынка с точки зрения информационных потоков. Сегодня стартует
0

Новые сообщения

  • Рынок нефти 18 августа
    Рынок нефти в незначительном плюсе. Накануне поддержку рынку нефти оказала публикация предварительных данных о снижении запасов нефти на крупнейшем в
  • Рынок нефти 17 августа
    Рынок нефти начинает обращать меньше внимания на сезонное сокращение запасов в США. Опубликованные накануне данные по запасам от Минэнерго США свидетельствовали
  • Дело держателей кредитных нот против Центрального Банка будет слушаться в Верховном Суде РФ.
    14 августа 2017 г. судья Верховного Суда Российской Федерации Букина И.А. после изучения материалов истребованного дела по моей кассационной жалобе,
  • Рынок нефти 16 августа
    Позитивные сезонные данные оказывают краткосрочную поддержку нефти. Опубликованные накануне предварительные данные по запасам от Института нефти США продемонстрировали
  • Отмена НДФЛ на доход от облигаций
    Коротко: Федеральный закон от 03.04.2017 N 58-ФЗ изменил налог с облигаций. С 01.01.2018 года налог на купонный доход по облигациям, номинированным в