1.2 - Responsive layout and Adsense concerns

[lazer]

Any brave souls got 1.2 beta (with responsive) and Adsense running? Can we see a live example?

 

[MattW]

Any brave souls got 1.2 beta (with responsive) and Adsense running? Can we see a live example?

Running it on my test conversion of my live board.

 

[Mark3121]

Hopefully someone can make a resource for responsive adsence, I think a lot haven't a clue how to make it work so it would be nice to be able to find an answer quickly without wading though threads.

 

[feldon30]

The existence of this thread puzzles me, considering how many helpful answers were given in the other thread, as well as detailed explanations of how Responsive works and why responsive templates are impossible...

http://xenforo.com/community/threads/why-is-there-no-responsive-variable-switch-in-xf-1-2.53375/

 

[cmeinck]

Hopefully someone can make a resource for responsive adsence, I think a lot haven't a clue how to make it work so it would be nice to be able to find an answer quickly without wading though threads.

I'd suggest using Google's own recommendation.

That being said, it's not easy if you use anything but Adsense. I use DFP, but might have to abandon parts of it due to the responsive design. The Adsense implementation seems pretty straightforward, but I run more than Adsense and most of these are set sizes -- thus making it vitally important that I don't plugin sizes that won't work across all devices.

I blame the ad networks. I wish their code would recognize the browser/size and adapt.

My current implementation on pre 1.2 uses a fixed width and auto-redirects mobile to arty's responsive design.

Having spent the week working on my new 1.2 template/site, this issue is by far the biggest problem I've encountered.

 

[MattW]

Running it on my test conversion of my live board.

Now running it live on Z22SE.co.uk

 

[cmeinck]

For those who need to run DFP or some other ad network that requires fixed ad space (728x90 Leaderboards), here's my solution w/ the help of others (@Brogan).

• Get your main template tweaked to perfection before adding any advertisements.
• When you are completely satisfied, create a child template (Mobile)
• On the main template, uncheck 'responsive' in Style Properties. In general > page width controller > Miscellaneous > width: 1030px; margin: auto; (that number can vary, but if you want to run leaderboards above breadcrumb, this number seems to work best with flowing over content.
• Setup all of your ads on this template.
• On your child template, set up your responsive ads. Check the box 'prevent template modifications'. This isn't necessary, but will help if you make a change to any of your desktop ads. I used the ad code provided by Google for responsive adsense.
• Install Mobile Style Selector and the add on for tablets (can't seem to find the link). Set this accordingly.

I've done other tweaks to avoid too many ads on 'thin' pages. IMHO, the limitation of ad networks makes this the best solution.

Hope this helps.

 

[MattRock]

For those who need to run DFP or some other ad network that requires fixed ad space (728x90 Leaderboards), here's my solution w/ the help of others (@Brogan).

• Get your main template tweaked to perfection before adding any advertisements.
• When you are completely satisfied, create a child template (Mobile)
• On the main template, uncheck 'responsive' in Style Properties. In general > page width controller > Miscellaneous > width: 1030px; margin: auto; (that number can vary, but if you want to run leaderboards above breadcrumb, this number seems to work best with flowing over content.
• Setup all of your ads on this template.
• On your child template, set up your responsive ads. Check the box 'prevent template modifications'. This isn't necessary, but will help if you make a change to any of your desktop ads. I used the ad code provided by Google for responsive adsense.
• Install Mobile Style Selector and the add on for tablets (can't seem to find the link). Set this accordingly.

I've done other tweaks to avoid too many ads on 'thin' pages. IMHO, the limitation of ad networks makes this the best solution.

Hope this helps.

Perfect. Thanks for putting this together!