search

TheTyee / design-article.thetyee.ca

Working in the open on The Tyee's new article page design
http://thetyee.github.io/design-article.thetyee.ca/
Creative Commons Zero v1.0 Universal
4 stars 0 forks source link

++ Adjusting layout for users running ad-blocking software #307

Closed phillipadsmith closed 8 years ago

phillipadsmith commented 8 years ago

The site looks odd for people running ad-blocking tools because the top section collapses and the visual balance to the right of the feature media is lost (see below).

I would start with a proposal that we put placeholders in those locations for people running ad-blockers. We're already testing for the presence of an ad-blocker for Eric's analytics work and so there should be a variable we can hook into quite easily.

13639934_10154489129297384_1592042087_o 13692327_10154489171172384_1827078952_o

alexgreen commented 8 years ago

Can we just add an .ad-blocker class to the body tag in these cases? Then I can easily style the page to respond.

phillipadsmith commented 8 years ago

Well, we can just as soon as @MrBryan puts back the link to ads.js in the header (you'll see it on non-article pages right now).

@MrBryan When you've got a moment, can you go back to an older story page and ensure that no other important tracking JS was missed on the article pages? That's my bad for not putting that and Chartbeat in the GitHub repo to start with. :-/

When that's in place, there will be a canRunAds variable that could be checked and used to update body style (or we could update that script to add it right then and there, given that it should run early on the page).

alexgreen commented 8 years ago

The site looks odd for people running ad-blocking tools because the top section collapses and the visual balance to the right of the feature media is lost (see below).

I don't think it's a problem that the top section collapses (you mean the banner ad, right?) because it doesn't leave a hole in the layout. But the missing halfpage ad and empty bigboxes definitely look weird.

I'll write some css to block in a placeholder for now.

In the slighter longer term, I could adjust the adjust the layout to close up all the gaps left by ad blockers —so that folks with ad blockers would in fact get a perfect ad-free layout. What do you think of that?

alexgreen commented 8 years ago

I've styled the ad blocks so that the presence of .ad-blocker in the body tag will cause the half-page ads to get labeled and tinted grey. Bigbox ads within the content flow are simply hidden. I've done nothing with the banner ad because the ad-blocker collapses the whole block anyway.

See debd93003e944d90ced40b14796f2772355284af and 9345cd7d438bba1929359b9b1877dbd2b87f5b2b

So we just need a script to apply .ad-blocker to the body tag when an ad blocker is running.

MrBryan commented 8 years ago

Should be working now pending caching extensions catching up 913746c

MrBryan commented 8 years ago

note - i didn't add the script that creates the variable on develop so it is only working on preview / production

phillipadsmith commented 8 years ago

Should be working now pending caching extensions catching up 913746c

Can you confirm this is working, @alexgreen?

alexgreen commented 8 years ago

@phillipadsmith , working on osx chrome and safari