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

Увеличить скорость загрузки

Это ключевой параметр, так как если сайт открывается дольше пяти секунд, то вероятность того, что пользователь не захочет дожидаться, возрастает многократно. Для сайта существуют различные сервисы. Кроме того, подсказать может и Google Analytics. Нужные данные можно посмотреть в сводках, где предварительно настраиваются виджеты «Время загрузки страницы» :

Что можно сделать, что увеличить скорость:

• Убрать мусор из кода;
• Уменьшить количество сторонних скриптов;
• Убрать редиректы;

Подробнее об увеличении скорости открытия страниц можно прочитать .

Изучите девайсы пользователей

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

Расположение главных кнопок

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

Лучше всего движения пальца по экрану отражает следующая тепловая карта. Она показывает область, на которую нажимает большой палец правой руки, и как она менялось по мере увеличения размера экрана (в данном случае, экрана айфона).

Прикрутите клавиатуру к формам

Чтобы форму было проще заполнить, нужно прикрутить к ней клавиатуру.

Чтобы облегчить заполнение соответствующих полей, используйте код:

Это сделает пользование вашим сайтом гораздо более удобным.

Продумайте дизайн мобильного лендинга

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

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

Закрепите хедер

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

Поместите текст и изображения в одну колонку

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

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

Не пропустите:

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

Если вы определились с выбором и заказали один из методов реализации, не забудьте при приеме работ проверить, как ваш сайт отображается на мобильных устройствах и в онлайн-тестах Google .

Еще по теме:

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

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

Количество переходов из мобильных устройств стремительно растет:

В Рунете почти 55% клиентов заходят на целевую страницу с мобильных устройств. В англоязычном секторе интернета этот показатель выше. 70% посетителей интернета используют мобильные приспособления как главный способ выхода в сеть.

Почему показатели мобильного трафика стремительно растут?

• Изобилие мобильных устройств на рынке
• Большое количество интернет-операторов
• Хорошее качество мобильного интернета
• Распространение wi-fi зон
• Появление мобильных версий известных браузеров
• Простота и удобство использования мобильных девайсов

Клиенты совершают переход на страницу в поиске нужной информации/товара/услуги, работая с телефонами, смартфонами, айпадами, планшетами. Мобильный трафик вашей landing page легко проследить. Для этого существуют специальные онлайн-инструменты (например, LiveInternet, Google analytics). Они совершают непрерывный сбор статистики посетителей лендинг пейдж, в том числе ведут сбор информации по трафику.

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

Зачем это нужно?

• Чтобы не потерять потребителей. 50% клиентов не возвращаются на целевую страницу, если у них был печальный опыт входа на эту лендинг пейдж.
• Чтобы все посетители интернета смогли полноценно изучить посадочную страницу. Она должна быть mobile-friendly. 91% мобильных соискателей конвертируются в покупателей.
• Предоставить клиенту возможность посетить лендинг пейдж с любого доступного устройства.

Что нужно делать чтобы не потерять клиента их мобильных устройств?

