Лендинг под мобильные устройства. Главное правило мобильного лендинга. Зачем это нужно

Faq 15.04.2019

Faq

Мобильный Лендинг Пейдж представляет собой автономную интернет-страницу, с помощью которой клиент попадает в один клик на продающую страницу.

Поэтому если Вы не занимаетесь , то Вы теряете половину своей .

Чтобы создать мобильный Лендинг Пейдж, лучше обратиться за помощью в компании по SEO-продвижению.

Так как самостоятельно это сделать будет затруднительно.

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

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

Основные типы целевых страниц

Перед тем, как создать мобильный landing page для использования в интернет-маркетинге, необходимо обозначить какой именно тип страницы Вы будете использовать.

Итак, всего различают 4 вида страниц - это:

1. Микросайт;
2. Главный Сайт;
3. Автономная целевая страница;
4. Страница сегментации.

К микросайту относится такой сайт, на котором расположена информация о различных рекламируемых услугах, а также товаре.

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

Главный сайт более структурирован и включает уже большое количество страниц и информации.

Но он обладает низкой целевой аудиторией, так как она малоэффективна.

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

Итак, страница сегментации направлена на повышение конверсии.

Инструкция «как создать мобильный Лендинг Пейдж»

Так как существует множество различных сервисов, инструкция может отличаться.

Поэтому мы укажем на основные действия, которые необходимо предпринимать:

Во-первых, необходимо адаптировать верстку. Этот принцип достаточно доступный, и именно он обеспечивает конкретное изображение страницы с любого устройства. В итоге, уже будет неважно с какой системы клиент зашел на Ваш сайт. Потому что он все ровно перейдет на обозначенную вами страницу. Если это мобильная версия сайта, то она должна включать как можно больше информации. Где выгодно заказать лендинг пейдж - узнайте по
Во-вторых, подготовьте качественный дизайн. Если Ваш сервис основывается на доставку еды, то необходимо разработать правильный и лаконичный мобильный дизайн. Существует правило, чем меньше «экран монитора», тем больше красок необходимо поместить. Очень часто для того, чтобы создать мобильный landing page, используют адаптивный дизайн. Потому что он позволяет открыть страницы вне зависимости от того, с какого устройства Вы их посещаете.

Как видите, создать мобильный Лендинг Пейдж несложно. Но, чтобы успешно продвигать Ваш бизнес и с помощью SEO и не терять аудиторию, лучше обратиться за помощью к профессионалам.

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о такой важной вещи как посадочная страница , которую очень часто на буржуйский манер называют лендинг пейдж (от английского landing page — целевая страница). Что же это такое и почему это так важно?

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

Что такое лендинг пейдж и почему это так важно

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

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

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

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

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

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

Примеры лендингов

В зависимости от преследуемых вами целей можно разделить посадочные страницы (лендинги) на несколько типов:

12 шагов по созданию идеального лендинга

Нужно понимать, что посадочные страницы, на которые будут привлекаться вами пользователи из социальных сетей (или из контекстной рекламы), должны обладать рядом характеристик и удовлетворять некоторым требованиям. Так как же создать идеальную лендинг пейдж ?

Каждый лендинг должен быть заточен только под одно целевое (конверсионное) действие — либо подписка, либо продажи. Не надо жадничать, ибо внимание пользователя будет рассеяно и сильно увеличится вероятность его ухода (так ничего и не выбрав из предложенных вариантов). Лучше как можно меньше заставлять клиентов думать и выбирать — путь на landing page должен быть прямым как стрела (очевидным для него) и без каких-либо ответвлений.
На посадочной странице обязательно должен присутствовать призыв к действию (с глаголами в повелительном наклонении — позвони, купи, получи, приди и т.п.). Фразы должны быть короткими и мотивирующими. Например, «купите сейчас», «получить видеокурс» или «подпишись и получи».
Рулят также яркие кнопки и стрелки , создающие на них акцент. Неплохо работают кнопки красных и желтых оттенков, ибо заметны и содержат как бы призыв к действию.
Ну а стрелки, как правило, призваны еще больше акцентировать внимание на кнопке, чтобы линия поведения пользователя на лендинге была как можно более прогнозируемой.
Иногда очень неплохо работают анимированные кнопки (но в любом случае нужно будет проводить тестирование эффективности тех или иных элементов лендинг пейджа):
Если в лендинге используются (на подписных посадочных страницах без них не обойтись, но и на продажниках их довольно часто используют), то озаботьтесь тем, чтобы в них содержалось как можно меньше полей. В идеале, в форме должно быть только одно поле (для ввода Емайл адреса), но для дальнейшего общения (проведения маркетинга) вам понадобится знать и имя пользователя, поэтому два поля являются наиболее распространенным вариантом.Большее количество полей может существенно снизить конверсию. К тому же добавление полей для ввода телефона или адреса вызывает у пользователей настороженность и может привести к отказу от целевого действия.
В статье про я упоминал, что пользователи в интернете тексты не читают — они их просматривают. И самым важным в этом плане является заголовок. Если его нет (или он не выделен соответствующим образом), то это очень сильно снизит конверсию. На лендингах заголовки должны быть обязательно цепляющими , чтобы пользователь склонился к дальнейшему чтению или сразу к свершению конверсионного действию (подписке, заказу, звонку).
На вашей landing page должны быть не только призывы к действию и эффектные заголовки, но и аргументация необходимости подписки, покупки, заказа или звонка. В случае страницы подписки это может быть, например, небольшой видеоролик с описанием и содержанием «халявы», или все то же самое оформлено в виде краткого списка (перечня). В случае продажника это тоже может быть видеоролик с обзором товара, списком тех услуг, которые вы предлагаете (в том числе и ваши конкурентные преимущества).
Очень хорошо на посадочных страницах работают отзывы от уже состоявшихся клиентов, покупателей или подписчиков (лучше, если при этом будут указаны какие-то контакты тех, кто эти отзывы оставил, чтобы все выглядело правдоподобно).
Также неплохо работают на посадочных страницах сравнения «до и после» . Не для всех тематик это применимо, но в области похудения, косметологии, фитнеса и многих других ниш это можно с высокой эффективностью использовать. Например, так делает фирма, предоставляющая услуги ресторации.
Страница landing page может быть довольно длинной, но при просмотре первого экрана (это та область страницы, что видна без использования прокрутки) пользователю должно быть совершенно ясно и понятно, что именно вы хотели ему сказать.
Для стимулирования подписчиков или покупателей некоторых товаров (например, ) можно использовать вариант дополнительных бонусов, которые получит подписчик или покупатель при заказе. Когда пользователь находится на грани принятия решения, то как раз такие «плюшки» могут перевесить чашу весов в вашу пользу.
Ну и, конечно же, стоит делать упор на то, что «только здесь и только в течении нного количества времени» пользователю будет доступно все это великолепие (подписка, специальная цена на товар, дополнительный набор услуг). Как это сделать лучше всего? Правильно, поставить таймер, ведущий обратный отчет времени до часа Х, когда предоставленная возможность будет упущена. Ничто так не стимулирует к принятию решения колеблящегося пользователя, как буквально на глазах убегающие секунды.
Рядом с таймером неплохо будет расположить форму подписки, заказа или контактный телефон. Это будет работать не всегда, поэтому надо проводить тесты (думаю написать ряд статей про проведение А/Б-тестирования — если не хотите пропустить, то подписывайтесь на рассылку), и возможно, что такой простой и очевидный способ позволит вам увеличить конверсию данной лендинг пейдж и с лихвой окупить деньги, потраченные на продвижение в социальных сетях или контекстной рекламе.
Пользователи также хотят знать, кто именно им предлагает данный товар, услугу, видеокурс и т.п., поэтому необходимо в лендинге указывать информацию об авторе, магазине, фирме.
Естественно, что хорошо было бы при этом упомянуть достоинства, достижения, конкурентные преимущества, но не перехваливайте себя, дабы не перейти ту грань, за которой уже снижается доверие к опубликованной информации.

Примеры ошибок делающих landing нерабочим

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

Еще раз напоминаю, что в интернете практически никто не читает (во всяком случае вновь открытую страницу), а именно просматривает информацию. Если она окажется действительно стоящей и требующей более детального изучения, то тогда уже доходит дело и до прочтения (в общем-то, так же как и с газетами). Поэтому не допускайте перегруженности лендинга информацией — это может дезориентировать пользователя и вызвать реакцию отторжения еще до того момента, когда он разберется о чем там идет речь.
Текст должен быть небольшого объема, максимально лаконичен и наполнен информацией, а не водой. Пару абзацев «ни о чем» вызовут у пользователя бурное желание закрыть такую посадочную страницу. На landing page также плохо работает мелкий шрифт. В общем-то, его использование и не нужно, ибо для изложения сути много слов не потребуется.
Не обманывайте ожидания пользователя. Если в рекламе или в посте в социальной сети вы говорили об одном, а при попадании на лендинг пользователь видит несколько другое, то происходит утрата доверия и резко снижается конверсия. Очень важно следить за этим соответствием.

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

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

