Создаем адаптивную Landing Page (целевую страницу)

В этой заметке я расскажу как создать адаптивную Landing Page для привлечения подписчиков.

Если кто не знает, что же такое Landing Page.

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

Для создания Landing Page я буду использовать популярный фреймворк — Twitter Bootstrap.

Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.

В августе 2013 года вышла последняя версия — Twitter Bootstrap 3.0.

Посмотрите, что у нас получиться — перейти.

С начала мы возьмем готовый код для создания html-станицы с помощью Twitter Bootstrap.

Вот он.

<!DOCTYPE html>
<html>
<head>
    <title>Twitter Bootstrap - пример Landing Page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <link href="http://yandex.st/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <h1>Добро пожаловать!</h1>
</body>
</html>

Поясню что здесь такое.

Строка

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

Далее мы подключаем файл с CSS-стилями для Twitter Bootstrap 3.0.

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

<link href="http://yandex.st/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

У нас есть заготовка страницы.

Вот как она отображается в браузере

landing-page-1

Теперь мы переходим к самому главному, тексту на Landing Page.

Какие требования к нему предъявляются?

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

А дальше предложите Ваше решение этой проблемы.

Чтобы получить решение посетитель должен заполнить простую форму из одного или двух полей.

Объясните пользователю что вы собираетесь делать с этими данными.

Я делаю шаблон для Landing Page, чтобы Вы могли его у себя использовать, поэтому текст для примера будет такой:

«Нужна подписная страница?

Не знаешь как её создать?

Всё просто. Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.».

Теперь добавляем наш текст и форму подписки на нашу страницу.

Получаем следующее

<!DOCTYPE html>
<html>
<head>
    <title>Twitter Bootstrap - пример Landing Page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <link href="http://yandex.st/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <h1>Нужна подписная страница?</h1>
 
    <p>
        Не знаешь как её создать?
    </p>
    <p>
      Всё просто.   
    </p>
 
    <p>
        Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
    </p>
 
    <form action="/mailing-list" method="post">
        <p class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control input-lg" name="email" placeholder="info@sitebiznes.ru" />
        </p>
        <p class="help-block"><small>Мы не будем передавать или продавать третьим лицам ваш электронный адрес.</small></p>
        <p>
            <button type="submit" class="btn btn-success btn-lg">Получить</button>
        </p>
        </span>
    </form>
 
</body>
</html>

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

Twitter Bootstrap - пример Landing Page - этап 2

Теперь размещаем наш текст с формой подписки по центру страницы.

Для этого добавляем еще код CSS и у нас получается следующее

<!DOCTYPE html>
<html>
<head>
    <title>Twitter Bootstrap - пример Landing Page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <link href="http://yandex.st/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
	<style>
 
    body {
        padding-top: 20px;
    }
 
    .margin-base-vertical {
        margin: 40px 0;
    }
 
    </style>
</head>
<body>
	<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
 
                <h1 class="margin-base-vertical">Нужна подписная страница?</h1>
 
    <p>
        Не знаешь как её создать?
    </p>
    <p>
      Всё просто.   
    </p>
 
    <p>
        Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
    </p>
 
    <form action="/mailing-list" method="post" class="margin-base-vertical">
                    <p class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control input-lg" name="email" placeholder="info@sitebiznes.ru" />
                    </p>
                    <p class="help-block text-center"><small>Мы не будем передавать или продавать третьим лицам ваш электронный адрес.</small></p>
                    <p class="text-center">
                        <button type="submit" class="btn btn-success btn-lg">Получить</button>
                    </p>
                    </span>
                </form>
 
			</div>
        </div>
    </div>
 
</body>
</html>

Мы задали горизонтальное выравнивание по центру col-md-6 col-md-offset-3.

Затем добавили верхний отступ по умолчанию и использовали специальный класс margin-base-vertical для регулирования вертикальных отступов для некоторых элементов.

Вот что у нас получилось на данный момент.

Twitter Bootstrap - пример Landing Page - этап 3

Давайте немного поработаем над отображением нашей страницы.

Для этого добавим новый шрифт FontAwesome текста из сети и символ конверта icon-envelope , в место @.

Получим следующий код

<!DOCTYPE html>
<html>
<head>
    <title>Twitter Bootstrap - пример Landing Page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <link href="http://yandex.st/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
	<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
 
    <link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'>
 
	<style>
 
    body {
            padding-top: 20px;
            font-size: 16px;
            font-family: "Open Sans",serif;
        }
 
        h1 {
            font-family: "Abel", Arial, sans-serif;
            font-weight: 400;
            font-size: 40px;
        }
 
    .margin-base-vertical {
        margin: 40px 0;
    }
 
    </style>
