6 заметок с тегом

лендинг

Ресурсы для вёрстки посадочных страниц

Ольга Вовчук

На четвёртой неделе курса Helppy мы учим студентов верстать лендинги. Для работы предлагаем сервис Tilda. У него понятный интерфейс, стильные современные шаблоны и оперативная техническая поддержка.

Но кроме Tilda на рынке много других ресурсов, с помощью которых вы сверстаете классные продающие лендинги. Мы выбрали наиболее популярные сервисы: Tilda, WordPress, LPgererator, Mobirise, Instapage, и сделали подробный обзор.

Результаты поместили в сравнительную таблицу.

Tilda Publishing


Интуитивный конструктор сайтов и лендингов с коллекцией готовых текстовых и графических модулей.

Чтобы создать страницу, необходимо подобрать необходимые блоки и выстроить их друг за другом в логической последовательности. Дизайнеры Tilda уже позаботились об оформлении, выверили размер шрифта, цвет, отступ, межстрочное расстояние. Вам остаётся загрузить в шаблоны свои картинки и написать текст.

Для тех, кто не готов довольствоваться стандартными решениями, разработчики предлагают Zero Block. Здесь вы создадите модуль с нужной структурой и получите сайт с индивидуальным дизайном.

Что получите, работая в Tilda:

— 450+ профессиональных готовых блоков для сайта и интернет-магазина,
— адаптивность к смартфонам, планшетам и компьютерам,
— 20 встроенных шрифтов, возможность загрузить собственные шрифты в формате WOFF или добавить через Google Fonts,
— коллекция иконок от дизайнеров Tilda для разных сфер бизнеса, которая регулярно пополняется,
— база знаний с обучающими статьями и видео-уроками по работе с сервисом.

Что сможете:

— создавать и редактировать собственные блоки,
— подключать Google Analytics и Яндекс.Метрики,
— интегрировать в страницу сторонние сервисы: посты из соцсетей, музыкальные плееры, календари, формы приёма данных и виджеты,
— подключить платёжные системы Яндекс. Деньги или PayPal,
— сделать SEO-оптимизацию.

Язык: русский, английский.

Главный недостаток — высокие тарифы.

При регистрации Tilda предлагает всем пользователям протестировать все возможности сервиса бесплатно. На это отводится две недели. Затем ресурс попросит поменять тариф.

Тариф Free — бесплатный тариф.
Пользуясь этим тарифом, вы создадите один сайт из 50 страниц. При этом для работы доступна примерно половина блоков, в том числе Zero Block, в котором можно собирать блоки с нуля.
Нет возможности подключить собственный домен. Созданный сайт будет работать на субдомене Tilda moto.tilda.ws.

Тариф Personal — 750 рублей в месяц.
В пакет входит 1 сайт, 500 страниц, 1GB места на сервере. Вы получите доступ к полной коллекции блоков, сможете подключить к странице аналитику и платёжные сервисы, интегрировать её со сторонними сервисами.

Тариф Business — 1250 рублей в месяц.
Вы создадите 5 сайтов по 500 страниц и 1GB места на сервере, полный набор функций и возможность экспортировать исходный код.


Tilda Education — образовательный журнал платформы для создания сайтов Tilda Publishing. Практические руководства по дизайну и маркетингу для цифровых проектов.


WordPress


Конструктор сайтов, блогов и веб-приложений.

Как будет выглядеть будущий сайт определяет шаблон. Ищите подходящий вариант в официальном каталоге в разделе «Темы». Чтобы настроить тему используйте набор настроек. В каждом шаблоне он свой.

Работая с сервисом в стандартной комплектации, вы сможете частично настроить шаблон, создать страницы и первые записи
Для полноценной работы вам понадобятся плагины. Вы найдёте их соответствующем разделе административной панели и в каталогах на других сайтах. Один из таких каталогов подготовили создатели TexTerra, собрав 100+ бесплатных плагинов для бизнес-сайтов на WordPress.

Что получите:

— 8080 тем для сайта,
— 53 835 плагинов для улучшения сайта,
— настраиваемый дизайн,
— адаптивные мобильные сайты,
— СЕО-дружественность,
— мощная база знаний и развитое сообщество пользователей.

Язык: русский, английский, другие языки.

Тарифы

WordPress — бесплатный движок. Вы можете скачать его на компьютер, и экспериментировать, редактируя системные файлы. Но чтобы сделать сайт общедоступным, вам придётся приобрести хостинг и домен.

Пакет Blogger — 188 рублей в месяц.
Пакет Personal — 313 рублей в месяц.
Пакет Premium — 550 рублей в месяц.
Пакет Business — 1 499 рублей в месяц.
Пакет eCommerce — 2698 рублей в месяц.


Как создать сайт на WordPress: полное руководство для новичков — установка, настройка, работа с сайтом — мануал от TexTerra.


LPgenerator


Генератор целевых страниц.

Что получите:
— 300+ шаблонов посадочных страниц,
— мобильные целевые страницы с лид-формой,
— система сбора, фильтрации, анализа, управления и обработки полученных лидов,
— центр оптимизации конверсии,
— автоматическое подключение собственного или нового доменного имени,
— глубокая аналитика для определения ROI,
— возможность адаптировать страницу под операционные системы iOS, Android, Windows,
— верстать одностраничники без дополнительных знаний HTML и навыков программирования,
— помощь менеджера, обучающие материалы и курс по созданию и продвижению лендингов в «Университете лидогенерации».

Недостатки:
— сервис ориентирован на профессионалов,
— короткий пробный период — 7 дней,
— сложный интерфейс — нужно обучаться и разбираться. Новичкам придётся потратить немало времени, чтобы разобраться с сервисе.

Язык: русский.

Бесплатного тарифа нет, но есть тестовый период 7 дней.
Пакет «Базовый» — 559 рублей в месяц
Пакет «Продвинутый» — 1662 рублей в месяц
Пакет «Безимитный» — 2799 рублей в месяц
Пакет «Корпоративный» — 11011 рублей в месяц


База знаний — набор инструкций по работе с  LPgenerator.


Mobirise


Бесплатный конструктор сайтов, нужно устанавливать на компьютер, работает с Mac и Windows
Простой интуитивный редактор подойдёт новичкам. Чтобы разобраться в нём, потребуется не более 10 минут.

Что получите:

— 400+ блоков для создания страниц,
— 100% оптимизация для мобильных устройств в соответствии с последними тестами Google,
— темы разработаны на основе фреймворков Bootstrap 3 и Bootstrap 4, HTML+CSS — инструментов и шаблонов для верстки.

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

После завершения работы над сайтом в Mobirise вы получите файлы. Их необходимо залить на хостинг. После этого привязываете доменное имя и публикуете проект в сети.

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

Язык: русский.

Сервис бесплатный. Создавая блоки и выгружая файлы на хостинг или в «облако» вы не заплатите ни копейки. Потратиться придется только на хостинг и домен.


Вводные инструкции по работе с сервисом Mobirise.

Instapage


Конструктор целевых страниц.

Что получите:

— 200+ настраиваемых и оптимизированных шаблонов,
— центр оптимизации конверсии,
— возможность работать в команде — редактировать страницу в режиме онлайн,
— интеграцию с Google Analytics и Google AdWords,
— глубокую аналитику для определения ROI,
— учебный центр с видеоуроками,
— база знаний.

Простой интерфейс, подходит начинающим пользователям.
Шаблоны распределены по темам: приглашение на вебинар, мероприятия, продвижение через электронные материалы.
Вы сможете внедрить в страницу маркетинговые и аналитические инструменты, CRM-систему, сервисы рассылки, подключить чат для общения с клиентами.

Язык: английский.

Тарифы

Бесплатного тарифа нет. Тестовый период — 14 дней.

Сервис предлагает два тарифа и два варианта оплаты:
Пакет Core — 129$ при ежемесячной оплате или 99$ в месяц при оплате за целый год.
Пакет Enterprise — оплата рассчитывается исходя из набора выбранных функций.


Центр помощи Instapage — набор инструкций по работе с сервисом на английском языке.




Какой бы сервис вы не выбрали для работы, не забывайте про правила вёрстки и пользу для клиентов. Держите подборку статей из блога, которые помогут создавать эффективные посадочные страницы:
Как формулировать заголовки на лендингах
Как верстать фотографии на лендинге
Избавьтесь от слайдеров
Убрать жир



7 июня   вёрстка   лендинг   Ольга Вовчук

Рассылка статей прямо в месенджер. Раз в неделю, без спама.

Как верстать фотографии на лендинге

редактор Ольги Шевченко

В статье «Избавьтесь от слайдера» я предлагаю не использовать листалки и вытащить их содержимое на страницу. Кажется, что это просто: если в слайдере 12 фотографий, берём их все и ставим рядышком сверху вниз. В итоге получается примерно так:


Первая проблема такой вёрстки — отсутствие подписей. Мы видим фотографии, но не понимаем, кто эти люди, где и когда их снимали, какую задачу преследовал фотограф. Посетителю сайта остаётся рассматривать снимки и фантазировать.

Но даже если мы подпишем картинки, нас ждёт вторая проблема — скука смертная.

Как верстать фотографии веселей

Скучной вёрсткой фотографий я называю такие этажи лендинга, в которых снимки лежат стройными одинаковыми рядами. Когда картинки одинакового размера, ряды одинакового размера, в рядах одно и то же количество фотографий, человек, который на это смотрит, не понимает, что тут главное, а что второстепенное. Куда смотреть в первую очередь и на что обратить внимание — непонятно.

Посмотрите на дом и скажите, интересно ли рассматривать окна.


А теперь посмотрите на другой дом. Интересней?


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

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


Чтобы улучшить вёрстку, мы с Катей Пышко нарисовали несколько макетов, определили, лекции каких экспертов пользуются большим спросом среди студентов, и посчитали, сколько потребуется времени, чтобы посмотреть все вебинары. Потом долго двигали и меняли местами, увеличивали и уменьшали фотографии, чтобы подписи визуально подружились со своими снимками: так мы избавились от случайных соответствий — это когда текст относится к одной картинке, а кажется, что к другой.


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

Вот ещё пара примеров. В магазине студии Лебедева плакат «Суша» занимает место доминирующей иллюстрации. Фотография «Кулонуса-1» намного мельче — на неё мы смотрим во вторую очередь. В последнюю очередь бросаем взгляд на кофейные капсулы. Управление вниманием в действии.

«Магазинус» Лебедева

Голландский магазин кроссовок «Сникердистрикт» отказался от одинаковых квадратных фотографий и разбавил их крупными снимками. Так продавцы привлекают наше внимание к моделям, которые они хотят продать побыстрее.

Интерфейс «Сникердистрикта»

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


Что запомнить
1. Одинаковые ряды с фотографиями — это плохо. Одинаковые ряды с подписанными фотографиями — лучше, но скучно. Ряды с подписанными фотографиями разного размера — красота.

2. Нельзя один раз сверстать лендинг и не улучшать его месяцами. Докручивайте продукт постоянно.

См. также:
Избавьтесь от слайдера
Убрать жир
Как формулировать заголовки на лендингах

2018   лендинг   Маркетинг

Рассылка статей прямо в месенджер. Раз в неделю, без спама.

Как формулировать заголовки на лендингах

редактор Ольги Шевченко

Сначала о том, как не надо:

  • «Эта программа подойдёт»,
  • «Курс для вас, если вы»,
  • «Вебинар поможет понять»,
  • «На встрече вы узнаете»,
  • «In 30 days you will».

У таких заголовков есть кое-что общее: они все не заголовки. Это начало предложения, которое автор вынес вверх и оформил крупным шрифтом. Визуально — заголовок. На деле — разорванная фраза.

Вот что получится, если сделать такими все заголовки на странице про финтес-клуб:

  • «У нас вы получите»,
  • «К нам приходят»,
  • «В клубе есть тренажёры для»,
  • «С нами вы достигнете»,
  • «Дополнительно посетители получают».

Беда в том, что заголовки в таком виде не выполняют свою главную функцию — навести структуру и помочь читателю сориентироваться на странице. С хорошими заголовками читатель листает этажи лендинга и понимает, где искать нужную информацию. С плохими структура получается неочевидная, ориентироваться сложнее.

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

Сигнальный

Такой заголовок как бы сигнализирует читателю: «Эй, вот тут у нас целевая аудитория, а тут список услуг». Он однозначно отвечает на вопросы «что внутри?», «о чём это?». Формулировать их, как раз плюнуть: просто скажите, о чём этот раздел.

Не заголовок Сигнальный
Эта программа подойдёт Для кого
Кто учится
Кому подойдёт
Вебинар поможет понять Ваш результат после вебинара
Что вы поймёте после вебинара
Зачем идти
В клубе есть тренажёры для Тренажёры
Виды тренажёров
Тренажёры для новичков

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

  • Кто учится
  • Кто преподаёт
  • Как проходит обучение
  • Кто в команде
  • Расписание занятий
  • Гостевые лекции
  • Сколько стоит

Скажи, что внутри

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

Запомните: знак вопроса в заголовке — дурной тон.

Новостной

