DEV Community

Cover image for Building for people with ad-blockers

Building for people with ad-blockers

Ben Sinclair
I've been a professional C, Perl, PHP and Python developer. I'm an ex-sysadmin. Back in the day, I had a geekcode which I'm not going to share with you. 418 I'm a teapot.
・2 min read

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

Discussion (2)

strredwolf profile image

There's one thing to keep in mind:

The big thing with the ads is that nobody (not the dev who puts the code in, nor the ad providers) checks if the ads are safe/legit. When I mean safe/legit, I mean "does not execute a ton of Javascript that makes browsers slow to a crawl or infect them with malware."

If you have set your ads to restrict to only images(no audio, no video, no Javascript, no Flash), and declare that with an "ad policy", you're more likely to have folks turn off the ad blocker. But if you insist on all the ads, you'll find more people blocking them, and you're fighting a losing battle.

millebi profile image
Bill Miller

... and don't forget that entire domains could be blocked by one of the many hosts files out there that maintain a list of "pure" advertising hostnames.