Responsive or not?

[Stoker 4.0]

I just checked my other sites which uses 3.0.12 and they have no problem resizing adsense and images to be displayed properly on mobile devices.
But the new responsive style in 3.1RC2 cant do this.
So maybe its a style bug??

[PayBas]

You'll have to more specific. Images are scaling fine for me. Whether ads display correctly will depend on the CSS of your ads.

[Stoker 4.0]

Images and adsense code doesnt resize:

Code: Select all

<div style="margin: 0 auto; text-align: center;"><a href="http://link" onclick="window.open(this.href); return false;"><img src="url.jpg" width="600" height="60" alt="" style="border:1px solid black;" /></a></div>

And any default adsense code doesnt resize.

But funny thing is that it does on a default 3.0.12 board.

[PayBas]

Ah, it thought you were talking about content images.

Well if you want responsive ads, you need to include some responsive CSS rules. The fact that they appear to act responsive in 3.0.12 is most likely some trickery performed by your mobile browser.

Non-responsive websites tend to behave in most mobile browsers in a sort of quirks-mode. Any "responsive" components are more likely the result of luck than actual conscious design.

TL,DR: True responsive ads will require responsive CSS rules.

[Volksdevil]

Here's some coding I've done to make adsense responsive if it helps?

This is a basic example to place a 468px adsense code in the header, below you can see the code from my overall_header.html. Both adsense codes are needed. Look for YOUR_ADSENSE_CODE_HERE and your MOBILE_ADSENSE_CODE_HERE. The standard 468 and the mobile version:

Code: Select all

<div class="google-468" id="google-468">
YOUR_ADSENSE_CODE_HERE
</div>

<div id="google-468-responsive">
MOBILE_ADSENSE_CODE_HERE
</div>

Then here is my CSS from your_style/theme/common.css to style the two adsense blocks:

Code: Select all

/* Google ads
----------------------------------------*/
#google-468 {
float: right;
/* width: 468px;
height: 60px; */
margin-top: 8px;
}

#google-468-responsive {
display:none!important;
}

And in your_style/theme/responsive.css I use:

Code: Select all

/* Google ads responsive
----------------------------------------*/
#google-468 {
	display: none;
}
#google-468-responsive {
text-align: center;
width: 99%;
float: left;
display: inline!important;
padding: 0;
margin: 0;
}

That should get you started

[Arty]

That would load multiple ads, which might cause other ads to be empty and increase ad views counter.

I suggest to detect browser window width with JavaScript and load appropriate ad format. Something like this:

Code: Select all

<script type="text/javascript">
google_ad_client = 'whatever';
google_ad_slot = 'whatever';
google_ad_width = 768;
google_ad_height = 90;
var width = document.documentElement.clientWidth;
if (width < 800)
{
    google_ad_slot = 'whatever';
    google_ad_width = 468;
    google_ad_height = 60;
}
if (width < 500)
{
    google_ad_slot = 'whatever';
    google_ad_width = 320;
    google_ad_height = 50;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

You'll need to create several ad formats in your adsense account and swap ad width, height and slot values for each width.

Upside of this method is there won't be hidden ads that increase loading times and mess with your click per view stats. Downside is window width is detected only on page load, so if user rotates his phone/tablet and screen changes dimensions after page loaded ad will remain the same.

[Volksdevil]

That would load multiple ads, which might cause other ads to be empty and increase ad views counter.

For more ads of the same adsense code (Google 468 banner for example), you could just use more CSS. No problem with ad views/clicks because they are hidden, and are different banners (Desktop and mobile). I'll look into your method though cheers. But current setup does work well, going to add some <IF> statements too so that they only load on chosen page etc.

EDIT: I'm just looking into the added bonus we now have of utilising jquery
We can find the hidden div and then remove/replace it all together. Only problem being, as Arty says, it's not technically fully responsive...Maybe there's a way to get it so?

Code: Select all

$(document).ready(function(){
        setTimeout("checkAds();", 250);
});

function checkAds() {
        if ($("#google-468-responsive").css('display') == 'none') {
                $("#google-468-responsive").replaceWith('');
        }
}

EDIT: Hmmm, this will refresh/reload the page on resize, possible solution? Although I'm thinking it could cause issues on pages such as posting screen etc?

Code: Select all

$(window).bind('resize', function(e)
{
  if (window.RT) clearTimeout(window.RT);
  window.RT = setTimeout(function()
  {
    this.location.reload(false); /* false to get page from cache */
  }, 250);
});

EDIT: Oh well, The above seems to cause IE11 to freeze due to a 'Long running script' Typical of IE

[Stoker 4.0]

Thanks for the help. Ill take a look at it

[spyka]

Maybe I'm missing something but Adsense offers responsive ads, so you don't need to worry about any workarounds, just need to copy/paste the code they give you and it'll take care of itself