CSSのfloatプロパティーを使うと段落等を回り込ませることができる。これをうまく使うと段落の途中でぶった切って広告を押し付けられることをExcluded Ad Placement for Responsive Designという記事を読んで知った。よく考えればその通りなんだけど、最初どうなってるのか全然わからなかった。
広告に対して段落は回りこみをしようとするけど、広告が画面を占領しているので回り込みをするスペースがない。そこで広告の位置を広告の親要素に対し同じ方向にfloatさせた擬似要素を挿入して調節するようにし、この擬似要素に対してネガティブ・マージンを使うことで、広告の上に回りこみをするスペースを作ってやる。簡単に言うとこんな感じ。
狭い画面では広告の効果を高めるために位置を画面に対して固定することが多いけど、それだと貴重な画面を浪費し続けるので、ユーザーに強いフラストレーションを与え続けてしまう。このテクニックを使うと常にコンテンツに対して一定の位置に表示させることができるので、広告の効果を維持しつつ(維持できることを期待しつつ)画面を専有させないため、ユーザーに比較的優しそう。