Еще недавно свой сайт рекомендовалось иметь любой фирме. Сейчас же не просто рекомендуется, а обязательно иметь сайт, адаптированный под мобильные устройства. Объем трафика с них превышает оный со стационарных компьютеров, поэтому такое подстраивание под сегодняшние технические реалии не кажется прихотью или небольшим преимуществом в конкурентной борьбе. Теперь это необходимость, ибо иначе эта самая борьба может быть благополучно проиграна. В этой статье мы расскажем, каким образом можно приспособить лендинг для мобильных устройств, чтобы посетителям было проще и удобнее.
Увеличить скорость загрузкиЭто ключевой параметр, так как если сайт открывается дольше пяти секунд, то вероятность того, что пользователь не захочет дожидаться, возрастает многократно. Для сайта существуют различные сервисы. Кроме того, подсказать может и Google Analytics. Нужные данные можно посмотреть в сводках, где предварительно настраиваются виджеты «Время загрузки страницы» :
Что можно сделать, что увеличить скорость:
- Убрать мусор из кода;
- Уменьшить количество сторонних скриптов;
- Убрать редиректы;
Подробнее об увеличении скорости открытия страниц можно прочитать .
Изучите девайсы пользователейИ в , и в есть отчеты об устройствах, с которых к вам заходят на сайт, а также о том, какие там установлены расширения. Проанализировав самые популярные варианты, вы можете поэкспериментировать с размерами сайта и посмотреть, как на это откликнется целевая аудитория.
Оформляя сайт, подумайте, насколько человеку будет удобно взаимодействовать с активными элементами. Это не компьютер, где все управляется мышкой, тут нужно кликать пальцами, и если кнопки расположены неудобно, то по ним просто не будут нажимать.
Лучше всего движения пальца по экрану отражает следующая тепловая карта. Она показывает область, на которую нажимает большой палец правой руки, и как она менялось по мере увеличения размера экрана (в данном случае, экрана айфона).
Чтобы форму было проще заполнить, нужно прикрутить к ней клавиатуру.
Чтобы облегчить заполнение соответствующих полей, используйте код:
Это сделает пользование вашим сайтом гораздо более удобным.
Продумайте дизайн мобильного лендингаЕсли вы просто уменьшите ваш сайт, который пользователи видят на экранах компьютера, до размера экрана смартфона — это будет не лучшим решением. Дизайн мобильного лендинга может быть даже не похожим на своего «старшего брата», главное здесь — удобство, поэтому простым переносом дело не решается, над мобильным дизайном надо поработать.
То же касается и расположения главных элементов, например оффер на экране мобильного девайса должен располагаться сразу на первом экране, это даже важнее, чем в случае с десктопной версией.
Закрепите хедерЕсли лендинг очень длинный, то листать его не удобно. Опять таки, с компьютером проще, там все скроллится мышкой, на телефоне же могут возникать трудности, поэтому полезным ходом будет закрепление навигационной панели вверху экрана.
Думаем, вы сами обращали на это внимание: мобильная версия сайта выстраивает все элементы в один столбец: и картинки, и текст, и форма. Это сделано не случайно. Если бы все элементы сайта были расположены вразнобой, как на версии для компьютера, это бы многократно усилило вероятность заблудиться на сайте.
Как видите, эти способы хоть и универсальны, однако предполагают некоторое тестирование. Так что адаптируя лендинг под экраны мобильных гаджетов, не бойтесь экспериментировать и искать лучшие варианты.
Не пропустите:
После того, как вы сделали лендинг, стоит подумать о его мобильной версии. В Платформе LP страницы автоматически адаптируются под разные размеры экранов, но лучше проверить, как ваш сайт будет выглядеть на телефоне. Ещё лучше – специально поработать над мобильной страницей: настроить размер и отображение элементов, скрыть лишние секции.
Вот порядок действий, как изменить страницу, чтобы она хорошо выглядела на смартфоне и была эффективной.
Главное правило мобильного лендингаДумать о клиенте – главное правило мобильного лендинга (как и любого сайта). Представьте, в какой ситуации постетитель увидит ваш одностраничник:
Он откроет сайт на ходу, у него не будет времени долго его рассматривать.
У него будет конкретная цель: подписаться на рассылку, зарегистрироваться на мероприятие, оформить заказ.
У него может быть плохой интернет – сайт не загрузится.
Из этого правила следуют остальные четыре: меньше секций, меньше тяжелых фото, меньше текста и больше кнопка. Сосредоточимся на упрощении.
Как посмотреть, как выглядит ваш сайт на мобильном?
В редакторе в верхней панели есть режимы отображения. Выбирайте значок мобильного и смотрите, как ваш сайт выглядит на телефоне.
Если лендинг – это разговор с клиентом, то мобильный лендинг – это максимально короткий разговор. Не письмо, а сообщение в мессенджере. Поэтому подумайте, какие секции можно не показывать на мобильных:
Точно ли нужно описание всех преимуществ работы с вами?
Стоит ли оставлять раздел с кейсами и примерами работ?
Нужны ли отзывы довольных клиентов?
Просматривая страницу на мобильном, посетитель скорее ищет что-то конкретное, чем бесцельно серфит в интернете. Он больше сосредоточен на цели. Помогите ему достигнуть этой цели быстрее – сделайте лендинг максимально коротким.
Как скрыть лишние секции в мобильной версии лендинга?
В настройках секции во вкладке со значком мобильного телефона поставьте галочку «Скрывать на телефонах».
Если после ревизии секций, у вас осталось много картинок и видео, подумайте еще раз – не скрыть ли? Большие изображения и особенно видео влияют на скорость загрузки, а она при просмотре на мобильном может быть невысокой.
Какая скорость загрузки считается нормой?
9-13 секунд – это максимум, который клиент готов ждать. (Исследование seochat.com).
Правило №3. Меньше текстаЭкран мобильного маленький, а туда нужно поместить столько же текста, сколько на большой. Придется уменьшить шрифт или сократить текст.
Лучше поступить так:
Сначала уменьшить размер шрифта, посмотреть, читается ли текст с маленького экрана.
Если текст всё ещё занимает ли слишком много места – сократите: примените к нему правила инфостиля или удалите части с дополнительной информацией.
Как настроить шрифт для мобильных?
Заходите в настройки текста, выбирайте вкладку с иконкой мобильного телефона и меняйте шрифт.
Вы ведете посетителя от первого экрана к целевому действию, и это действие должно быть одно. Правило «одна страница - одно действие» действует для всех лендингов, а для мобильных ещё строже. Попасть пальцем на кнопку на экране телефона сложнее, чем мышкой на экране компьютера. Учитывайте это и делайте кнопку больше.
Как изменить кнопку для мобильных?
В настройках кнопки зайдите во вкладку с иконкой мобильного телефона и задайте положение «На всю ширину».
1) Открываем отображение страницы на мобильном
(верхняя панель редактора – значок мобильного телефона).
2) Просматриваем страницу в новом адаптированном виде. 
3) Оцениваем каждую секцию: можно ли её скрыть без потери смысла? Скрываем лишнее (настройки секции – значок мобильного телефона – галочка «Скрывать на телефонах»). 
4) Особенно оцениваем секции с картинками и видео. По возможности скрываем.
5) Смотрим, как адаптировался текст. Если шрифт слишком большой, делаем меньше (настройки текста – значок мобильного телефона – размер шрифта). Если текста всё ещё много – удаляем лишние предложения и абзацы.
6) Проверяем, как отображается форма и кнопка, настраиавем.
7) Если необходимо, задаем особое положение любых элементов на странице, задаем отступы. 
8) Публикуем лендинг и открываем его на мобильном телефоне. Проверяем:
- Как долго грузится страница?
- Не поехал ли текст?
- Не поехали ли изображения?
- Правильно ли отображается форма?
Если всё хорошо, ваш лендинг готов к мобильным посетителям. А их, говорят , больше половины! Так что дерзайте)
Дата публикации: 05-07-2016 1523
Последние годы все быстрее и быстрее развивается индустрия мобильного интернета, и на данный момент создание мобильной версии для своего лендинг пейджа уже больше необходимость, нежели роскошь. На такой трафик на сегодняшний день приходится около 10-15% в обычных нишах, и более 30-40% в нишах о красоте, моде, здоровье.
Это неудивительно, всё больше людей для своих покупок использует мобильный телефон, и для сохранения и даже увеличения количества покупателей, следует создать мобильную версию сайта. Учитывая это, многие разработчики начали создавать мобильные версии сайтов и компании, которые не содержат в штате программистов, обращаться в таким специалистам, чтобы настроить мобильную вёрстку.
Поэтому если вы хотите увеличить конверсию вашего лендинга и повысить трафик, советуем вам создать мобильную версию. На нашем конструкторе вы можете настроить это самостоятельно.
Инструкция создания мобильной версии лендинга1. Если вы знакомы с нашим конструктором лендинг пейдж, и у вас уже создан сайт на нашем конструкторе лендингов, то вам достаточно просто подключить тариф GRAND.
Начиная с тарифа Grand у вас будет подключена мобильная вёрстка, которая будет автоматически подгоняться под любой размер устройства.
А вот на первых тарифах сайт на мобильных устройствах будет отобржаться один в один, как на компьютере. Там установлена адаптивная вёрстка, которая отвечает за то, чтобы при просмотре сайта на любых гаджетах, никакие сдвиги в структуре сайта не происходили. Но в данном случае он не будет адаптироваться под размер смартфона или другого гаджета.
2. У вас будет подключена мобильная версия сайта.
Если вы впервые зашли на конструктор мобильного лендинга, то пойдём по порядку.
Чтобы создать нужно:
■ В итоге вы получите мобильный лендинг совершенно бесплатно и автоматически настроенный.
Для адаптирования сайта для мобильных устройств конструктор сайтов Tobiz специально предусмотрел данную возможность, чтобы помочь вам сэкономить деньги и время. Так как, если вы наймёте программиста для разработки мобильной версии лендинга , вы потратите минимум 15-20 тыс. руб дополнительно, а это ещё нужно будет заплатить за создание самого лендинг пейджа и его техническую поддержку (плюс около 5 тысяч ежемесячно).
На базе нашего конструктора вы можете сделать это совершенно бесплатно. К тому же мы всегда следим за его работой и делаём всё, чтобы сайт оставался конструктором лендингов с нормальной адаптивностью.
■ Если вы будете следовать нашей инструкции, то в итоге вы получите 3 варианта мобильной адаптации лендинг пейдж.
Привет. В этом посте я расскажу, как сделать простой мобильный лендинг, используя лишь блокнот. На самом деле, 80% всех офферов в мобайле можно (и даже желательно) крутить БЕЗ использования лендингов. Однако все же в некоторых нишах (Sweepstakes, Mobile Adult Dating) он просто необходим.
Ссылка на демонстрацию (http://forum.cpa-intern.net/test/simple-mobile-lander/).Открывайте с мобильного устройства или сожмите браузер до размеров экрана мобильного.
Ссылка на исходники. (http://forum.cpa-intern.net/test/simple-mobile-lander/simple-mobile-lander.rar) Скачивайте исходник, открывайте файл в любом текстовом редакторе и начинаете разбираться, что к чему. Reverse Engeneering наше все:)
Вообще, существует очень много инструментов, которые помогут вам сделать простые HTML страницы, оптимизированные под мобильные устройства, но лично мне удобнее все делать с нуля в блокноте.
Как пример, для создания просто лендинга вы можете воспользоваться следующими сервисами:
Convrrt (http://www.mobileconvrrt.com/)(http://www.mobileconvrrt.com/)
Atmio ((http://atmio.com/)http://atmio.com/) (http://atmio.com/)
LeadPages ((http://www.leadpages.net/)http://www.leadpages.net/) (http://www.leadpages.net/)
Landr ((http://landr.co/)http://landr.co/)
Mobilize ((http://qrmobilize.com/)http://qrmobilize.com/) (http://qrmobilize.com/)
Instapage ((http://www.instapage.com/)http://www.instapage.com/) (http://www.instapage.com/)
LanderApp ((http://www.landerapp.com/)http://www.landerapp.com/) (http://www.landerapp.com/)
(http://forum.cpa-intern.net/test/simple-mobile-lander/)
Процесс создания лендингов под мобильные устройства практически не отличается от создания под WEB. Поэтому, чтоб миллион раз не повторятсья, я просто пробегусь по некоторым пунктам, которые могут показаться непонятными.
Итак, первым делом смотрим в раздел
Самая главная строчка, которая и оптимизирует вашу страницу под экран мобильников:
Добавляйте её всегда, если хотите сделать оптимизированную страницу.
Следующий скрипт
var interval; var minutes = 04; var seconds = 43; window.onload = function() { countdown(‘countdown’); }
function countdown(element) { interval = setInterval(function() { var el = document.getElementById(element); if(seconds == 0) { if(minutes == 0) { el.innerHTML = «countdown’s over!»; clearInterval(interval); return; } else { minutes—; seconds = 60; } } if(minutes > 0) { var minute_text = minutes + (minutes > 1 ? ‘ minutes’ : ‘ minute’); } else { var minute_text = »; } var second_text = seconds > 1 ? ‘seconds’ : ‘second"; el.innerHTML = minute_text + ‘ ‘ + seconds + ‘ ‘ + second_text; seconds—; }, 1000); }
нужен для того, чтобы реализовать функцию обратного отсчета на странице. Таким образом, пользователь будет видеть, что ваше предложение доступно только в течение 4 минут 43 секунд. Для того, чтобы вывести таймер на странице, просто добавьте следующий код туда, где хотите отобразить таймер:
В вам нужно прописать заголовок страницы.
В содережатся все CSS-стили. Важно! Храните их именно внутри HTML кода, не выносите стили в отдельный документ — будете терять время на загрузке.
Я не буду объяснять каждый пункт CSS-стилей, все подробности про каждый элемент можете найти на htmlbook или в гугле. Если кратко — важно использовать только относительные величины — проценты для отступов/размеров и rem,em для шрифтов. Никаких pt или px!
rem — размер относительно базового размера шрифта. Он гораздо дружелюбнее к мобильным устройствами и ресайзу.
Где можно обойтись без изображений — обходитесь без изображений, старайтесь реализовать все через CSS (будь то кнопки, градиенты и т.д.) Красивые CSS кнопки можно сделать здесь (http://css3button.net/).
В находится основной код вашей страницы. Пробегусь по основным пунктам:
Следующий скрипт
» + lmonth + » «);document.write(date + «, » + year + «»);// End —>
нужен для вывода сегодняшней даты на странице. Просто вставьте его в то место, где хотите отображать дату.
Все изображения ОБЯЗАТЕЛЬНО оптимизируйте под веб и, по возможности, старайтесь хранить их на CDN серверах.
Поясню следующую строчку:
А именно data-role. Data-role — один из элементов jQuery Mobile, которой преобразует некоторые элементы, будь то чекбокс, кнопка, навигация и т.д. в нативный вид. Подробнее про каждый элемент можно прочитать на официальном сайте jQuery Mobile (http://jquerymobile.com/).
Для тестирования ленингов на разных девайсах я использую BrowserStack (http://www.browserstack.com/). Он платный, но есть Free-trial версия. В любом случае, своих денег он однозначно стоит. Готов ответить на любые вопросы!
Уже говорилось, что, как и весь сайт или интернет магазин, должен быть оптимизирован под загрузку на смартфонах. Кстати в статье « », приведен не только алгоритм запуска магазина, но и даны уроки в количестве 5 штук с адаптированным шаблоном магазина, и все бесплатно. Статья « » поможет быстро организовать продажи. Используя эти два мануала и уроки, можно сделать неплохой старт проекта.
19. Создайте лендинг оптимизированный для мобильных устройств.Согласно eMarketer, пользователи смартфонов по всему миру в 2015 году составят 1,75 миллиарда и это только в 2015 году, это число катастрофически растет. Так как Вы являетесь владельцем бизнеса или маркетологом Вы просто не можете игнорировать мобильных пользователей, посещающих Ваш лендинг.
В настоящее время так много внимания уделяется лендинг пейдж для полного использования браузеров (десктопной версии), а опыт работы с мобильными устройствами часто является посредственным. Но по мере того, как количество пользователей смартфонов будет расти, это изменится.
Разрабатывайте лендинги только адаптивные
Нет никаких сомнений в том, что целевую страницу следует оптимизировать для мобильных устройств. Это означает, что лендинг должен быть легко читаем для мобильных пользователей. И пользователи должны легко иметь возможность заполнить форму или нажать кнопку на своем экране, не зажимая и не увеличивая масштаб. И страница должна загружаться еще быстрее на мобильном устройстве. Если страница грузится около 3 секунд (учет идет на мили секунды), то клиент скорей всего не дождется и уйдет с ленда. Это будет считаться отказом, показатель отказов в поведенческих факторов очень важен для всего сайта и чем больше отказов, тем хуже ранжируется весь сайт.
Проверяйте все элементы лендинга на всех устройствах и популярных браузерах
Но рост внедрения смартфонов также бросает вызов тому, что лучше всего подходит для целевой страницы. Например, только потому, что ваша целевая страница доступна для просмотра на смартфоне, это не означает, что она будет конвертироваться. Призыв к действию может быть «на первом экране» с ноутбука, но что с ним происходит на меньшем мобильном экране? Если большинство ваших посетителей просматривают вашу целевую страницу с мобильного устройства, тогда пришло время переосмыслить свой подход и начать с мобильного первого экрана. Это означает, что целевую страницу необходимо заточить в первую очередь под мобильные устройства, во-вторых, для настольных компьютеров и ноутбуков.
Выводы:
— Следите за загрузкой своего продажника;
— Используйте хорошие оптимизированные изображения и видео;
Следующая публикация из книги — Тестирование лендинг пейдж.
Возможно Вам будет интересно:
Значение слова неудачный
Обзор Samsung Galaxy A7 (2017): не боится воды и экономии Стоит ли покупать samsung a7
Делаем бэкап прошивки на андроиде
Как настроить файл подкачки?
Установка режима совместимости в Windows