</head>
<body>
	<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
 
                <h1 class="margin-base-vertical">Нужна подписная страница?</h1>
 
    <p>
        Не знаешь как её создать?
    </p>
    <p>
      Всё просто.   
    </p>
 
    <p>
        Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
    </p>
 
    <form action="/mailing-list" method="post" class="margin-base-vertical">
                    <p class="input-group">
                        <span class="input-group-addon"><span class="icon-envelope"></span></span>
                        <input type="text" class="form-control input-lg" name="email" placeholder="info@sitebiznes.ru" />
                    </p>
                    <p class="help-block text-center"><small>Мы не будем передавать или продавать третьим лицам ваш электронный адрес.</small></p>
                    <p class="text-center">
                        <button type="submit" class="btn btn-success btn-lg">Получить</button>
                    </p>
                    </span>
                </form>
 
			</div>
        </div>
    </div>
 
</body>
</html>

Вот как он выглядит в браузере

Twitter Bootstrap - пример Landing Page - этап 4

Добавим фон для нашей страницы, чтобы она была более привлекательная.

Где взять хорошее изображение для фона страницы?

Приведу Вам три источника:

— заказать создание изображение фрилансеру;
http://123rf.com — профессиональный банк изображений, там нужные картинки ищутся быстро и покупаются с лицензией;
http://www.freepik.com/ — поисковик бесплатной графики.

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

И добавляем CSS.

У нас получается следующий код страницы:

<!DOCTYPE html>
<html>
<head>
    <title>Twitter Bootstrap - пример Landing Page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <link href="http://yandex.st/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
	<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
 
    <link href='http://fonts.googleapis.com/css?family=Abel|Open+Sans:400,600' rel='stylesheet'>
 
	<style>
 
		/* http://css-tricks.com/perfect-full-page-background-image/ */
		html {
			background: url(img/tropical_paradise.jpg) no-repeat center center fixed; 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}
 
		body {
			padding-top: 20px;
			font-size: 16px;
			font-family: "Open Sans",serif;
			background: transparent;
		}
 
		h1 {
			font-family: "Abel", Arial, sans-serif;
			font-weight: 400;
			font-size: 40px;
		}
 
		/* Override B3 .panel adding a subtly transparent background */
		.panel {
			background-color: rgba(255, 255, 255, 0.9);
		}
 
		.margin-base-vertical {
			margin: 40px 0;
		}
 
	</style>
</head>
<body>
	<div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 panel panel-default">
 
                <h1 class="margin-base-vertical">Нужна подписная страница?</h1>
 
    <p>
        Не знаешь как её создать?
    </p>
    <p>
      Всё просто.   
    </p>
 
    <p>
        Введи свой e-mail адрес в поле ниже и получи исходный код данной страницы и инструкцию по ее адаптации.
    </p>
 
    <form action="/mailing-list" method="post" class="margin-base-vertical">
                    <p class="input-group">
                        <span class="input-group-addon"><span class="icon-envelope"></span></span>
                        <input type="text" class="form-control input-lg" name="email" placeholder="info@sitebiznes.ru" />
                    </p>
                    <p class="help-block text-center"><small>Мы не будем передавать или продавать третьим лицам ваш электронный адрес.</small></p>
                    <p class="text-center">
                        <button type="submit" class="btn btn-success btn-lg">Получить</button>
                    </p>
                    </span>
                </form>
 
			</div>
        </div>
    </div>
 
</body>
</html>

Смотрим результат — здесь

Twitter Bootstrap - пример Landing Page - этап 5

Неплохо получилось!

Смотрим, как это выглядит на cмартфоне под Андройд

Twitter Bootstrap - пример Landing Page - Смартфон на Андройд

Всё хорошо, но хотелось бы связать нашу подписную форму с каким-либо сервисом рассылок.

В продолжении данной заметки я расскажу, как можно наш шаблон связать с сервисом Smartresponder.ru.

Для написания использовался код из статьи: «Bootstrap in practice: a landing page».

P.S. — Коммерческий сайт своими руками от и до — это просто! Не верите? Щелкайте здесь — перейти

Читайте ранее:
Создаем адаптивную Landing Page (целевую страницу) — продолжение

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

Закрыть