Крупный проект — новый уровень!

Global-Info-Congress

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

Этому способствуют и накопленные знания и приобретённые полезные привычки и готовность брать на себя больше ответственности.

Среди моих клиентов есть человек, с которым мы реализовывали вместе большое количество продающих страниц, страниц захвата и прочих вещей. Этим прекрасным человеком является Ольга Трошина. Очередным проектом, которые планировалось реализовать совместно — была страница на Global-Info-Congress — мероприятие об инфобизнесе, с большим количеством именитых спикеров, которое должно привлечь также и большое количество аудитории.

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

Весь html-код был написан мной с нуля (на прошедшей конференции Трафик-2013 Олесь Тимофеев, как один из родоначальников подобного движений, говорил о том, что полное копирование ресурса убивает доверие к организаторам и я лишний раз убедился, что мы пошли верным путём).

Global-Info-Congress - продающая страница / страница захвата

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

Помимо красоты оформления внутренней и внешней — также всё максимально оптимизировано таким образом, что изображения используются в минимальном количестве!

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

Наклон фотографии CSS

 

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

Линейная форма подписки CSS

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

Разделающий заголовок с градиентом CSS

В данном случае всё тоже достаточно просто — «стеклянный» градиент сделан с помощью цифр и букв и растягивается на любую высоту и длину в любой момент без использования графического редактора (читай Photoshop). Надписи соответственно также в любой момент можно поменять.

Блок с тенью на CSS изображение лишь скрепка в левом верхнем углу

 

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

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

После проведения рекоменуемых работ программа оценила скорость загрузки страницы на 90 из 100 баллов!

Не забыл я и про социальные кнопки, привёл их по максимуму к единому стилю и проверил работоспособность. Разочаровывала только кнопка facebook, которая при нажатии на неё выводила окно для ввода сообщения за пределами окна.  Как так получилось. На нашей странице захвата социальные кнопки прикреплены к нижней части страницы и ездят по ней, куда бы пользователь не пролистнул. При этом, когда вы нажимаете на кнопку facebook  «нравится», то окно, для написания подробного мнения появляется ПОД КНОПКОЙ. Так устроена кнопка «нравится» у facebook и она не чувствует границ экрана.

Первым решением было убрать отображение этого окна, чтобы оно не смущало пользователей, но после 2-3 часов рысканья по зарубежному интернету (в рунете инфы на этот счёт не нашёл вообще) были найдены различные реализации и лучшую из них я применил на сайте:

Кнопка Like (нравится) у нижнего края страницы

Таким образом кнопка «Нравится» скачет теперь вверх, на время написания комментария и потом возвращается обратно, когда окно будет закрыто.

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

Второй причиной была конечно же лень и желание минимизировать временные затраты 🙂 Если результат один и тот же, то зачем тратить больше времени, не правда ли? 😉

В проекте есть и другие интересные «фишки», которые упрощают работу всей страницы и человека, который с ней работает.

Например:
Если необходимо поменять канал подписки в форме подписки, то это не придётся делать во всех формах, достаточно будет лишь в одном месте прописать новое значение.

То же самое касается и дизайна форм. Если нужно поменять дизайн формы, то не надо будет копировать десять раз заново форму. Достаточно будет сделать это лишь в одном месте и все формы, отображаемые на странице, изменят свой дизайн — это ли не праздник автоматизации? 🙂

Надеюсь, что вам понравилась эта статья и если это так — жмите кнопки «Мне нравится» в подтверждение этого 😉

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

Цены на мои услуги и вы можете просмотреть в разделе «Услуги» или «Обучение и Консультации«.

До встречи в новых постах 😉

Копируйте с умом!

Хорошие художники копируют, Великие художники крадут!

Пабло Пикассо

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

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

primer-peremennyh2

 

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

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

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

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

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

Быстро меняем данные на страницах захвата

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

Для работы данного способа у файла должно быть расширение .php, а не .html и сервер при этом должен поддерживать php.


 

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

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

Но даже если вы пользуетесь поиском с помощью сочетания клавиш ctrl+f (подробнее о сочетаниях клавиш), то это занимает время.

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

peremennye

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

В самом коде подстановка данных выглядит следующим образом:

peremennye-in-code

Сами же страницы при этом могут выглядеть следующим образом: 

primer-peremennyh2

 

или

primer-peremennyh1

 

При этом весь текст, отображаемый на странице — вы можете быстро изменить в самом начале всего кода.

Повторюсь — этот метод не для тех, кто не знает, что он делает. Для тех же, кто понимает — это удобная фишка для ваших будущих творений 😉

Удобство ваших партнёров — ваша постоянная забота

Именно под этим девизом мы и начали переделку партнёрской программы в проекте Всеволода Татаринова — «Секреты успеха от долларового миллионера»

Я взял на себя всю ответственность по переделке проекта.

До начала работы была известна следующая информация:

  • Мы знали, что не нравится пользователям
  • Я знал, что можно реализовать иначе и лучше, чем есть сейчас
  • Мы хотели увеличить поток новых партнёров и соответственно прибыли за счёт привлекательной партнёрской программы

Основываясь на этих знаниях — мы сделали следующее:
1
С этого момента приведённый клиент, купивший заказ по партнёрской ссылке — НАВСЕГДА запоминается за этим партнёром.

Логика следующая: если вы привели клиента и он покупку не совершил — значит вы не убедили его в том, что покупка того стоит. Но тем не менее, если пользователь будет использовать тот же компьютер и тот же браузер для совершения покупки, то клиент останется за вами. Если же клиент будет использовать другое устройство и перейдёт по чужой ссылке, то комиссионные уйдут другому человеку. В случае же, если вы привели клиента на сайт и он КУПИЛ по вашей партнёрской ссылке — значит вы всё правильно сделали и заслуживаете того, чтобы получать пожизненно комиссию со всех заказов этого клиента, т.е., даже, если клиент будет совершать покупку с другого устройства и будет переходить по чужой партнёрской ссылке, то комиссионные всё раыно получите вы.

2
Мы изменили дизайн главной страницы партнёрской программы и страницы рекламных материалов.

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

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

3
Увеличивающийся партнёрский процент

procent-up

 

Теперь, чем больше клиентов приведёт партнёр — тем больше будет его партнёрский процент — всё просто!

4
Соревнования между партнёрами

Вознаграждение для лучших партнёров

 

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

5
Продукты недели

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

weeks-products

Таким образом им достаточно лишь один раз добавить такой виджет и он постоянно будет меняться.

6
Новая страница рекламных материалов.

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

7
Краткое обучающее видео

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

8
Автоматическое создание партнёрских ссылок

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

Теперь же, когда партнёр переходит по ссылке «Рекламные материалы» из своего партнёрского аккаунта, то ко всем материалам приписывается его партнёрский идентификатор АВТОМАТИЧЕСКИ!

link-partner

На презентации люди говорили о том, что раньше, кто-то не пользовался партнёркой именно из-за этого неудобства, а те, кто ещё не были нашими партнёрами — отметили, что это очень удобное нововведение!

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

other-link

 

Всё это я также описал в обучающем видео.

9
Отображение всей информации о рекламируемом товаре на одной странице!

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

partners-pruducts

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

Эмоциональное равновесие в отношениях

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

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

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

Если же взгляды разные, то вы просто не подходите друг-другу и с этим ничего не поделаешь. Хотя, можно попробовать измениться, обращаю внимание ИЗМЕНИТЬСЯ, т.к. изменить другого человека вы не сможете, правда и менять себя тоже не каждый захочет.

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

Если же это происходит на постоянной основе, то причин может быть несколько, я приведу две:
1) Невзаимные чувства — банальное отсутствие каких-либо чувств, кроме ,возможно, физического влечения.
2) Эмоциональная истощённость — в современном мире люди выматывают себя как только могут: работой, учёбой, просиживанием в интернете и как следствие невысыпанием, ссорами (не важно с кем), обсуждением пустых, чаще негативных, новостей и так далее.

Таким образом, чтобы наполнить этого человека, другому надо отдавать много собственных сил, что в конечном итоге приведёт к истощению обоих.

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

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

Любите и будьте любимы!