Опубликовано

Разработка Landing Page для службы почтовой рассылки

Лэндинг пейд для службы рассылки по ящикам в подъездах

Компания «LifeService» занимается распространением рекламных листовок по почтовым ящикам в Иваново. Была поставлена задача – разработать простой, но эффективный сайт с быстрым вводом в эксплуатацию.

Сводка:

Требования:

  • не использовать онлайн-конструкторы сайтов,
  • уникальный логотип и дизайн сайта,
  • наличие формы обратной связи,
  • адаптивность (мобильные и планшеты),
  • быстрая индексация поисковыми системами,
  • высокая скорость загрузки сайта.

Протокол выполнения работ

Из поставленных условий и требований, был сформирован план работ по разработке сайта.

Шаг 1. Морфология.

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

Для этого, мы опросили собственника бизнеса более подробно об этой сфере услуг. Собрали информацию по конкурентам и с помощью интеллектуальных карт построили наглядное представление (рис. 1):

майнд-мап морфологии сематнического ядра
Рис. 1 «Морфология проекта по почтовой рассылке рекламы»

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

Шаг 2. Прототипирование.

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

Т.к. наш сайт будет построен по landing-системе, то информационная структура – это разбивка экранов в соответствии с логикой представления продукта (услуги). Используя информационную структуру, выстраиваются прототипы экранов (рис. 2):

варфрейм главного экрана лендинга
Рис. 2 «Прототип главного экрана»

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

Шаг 3. Разработка функционала.

Следующим этапом было программирование функционала. Разработчик выполняет базовую верстку с разбивкой на блоки, устанавливает формы связи, кнопки, интерактивную карту и отводит места под контент. Разработка ведется с применением современных веб-технологий и стандартов: HTML5, CSS3, PHP7, JavaScript + jQuery (см. рис. 3):

Программирование landing page с микроразметкой
Рис. 3 «Исходный код при разработке Landing Page»

Стоит заметить, что стандарты микро-разметки (такие как Schema.org и OpenGraph) внедряются сразу на этапе программирования функционала. Как правило, многие веб-мастера сразу этого не делают. Внедрение таких микро-форматов происходит уже на этапе продвижения ресурса.

Шаг 4. UX/UI – дизайн.

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

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

UX/UI дизайн при разработке лэндинга
Рис. 4 «Подбор цветовой гаммы и шрифтов»

UX-дизайнер проектирует визуальную часть таким образом, чтобы пользователь интуитивно понимал что ему нужно делать. Иногда, говорят что UX-дизайн – это манипуляция пользователем (клиентом). UI – дизайнер в свою очередь, работает над “эстетикой”, анимацией и удобством использования. Чаще всего (в небольших проектах) UX/UI – дизайном занимается один человек.

Дизайнер работает сразу над двумя версиями визуального представления:

  • для настольных компьютеров,
  • для мобильных устройств и планшетов.

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

Шаг 5. Верстка.

После утверждения дизайна, к работе приступил верстальщик. Его задача “соединить” визуальную часть с функциональной. Простыми словами – притянуть графику к программному коду. Эта часть работ относится к front-end разработке. Результат верстки (рис. 5):

Фронтенд первого экрана лендинг пейд
Рис. 5 «Верстка – главный экран landing page»

Шаг 6. Оптимизация и тестирование.

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

SEO-оптимизатор подбирает правильные ключевые слова и кластеризует их (составляет семантическое ядро), заголовки, проектирует внутреннюю перелинковку и работает на юзабилити (удобством использования). Проводятся работы на сервере: составляются файлы «.htaccess» и «robots.txt», в которых вносятся записи методов сжатия данных и поведения поисковых систем. Составляется карта сайта.

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

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

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

Вывод: а почему бы не конструктор?

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

Да! Визуально может получиться даже интереснее, за счет огромного количества готовых шаблонов! Но когда необходимо сделать такой проект, чтобы он:

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

то ни один онлайн-конструктор ни чего серьезного не предложит. А во-вторых, тарифы онлайн-конструкторов дороже обычного хостинга.

Безусловно, редко кто занимается SEO по Landing Page. Как правило, ограничиваются контекстной и медийной рекламой. Но подобная разработка включает в себя уже часть оптимизации – внутренней, какую невозможно осуществить на онлайн-конструкторах за счет жестких ограничений.

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

Но! Конструктор – это хорошо.

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

А если не конструктор, то…

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