Responsive (Mobile-friendly) Ads

When we first started working with retailers and affiliates to publish ads in 2005, 'Smartphones' and mobile browsing weren't even widely available. Now, they are one of the biggest drivers of e-commerce. As such, 'responsive' web design (designing for any display, whether a large screen or a mobile phone) is a common practice.

We often get asked how to make our ads look correct on mobile devices, since many WordPress themes are responsive by default -- but our ads generally are not. No need to worry though! It's fairly easy to make our tools responsive with just a few lines of code!

Bootstrap

We'll use a very common third-party library called Bootstrap to help us with this task. Bootstrap is a grid system, containing of a container, rows, and then the responsive-width columns within each row.

See here for some general info on how to use Bootstrap:
http://getbootstrap.com/css/
http://getbootstrap.com/css/#grid-example-mixed
http://getbootstrap.com/css/#grid-options

Adding Bootstrap to your site

1. Include the Bootstrap CSS in the <head> of your pages:
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

2. Then, include the raw bootstrap Container-fluid, at the top and bottom of the <body> of your pages:
    <div class="container-fluid">
        ...
    </div>

3. You must define specific rows as well, depending on your layout:
    <div class="row">
        content goes here, using .col-lg-, .col-md, .col-sm, and .col-xs classes
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">example grids</div>
        <div class="col-xs-6 col-sm-4">example grids</div>
      <!-- Use 'clearfix' to force a break in the row when collapsing -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4">another example</div>
    </div>

4. Get the AvantLink Ad or tool of your choice, which will generally be a script like this:
<script type="text/javascript" src="http://classic.avantlink.com/click.php?pw=77&mi=10048"></script>


5. Simply wrap this in a row div, which has the columns defined. For example, try these parameters (class=col-xs-6 col-sm-4 col-md-2 col-lg-1)


Full Example

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6 col-sm-4">
                <script type="text/javascript" src="http://classic.avantlink.com/click.php?pw=77&mi=10048"></script>
            </div>
            <div class="col-xs-6 col-sm-4">
                <!-- Another ad or other content -->
            </div>
          <!-- Use 'clearfix' to force a break in the row when collapsing -->
          <div class="clearfix visible-xs-block"></div>
            <div class="col-xs-6 col-sm-4">
                <!-- Another ad or other content -->
            </div>
          </div>
    </div>

Summary

By using common web developer tools, you can help make your website stand out! If we missed something or you have questions, don't hesitate to reach out to our Support team directly!

Have more questions? Submit a request
Powered by Zendesk