Как узнать размер баннера на сайте в пикселях

Формат баннера: наиболее популярные рекламные виды на сайте

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

Общие сведения

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

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

Назначение баннера

Информационный блок может содержать разный контекст, но он обязан:

• Раскрыть суть коммерческой деятельности и ознакомить с предоставляемым сервисом.
• Дать ответ на главный вопрос пользователя и стимулировать его к коммерческим действиМедиафайлям – первичным и повторным.
• Уверить, что покупатель нуждается в предлагаемом товаре.
• Убедить в выгоде заказа услуг, выбора покупок именно на этом веб-сайте.

Первый раз подобный метод был применен в 1994 году – результат вышел ошеломительный. Количество кликов после акции, увеличилось на 44%, что было невероятно для того времени. Дальнейшее использование доказало высокую продуктивность этого приема.

Виды баннеров для сайта

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

По площадке

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

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

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

1. Внутренние ресурсы, целевые страницы заказчика.
2. Популярные веб-сайты с просторов Рунета.

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

Типы баннеров на сайте по размеру

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

Чтобы не выходить за рамки контрольных фильтров, лучше использовать стандартные пропорции, доказавшие свою высокую эффективность:

• 88 x 31 – самые миниатюрные версии.
• 278/728/970 х 90 – для «шапок» сайтов.
• 970 х 250 – горизонтальные билборды.
• 336 х 280 – большие прямоугольники, самые традиционные виды баннеров в интернете.
• 300 х 250 – прекрасно интегрируется с любыми платформами, в том числе и мобильными.
• 120/160 х 600 – горизонтальные «небоскребы», предназначенные для десктопов.
• 234/468 х 60 – применяются в самых видимых верхних областях, побеждает в рейтинге высоких показателей CTR.
• 300 х 600 – результативные, очень вместительные полстраничники.
• 100х100, 200 х 200 и 250 х250 – боковые квадраты. Первый вариант применяется с недавних времен, но уже заслужил популярность.

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

Форматы баннеров

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

• Векторные флэш элементы, файлы *swf от Adobe – невероятно красивы, имеют большой эффект воздействия. Много плюсов, но есть и минусы в плане реализации проектов, долгой загрузки.
• Яркие, статичные анимационные картинки *jpeg, *gif, *png. Отличаются быстрой адаптацией, не нагружают трафик.
• Сжатые клипы flv и видеоролики. Запускаются автоматически на линии глаз пользователя, пролистывающего страничку. Динамичный показ может идти непрерывно.
• Скользящая строчка с интересным текстом, контактной информацией.

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

Акцент на целях рекламной кампании

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

1. Имиджевое.
2. Стабилизационное.
3. Стимулирующее.

Нужно решить что важнее:

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

Секреты создания эффективных баннеров для рекламы в интернете

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

1. Удержать целевую аудиторию, сделать ее постоянной.
2. Показать основные преимущества флагманского продукта.
3. Придать новинке высокую степень информированности и популяризировать.
4. Обеспечить отличную наполняемость, кликабельность.
5. Провести ретаргетинг, вернуть колеблющегося покупателя и подвести его к логическому итогу, выбору.
6. Привлечь внимание к названию бизнес компании.

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

• Формат, метрические пропорции блока.
• Вид изображения, корпоративного логотипа.
• Метод размещения и места показа.
• Параметры отображения.
• Цвет текста, шрифт и сам контекст.

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

Размещение баннерной рекламы

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

• «Шапка», верхняя часть страницы.
• Свободные боковые поля.
• Промежутки между рубриками, разделами, абзацами.

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

1. Социальные площадки.
2. Поисковые выдачи.
3. Почту.
4. Партнерский бартер.
5. Мобильные приложения.

Также нужно учесть такие факторы, как поведенческий, временной и географический.

Преимущества заказа баннера

Можно выделить несколько основных плюсов:

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

Блокировщики показа баннерной рекламы

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

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

Перспективный рост

Появление запретов подвело маркетологов к принятию новых правил:

1. Качественная, разумная подача контекста.
2. Полная релевантность по отношению к УТП.
3. Соответствие тематике веб-ресурса.
4. Отказ от агрессивных красок, резко всплывающих окон.
5. Упор на скромность, органику, истину.

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

Дополнительные настройки

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

Скругление углов

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

• круг;
• овал;
• каплю;
• сглаженный квадрат.

Готовые картинки получают изящный, аккуратный и эстетичный абрис.

Отступы между баннерами

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

Баннерная навигация

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

Стрелки

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

• Вид слайда, фоновая подложка.
• Эффект выдвижения, вытягивания картинки.
• Геометрические формы круга, овала.

Пагинация

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

Если необходимо поменять дизайн и месторасположение

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

Можно ли сделать самому

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

Banner Boo

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

Crello

Также отличный онлайн-конструктор с готовыми шаблонами. Здесь можно подготовить картинки для социальных сетей, шапки для веб-сайтов и многое другое – для этого есть все необходимые инструменты. Программа доступна по подписке, стоимость которой 8 $ в месяц.

Готовые шаблоны

Воспользоваться уже созданными баннерными изображениями можно на специальных площадках, на которых многие компании предлагают свои товары и услуги. После регистрации в сети можно выбрать онлайн-магазин с предложениями готовых вариантов. Картинка имеет партнерскую ссылку с идентификатором. Чтобы добавить изображение на свой ресурс, нужно всего лишь скопировать код. Самыми популярными партнерскими площадками являются EPN и Admitad.

Заключение

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

Как узнать размер баннера на сайте в пикселях

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

Как выбрать правильную ширину сайта, или «Телевизор» вместо монитора

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

Что говорит статистика

Мы долго изучали статистические отчеты различных метрик с сайтов партнеров. Смотрели технические характеристики самых популярных мобильных устройств. Ситуация такова, что на рынке среди всех мобильных устройств стали преобладать большие сотовые телефоны, диагональ которых начинается от 5,5″ и заканчивается на 6,2″. Добавим сюда желание Apple выпустить к концу года на рынок продукт с диагональю 6,5″. И наш мозг начинает с трудом переваривать необходимость такой техники. В карман такое уже не положить, да и не в каждой сумке поместится. Однако если посмотреть на способы использования телефона современного смартфона. то становиться понятно зачем. Это странный факт:телефон вроде бы придумали для голосового общения, а используют его всё чаще как устройство для серфинга в сети Интернет. Говоря проще — современная тенденция — это хороший качественный мобильный телефон с отличным экраном, камерой и Интернетом. Это удобный «комбайн», просто надо раз в день заряжать.

Теперь о разрешениях. Самими популярными разрешениями остались 1366*738 и 1920*1080, Это не мобильные разрешения. А вот самым популярным мобильным разрешением стало 360*640. По факту это тройка лидеров.

Полная таблица с информацией по рынку такова:

Разрешение	Пользователей	Динамика
1366×768	21.15 %	-1.46%
360×640	18.28 %	+2.31%
1920×1080	12.29 %	-0.85%
1280×1024	6.94 %	-0.40%
1600×900	4.57 %	-0.23%
375×667	4.36 %	+0.48%
1024×768	4.08 %	-0.26%
320×568	3.83 %	+0.10%
1440×900	3.16 %	-0.19%
1280×800	3.08 %	-0.02%
1680×1050	2.03 %	-0.25%
768×1024	2.00 %	+0.07%
1536×864	1.93 %	+0.22%
320×534	1.84 %	+0.05%
320×570	1.62 %	+0.09%
1280×720	1.42 %	+0.04%
1360×768	1.05 %	-0.22%

Вывод

Рынок мобильных устройств не стоит на месте. Сегодня надо искать варианты для вложения средств в этот рынок.

Как узнать размер элемента сайта в пикселях

Как узнать размер элемента сайта в пикселях

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

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

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

Для измерения расстояний в браузере Google Chrome имеется расширение MeasureIt — «Линейка». Установить его можно по следующей ссылке, скопировав ее и поместив в строку браузера.

После установки расширения в правом верхнем углу браузера появляется соответствующий значок (рис. 2)

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

Нас интересует горизонтальный размер 300 пикселей. Для выхода из режима измерения еще раз нажимаем на значок с линейкой или на клавишу <Esc>. Далее в панели управления сайтом выбираем виджет «Текст», указываем в нем место расположения и размеры баннера (ширина баннера принимается равной 302 пикселя, чтобы учесть толщину границы области величиной в один пиксель),

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

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

Как узнать размер элементов сайта в pixel

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

Как задаются размеры

У большинства элементов в CSS есть такие параметры для работы с размером:

height, width — высота и ширина;

max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);

min-height, min-width — минимальная высота и ширина;

margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;

padding — отступы внутри элемента, например, если внутри будет написан текст.

Например, нам нужно нарисовать кнопку, внутри которой будет текст. Описание стиля кнопки может быть таким:

Перевод: кнопка должна занимать от 300 до 600 пикселей в ширину, а в этом диапазоне быть 75% ширины от содержащего ее контейнера; внутри кнопки отступи сверху 15 пикселей, справа 15, снизу 19, слева 15 (по часовой стрелке). Саму кнопку от ближайшего элемента сверху отодвинь на 20 пикселей, слева и справа отодвинь одинаково, чтобы она встала по центру, а снизу отступи еще 50 пикселей до следующего элемента.

