Страница 11 из 13
Начнем с основ
Более 50 процентов посетителей заходят на сайты с мобильных устройств (Sterling, 2016). А значит, потенциальное большинство вашей аудитории – мобильные пользователи. Одной этой причины достаточно, чтобы в первую очередь позаботиться о полной оптимизации сайта – прежде, чем оценивать возможность повысить коэффициент привлечения клиентов и сумму среднего чека за счет позитивного опыта покупок с мобильных устройств. А такой опыт повышает коэффициент привлечения до 76 процентов (Monetate, 2016).
Главное, что должен делать сайт, оптимизированный под мобильные устройства, – обеспечивать алгоритм взаимодействия, подходящий потребностям и обстоятельствам пользователя. То есть человек должен легко и эффективно получать доступ к информации или функционалу вашего сайта с того устройства, которым пользуется.
Люди часто думают: если сайт открывается на мобильных устройствах, то он оптимизирован. Но если он всего лишь способен работать на мобильных устройствах, а пользователь большую часть времени тратит на увеличение-уменьшение, пытаясь что-то рассмотреть, об оптимизации нет и речи.
Взять на вооружение новейший технологический тренд, не подумав при этом, как он повлияет на путь потребителя, – обычная ошибка. Плохая идея – разместить QR-код (Quick Response) на листовках кампании наружной рекламы, упустив из виду то, что сайт, куда перенаправляются мобильные пользователи, на смартфонах не работает.
Знаете, что я ненавижу больше всего? Когда захожу на сайт со своего девайса, а меня перенаправляют на его мобильную версию. Конечно, ничего ужасного… однако сильно раздражает, когда оказывается, что контента, который мне нужен, на мобильном сайте как раз и нет. Однако технология разработчиков не позволяет мне зайти на стандартный сайт с мобильного устройства. Каждый раз, когда я пытаюсь зайти на главную страницу, меня перенаправляют на мобильную версию. Дайте же людям возможность зайти туда, куда им надо! Ну пожалуйста!
Вариации мобильных сайтов
Это самый первый, самый простой и… наименее работоспособный подход. Вы можете создать единый сайт, который неплохо открывается и на настольных, и на мобильных устройствах. Но жертв не избежать, поэтому приходится выбирать, что пострадает – стационарный или мобильный сайт.
Единственный рабочий сценарий для универсального сайта – когда он очень простой и с ограниченным функционалом: например, это сайт-одностраничник или лендинг[9] с формой для регистрации.
На самом деле, действуя так, мы чаще всего просто подстраиваем сайт, чтобы он хотя бы корректно функционировал на мобильном устройстве. Ясное дело, что это никакая не мобильная оптимизация, а просто временная мера.
Давайте с самого начала разберемся в том, каковы должны быть различия между стационарным и мобильным функционалом и чем это вызвано.
Специальная мобильная версия вашего сайта кажется самым очевидным решением. Тут у вас есть две версии сайта – мобильная и стационарная, и в зависимости от устройства, с которого посетитель заходит на сайт, он попадает на одну из них.
На самом деле вариантов может быть куда больше, чем просто стационарный или мобильный сайт: например, версии, рассчитанные на отдельные девайсы, а может, просто разные версии для ПК, смартфона и планшета.
Преимущество подобного подхода – возможность полной адаптации сайта под мобильную оптимизацию. Но есть и обратная сторона – вам придется управлять множеством сайтов, что не обходится без проблем.
Уровень осложнений в данной ситуации определяется вашим отношением к обновлению и управлению контентом. Статические сайты, то есть такие, которые можно обновлять и редактировать, меняя программный код (этим занимается программист или вы сами), просто дают дополнительную нагрузку по обновлению нескольких сайтов. Сложнее дело обстоит с сайтами на основе CMS, то есть систем управления контентом (их еще называют «движками»), у которых есть некая форма интерфейса, позволяющая обновлять ваш сайт.
Использовать CMS для управления мобильными сайтами можно по-разному:
– Сайт для десктопа и статичный мобильный сайт на CMS. Это оптимизированный мобильный сайт, для редактирования которого нужен программист или ваши собственные знания по работе с кодом.
– Сайт для десктопа на CMS и отдельная CMS для мобильного сайта. В этом случае придется завести две отдельные CMS, чтобы обновлять разные версии ваших сайтов. Это усложняет движение контента между двумя сайтами, однако само решение простое и ясное.
– Единая CMS для разных версий сайта. Позволяет управлять контентом разных сайтов при помощи одной CMS, даже если есть отдельный сайт, оптимизированный под мобильные устройства. Это решение позволяет редактировать контент и «предназначать» для конкретной версии сайта – сложность в том, что CMS должна быть специально разработанной.
Отзывчивый дизайн, который иногда называют адаптивным (хотя это разные вещи, о чем мы поговорим позже), – разработка такого сайта, который хорошо отображается на любом мобильном устройстве. Этот сайт везде будет выглядеть по-разному- и при этом наилучшим образом отвечать конкретным условиям.
Такой подход реализуется путем комбинирования таких интернет-технологий, как каскадные таблицы стилей (CSS)[10] и JavaScript. На основе данных технологий браузер оценивает такие параметры, как устройство, на котором работает посетитель сайта, или ширина и высота дисплея, и в зависимости от этого выбирает отображение страницы. На рисунке 8.1 показан сайт Target Internet. Посмотрите, как можно эффективно использовать отзывчивый дизайн. Слева у нас полная версия, справа – тот же сайт с сокращенным окном браузера. Видите – здесь не просто сузили размеры, но и адаптировали под них функционал.
Термины «отзывчивый дизайн» и «адаптивный дизайн» часто считают взаимозаменяемыми, хотя это разные вещи.
Отзывчивый дизайн предназначен для настройки в самом браузере, то есть страница отправляется в браузер, а он уже выполняет работу по отображению ее корректных элементов. Это называется «клиентская технология», где клиентом выступает браузер.
Адаптивный дизайн предназначен для настройки через веб-сервер, который идентифицирует тип используемого устройства и отображает соответствующую версию сайта. Это называется «серверная технология».
Преимущество адаптивного дизайна в том, что в этом случае в браузер отправляется гораздо меньше контента, а на мобильном устройстве отображается только мобильная версия сайта.
Можно взять элементы специальных мобильных сайтов и скомбинировать их с некоторыми элементами отзывчивого дизайна. Например, ваш сайт может использовать несколько CSS, чтобы выглядеть по-разному на разных устройствах, однако CMS при этом дает возможность выбирать, какие страницы, опции меню и другие параметры будут отображаться в разных версиях сайта. В общем, это всё равно приводит нас к специальному мобильному сайту, однако позволяет сократить время на управление сайтами.
Рисунок 8.1. Эффективные сайты с отзывчивым дизайном
9
Лендинг – одна веб-страница, которая призывает пользователя что-нибудь сделать. Например, подписаться на рассылку, купить билет на конференцию, запросить смету или просто скачать презентацию. В отличие от полноценного сайта, лендинг предлагает сделать что-то одно.
10
CSS (англ. Cascading Style Sheets – каскадные таблицы стилей) – формальный язык описания внешнего вида документа, написанного с использованием языка разметки.