Московский государственный университет им. М. В. Ломоносова Факультет журналистики Кафедра новых медиа и теории коммуникации «Умный» дизайн и интернет-маркетинг Выполнила: студентка 4 курса д/о группы № 412 Денисова Евгения Дмитриевна Преподаватель: доцент, к.ф.н. Засурский Иван Иванович Москва 2015 Введение Одной из важных составляющих успешного интернет-маркетинга является удобство. Удобство пользования. Что бы ни делали маркетологи, это не будет работать, есть потребителю неудобно взаимодействовать с сайтом. Нужно признать, что аудитория все чаще пользуется смартфонами и планшетами, и под эти изменения нужно подстраиваться. Еще 10 лет назад компьютеры у всех были одинаковые, да и мобильные телефоны тоже. Соответственно все макеты сайтов в интернете были фиксированных размеров. Относительно недавно произошел «бум» новых разработок, благодаря которым практически у каждого есть ноутбук, планшет и смартфон. Все эти гаджеты имеют различные размеры экранов и соответственно по-разному отображают одни и те же сайты. И чаще всего сайт на компьютере просматривать гораздо удобнее, чем на смартфоне, ведь экран гораздо больше, а столько информации нужно вместить. Однако именно мобильный телефон мы всегда носим с собой и в первую очередь за помощью обращаемся именно к нему. Несмотря на это многие маркетологи до сих пор не обновили и не оптимизировали сайты своих клиентов. Причина состоит в том, что они [маркетологи] фокусируются на других задачах. Например, создание контента и e-mail-рассылок, получение обратных ссылок, поддержание активности в социальных сетях… Но ведь без «умного» веб-дизайна часть усилий будет потрачена впустую. Сейчас существует четыре подхода, с помощью которых разработчики могут сделать взаимодействие с сайтом на различных платформах удобным: 1. Мобильная версия сайта 2. Адаптивный дизайн 3. Отзывчивый дизайн 4. RESS (Responsive Design + Server Side) Про первый подход знают все и каждый день им пользуются. Второй и третий мало кто знает из массового потребителя, но все чаще сталкивается. А если и знает, то принимает их за одно и то же. Четвертый же подход известен пока только в профессиональном кругу веб-разработчиков. Начнем по порядку. Мобильная версия Нельзя сказать, что это «умный» дизайн в чистом виде. Разработка мобильной версии положила ему начало. Разработчики не были готовы к таким быстрым переменам, и первой реакцией стало создание мобильной версии. Механизм прост: когда пользователь открывает сайт на смартфоне, происходит перенаправление на специальный поддомен (m.example.com, mobile.example.ru и т.д.). Однако мобильная версия не дает полной свободы действий, так как некоторые функции недоступны. «Мобильная версия представляет собой урезанную основную версию — лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов».1 Это упрощение по сравнению с версией для компьютера становится и плюсом и минусом этого подхода. Вроде бы удобно, под рукой функции первой необходимости, но если понадобится сделать чтото большее, ничего не выйдет. В плюсах нужно еще упомянуть быстроту мобильной версии. «Из-за упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G».2 И не 1 http://habrahabr.ru/post/239441/ 2 Там же. стоит забывать, что у пользователя есть выбор, если что-то не устраивает, есть возможность перейти на полную версию сайта. В минусах у мобильной версии ограниченность не только по функционалу, но и по представляемому контенту, что может негативно сказаться на общей информационной картине. Также мобильная версия комфортно используется только на мобильных устройствах, на экране компьютера она непривычна, или даже неуместна. В целом, несмотря на совершенствующиеся технологии, этот подход все еще широко используется в проектах, особенно крупных. Социальные сети Вконтакте, Facebook и Одноклассники имеют мобильные версии. Адаптивный дизайн В интернет-маркетинге и веб-разработках адаптивный дизайн (Adaptive web design или AWD) давно превратился из модного тренда в высокоэффективный инструмент, и даже стандарт для современных сайтов. Чем же он так хорош? Адаптивный дизайн позволяет комфортно просматривать страницу сайта на экранах разных размеров. Секрет в том, что для каждого устройства (смартфон, планшет, ПК) создается свой макет с определенными параметрами под каждый экран. Не нужно писать код для смартфона/планшета с нуля, стоит только внести небольшие изменения в HTML и CSS макета для ПК. «В случае адаптивного дизайна элементы сайта могут скрываться, заменяться другими; могут меняться поведение и функции отдельно взятых элементов веб-сайта»3. Он также «требует работы с 3 http://itkeys.ru/responsive-and-adaptive-design/ объектной моделью элементов на странице, подразумевает смену их иерархии/вложенности на разных устройствах».4 К тому же в адаптивном дизайне используется progressive enhancement («прогрессивное улучшение»). «Его концепция заключается в предоставлении пользователю полноценной функциональности сайта вне зависимости от того, насколько устаревшим или урезанным программным обеспечением он пользуется».5 Отзывчивый дизайн Считается, что отзывчивый дизайн (Responsive web design или RWD) является частью адаптивного. 6 Но многие люди считают, что это одно и то же. Да, понятия близкие, но все же нужно видеть в них разницу. 4 Там же. 5 http://rusability.ru/usability/adaptivnyiy-dizayn-kak-obyazatelnaya-sostavlyayushhaya-uspeshnogoproekta/ 6 http://rusability.ru/usability/adaptivnyiy-dizayn-kak-obyazatelnaya-sostavlyayushhaya-uspeshnogoproekta/ 7 При отзывчивом дизайне сайт разрабатывается с расчетом на то, чтобы «обеспечить наиболее простое его использование: удобный просмотр сайта с минимум ресайзов и лишних прокруток – на самом широком спектре устройств. При верстке отзывчивого дизайна используются исключительно HTML и CSS — без подключения JavaScript для определения «отзывчивости» элементов дизайна». В чем еще отличие от адаптивного дизайна: элементы сайта не скрываются и не заменяются другими, и их поведение, так же как и функции, не меняется. Все элементы верстки располагаются в рамках модульной сетки, и их размеры зависят от размера экрана, они «резиновые» (flexible).8 Проверить сайт на отзывчивый дизайн можно, сделав окно на компьютере меньше и подвигав границы окна – вся верстка должна подстраиваться под ваши манипуляции. Хороший пример – музыкальноновостной сайт Factmag.9 Такое «волшебство» происходит, потому что при создании отзывчивого дизайна используется адаптивная разметка (adaptive layout) (не путать с адаптивным дизайном!). Ее механизм заключается в создании нескольких стилей, вариантов расположения элементов на модульной сетке и нескольких вариантов стилей элементов дизайна. Они сменяют друг друга при изменении 7 http://rusability.ru/usability/adaptivnyiy-dizayn-kak-obyazatelnaya-sostavlyayushhaya-uspeshnogoproekta/ 8 http://itkeys.ru/responsive-and-adaptive-design/ 9 http://www.factmag.com/ размеров экрана. При этом можно наблюдать некие точки перехода между разными видами разметки (стилей) сайта.10 RESS RESS (Responsive Design + Server Side) - это более сложная и менее распространенная и не столь известная технология. Для понимания ее принцип можно проиллюстрировать так: если зайти на страницу под разными User-Agent-ами, можно увидеть различный HTML для различных устройств. В преимуществах у RESS минимизация трафика, так как ненужные JavaScript можно убрать из кода, что освобождает CPU, память и кэш на мобильном устройстве. Дополнительно можно специально оптимизировать HTML и CSS. Также возможно использовать таргетирование. Например, пользователям операционной системы Android предлагать скачивать приложения с GooglePlay, а пользователям Mac OS – с iTunes. Как говорилось выше, для каждого устройства можно сделать свою верстку. Но, как и у всего, у RESS есть минусы. Во-первых, это сложность в разработке. Такой технологии требуются соответствующие настройки сервера и комплексная работа не одного программиста. Далее понадобится несколько вариантов верстки, даже больше, чем в отзывчивом дизайне, поскольку этот вид дизайна имеет возможность подстраиваться даже под операционную систему устройства. Из чего вытекает последний недостаток: механизм определения устройств еще не доведен до совершенства.11 Дизайнозависимость 10 http://itkeys.ru/responsive-and-adaptive-design/ 11 http://habrahabr.ru/post/239441/ Поскольку мобильная версия сайта постепенно уходит в прошлое, а RESS еще недостаточно вошла в использование при программировании современных сайтов, мы рассмотрим взаимоотношения интернет-маркетинга только с оставшимися двумя видами веб-дизайна. Сейчас адаптивный и отзывчивый дизайн просто неотъемлемая часть грамотного и эффективного интернет-маркетинга. Количество людей, посещающих сайты со смартфонов и планшетов, неуклонно растет. Значит, все люди, пользующиеся мобильными устройствами, потенциальная аудитория. Таким образом, используя «умный» дизайн, можно повысить эффективность абсолютно всех направлений интернет-маркетинга, в том числе: • Контент-маркетинг. Это самая важная часть маркетинговой стратегии, по-другому не бывает. Поэтому необходимо создать комфортные условия восприятия содержания посетителем; • Email-маркетинг. Можно использовать адаптивные шаблоны для создания писем, что тоже позволяет просматривать их с мобильных устройств, а также совершать определенные действия, например, кликнуть на ссылку внутри письма и перейти на такой же замечательный адаптивный сайт; • Поисковый маркетинг. При переходе из поиска по ссылке на сайт пользователь останется, если на нем «умный» дизайн, и скорее покинет сайт с фиксированным макетом, так как многие элементы могут отображаться некорректно, и целевое действие не будет совершено; • SMM. Пользователи, которые попадут на сайт из социальных сетей, смогут легко совершить необходимое целевое действие. Другими словами, «умный» дизайн повысит конверсию социального трафика.12 12 http://contentmonster.ru/blog/2014/07/kak-adaptivnyj-dizajn-uluchshit-vash-onlajn-marketing/ К тому же, самое важное преимущество использования адаптивного дизайна — положительный опыт взаимодействия. Например, при посещении сайта интернет-магазина пользователь планшета ожидает увидеть более простой макет и адаптированную навигацию. Пользователь смартфона имеет другой набор потребностей, зависящий от навигации и удобства отображения контента. «Знающие маркетологи используют все преимущества адаптивного дизайна для создания индивидуального опыта взаимодействия владельцев смартфонов. Используются как простые методы (призыв к нажатию кнопки или верстка контента, не требующие прокрутки), так и сложные (мобильные сайты, больше похожие на полноценные приложения, нежели на вебстраницы)».13 Еще один важный момент для оптимизации интернет-маркетинга через «умный» дизайн – это составление перечня наиболее важных возможностей сайта, востребованных целевой аудиторией. Поможет в этом составление тепловой карты сайта. После определения наиболее часто просматриваемых страниц, блоков и разделов страницы можно будет сверстать хороший адаптивный дизайн, ведь одна из его составляющих – это отсутствие всего лишнего. И тут возникает вопрос: что из элементов оформления действительно стоит выкинуть? Оптимизация сайта адаптивным дизайном, во главу которого поставлена конверсия и ее прирост, означает избавление от «жира». Все дополнительные элементы, не несущие на себе полезной нагрузки, должны быть убраны. Остаться должно только то, что за пару касаний пальцем приведет пользователя к цели и превратит его в потребителя товаров или услуг. Must- have для всех - часы работы, контакты, карты и возможность в одно касание 13 http://lpgenerator.ru/blog/2013/09/09/adaptivnyj-dizajn-novaya-era-mobilnogo-marketinga/ вязаться с представителем компании. Однако оптимизация для мобильных устройств не должна концентрироваться только на избавлении от рекламных баннеров и переводе всех шаблонов на адаптивную верстку. Необходимо переработать юзабилити сайта с точки зрения именно мобильного, а не настольного пользователя.14 Стоимость Поначалу разработка «умного» дизайна потребует больших финансовых и временных инвестиций. Ведь маркетологам вместе с дизайнерами и программистами нужно создать как минимум три шаблона: для настольных ПК, планшетов и смартфонов (а для некоторых компаний потребуется четвертый шаблон под small desktop (нетбуки)). Но не стоит забывать, что долгосрочные выгоды от его использования значительно снижают затраты на его обслуживание.15 Заключение Как можно заметить, «умный» дизайн находится в тугой связке с интеренетмаркетингом, и большая часть успеха последнего партнера зависит от первого. Такой веб-дизайн помогает удерживать и конвертировать посетителей, которые заходят на страницу с мобильных устройств. Даже если пользователи смартфонов и планшетов составляют малую долю общего трафика сайта, компания все равно теряет потенциальных клиентов, которые могли бы стать реальными, будь сайт адаптивным. В России встречают по одежке. 14 http://lovim.net/2013/04/adaptive-design-conversion/ 15 http://lpgenerator.ru/blog/2013/09/09/adaptivnyj-dizajn-novaya-era-mobilnogo-marketinga/