Building for people with ad-blockers

Ben Sinclair - May 3 '18 - - Dev Community

I'm going to assume that your website doesn't exist just for the presentation of adverts.

I'm going to assume that you want people to visit and have a nice experience regardless of whether a little commercial for a product they don't need appears or not. And that you're really not into selling tracking data as part of your core business.

You want people to see a site that works both with and without adverts.

Because sometime in your future you might disable adverts. Because you might provide a membership feature which hides them (a not-uncommon business strategy in 2018). Because the third-party service providing them might be down due to a network hiccup.

Maybe your site looks OK with an empty box or two on it - but maybe it would be better if you collapsed the space or allowed the remaining content to grow to full width.

You want people to see a site that works when people have ad-blockers enabled.

Sometimes your site will look bad when people visit with an ad-blocker because it's being triggered by false positive matches and thinks that your legitimate honest-to-goodness content is junk.

Don't think your potential clients aren't using ad-blockers. Or your existing clients. Or your boss.

I've seen broken navigation, broken carousels, that sort of thing. Aggregated scripts get blocked because of their file names or CDN host names matching a common pattern and suddenly nothing works at all.

I've seen things which work on your demo environments because, well, your clients turned off their ad-blockers for that domain when they were doing UAT last year. You remember that, right?

All this means using a bit of common sense - like avoiding class names which contain words like "banner" for structurally important DOM elements. If you're using a name like "banner" for an element, you might well be Doing It Wrong anyway, because that's really not all that semantic.

It means that when you test your site you make sure to use a blocker or two as well as testing it in your already vast array of legacy browsers. Just in case.

Cover image from hurley_gurlie182 at morguefile.com

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player