У вас есть еще немного времени? Хотите его провести с пользой? Тогда берите попкорн, садитесь поудобнее и смотрите двухчасовой мастер-класс «Пошаговый алгоритм создания Landing Page» :

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

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

Исследование Люка Вроблевски (Luke Wroblewski), директора по продуктам Google и автора книги «Сначала мобильные!» показывает, что в период с 2009 по 2013 потребление контента через привычные каналы, такие как телевидение, радио, печать, значительно снизилось. Единственный показатель, который вырос — использование мобильных устройств.

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

Даже в 2015 году у большинства пользователей возникает целый ряд затруднений:

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

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

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

1. Сайт не оптимизирован для мобильных устройств

Еще в декабре 2012 года медиа-ресурс Mashable провозгласил наступающий 2013 годом адаптивного дизайна. Крупнейшие компании тогда обратили на это внимание и разработали мобильные версии своих ресурсов. Но многие не могут похвастаться корректным отображением страниц до сих пор.

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

Ритейлер одежды «O’Neill Clothing» достиг впечатляющих результатов после того, как его маркетологи применили адаптивный дизайн. Они отслеживали три главных показателя: конверсию, количество сделок и выручку на протяжении трех недель до и после применения технологии. Результаты были невероятными.

iOS устройства:

Конверсия увеличилась на 65.71%
Количество сделок — на 112.50%
Выручка — на 101.25%

Устройства Android:

Конверсия увеличилась на 407.32%
Количество сделок — на 333.33%
Выручка — на 591.42%

Можно привести немало примеров, которые иллюстрируют явные преимущества адаптивного дизайна. Специалисты из «Skinny ties», компании, занимающейся созданием галстуков с 1971 года, отметили рост выручки на 42,4% после запуска мобильной версии ресурса. В фирме по производству фотоэкипировки «Think Tank Photo» количество сделок, заключенных с помощью смартфонов и планшетов, выросло на 96% по сравнению с предыдущим годом.

2. Игнорирование целей пользователя

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

Вице-президент компании «UserTesting» Майк Мэйс (Mike Mace) провел исследование тысяч мобильных версий. Вот его заключение: «Вы должны переделать ваш сайт специально для мобильных устройств, а не просто скорректировать его. Мобильная версия — это не только другой набор технологий, это еще и другое поведение пользователя, другие ожидания».

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

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

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

В качестве результата вы получите не только положительный пользовательский опыт, но и увеличение доходов, рост вашего бизнеса. Как мы уже выяснили, длинные формы вызывают раздражение, и если вы будете их использовать, то наверняка снизите таким образом коэффициент конверсии. К примеру, крупное туристическое агентство «Expedia» потеряло $12 000 000 прибыли из-за ненужных полей формы, которые сбивали с толку пользователей и попросту запутывали.

Если пользователи видят длинные формы на своем мобильном устройстве, они будут стараться избежать утомительных интеракций. Автор книги «UX для бережливого стартапа» Лаура Клейн (Laura Klein) отмечает: «Ожидание, что пользователи мобильных устройств будут вводить данные таким же образом, как и обладатели стационарных компьютеров — самая большая ошибка многих компаний».

Несколько советов для создания максимально удобных и понятных форм:

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

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

Стивен Хубер (Steven Hoober), проектировщик пользовательского взаимодействия для мобильных устройств, дизайнер и автор книги «Проектирование мобильных интерфейсов» советует: «Убедитесь, что каждая зона прикосновения находится по крайней мере в 8 миллиметрах от центра другой, хотя расстояние в 10 миллиметров даже предпочтительнее».

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

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

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

Вместо заключения

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

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

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

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

Итак - что и как адаптируем?

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

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

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

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

Контент. Не используйте шрифт меньше 16 пунктов, не забывайте про отступы между строками и от края экрана - и не упрощайте контент настолько, чтобы клиенту приходилось идти на десктопный сайт в поисках нужной информации.

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

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

Все эти сложные на первый взгляд вещи легко укладываются в простые решения. На российском рынке представлен выбор вариантов адаптации landing page под мобильные устройства на любой вкус и кошелёк: можно нанять целую веб-студию или воспользоваться онлайн-сервисами Например, в MoAction представлено более 100 готовых решений, которые имеют наивысшую оценку по мобильности от Google и являются профессиональными.

Выбор за вами!

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

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

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

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

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

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

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

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

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