Меню для лендинга. Полноэкранная прокрутка лендинга — дизайн лендинга. Как сделать такой дизайн лендинга

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

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

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

На статических баннерах используется одно изображение без движения. Это изображение может представлять собою просто картинку, фон или картинку с надписями, либо просто надписи. Изображение может быть как в формате jpg, так и в формате gif (если картинка с анимационными эффектами).

Анимационные (GIF-баннеры) представляют собой несколько последовательно идущих друг за другом изображений, которые сменяют друг друга и создают «эффект движения». Смена каждого изображения происходит последовательно с учетом выставляемой выдержки (задержки) времени каждого кадра. В данном виде баннера обычно используется несложный сценарий, плавность движений в нем зависит от количества промежуточных кадров, дающих визуальный эффект движения. Но при этом чем сложнее сценарий, тем больше «весит» баннер. Это тоже надо учитывать при создании анимационного баннера. Оптимальное количество кадров- 5-6 для такого вида баннеров.

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

Стандартные размеры баннеров
На сайтах обычно используются баннеры стандартных размеров. Баннеры бывают горизонтальными, вертикальными и квадратными. Я сделала картинки-шпаргалки, которые, надеюсь, помогут вам при создании баннера, и которые при необходимости вы сможете распечатать для себя. Кликните по ссылке с интересующими вас размерами баннеров и перед вами предстанет картинка!

Создание статического баннера для сайта
Для создания статического баннера вам пригодится фотошоп или любой другой графический редактор. Процесс создания достаточно прост и не требует больших усилий. Он состоит из следующих операций:
выбираем размер баннера,
приводим готовое изображение (фон, картинку, коллаж, анимированную картинку…) к размеру выбранного баннера,
делаем внешнюю обводку баннера,
пишем нужный текст,
сохраняем полученный баннер в формате jpg, png или gif.

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

Вот такой баннер я сделала для своего сайта в фотошопе.

Или можно воспользоваться бесплатным онлайн-сервисом

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

2- Меню «Макет» предполагает:
2.1 — выбор размера баннера (размер по умолчанию, ваш индивидуальный размер баннера и стандартный размер баннера из выпадающего списка),
2.2 — выбор фона баннера: однотонный фон с выбором нужного вам цвета; фон градиентный- можно выбрать любой из предложенного списка; фон (картинка, фон, коллаж) ваш, который можно загрузить с вашего компьютера.

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

4- Выбираем меню «Текст»

4.1 — в поле «текст» вводите построчечно необходимый вам текст,
4.2 – затем подбираете параметры шрифта: название, размер, цвет шрифта, а также поворот текста для каждой строчки введенного вами текста.
Нажимаете кнопку 3 и двигаете на самом баннере текст так, как вам больше нравится. Когда вы расположили текста так, как вам нужно, опять нажимаете кнопочку 3 и переходите к следующему пункту.

5- Меню «Воздействие». Перевод неправильный. Я бы назвала эту закладку выбор эффекта для текста. В данной закладке подбираете тень для каждой строчки текста вашего баннера. После нажатия кнопки 3 – видите эффект.

6- Меню «Пограничная». Опять же «деффект» перевода. В данной закладке вам предлагается выбрать окантовку вашего баннера (рамочку).

7- Меню «Формат». Выбираете формат, в котором вы хотите сохранить свой баннер.

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

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

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

11- Нажав кнопку «Получить коды» вы увидите код баннера, который вы можете скопировать и затем вставить непосредственно на свой сайт или в свою статью.

Вот на сегодня и все. Успехов вам!
Я сделала вот такой простой баннер при помощи вышеуказанного онлайн сервиса буквально за 2 минуты.

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

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

Статический и динамический баннеры

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

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

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

Характеристики Размер

В принципе, баннер может иметь какие угодно размеры по вертикали и горизонтали - это ведь всего лишь рекламная картинка! Но, как и все в этом мире, эти размеры подверглись стандартизации, в результате которой сегодня возможно выделить несколько основных типов. Наиболее распространенными являются образцы 468х60. Благодаря удачному подбору размера сторон, такие рекламные картинки имеют хороший отклик и, кроме того, прекрасно встраиваются в "шапки" большинства страниц Сети. Размеры 125х125, 120х90, 120х60 чаще всего встречаются на страницах слева или справа в колонке меню сайта. "Кнопки" (88х31) выносятся обычно вниз страницы.

Технология изготовления

Кроме различий по размеру, баннеры могут отличаться технологией изготовления. Раньше поддерживались формат JPEG и такой же статичный GIF стандарта 87а. Позже появился новый формат графики для Web - PNG (Portable Network Graphics), который позволял использовать достаточно большое количество цветов и выдавал при этом маленький исходный размер файла. Самый распространенный и самый древний формат - GIF. Он лучше всего подходит для не анимированных или несложных анимированных баннеров. При использовании GIF-формата размер очень мал (что хорошо, поскольку тогда повышается вероятность того, что пользователь прогрузит баннер до конца).

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

Что такое баннер? Основные виды баннеров В наружной рекламе В спорте

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

Баннер в интернете - что это такое и зачем он нужен

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

Для чего нужен баннер?

Основной задачей баннера является привлечение внимания посетителя сайта. А вебмастера, те ребята, у кого есть собственные раскрученные веб-ресурсы. Как раз-таки они размещают баннеры для того, чтобы на них зарабатывать. У некоторых, баннерная реклама — это основной источник прибыли.

История появления баннеров

Первый баннер в интернете появился очень давно, в прошлом тысячелетии, когда поисковых систем Яндекс и Google еще не существовало. По заверению старых пользователей, первый баннер появился в интернете в 1994 году. Статическая картинка со встроенной ссылкой рекламного сайта.

По такому изображению кликали постоянно, потому что это было что-то новое, незнакомое.

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

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

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

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

Виды баннеров в интернет-рекламе

Любой из типов баннера — это графическое изображение в формате GIF или JPEG. Картинка на них может быть, как статической (неподвижная в формате jpg), так и анимированной (движущаяся в формате gif, эффект движения в таком баннере создается благодаря чередованию нескольких картинок).

Различают три типа баннеров:

• Статичные баннеры - одно графическое изображение, как и было в начале.
• GIF-баннеры - последовательность растровых кадров, сменяющие друг друга в определенном интервале времени. Это более сложный баннер, требующий определенных навыков для своего создания. Разумеется, по весу он будет тяжелее статичного изображения.
• Flash-баннеры или Java - такие блоки рекламы можно сделать в программе Adobe Flash. Используется не растровая графика, а векторная графика, что позволяет получать анимацию при небольшом весе баннера. Интересной возможностью данного типа считается возможность использования звуковых эффектов.

Где заказать баннер?

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

Типы и размеры баннеров

Баннеры бывают разные, лично я представляю в голове такой небольшой прямоугольный баннер над статьей 468 x 60 px. Раньше их часто размещали на сайтах.
Итак, по размерам баннеры разделяют на:

• Горизонтальные прямоугольники: 728 x 90, 468 x 60, 234 x 60, 88 x 31, 120 x 60, 120 x 90.
• Вертикальные прямоугольники: 300 x 600, 160 x 600, 120 x 600, 120 x 240, 240 x 400.
• Квадраты: 250 x 250, 125 x 125.
• «Почти квадраты»: 336 x 280, 300 x 250, 180 x 150.

Основные задачи баннерной рекламы

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

• Сперва необходимо привлечь внимание к продукту, делая упор на отображающуюся картинку - тем самым рекламодатель пытается не просто привлечь внимание к товару, происходит работа по формированию положительного образа в головах массы.
• Изображение или анимация может вызвать интерес, заинтересовать потенциального клиента.
• Существует множество фишек по привлечению аудитории, одна из них — это недосказанность. Например, будет написано: вы удивитесь, что стать миллионером за месяц можно, если…», таких примеров тьма. Главное заставить сделать клик по баннеру и совершить полноценный переход.
• Бывает, достаточно одного лишь качественного полного содержания, чтобы побудить пользователя к действию. Кому-то интересна тема изучения веб-программированию, а в баннере про это как раз-таки говорится (бесплатный курс веб-программирования для новичка). В таком случае, человек кликает, потому что его это заинтересовало.Никаких рекламных трюков, только информация.
• Бывает устанавливают баннеры не для того, чтобы по ним кликали, а для того, чтобы просто узнавали.

Как сделать баннер?

Это тема для отдельной статьи, поэтому скажу лишь, что его можно сделать при помощи стандартного Paint, фотошопа или онлайн-сервиса http://bannerovich.ru.

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

width=»200″ height=»200″ /> — это ширина и высота. Разумеется, баннер должен быть нарисован в таких же размерах.

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

Навигация дает ощущение контроля, что само по себе неплохо. Но как быть с правилом «одна страница — одна цель»? На этот вопрос нет однозначного ответа (как и на большинство вопросов оптимизации), но есть несколько отличных кейсов, которые помогут принять решение.

Оптимизация посадочной страницы

Лендинг — неотъемлемая часть стратегии увеличения прибыли. В среднем, объем лидов повышается на 55%, когда компании увеличивают количество посадочных страниц. Вместе с тем, исследования показывают, что только 22% компаний удовлетворены своим .

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

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

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

Кейс «за» навигацию

• понимать свое местоположение;
• легко переходить к другим разделам.

Существует три типа навигации:

• основная;
• локальная;
• контекстная.

Этот тип представляет собой основное меню сайта. Каждый элемент в нем ведет на конкретный раздел ресурса. Хедер на странице Edgar — пример основной навигации:

Локальная навигация

Это подразделы основной навигации в формате выпадающего меню, структурирующих информацию. Такое меню есть на лендинге Zoho, упомянутом выше.

Контекстная навигация

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

По данным WordStream, целых 96% посадочных страниц содержат хотя бы одну ссылку, уводящую посетителя. Цифры говорят:

• только на 4% посадочных страниц вообще нет ссылок;
• 81% страниц содержит от 1 до 9 ссылок;
• 14% использует более 10 навигационных элементов.

Размещение ссылок позволяет решать задачи, отличные от основной цели лендинга. Например, кнопки соц. сетей повышают число подписчиков.

Примером возьмем страницу Meltwater.

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

Кейс «против» навигации

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

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

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

Например, на лендинге Better Homes and Gardens’ sweepstakes велика вероятность, что посетитель захочет узнать о Meredith Corporation подробнее и свернет с пути, ведущего к нажатию CTA-кнопки.

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

Маркетологи хотели повысить показатели, но не решались переделывать страницу целиком, опасаясь потерять доверие покупателей. Было принято решение убрать строку навигации, что сделало страницу более упорядоченной и привело к увеличению конверсии на 30-40%. Вот отличия двух страниц:

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

Данные показывают, что удаление всех навигационных ссылок повысило преобразования.

Особенно интересно, что исключение навигации из середины воронки конверсии (conversion funnel) дало рост на 16% и 28%, а из верхней части воронки — 0-4%.
Когда команда Minders протестировала свой лендинг и убрали панель навигации, за месяц конверсия выросла с 9,2% до 17,6%.

Тест номер четыре. Yuppiechef — ведущий онлайн магазин по продаже кухонных принадлежностей премиум-класса, находящийся в Южной Африке. Они тестировали удаление панели навигации, чтобы посетители не отвлекались от основной задачи конверсии — регистрации для создания онлайн-списка подарков на свадьбу.

Вот что вышло после удаления панели навигации:

Этот вариант поднял конверсию до 100%.

Когда на лендинге нет посторонних ссылок (кроме CTA-кнопки), пользователя ничего не отвлекает от основной задачи. Лендинг пейдж без ссылок сосредоточена на одном действии, значит и посетитель обратит внимание на него. Но навигационные ссылки не просто отвлекают внимание — они чреваты материальными потерями.

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

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

На странице Conversion XL agency есть такое меню, которое позволяет двигаться по лендингу без прокрутки.

Если на странице много информации, меню в хедере позволит сразу перейти к необходимому разделу. Это удобнее бесконечной прокрутки разделов.

Так работает страница Google App:

Заключение

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

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

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

Привет друзья, коллеги! Как ваши дела? Надеюсь у всех все здорово:) Сегодня будем делать простое адаптивное меню для наших landing page. Все чаще спрашивают об этом, а я подобные вопросы записываю в и стараюсь в свободное время писать на эти темы статьи.

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

Как сделать адаптивное меню для сайта

Google подтвердил, что с середины апреля одним из факторов ранжирования станет адаптивность сайта под мобильные устройства. В связи с этим все материалы о том, как сделать ваш landing page адаптивным — как никогда актуальны. Я не буду сегодня городить что-то сложное, а наоборот, расскажу, как сделать очень простое адаптивное меню с минимумом затрат времени.

В основном это будет html + css, но понадобится совсем маленький скрипт, для обработки клика. Итак…

Адаптивное горизонтальное меню

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

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

Скачать прайс

Контакты

Отзывы

Как видите — ничего сложного, думаю, по мере необходимости вы сами сможете усовершенствовать его.
Теперь давайте добавим стили:

#menu { background: #2ba9c0; width: 100%; padding: 10px 0; text-align: center; } #menu a { color: #fff; text-decoration: none; padding: 12px 12px; } #menu a:hover { border-bottom: 4px solid #fff; background: #078ecb; } .itemsMenu li { display:inline; padding-right: 35px; width:100%; margin: 0 auto; } .itemsMenu li img{ vertical-align: middle; margin-right: 10px; } .iconMenu { color: #fff; cursor: pointer; display: none; } .showitems { display:block !important; } @media screen and (max-width: 600px) { #menu a{ padding-bottom: 13px; } #menu a:hover { border-bottom: none; } .iconMenu { display:block; } .itemsMenu { display:none; } .itemsMenu li { display:block; padding:10px 0; } }

Теперь, при уменьшении окна браузера вы увидите следующую картину:

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

Сначала элементам li задаем свойство display:inline, чтобы сделать их расположение горизонтально друг за дружкой. Можно было бы использовать float:left, но решил таким образом сделать. И скрываем иконку меню свойством display:none. Когда разрешение экрана меньше 600 пикселей, убираем inline, у элементов li, и скрываем их, а показываем иконку. В двух словах — так.

Теперь нам нужен простенький скрипт, который бы обрабатывал клик по иконке меню и показывал бы его элементы:

$(function() { $(".iconMenu").click(function() { if($(".itemsMenu").is(":visible")) { $(".itemsMenu").removeClass("showitems"); } else { $(".itemsMenu").addClass("showitems"); } }); });

Вот так. Я его вынес в отдельный файл и подключил перед закрывающимся тегом body.

Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page.

Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт:) Надеюсь все понятно? Пока.