Этот заголовок сходу вываливает на читателя главную мысль. Так обычно делают журналисты-новостники: для них заголовок — это сама новость в сжатом виде. Он отвечает на вопросы: «что случилось?», «в чём суть?». Вот примеры из моей практики, когда я работал в информационном агентстве:

  • В Казахстане наблюдается нехватка квалифицированных топ-менеджеров
  • В Астане задержан гражданин Китая, разыскивавшийся на родине за махинации в банковской сфере
  • Около трети казахстанцев не пользуются интернетом — опрос
  • Казахстанские «зелёные» призывают мужчин не дарить женщинам подснежники

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

Чтобы использовать приём на промостраницах, выделите главное из каждого блока, чтобы в заголовке оказался вывод или заявление, а дальше в тексте — доказательства. Вот как изменились бы заголовки на сайте Helppy, будь они новостными.

Сигнальный Новостной
Кто учится Курс для тех, кто хочет зарабатывать удалённо
Кто преподаёт Преподаватель — Ольга Шевченко
Как проходит обучение Курс состоит из видео-уроков, домашних заданий и персональной работы
Кто в команде В команде — лучшие выпускники курса и сноб-журналист
Расписание занятий Студенты получают видео-уроки каждый день
Гостевые лекции Лекции для студентов читают лучшие эксперты рунета
Сколько стоит У нас самые беззубые цены

Новостные заголовки лучше привлекают внимание, но хуже структурируют страницу. С ними ориентироваться на лендинге сложнее, зато главные мысли лежат на поверхности. Прочёл заголовок — и уже знаешь суть. Если нужны доказательства или подробности, читаешь дальше. Если вопросов нет, идёшь к следующему заголовку.

Скажи, в чём суть

2017   лендинг   Маркетинг

Рассылка статей прямо в месенджер. Раз в неделю, без спама.

Плакат «Синтаксис кнопок на сайтах и промостраницах»

редактор Ольги Шевченко

Идёт четвёртая неделя 15-го потока Helppy — в это время студенты верстают посадочные страницы. Чтобы помочь им сделать правильные кнопки, я подготовил плакат. И вы забирайте.


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

Скачайте ПДФ, 885 Кб

или Джипег, 2,3 Мб

2017   вёрстка   лендинг   Разное

Рассылка статей прямо в месенджер. Раз в неделю, без спама.

Избавьтесь от слайдера

редактор Ольги Шевченко

Статья для тех, кто верстает или хочет научиться верстать лендинги и сайты. Моя цель — помочь вам понять, что удобство пользователей главнее эстетики и модноты. Чтобы доказать это, я обращусь к психологии и легендам дизайна интерфейсов.

Картинка для Фейсбука

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

Это выглядит так:

Домашняя работа студентки 14-го потока Helppy

Почему слайдеры не работают

Беда слайдеров в том, что на них никто не кликает. Согласно исследованию технического директора университета Нотр-Дама Эрика Руниона, только 1% посетителей кликает на карусели. При этом, на второй слайд кликают меньше, чем на первый, а на третий — меньше, чем на второй и так далее.

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

В 1954 году психолог Пол Фиттс опубликовал модель быстрого прицельного движения человека. Учёный вывел связь между расстоянием до цели, размером цели и временем прицеливания. Эта связь теперь называется «законом Фиттса».

«Закон Фиттса — общий закон, касающийся сенсорно-моторных процессов, связывающий время движения с точностью движения и с расстоянием перемещения: чем дальше или точнее выполняется движение, тем больше коррекции необходимо для его выполнения, и соответственно, больше времени требуется для внесения этой коррекции».
Википедия

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


В интерфейсах закон Фиттса повсюду. Обратите внимание, что, когда вы кликаете на ссылку в браузере на смартфоне, то всегда попадаете куда надо, даже если ссылка занимает несколько миллиметров. Это работает, потому что производители смартфонов знают закон Фиттса и делают кликабельной и саму ссылку, и область вокруг неё — так нам легче попасть.

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


Так вот, с точки зрения закона Фиттса заставлять посетителей сайта целиться в микрокружочки — форменное издевательство. Промахнёшься на миллиметр в одну сторону — попадёшь не на тот слайд, в другую — кликнешь на сам слайд, а не на точку.

Целиться в кружочки будут только биатлонисты

Стрелки назад и вперёд не спасают. Часто они тоже маленькие, а если побольше, то полупрозрачные, так что их легко не увидеть. Но даже если сделать крупными кружки и стрелки, у нас остаётся серьёзная проблема — привычка пользователей. Чтобы вы поняли, при чём тут привычки, я снова обращусь к теории, а на сцену выйдет Джеф Раскин. Он клёвый, потерпите.

Джеф Раскин разрабатывал интерфейсы в Эпле, инициировал проект «Макинтош» и написал книгу «Интерфейс: новые направления в проектировании компьютерных систем».

Раскин исследовал взаимодействие человека с машиной в разрезе познавательных механизмов нашей психики. Он доказал, что, когда мы пользуемся интерфейсом, вырабатываются привычки — действия, которые мы выполняем на автомате. Противостоять этому бесполезно, но привычки можно использовать, чтобы сделать интерфейс удобней. В своё время это перевернуло сознание дизайнеров.

Допустим, вы впервые кипятите воду в электрочайнике. Вы понятия не имеете, как это работает, поэтому будете делать всё медленно: сначала найдёте кнопку, которая открывает крышку чайника, нажмёте на неё, потом включите воду, наполните чайник, внимательно следя за уровнем воды. Потом аккуратно установите чайник на базу, покрутите, проверите, что всё стоит как надо, найдёте кнопку включения, нажмёте, убедитесь, что она загорелась, прислушаетесь к шипению, чтобы удостовериться, что всё работает.

Когда вы повторите это несколько раз, скорость увеличится. Ещё 100 вскипевших чайников — и вы будете делать всё автоматически. Параллельно сможете болтать по телефону, гладить кота и слушать музыку. Появится мощный ускоритель — привычка.


В интерфейсах привычки облегчают наше взаимодействие с программами. Пользователи Виндоуса знают: чтобы закрыть программу, надо кликнуть в правый верхний угол окна — в любой программе и в любом окне там будет красный крестик. У пользователей Маков другая привычка: чтобы закрыть окно, они кликают в верхний левый угол — там у нас тоже красный крестик. И те, и другие закрывают окна автоматически и не особо задумываются над своими действиями.

Меню большинства программ построено по одной схеме. Сначала «Файл», потом «Правка», потом «Вид». Последний пункт — «Справка». Если поменять местами «Файл» и «Правку», мы будем постоянно нажимать не туда, куда хотели, потому что привыкли к определённому порядку. Это как поменять педали газа и тормоза в машине.

Меню Сафари
Меню Фаиндера
Меню Айтюнса

При чём тут слайдер? При том, что в интернете у нас сложилась привычка скролить. Скрол — естественное действие, которое мы делаем на автомате. Эта статья идёт сверху вниз. Чтобы прочитать её, вы скролите, на задумываясь.

Прокрутка — это как ходьба пешком. Вот вы зашли в торговый центр за подарком для племянника. Сначала вы осмотритесь, прогуляетесь мимо бутиков и фудкорта, поднимитесь на второй этаж, ещё раз осмотритесь и только потом куда-нибудь зайдёте. Прогулка ни к чему не обязывает. Вокруг не кружат консультанты, никто на вас не давит. Вы расслаблены и не задумываетесь над каждым шагом.

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

Скрол Клик
Прогулка, чтобы осмотреться Решение войти в дверь
На автомате Осознанно
Ни к чему не обязывает Требует дополнительной мотивации

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

Дураков нет, мы тут погуляем, съедим какую-нибудь гадость в Макдональдсе, а потом уже кликнем

Чем заменить слайдер

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

Многоколонник
Подойдёт для компактных смысловых единиц. Если на слайдах описание сегментов целевой аудитории, помещаем каждый сегмент в отдельную колонку.

Было:

Стало:

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

Этажи
Грубо говоря, тут мы берём слайды и располагаем их не в ряд, а по порядку сверху вниз. Тот случай, когда самое простое решение одновременно самое эффективное.

Было:

Стало:

Когда вы вытащите содержимое слайдера в основную часть страницы, поймёте, что карусель вас ограничивала своим форматом. Окажется, что формулировки можно расширить и разжевать то, что было скомкано. Теперь есть место, чтобы подкрепить факты цифрами или цитатами, а иллюстрации — подписать.

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

Лучше описать продукт слишком подробно, чем всё скомкать и спрятать за клик

Чтобы научиться вёрстать лендинги, приходите на курс Helppy. Обучение комплексное: линейки продуктов и воронки продаж, маркетинг в соцсетях, основы дизайна, копирайтинг, вёрстка презентаций и промостраниц, настройка рекламы в Фейсбуке, работа с клиентом, управление временем и проектный менеджмент.

Во время курса и после — помощь в трудоустройстве, от которой не отвертеться.

См. также:
Как верстать фотографии на лендинге

2017   лендинг   Маркетинг

Рассылка статей прямо в месенджер. Раз в неделю, без спама.

Убрать жир

редактор Ольги Шевченко

Совет тем, кто верстает сайты, промостраницы и презентации: не выделяйте жирным всё подряд.

Анонс олиного вебинара о делегировании на сайте партнёров

У меня есть три причины, почему не надо так делать.

1. Усложняет чтение

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

20% усилий... 80% прибыли... Делегируйте... деньги

Это не работает. Приходится возвращаться к началу абзаца и читать по порядку. Как-будто вам звонят из чилийской деревни во Владивосток. В трубке шипит, поэтому вы слышите только обрывки фраз. Придётся перезванивать:

Здесь так кру... пшшшшш... я сейчас... пшшшшш... светло... пшшшшш... баклажан!

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

Беспорядок Порядочек
Помните принцип Парето? Только 20% усилий приносят 80% прибыли. Хотите повысить продажи? Делегируйте 80% рутины и займитесь теми задачами, которые действительно приносят вам деньги! Помните принцип Парето? Только 20% усилий приносят 80% прибыли. Хотите повысить продажи? Делегируйте 80% рутины и займитесь теми задачами, которые действительно приносят вам деньги!

Жирный текст должен быть самостоятельным

2. Не продвигает в поиске

Недавно посмотрел вебинар по СЕО, который Наталья Билюга провела для выпускниц Helppy. Оказывается, несколько лет назад Гугл лучше индексировал статьи, в которых ключевые слова выделены жирным. Такие страницы имели больше шансов попасть в топ выдачи.

Всё встало на свои места. Я не мог понять, почему маркетологи так любят выделять обрывки фраз, а выяснилось, что это старый сеошный лайфхак. Плохие новости: он больше не работает. Выделяйте хоть каждое второе слово — это не поможет попасть на первую страницу выдачи.

Гуглу плевать

3. Не становится важным

Когда пишете о чём-то важном, это не станет ещё важнее только потому, что оно жирное. Если я хочу сказать, что я против войны, выделение не поможет сделать утверждение сильнее. Какая из двух фраз убеждает больше?

Считаю, что война — это плохо Считаю, что война — это плохо

Важность моих убеждений не стала ещё важнее во втором варианте. И наоборот: если выделить фигню, она не перестанет быть фигнёй.

Вредно заниматься спортом Вредно заниматься спортом

И первый, и второй варианты — чепуха. Даже если выделить цветом или залить градиентом, который будет переливаться всеми цветами радуги, всё равно будет чепуха, потому что заниматься спортом полезно.

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

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

В голове появляются образы: сложные отношения героев, седой мужчина, хирург, вынужденный работать шофёром, женщина, которую он безумно любит и которая никогда не верила в его чувства. Кундере даже не понадобилось ничего выделять.

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

Сильные мысли лучше жирных слов

Что делать

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

По понедельникам студенты собираются на лекцию в прямом эфире. В тот же день мы выкладываем запись занятия, чтобы её посмотрели ученики, которые не смогли присутствовать на уроке.
(...)
С понедельника по пятницу студенты изучают видео-уроки и дополнительные материалы в учебном кабинете. Уроки появляются каждый день по расписанию.
(...)
В пятницу преподаватель обсуждает пройденный материал и домашние задания лично с каждым учеником на сессии «Вопрос-ответ»...

Это позволяет читателю сориентироваться. Достаточно бросить взгляд на первые слова абзацев, чтобы понять структуру текста. Вот ещё пример оттуда же:

Прямой эфир по понедельникам. Студенты голосуют за время перед стартом курса.
Видео-уроки появляются в личном кабинете ученика каждый день вместе с дополительными материалами.
Домашние задания публикуются в личном кабинете ученика. Срок выполнения от трёх дней до недели.
Сессии «Вопрос-ответ» с 11:00 до 14:00 и с 17:00 до 21:00 по пятницам.

Структура рулит

P.S.: А ещё в беспорядочно жирном тексте хочется найти скрытое послание.

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

«Количество мест ограничено! Мы закроем регистрацию через сутки, поэтому поторопитесь. На самом деле, возможность посетить этот уникальный вебинар выпадает редко. Регистрируйтесь сейчас, чтобы не ждать много месяцев»

2017   лендинг   Маркетинг

Рассылка статей прямо в месенджер. Раз в неделю, без спама.