Веб-дизайн / Теория

20234

18-10-2017

Стационарные ПК уже давно не являются единственным источником информации. Находясь в движении пользователь также стремиться быть в курсе всего необходимого, что может предложить глобальная сеть интернет. Текущая ситуация такова, что актуальность мобильных версий ресурса становится неоспоримой. За последнее десятилетие мобильные гаджеты перешли из категории «предметов роскоши» в категорию «предметов обязательной необходимости». Коммерческие ресурсы для сохранения уровня конверсии должны чутко реагировать на такие изменения. Мобильная версия сайта стала неотделимой частью ЛЮБОЙ интернет платформы реализующей товары или услуги.

Статистика неумолима, она сообщает, что за октябрь-ноябрь 2016-ого года доля посещений Интернета посредством мобильных гаджетов составила значительную цифру – 51%. То есть, более половины всего трафика – это трафик, генерируемый с мобильных устройств: смартфонов, планшетов, телефонов.

 
 

 
 

Интересное замечание — в России например статистика больше направлена в пользу десктопа. Причина — самый популярный поисковик в РФ — Яндекс — имеет самую низкую долю мобильных пользователей.

 
 

 
 

Но тенденция к росту доли мобильного трафика есть и у Яндекса, значит скоро мы будем стоять на пороге “мобилизации сайтов” — верстальщикам будет хватать работы…

 
 

Более того, 80% процентов людей, которые в принципе посещают Интернет, являются владельцами смартфонов. Даже клиенты, которые посещают проект при помощи стационарного компьютера, в следующий раз могут сделать это с телефона. И остаться недовольными.

 
 

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

 
 

В результате, дизайн и текст, модули и блоки – все отображается некорректно. Теряется вся суть дизайна, нарушается юзабилити (удобство), пропадает маркетинговый акцент, невозможно грамотно донести до клиента УТП (уникальное торговое предложение). Сайт просто не выполняет свои функции.

 
 

Решением этой проблемы выступает снабжение ресурса мобильной версией. К сожалению, даже крупные коммерческие проекты не всегда это понимают и продолжают терять колоссальное количество трафика, а соответственно, и прибыли.

 
 

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

 
 

 
 

Проанализируйте Вашу целевую аудиторию (ЦА)
Прежде чем перейти к вопросу создания корректной мобильной версии сайта, необходимо тщательно изучить собственную аудиторию. Создание мобильной структуры – это комплексный подход, в котором необходимо учесть множество факторов влияющих на успешную оценку пользователями. Поэтому, нужно знать все аспекты Вашей ЦА. Статистика сообщает, что чем ниже возрастная категория аудитории, тем более вероятен тот факт, что посещение ресурса будет происходить ТОЛЬКО с мобильной версии.

 
 

Анализ должен включать такие аспекты, как географическую принадлежность, поведенческий фактор, возраст, гендерные признаки, уровень достатка, актуальность покупок через Интернет для пользователя.

 
 

Типы мобильных версий сайта
Итак, оптимизация мобильной версии сайта возможна посредством следующих вариантов:

 
 

1. Создание отдельной версии сайта с собственным URL. Фактически – это поддомен ресурса, который является полноценным двойником основного сайта. Правда, зачастую с сильно сокращенным функционалом. Такое решение обладает несколькими плюсами: возможность коррекции контента на каждом сайте отдельно, идеальное отображение и отсутствие необходимости в компромиссном дизайне. Однако, для пользователя такой вариант не самый удобный. Ему придется запоминать отдельный адрес, что может привести к путанице. Для владельца проекта есть и свои недостатки – необходимость отдельного администрирования нового сайта, финансовые затраты. Да и ввиду совершенствования CSS, отдельная мобильная версия становится все менее продуктивной;

 
 

2. Самый простой способ адаптации к мобильным гаджетам – снабжение ресурса внешними плагинами. Плагин — это программный модуль, которые расширяет возможности движка сайта. Решение дешевое и удобное, но нефункциональное. Даже лучшие плагины все равно содержат массу ошибок, всплывает некорректное отображение страниц. Примером может быть плагин WP Mobile Edition для WordPress CMS, соответственно. Решение не подходит для компаний с серьезным каналом трафика;

 
 

 
 

