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

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 (нравится) у нижнего края страницы

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован.