Про дизайн

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

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

Одна из самых актуальных тем современного веб-дизайна - создание сайтов с использованием технологии адаптивной верстки.

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

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

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

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

Стандартная ширина экрана ноутбука (1440 px)
Сайт с адаптивным дизайном от «Бюро Пирогова»

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

Стандартная ширина экрана нетбука (1024 px)
Сайт с адаптивным дизайном от «Бюро Пирогова»

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

iPad
Сайт с адаптивным дизайном от «Бюро Пирогова»
     

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

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

Сайт с адаптивным дизайном от «Бюро Пирогова» 

iPhone
Сайт с адаптивным дизайном от «Бюро Пирогова»
      

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

Мобильный телефон
Сайт с адаптивным дизайном от «Бюро Пирогова»

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

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

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

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

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

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

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

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

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

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

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

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

"Бюро Пирогова"
Advertology.Ru

23.03.2012

на печать


Комментарии

Написать комментарий

 Проверочный код

Архив

Пн Вт Ср Чт Пт Сб Вс

Рассылка

Подписка на рассылку

E-mail:
 

Также нашу рассылку вы можете получать через

E-mail:  

Есть мнение ...

Фирменная розница – волшебная пилюля или головная больФирменная розница – волшебная пилюля или головная боль
Преимущества фирменной розницы для производителя, форматы бизнес-моделей, шаги для запуска. Оцените все за и против.
Капучино под Акунина, а флэт уайт - под психологическую литературуКапучино под Акунина, а флэт уайт - под психологическую литературу
MyBook и «Шоколадница» выяснили, какие книги нравятся поклонникам разных видов кофе.
"ТРИЦ" – УФАС: кто прав? Эксперты призадумались…"ТРИЦ" – УФАС: кто прав? Эксперты призадумались…
Нарушило ли МБУ «Телерадиоинформационный центр» (ТРИЦ) из Республики Коми требование закона о рекламе или нет, выясняли эксперты комитета по рассмотрению жалоб потребителей и обращений государственных органов, общественных организаций, служб мониторинга саморегулируемой организации «Ассоциация маркетинговой индустрии «Рекламный совет» (СРО «АМИ «РС»).
Работники старше 40 умнее и креативнее молодых, говорят гарвардские...Работники старше 40 умнее и креативнее молодых, говорят гарвардские...
Согласно недавнему опросу USA Today, работодатели, ищущие таланты, склонны нанимать миллениалов в два раза чаще, чем представителей поколения X.
ЦБ рассказал о новой схеме мошенничества через рекламуЦБ рассказал о новой схеме мошенничества через рекламу
Мошенники во время пандемии стали использовать безадресную финансовую рекламу, рассказал в интервью РИА Новости глава департамента противодействия недобросовестным практикам Банка России Валерий Лях.

Книги по дизайну

Загрузка ...

Репортажи

В ЦДХ прошел День социальной рекламыВ ЦДХ прошел День социальной рекламы
28 марта в Центральном доме художника состоялась 25-ая выставка маркетинговых коммуникаций «Дизайн и реклама NEXT». Одним из самых ярких её событий стал День социальной рекламы, который организовала Ассоциация директоров по коммуникациям и корпоративным медиа России (АКМР) совместно с АНО «Лаборатория социальной рекламы» и оргкомитетом LIME.
Форум "Матрица рекламы": к рекламе в интернете особое...Форум "Матрица рекламы": к рекламе в интернете особое...
На VII Международном форуме «Матрица рекламы», прошедшем в ЦВК «Экспоцентр» в рамках международной выставки  «Реклама-2018», большой интерес у профессиональной аудитории вызвала VI Конференция «Интернет-реклама».
87% компаний используют три и более каналов для внутренних...87% компаний используют три и более каналов для внутренних...
«Лучшие кейсы по внутрикорпоративным коммуникациям. Ключевые тенденции последнего времени. Изменения стремительны, успеваем ли мы за ними?» - данную тему 25 апреля 2018 года обсудили на заседании  Комитета по внутрикорпоративным  коммуникациям Ассоциации менеджеров.
New media, new creativity! "Серебряный меркурий" расширяет...New media, new creativity! "Серебряный меркурий" расширяет...
21-22 марта в Санкт-Петербурге состоялся IV Фестиваль рекламы и маркетинговых услуг «Серебряный Меркурий. Северо-Запад», в рамках  которого прошла Большая конференция. Организатором мероприятия стало ведущее брендинговое агентство России – Brandson (Total Identity Group), во главе с Генеральным директоров агентства, Членом совета АБКР, Еленой Юферевой.
Выставка, посвящённая 100-летию со дня рождения Георгия ЩетининаВыставка, посвящённая 100-летию со дня рождения Георгия Щетинина (6)
В Государственном музее А. С. Пушкина открылась выставка, посвященная не столь широко известному, но заслуживающему пристального внимания художнику-иллюстратору ХХ века Георгию Щетинину.

Форум

Вакансии

  • Загрузка ...

на правах рекламы

07.08.2020 - 20:28
RSS-каналы Advertology.RuRSS    Читать Advertology.Ru на Facebookfacebook    Читать Advertology.Ru ВКонтактеВКонтакте    Читать Advertology.Ru на Twittertwitter   
Advertology.Ru - все о рекламе, маркетинге и PR

Вход | Регистрация