В далеком 1996 году коммуникатор Nokia 9000 произвел фурор в Финляндии как первый на рынке мобильный телефон с поддержкой Интернета. С тех пор не было оглядки назад. По мере того, как мобильное устройство становится доступным для потребителей в Интернете, становится важным доставлять веб-контент на ходу. Это породило нашу нынешнюю шумиху вокруг «отзывчивого дизайна». Конечно, вы уже слышали это название и читали бесчисленное количество сообщений в блогах о том, как адаптивный дизайн упрощает взаимодействие потребителей с онлайн-информацией.
Но в этом посте мы не только расскажем о потребностях адаптивного дизайна, но и о том, с какими препятствиями вам, возможно, придется столкнуться при разработке адаптивных веб-сайтов. Мы также обсудим, что адаптивный дизайн - не единственное, что нужно брендам, чтобы сделать свою информацию более удобной для потребителя.
Итак, мы приступим к делу. В чем необходимость? Вот несколько статистических данных для начала:
Согласно опросу, проведенному Monetate, в 2013 году на покупки с мобильных устройств будет потрачено около 38,8 миллиардов долларов. Из общего числа посещений Интернета американцы на 28% чаще заходят в Интернет со своих смартфонов, чем со своих настольных компьютеров. Более того, что касается трафика веб-сайтов электронной коммерции, 21% посетителей в настоящее время заходят на веб-страницы со своих смартфонов.
В США 91% людей согласны с тем, что они находятся на расстоянии досягаемости мобильного устройства 24/7 и, конечно же, когда им нужно принять решение о покупке или выбрать следующее место для празднования дня рождения, 67% чаще совершают покупки на мобильных сайтах.
Еще не проблема, верно? Вы всегда можете сделать сайт, оптимизированный для мобильных устройств, и охватить миллионы пользователей. Начиная с сегодняшнего дня. Но подождите, на разных устройствах доступно более 232 размеров экрана. Что теперь? Вот где на помощь приходит адаптивный дизайн.
Вместо того, чтобы создавать 232 различных макета для вашего веб-сайта, которые будут загружаться на отдельные устройства (и кто знает, сколько их станет больше по мере развития технологий), вы создаете один макет, который автоматически помещается на экране, на котором он отображается. Поскольку этот макет «отвечает» размеру экрана, такие дизайны веб-сайтов называются «отзывчивыми дизайнами».
Возможно, сейчас ваш разум кипит от волнения. Подумайте о возможностях!
- Отзывчивые веб-сайты обрабатываются браузером клиента, а не вашим сервером, что означает, что браузер сможет определить, какой вид макета ему подходит лучше всего, и упорядочить информацию соответствующим образом.
- Отзывчивый дизайн скоро станет отраслевым стандартом, поскольку множество веб-сайтов уже приняли его, и многие другие находятся в процессе.
- Он обеспечивает стабильное взаимодействие с пользователем на всех платформах, поддерживая философию дизайна и язык вашего бренда, но достаточно динамичный, чтобы не быть обыденным.
- Он оптимизирован для устройства, поэтому, будь то крошечный экран или большой дисплей, пользователь может перемещаться по вашему сайту и легко читать информацию.
- Когда пользователи выполняют поиск на мобильных устройствах, Google учитывает m.sites при отображении результатов. Если ваш веб-сайт оптимизирован для мобильных устройств, вероятность того, что его версия m.site появится в результатах, оптимизированных для Google, выше.
- Один для всех: один веб-макет для всех устройств. Всегда.
Звучит круто. Для идеального адаптивного дизайна результаты будут именно такими, но для достижения адаптивного макета вам также придется немного попотеть над этими препятствиями:
- Хороший адаптивный дизайн веб-сайта разработать непросто. Оптимизация веб-сайта для мобильных устройств занимает много времени, не говоря уже о любых или всех мобильных устройствах. Это тематическое исследование сайта cyberduck.com является доказательством.
- Отзывчивый веб-сайт сложно тестировать, потому что существует множество устройств, на которых его можно запустить.
- Для разработки адаптивного веб-сайта требуется группа квалифицированных специалистов и талантливый руководитель проекта - сочетание, которое нелегко найти.
- Он оптимизирован для устройства, поэтому, будь то крошечный экран или большой дисплей, пользователь может перемещаться по вашему сайту и легко читать информацию.
- Поначалу вам, возможно, придется понести больше расходов на наем талантливых специалистов и управление командами, работающими над вашим сайтом (по сравнению с неадаптивным сайтом, а не несколькими версиями вашего сайта).
- Отзывчивый дизайн - не единственное, что понравится вашему потребителю.
Информация о клиентах:
Вы должны иметь возможность интеллектуально отслеживать трафик и видеть, откуда приходят ваши посетители при посещении с мобильного устройства. Вы должны быть в состоянии определить, из какого места они получают к нему доступ чаще всего и какие места находятся поблизости. Это поможет вам создавать персонализированный контент и лучше понимать своего посетителя. Например, если кто-то всегда заходит на ваш сайт из кафе, вы знаете, что они посещают ваш сайт, скажем, потягивая кофе. Эта информация может быть чрезвычайно полезной, если ее правильно использовать.
Вы также можете получить доступ к текущей и прогнозируемой погоде вокруг этого человека и соответственно курировать свой контент. Затем, конечно, следует также учитывать демографические данные (городской/сельский, средний/высший класс и т. д.) и прошлые визиты клиентов.
Обнаружение сегментов:
Помните, что ваши клиенты - это не вся статистика. Это не числа, которые едут по дороге, выгуливают собаку или покупают пиццу. Они настоящие люди в реальном мире. Вы должны быть в состоянии определить, чем два клиента отличаются друг от друга. Например, данные воронки могут показать вам процент вернувшихся посетителей, но вам также необходимо знать, как один вернувшийся клиент потратил больше за последний месяц, а другой потратил всего несколько долларов.
Было бы жестоко и невежественно относиться к ним обоим одинаково.
Действия на основе информации о клиентах:
Вся эта информация бесполезна, если вы не можете немедленно принять меры по этому поводу. Убедитесь, что контент на вашем веб-сайте находится в режиме реального времени, чтобы он точно попадал к покупателю, когда ему это нужно. Далее вам также необходимо подумать, какие элементы вашего веб-сайта (помимо дизайна) должны быть более отзывчивыми, чем другие.
Мы рассказали лишь немного об адаптивном веб-дизайне. Если вам интересно узнать больше, ознакомьтесь с раздаточным материалом по адаптивному дизайну от Monetate, прочтите это тематическое исследование Cyberduck.com и то, как и почему они разработали адаптивный веб-сайт для себя, или руководство Campaign Monitor о том, как создать адаптивный дизайн электронной почты.
От коммуникатора Nokia 9000 до сайтов.mobi, iPhone и бума мобильных устройств - мы прошли долгий путь в обеспечении доступности информации на ходу. Но люди должны понять, насколько эта информация может быть полезной и легкой для читателя. Адаптивный дизайн позволяет вам создать один веб-сайт для всех устройств, и хотя у него есть свои первоначальные недостатки, он может окупиться в долгосрочной перспективе, если ваши клиенты постоянно нуждаются в доступе к вашему веб-сайту на ходу. Специально учитывая статистику за 2013 год, ни у кого не может быть сомнений в том, что все больше и больше потребителей переходят на мобильные устройства. Теперь твоя очередь: поменяешься?
Исходный пост