Как оптимизировать посадочную страницу вашего веб-сайта для мобильных устройств
О важности подготовки веб-сайта для мобильных устройств нет необходимости даже говорить. Революция мобильных устройств — это самое большое изменение, произошедшее за короткую историю Интернета.
Единственный вопрос, который может возникнуть: пользователи смартфонов и планшетов составят больше половины ваших пользователей в этом году, или в следующем?
С учетом вышесказанного, на данный момент оптимизация посадочных страниц для мобильных устройств является важным процессом для каждого дизайнера. Однако это не должно стать проблемой. Есть простой перечень действий, по которому вы можете пробежаться, чтобы убедиться, что ваш сайт готов к использованию на мобильных устройствах.
Изменяйте масштаб надлежащим образом
Способность веб-сайта изменяться в размере при отображении на различных устройствах является критичной. Существуют тысячи устройств, поэтому нецелесообразно останавливаться на нескольких типичных размерах экранов.
Общепринятым ответом на это является отзывчивый веб-дизайн; некоторые считают, что адаптивный лучше, другие утверждают, что это одно и то же. На самом деле эти споры носят семантический характер, идея же заключается в том, чтобы ваш сайт смог работать на любом устройстве, настоящего или будущего. Не позаботиться об этом было бы безответственно.
Одно важное замечание: убедитесь, что масштабирование вашего сайта происходит соответствующим образом в портретной и альбомной ориентации.
Тщательно выбирайте контент
Очевидно, что мобильные устройства предоставляют гораздо меньше места для размещения контента на посадочной странице. В идеале, заголовки нужно сделать краткими, сжатыми, по существу, около трех или четырех слов.
Кроме того, не загромождайте страницу, насколько это возможно, используйте небольшое количество ссылок и максимум одно изображение, если это осуществимо.
Поместите контент в маркированный список, чтобы его можно было легко просмотреть, без пауз и не искоса. Также нужно создать явный призыв к действию, чтобы склонить посетителя посетить другие части сайта.
Это должно давать некий стимул и может быть выполнено в виде простой кнопки, которая позволяет посетителям обращаться в представительства, что особенно полезно для местных предприятий, которые используют локальные сервисы.
Около 75% пользователей принимают меры по результатам проведенного поиска в течение часа, поэтому легко понять, почему призыв к действию должен быть настойчивым. Разместите ваш призыв где-нибудь в верхней части страницы, так что это будет одним из первых, что увидят ваши мобильные посетители.
Размер имеет значение
Да, размер действительно имеет значение. В смысле, размер файла. Посадочная страница должна всегда быстро загружаться, особенно та, которая будет доступна с помощью мобильного устройства.
Нет правила «чем быстрее, тем лучше», но в качестве общего руководства стоит помнить, что если загрузка вашей посадочной страницы занимает больше, чем 3 или 4 секунды, то вы начнете терять посетителей.
В идеале, ваша страница должна занимать очень мало места, меньше 20 кБ. Загрузка изображений занимает изрядное количество времени, и поэтому нужно свести к минимуму их использование. Поддерживайте ваш код в порядке, используйте спрайты изображений, если это необходимо, и применяйте CSS вместо изображений, где это возможно.
Кроме размера файла, подумайте и о количестве запросов, которые отправляются на сервер; как правило, эти запросы способны вызывать большую задержку по сравнению с фактической загрузкой файла.
Вы местный?
Пользователи мобильных устройств обычно находятся в движении, поэтому используйте сервисы определения местоположения. Привяжите посадочную страницу к местоположению пользователей. К примеру, вы можете настроить контент для локального отделения магазина.
В зависимости от размера и масштаба проекта, вы также можете адаптировать и основной контент в зависимости от местоположения.
Читаемость имеет значение как никогда
Возможность прочитать информацию с экрана имеет жизненно важное значение, поэтому лучше меньше, да лучше. Если вы не можете прочитать текст с телефона на расстоянии вытянутой руки, то шрифт должен быть больше. Вы действительно ограничены в пространстве.
Не заставляйте пользователей до бесконечности пролистывать контент, в противном случае, им это быстро наскучит, и они сбегут от вас. Да, да, в Интернете продолжительность концентрации внимания людей небольшая, гораздо меньше, чем во время чтения журнала или книги, поэтому все, что вы делаете, должно моментально захватывать внимание пользователей.
Палец вверх!
Все, что кликабельно на вашей посадочной странице, должно пройти тестирование на возможность нажатия пальцем. Если по элементу сложно нажать пальцем, то нужно пересмотреть его.
Раздувайте ссылки, чтобы вокруг них было как можно больше свободного места, и оставьте достаточно места между ссылками. Это снизит вероятность того, что пользователь нажмет на неверную ссылку и останется разочарованным.
Можно использовать плагины, чтобы гарантировать, что фотографии могут быть легко перевернуты, хотя размещение фотографий на посадочной странице все-таки не рекомендовано.
Формы и входные данные
Если вы поместили форму на посадочную страницу, сделайте ее очень простой, и не занимайте много места. Формы, которые требуют много входных данных, отталкивают и имеют более низкий коэффициент конвертации по сравнению с простыми формами. Поэтому добавляйте как можно меньше полей.
Опять же, людям быстро становится скучно, поэтому предоставление им длинной формы для заполнения, вероятно, заставит их покинуть сайт.
Простая навигация
Навигация должна быть простой и понятной. Сведите количество кнопок к минимуму, и убедитесь, что они пригодны для использования с помощью пальца. Попытайтесь добавить кнопки в разные части страницы, так, чтобы можно было проследить логический путь.
Тестирование, тестирование и еще раз тестирование…
Проведите тщательное тестирование вашей посадочной страницы, чтобы гарантировать, что она эффективно работает на мобильных устройствах. Рассмотрите A/B тестирование, которое, как показывает практика, в некоторых случаях увеличивает количество потенциальных пользователей до 40%.
При A/B тестировании вы разрабатываете два макета для одной и той же страницы — A и B. Трафик разделяется между двумя макетами, показывая какой из них работает лучше. Используйте наиболее важные для проекта метрики, такие как коэффициент конверсии, коэффициент продаж, показатель отказов.
По результатам тестирования остановитесь на той разработке, производительность которой выше, и вы окажетесь на полпути к проверенному дизайну.
Существует множество мобильных симуляторов, но какой бы вы не выбрали, советую вам использовать его только на первом этапе тестирования. Чтобы провести тестирование надлежащим образом, вы должны использовать реальные устройства.
Попросите, позаимствуйте или украдите, если потребуется, но проверьте ваш сайт на стольких устройствах, сколько может уместиться в ваших руках.
Сведите действия к минимуму
Чем больше нажатий и других действий должен сделать пользователь, тем меньше вероятность, что он их выполнит. Позвольте людям добраться из пункта А в пункт Б за минимально возможное количество кликов. Сделайте каждый аспект навигации и призыва к действию предельно простым.
Это самые важные вещи, которые нужно держать в уме при оптимизации посадочной страницы для мобильных устройств. В процессе разработки не забывайте, что мобильные устройства — это среда, отличная от ПК.
Люди менее терпеливы при работе с мобильными устройствами, потому что они используют их по пути и хотят выполнять задачи с минимальными усилиями. Медленная загрузка и отсутствие реакции на воздействие также раздражает людей, так что не жалейте времени, чтобы сделать все правильно.
Продуманная разработка будет вознаграждена. Именно она является отличительным знаком производительного сайта на фоне конкуренции и потери посетителей.