3. Разработка мобильного приложения. Это весьма удобное решение для пользователя. Приложение разрабатывается под конкретное ПО (IOS, Android). В результате, пользователь работает с наиболее привычным для себя функционалом. Правда, для этого необходимо само приложение скачать. А убедить пользователя в том, что необходимость посещения данного ресурса для него настолько важна, что он должен установить внешнее ПО (программное обеспечение) – задача сложная. Поэтому, зачастую такое решение используется, как дополнительная мера при уже существующей полноценной мобильной версии сайта;

 
 

4. Адаптивный дизайн. Если задуматься, для чего нужна мобильная версия сайта в принципе, то легко прийти к выводу, что это упрощение в первую очередь для клиентов обладающих ПК и смартфоном ОДНОВРЕМЕННО. Поэтому, если пользователь посещает ресурс с разных устройств в разное время, адаптивный дизайн – лучший выбор. Это более трудоемкое решение. Но оно позволяет создать ресурс, который автоматически подгоняет визуальную картинку под любую ширину экрана, и пользователь всегда видит корректное отображение информации.

 
 

Как настроить мобильную версию сайта
Стоит понимать, что просто перевода существующего ресурса на адаптивный дизайн или создание отдельного сайта – недостаточно. Мобильная версия предполагает качественное изменение всей структуры ресурса, оптимизации контента, модулей, юзабилити и так далее.

 
 

Оптимизируйте размеры текстов на ресурсе
Существует множество противоречивых мнений об объемах текста, особенно это актуально для посадочных страниц. Текущий средний объем зачастую упирается в значение: 2000 слов. Однако, является ли он оптимальным?

 
 

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

 
 

Во-вторых, современная статистика указывает на то, что лаконичные тексты обладают более высокими показателями конверсии. Для пользователей с мобильных устройств посадочные страницы (лендинги) на 2000 слов – это слишком крупный размер текста. Поэтому, стоит его сокращать, искать золотую середину между посетителями с ПК и смартфонов. Рекомендуется уменьшение текстов на лендингах до 1000 слов. И соответственно, стоит сделать все страницы сайта более лаконичными. При этом, подобное решение может предполагать полной пересмотр всего семантического ядра.

 
 

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

 
 

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

 
 

Заголовок обязан быть максимально релевантным (соответствующим) самой странице. В противном случае, пользователь почувствует себя обманутым и вряд ли превратится в довольного клиента.

 
 

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

 
 

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

 
 

 
 

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

 
 

• HTML compressor, который корректирует размеры скриптов и самого кода на странице;
• JavaScript compressor, сжимающий скрипты Java;
• CSS compressor, соответственно, работающий с таблицами стилей.

 
 

 
 

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

 
 

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

 
 

 
 

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

 
 

Современный тренд диктует принципы минимализма, простоты линий и строгую геометрию форм. Вычурность и яркость будут восприняты негативно. Кроме того, сократите или протестируйте все всплывающие окна. Часть из них может неправильно работать на тех или иных мобильных платформах. Что опять же, вызовет недовольство пользователя. Хороший пример минимализма в дизайне ресурса:

 
 

 
 

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

 
 

• Увеличивают вес страницы, а мы помним, насколько важна быстрая загрузка для мобильной версии сайта;
• Могут отображаться неправильно на мобильной платформе или в мобильном браузере (это зависит от самого плагина);
• Понижают страницы в релевантности (так как из-за увеличения веса страницы снижается ее уровень юзабилити).

 
 

В идеале, ресурс должен отказать от плагинов в принципе. Если это не приведет к потере функциональности или аспектов дизайна. Это планка, к которой ресурс должен стремиться.

 
 

Повышайте уровень юзабилити сайта
Разбирая вопрос, как сделать мобильную версию сайта, в первую очередь стоит помнить о том, что курсора у смартфонов нет. Соответственно, точечно кликнуть на какой-то объект затруднительно. Особенно если он маленького размера. А если пользователю приходится менять масштаб для клика – Вы что-то делаете не так. Создавайте элементы для клика достаточного размера, не группируйте их. И сократите дистанцию пользователя на ресурсе до любого раздела. Переход куда-либо в два клика, вместо одного – это уже серьезная ошибка.

 
 

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

 
 

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

 
 

Автор статьи: Анатолий Улитовский
Директор компании Seoquick —
грамотная раскрутка сайтов и сео продвижение.