Важно
Всё, что выделил ниже голубоватым фоновым цветом, к дизайну, т.е. работам в фотошоп, и созданию страницы подписки,
напрямую никакого отношения не имеет!
Однако, поскольку страница пробная, решил добавить своё примечание.
Лично я рассылку не веду, и сбор подписной базы меня не интересует. Это всего лишь один из вариантов,
как можно сделать страницу подписки. Тестовый, полностью действующий пример такого типа веб-страниц.
Поэтому, желающим опробовать его на 100%, нужно ввести свой реальный e-mail адрес. Иначе Вы ничего не поймёте.
Да, и кстати! Уроки фотошоп действительно хорошие!
НО!
Для демонстрации подписной страницы я использую (естественно) бесплатный аккаунт, а именно поэтому, показать Вам
страницы, созданные специально для подтверждения подписки и её завершения (соответственно и выдачи Вам обещанного),
мне сервис SmartResponder не даёт!
Обидно, досадно, да ладно. Не очень-то и хотелось.
Без него обойдёмся!
**P.S. Хотя, справедливости ради, нужно сказать, что сам SmartResponder свои фирменные подписные странички сделал очень даже симпатичные.
Ничего лишнего. Простенько и со вкусом! Мне они в общем-то понравились. Только корректировать их нельзя.
Впрочем, моей основной целью было: создать эту, главную страницу подписки в фотошоп, закодировать, т.е. прописать все стили, формы,
а потом уже готовую подключить к сервису.
С задачей справился! Можете опробовать. Это действующий пример. Ну, а вспомогательные страницы оставил "на память". Найдёте их ниже.
Посмотреть страницу подтверждения можно здесь:
Заключительная страница подписки с уроками фотошоп здесь:
Для тех, кто захочет вернуться на "стартовый" мини-сайт, кнопка ниже.
* * *
Пример дизайна ещё одного действующего сайта, выполненного в стиле "одностраничник", найдёте, и можете проверить его работу здесь:
"Шаблон лендинга" (откроется в новом окне).
* * *
Поскольку, для того, чтобы сделать страницу подписки для сайта, нужны навыки в использовании нескольких веб-технологий:
HTML+CSS, jQuery, фотошоп, вот я и подключил к этому подразделу тройной нижний навигатор.
Наведите курсор мыши на него - появятся подсказки, куда ведут его элементы.