Запись в стиле padding: 15px 15px 19px 15px — это короткий способ задать отступы по часовой стрелке. Первое значение — отступ сверху, второе — справа, третье — снизу, четвёртое — слева. Вместо короткой записи можно ещё так:

Но так обычно не пишут, потому что много текста.

Размеры в пикселях — жёстко, но точно

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

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

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

С пикселями есть только одна проблема: так как размеры и плотность пикселей на разных экранах разные, то может получиться так:

• на экране 5-дюймового телефона с разрешением 1920 на 1080 пикселей баннер шириной 200 пикселей получит размер в 5 сантиметров;
• а на мониторе с диагональю 24 дюйма, но с тем же разрешением 1920 на 1080 те же 200 пикселей будут иметь длину 10 сантиметров.

Чтобы было нагляднее, сделаем тестовую страницу с тремя блоками одинаковой высоты, но с шириной 100 пикселей.

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

В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах

Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:

• vh — это 1% от высоты окна;
• vw — это 1% от ширины окна.

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

В этом случае браузер сделает так:

1. Посмотрит, что за единица измерения — vw, значит нужна ширина экрана.
2. Узнает, какой ширины в пикселях окно, в котором открывается эта страница.
3. Поделит её на 100, чтобы узнать размер одного vw в пикселях.
4. Умножит это значиние на 50, чтобы понять размер в пикселях нужного нам элемента.
5. Установит это значение в пикселях при вёрстке.
6. Если в процессе просмотра у браузера поменяется размер экрана — он сам всё пересчитает и отрисует заново.

Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:

• первый блок — 10vw
• второй блок — 20vw
• третий — 50vw

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

Ещё есть vmin и vmax, которые работают так:

• vmin находит минимальное значение из пары (vh, vw);
• а vmax находит максимальное значение из пары (vh, vw).

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

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

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

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

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

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

• первый блок — 10%;
• второй блок — 20%;
• третий — 50%.

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

Нужно ли в этом разбираться?

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

Как узнать размер баннера в пикселях на чужом сайте?

Сначала можно выбрать, что приготовить: смузи или сок?

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

• Текстовые — просто текст без картинок и анимаций.

Кроме этих видов есть еще Pop-up—баннеры, которые всплывают в новом окне и Float-баннеры, закрывающие часть страницы. Также можно разделить все форматы баннеров по размерам.

Какие бывают размеры баннеров?

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

А здесь я прикреплю для вас шпаргалку с самыми используемыми форматами баннеров в рунете.

Как узнать размер баннера в пикселях на чужом сайте?

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

• Кликаете на баннер правой кнопкой мыши и, в открывшейся вкладке, выбираете последнюю строчку.
  В Chrome она называется «Просмотреть код», в Mozilla «Исследовать элемент». В других браузерах схожие наименования вроде «Проверить элемент» или «Просмотреть код элемента».

• После этого у вас справа или снизу откроется консоль с кодом, где будет выделена строчка с баннером. Наведите курсор на нее и в браузере над элементом появится размер. Либо вы можете просмотреть размер баннера в пикселях сразу же в коде, где width — это ширина, height — высота.

Почему разные форматы баннеров все еще востребованны?

Ну во-первых, потому что баннеры являются своего рода аналогом внешней рекламы в виртуальном мире. Они более информативны, дешевле и содержат прямую гиперссылку на сайт рекламодателя. Да и как я уже говорил, Adblock блокирует далеко не все рекламные постеры. На самом деле баннеры не так уж и бесят посетителей сайта при грамотном подходе к их использованию. Один российский спортивный портал каждый раз выводил вот такую картинку для посетителей с блокировщиками рекламы. И плюс ко всему делал страницу черно-белой. Продукт, выпускаемый эти сервисом, был настолько качественным, что около 90% пользователей действительно отключали расширения и продолжали просмотр ресурса.
Чуть позже сайт создал приложение, в котором при желании можно отключить рекламу за платную подписку. Ради хорошего чтива про любимую команду можно потерпеть любые форматы рекламы.

Как узнать размер элемента сайта в пикселях

Как узнать размер элемента сайта в пикселях

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

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

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

Для измерения расстояний в браузере Google Chrome имеется расширение MeasureIt — «Линейка». Установить его можно по следующей ссылке, скопировав ее и поместив в строку браузера.

После установки расширения в правом верхнем углу браузера появляется соответствующий значок (рис. 2)

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

Нас интересует горизонтальный размер 300 пикселей. Для выхода из режима измерения еще раз нажимаем на значок с линейкой или на клавишу <Esc>. Далее в панели управления сайтом выбираем виджет «Текст», указываем в нем место расположения и размеры баннера (ширина баннера принимается равной 302 пикселя, чтобы учесть толщину границы области величиной в один пиксель),

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

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