Ads On Mobile

[heredia21]

How could I resize ad units on mobile devices?

[Jon Bellah]

That's a more complicated question than you may think. It's also one that doesn't (yet) have a clear answer. Here's an article from Smashing Magazine that should point you in the right direction, though.

http://mobile.smashingmagazine.com/2012/11/29/making-advertising-work-in-a-responsive-world/

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[heredia21]

Well my ads are being cut off on my mobile site http://blackberryempire.com how could I use mobile ads for mobile devices? Other sites like seroundtable.com has same theme but on mobile devices it shows mobile ads.

[Jon Bellah]

The easiest, but not necessarily the best, way is to wrap your large ads in a div and your mobile ads in a div. Then use css to turn them on and off, based on viewport size. That would look something like this:

Add to functions.php:

// Add Viewport meta tag for mobile browsers
add_action( 'genesis_meta', 'add_viewport_meta_tag' );
function add_viewport_meta_tag() {
	echo '<meta name="viewport" content="width=device-width, initial-scale=1.0"/>';
}

The HTML:

<div class="ad-large">
    <!-- Your Large Screen Ad Code Here -->
</div>

<div class="ad-mobile">
     <!-- Your Small Screen Ad Code Here -->
</div>

The CSS:

.ad-large {
     display: block;
}

.ad-mobile {
     display: none;
}


@media only screen and (max-width: 480px) {
    .ad-large {
        display: none;
    }

    .ad-mobile {
        display: block;
    }
}

Keep in mind, though, that display:none; doesn't keep the browser from loading the hidden content. So you're still going to be loading the large and small ads, regardless of whether or not they're being shown.

So, if you want to get a little better with your performance optimization, you can use something like ResponseJS to only load certain elements based on the viewport size.

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[heredia21]

Is doing this against Adsense policies?

[heredia21]

After I do the above How would i call it like in a widget to display the ads?

[Jon Bellah]

I don't know the particular policy for AdSense. That's something you'll have to read up on.

You would just place the HTML in a widget, then manipulate it with the CSS in your style.css file.

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[heredia21]

When you said functions.php you meant in the Genesis functions? Or wordpress.

[Jon Bellah]

Your Genesis child theme. Not the actual Genesis theme.

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[heredia21]

Thanks for your help, that definitely did the trick! It is displaying mobile ad units on mobile devices now but since it is centered it is being cut off a bit, how can I remove the auto center?

[heredia21]

Would you happen to know where I can edit that? It is the Page Title widget. I dont want it centered unless i specify in the html

[heredia21]

Jon I contacted you on Twitter, if you could help me out with 2 things, I'd appreciate it. 1, NOT having ads or things i display in the ad blocks load at all because I believe it is against adsense policies and 2 removing the center style for the page-title widget.

[Jon Bellah]

how can I remove the auto center?
You have the ad wrapped in tags.

1, NOT having ads or things i display in the ad blocks load at all because I believe it is against adsense policies
Check out ResponseJS, it may be able to do what you're looking for. It should also have documentation to help you set it up.

That's about as much as I can help you. Sorry.

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[Author]

Posts