• Выбираем качественный хостинг. Обеспечиваем быстрый и постоянный доступ к целевой странице. Мобильный пользователь не будет ждать, пока загрузится страница, ему нужна информация сейчас.
• Редирект на мобильную версию. С возможностью вернуться к полному варианту.
• Специальная верстка страницы под мобильный трафик. Для правильного отображения лендинг пейдж на мобильных устройствах.
• Меню навигации (вверх - вниз)
• Вертикальная прокрутка (перелистывание)
• Удобный интерфейс и релевантная запросу информация
• Не перегружаем страницу. Отказываемся от флэш в пользу HTML, JQuerty, jpeg - графики.
• Сдержанный, но соответствующий общей концепции лендинг пейжд дизайн
• Контент располагаем в одну колонку, где “call to action” пишем в верхней части главной колонки. Если же призыв необходимо разместить внизу, то вверху страницы обязательно используем тизеры.
• Масштабируем. Приемлемый размер для правильного отображения на мобильных гаджетах - до 8 дюймов.
• Функция звонка по касанию. Клиенту легче нажать одну кнопку, чем набирать весь номер.
• Обеспечиваем кликабельность кнопок. Они должны быть такого размера, чтобы потребитель без труда совершил действие; располагаются на расстоянии друг от друга для функциональности.
• Создаем кнопки социальных сетей. Большинство мобильных посетителей используют свои устройства для посещения соц. сетей.
• Адаптируем текст (таблицы, маркеры, тезисы)
• Читабельность страницы. Возможность просканировать, а не читать.
• Заменяем ссылки на кликабельные кнопки
• Локализируем поиск. Для увеличения показателей ранжирования, используем запрос, релевантный по отношению к месторасположению посетителя.
• Датоориентируем. Мобильный трафик связан с событиями теперешнего и будущего времени.
• Улучшаем формы захвата, анкеты (мало полей для заполнения)
• Ориентируемся на вертикальное и горизонтальное расположение
• Тестим. Проверяем эмуляторами качество отображения лендинг пейдж на разных мобильных устройствах.

Стоит учитывать потребности мобильных пользователей целевой страницы. Они занимают почти половину всего трафика лэндингов и их количество растет.

Инновационные процессы в IT-сфере увеличивают мобильный трафик. Спрос на mobile-friendly ресурсы превышает предложение, поэтому заранее позаботьтесь о адаптивности своей продающей страницы.

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

Не стали исключением и мобильные лендинги, которые махровым цветом расцвели после всеобщего распространения смартфонов и планшетов с HD-экранами. Сегодня наблюдается два основных способа сделать посадочную страницу для переносимых гаджетов.

1 способ: адаптированная верстка . Принцип достаточно примитивный – смысл его в том, чтобы обеспечить корректное отображение страницы с любого устройства. Таким образом, вне зависимости от того, с какого устройства клиент зашел на Ваш сайт, он «растянется» соответствующим образом.

Так он выглядит на ноутбуке:

А так отображается на дисплее смартфона:

Такой способ имеет смысл применять, если большая часть Вашей аудитории пользователи компьютеров или планшетов. Большинство хороших маркетинговых агенств подготовят вам адаптированную под мобильные устройства версию сайта совершенно бесплатно, если вы будете заказывать лендинг у них. Если же Ваша аудитория по большей части будет посещать Ваш сайт при помощи мобильных устройств, есть смысл подготовить мобильный лендинг другим, менее бюджетным способом, о котором речь пойдет ниже.

2 способ: адаптивная верстка и дизайн. Этот способ есть смысл применять, если пользователи, которые посещают Ваш сайт, делают это по большей части с мобильных устройств. Например, если Вы занимаетесь доставкой суши, процент пользователей, осуществляющих заказ с мобильника – более 50%. При разработке таких версий сайта используются такие технологии, как HTML 5, jQuery и т. д. Они позволяют обойтись без использования множества «оптимизирующих» плагинов, на деле перегружающих страницу.

Адаптивный дизайн предполагает не «ужимание» страницы до размеров экрана смартфона, а изменение структуры сайта при отображении на различных устройствах. Таким образом, по сути, дизайнер рисует Вам не один сайт, а сразу несколько – отдельную версию для мобильного телефона и планшета. Это позволяет представить ту же самую информацию, не уменьшая шрифты, видимый размер изображений и других элементов, то есть оставляя юзабилити страницы на высоком уровне. Одновременно происходит оптимизация отображения сайта на мобильных устройствах. Благодаря этому прогрузка страницы происходит быстро, а это очень важно, так как владельцы смартфонов и планшетов менее терпеливые, чем ПК-пользователи, и время для них играет очень большую роль.

Пример адаптивного дизайна landing page : сайт http://getdirections.es/

Так он выглядит на ноутбуке:

А так он приспособился к экрану смартфона: