Как сделать простой мобильный лендинг?
Опубликовано: 24.08.2018
Привет. В этом посте я расскажу, как сделать простой мобильный лендинг, используя лишь блокнот. На самом деле, 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. Поэтому, чтоб миллион раз не повторятсья, я просто пробегусь по некоторым пунктам, которые могут показаться непонятными.
Итак, первым делом смотрим в раздел <HEAD></HEAD>
Самая главная строчка, которая и оптимизирует вашу страницу под экран мобильников:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no» />
Добавляйте её всегда, если хотите сделать оптимизированную страницу.
Следующий скрипт
<script> 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); } </script>нужен для того, чтобы реализовать функцию обратного отсчета на странице. Таким образом, пользователь будет видеть, что ваше предложение доступно только в течение 4 минут 43 секунд. Для того, чтобы вывести таймер на странице, просто добавьте следующий код туда, где хотите отобразить таймер:
<div id=’countdown’></div>
В <TITLE></TITLE> вам нужно прописать заголовок страницы.
В <STYLE></STYLE> содережатся все CSS-стили. Важно! Храните их именно внутри HTML кода, не выносите стили в отдельный документ — будете терять время на загрузке.
Я не буду объяснять каждый пункт CSS-стилей, все подробности про каждый элемент можете найти на htmlbook или в гугле. Если кратко — важно использовать только относительные величины — проценты для отступов/размеров и rem,em для шрифтов. Никаких pt или px!
rem — размер относительно базового размера шрифта. Он гораздо дружелюбнее к мобильным устройствами и ресайзу.
Где можно обойтись без изображений — обходитесь без изображений, старайтесь реализовать все через CSS (будь то кнопки, градиенты и т.д.) Красивые CSS кнопки можно сделать здесь (http://css3button.net/).
В <BODY></BODY> находится основной код вашей страницы. Пробегусь по основным пунктам:
Следующий скрипт
<SCRIPT LANGUAGE=»JavaScript1.2″><!— Beginvar months=new Array(13);months[1]=»January»;months[2]=»February»;months[3]=»March»;months[4]=»April»;months[5]=»May»;months[6]=»June»;months[7]=»July»;months[8]=»August»;months[9]=»September»;months[10]=»October»;months[11]=»November»;months[12]=»December»;var time=new Date();var lmonth=months[time.getMonth() + 1];var date=time.getDate();var year=time.getYear();if (year < 2000)year = year + 1900;document.write(«<b>» + lmonth + » «);document.write(date + «, » + year + «</b>»);// End —></SCRIPT>
нужен для вывода сегодняшней даты на странице. Просто вставьте его в то место, где хотите отображать дату.
Все изображения ОБЯЗАТЕЛЬНО оптимизируйте под веб и, по возможности, старайтесь хранить их на CDN серверах.
Поясню следующую строчку:
<a data-role=»button» target=»_blank» class=»button» href=»http://google.com/»>
А именно data-role. Data-role — один из элементов jQuery Mobile, которой преобразует некоторые элементы, будь то чекбокс, кнопка, навигация и т.д. в нативный вид. Подробнее про каждый элемент можно прочитать на официальном сайте jQuery Mobile (http://jquerymobile.com/).
Для тестирования ленингов на разных девайсах я использую BrowserStack (http://www.browserstack.com/). Он платный, но есть Free-trial версия. В любом случае, своих денег он однозначно стоит. Готов ответить на любые вопросы!
Удачи!