Ads On Mobile

This topic is: not resolved

This topic contains 12 replies, has 2 voices, and was last updated by  Jon Bellah 1 year, 7 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #15291

    heredia21
    Participant
    Post count: 36

    How could I resize ad units on mobile devices?

    #15297

    Jon Bellah
    Participant
    Post count: 109

    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

    #15299

    heredia21
    Participant
    Post count: 36

    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.

    #15302

    Jon Bellah
    Participant
    Post count: 109

    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:
    [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"/>’;
    }
    [/php]

    The HTML:
    [html]
    <div class="ad-large">
    <!– Your Large Screen Ad Code Here –>
    </div>

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

    The CSS:
    [css]
    .ad-large {
    display: block;
    }

    .ad-mobile {
    display: none;
    }

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

    .ad-mobile {
    display: block;
    }
    }
    [/css]

    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

    #15305

    heredia21
    Participant
    Post count: 36

    Is doing this against Adsense policies?

    #15306

    heredia21
    Participant
    Post count: 36

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

    #15308

    Jon Bellah
    Participant
    Post count: 109

    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

    #15313

    heredia21
    Participant
    Post count: 36

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

    #15314

    Jon Bellah
    Participant
    Post count: 109

    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

    #15317

    heredia21
    Participant
    Post count: 36

    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?

    #15321

    heredia21
    Participant
    Post count: 36

    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

    #15337

    heredia21
    Participant
    Post count: 36

    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.

    #15346

    Jon Bellah
    Participant
    Post count: 109

    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

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.