Дыра после рекламы: Куда пропадает контент, или Что творится с версткой?

Содержимое статьи:

• В чем проблема?
• Возможные причины:
• Что нужно делать? (С точки зрения разработчика)
• Как это выглядит с точки зрения пользователя (пример):
• Список "грехов" верстки:
• Важные моменты для тестирования:

Многим знакома ситуация: смотришь видео, читаешь статью, и вдруг... реклама. Ладно, пережили, закрыли крестик. Но что это? Огромная пустая область! Куда делся контент, который должен быть ниже? Давайте разбираться.

В чем проблема?

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

  Возможные причины:

• Неправильная верстка:
• Использование устаревших методов верстки (таблицы, фиксированные размеры).
• Отсутствие адаптивной верстки, которая подстраивается под размеры экрана.
• Некорректное использование position: absolute или position: fixed для рекламного блока.
• Проблемы с JavaScript:
• Скрипт, отвечающий за удаление рекламного блока, не обновляет положение других элементов.
• Ошибки в скрипте, приводящие к неправильной работе DOM (Document Object Model).
• Конфликты CSS:
• Несовместимость стилей рекламного блока и остального контента.
• Переопределение стилей, приводящее к неожиданному поведению.
• Проблемы с Ad-сервером:
• Ad-сервер не корректно сообщает об удалении рекламного блока.
• Задержка в обновлении контента после закрытия рекламы.
  

  Что нужно делать? (С точки зрения разработчика)

  1. Тщательно проверять верстку: Использовать современные методы, адаптивность и избегать фиксированных размеров, где это возможно.
  2. Писать надежный JavaScript: Тестировать скрипты на разных устройствах и браузерах, обрабатывать ошибки.
  3. Обращать внимание на CSS: Избегать конфликтов стилей, использовать префиксы и следовать стандартам кодирования.
  4. Тестировать интеграцию с Ad-сервером: Убедиться, что ad-сервер правильно взаимодействует с сайтом и не вызывает проблем.
     

     Как это выглядит с точки зрения пользователя (пример):

  5. Открываю статью "Как правильно варить пельмени".
  6. Читаю первый абзац.
  7. Вдруг появляется реклама "Купите наши самые вкусные пельмени!".
  8. Закрываю рекламу.
  9. Вижу пустую область. Где второй абзац?!
     

     Список "грехов" верстки:

• Не использование flexbox или grid для организации контента.
• Использование display: none вместо visibility: hidden (в некоторых случаях).
• Привязка к фиксированным координатам вместо относительных.
  

  Важные моменты для тестирования:

• Разные браузеры (Chrome, Firefox, Safari, Edge).
• Разные устройства (десктоп, планшет, смартфон).
• Разные операционные системы (Windows, macOS, Android, iOS).
• Разные разрешения экранов.