How To Build A Basic Ad Banner

BASICS IN BUILDING ADS IN HTML5

Topics include:

  • Understanding design layouts
  • Cropping images and texts
  • Optimizing images and text
  • Setting up ads and using guide images
  • Animating
  • Adding clickability function

What you need to know:

  • HTML/HTML5
  • CSS/CSS3
  • Javascript

We are going to build a banner in HTML5 with basic animations and coding.

Let’s get started!

Understanding design layout

  • Before you start, make sure all assets are complete (fonts are available, no broken images etc.)
  • Decide if the design needs to be an image or not. Some design uses solid background color, so it is a good way not to crop/slice it  and include it in your images file, instead, style it in CSS. Then if the design uses images as a background then that’s the time you need to crop/slice it.
  • Visualize how you wanted the design to be animated, think ahead on how the image/text should be placed in HTML and how it should animate and match the storyboard.

Cropping images and texts from the design layout

  • Carefully crop or slice the images and texts, make sure to include the effects used in images or texts like shadow or opacity
    • Quick Tips:
      1. Use slice tool in photoshop for faster cropping
        slice
      2. Slice the images and texts individually
        slice-it
      3. While you are in slice tool, double click on the sliced image to open the slice options and give it a name, do this on every sliced image then click “OK”
        rename
      4. Remove the background of the design to make it transparent, we need to save the sliced images as PNG and no background
        remove-bg
      5. Go ahead and save for the web. Cmd+click(Mac) or Ctrl+click(PC) the sliced images and format should be PNG then click save
        sfw
      6. Lastly, choose ‘Selected Slices’  and choose a folder where you want to save it then click Save again
        selectedslice
      7. You will now see an images folder where all the sliced images were saved. I also saved a background image and save it in the same folder with the cropped image
  • Make a sprite sheet from your cropped image using online tools like instantsprite.com, spritecow.com or whatever you prefer. We often use instantsprite.com so here’s a quick guide to using it
    1. Go to http://instantsprite.com
    2. Select multiple image files from your computer or just drag and drop all the images that you cropped. After you uploaded the images we just need to set quick options
      Thumbnails:

      thumb

      Options: All you have to do here is to choose between horizontal or vertical directions, image will be in PNG by default and leave the offset as is
      options

      Sprite: Click ‘Open image in a new window’ then right-click the image and save it to your computer, and let’s name it sprite.png for now
      savesheet

      Usage: Copy and save the CSS and the HTML DIVS provided by “Instantsprite” we will use it later in setting up the ad
      usage

 

Set up your ad and use guide image to make it a pixel perfect ad

  • Create a guide image, this will help you position the images and texts of the banner later. Just save the final design and name it guide.jpg or any name you want
  • Create an index.html file and start with a skeleton template. In this sample, we will include the standard click tag and add a link tag of the external CSS(sample below)
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1">
      <title>BASICS IN BUILDING ADS IN HTML5</title>
      <link rel="stylesheet" href="style.css">
    
    <!-- HTML5 Ad Standard Clicktag -->
      <meta name="ad.size" content="width=300,height=250">
      <script type="text/javascript">
          var clickTag = "http://wwww.google.com";
      </script>
    
    </head>
    <body>
      <div id="main">
     <!--code here -- >
      </div>
    </body>
    </html>

  • Now we need to add the HTML code we copied earlier from “Instantsprite” and put it inside the main div from our template. Your code should like this now:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1">
      <title>BASICS IN BUILDING ADS IN HTML5</title>
      <link rel="stylesheet" href="style.css">
    
    <!-- HTML5 Ad Standard Clicktag -->
      <meta name="ad.size" content="width=300,height=250">
      <script type="text/javascript">
          var clickTag = "http://wwww.google.com";
      </script>
    
    </head>
    <body>
      <div id="main">
        <div class='sprite bg'></div>
        <div class='sprite txt1'></div>
        <div class='sprite tx2'></div>
        <div class='sprite txt3'></div>
        <div class='sprite cta'></div>
        <div class='sprite logo'></div>
      </div>
    </body>
    </html>
  • After you lay out the HTML add some style to it.
  • Create a style.css file and save it. This CSS should be saved where your index.html and sprite.png was saved
  • Now let’s add a basic style for the main DIV. In your style.css add this code:
    body,html { 
      margin: 0; 
      padding: 0; 
    }
    #main {
      width:300px; 
      height:250px; 
      position:relative; 
      overflow:hidden; 
      box-sizing:border-box; 
      border:1px solid #000;
    }
    #main div { 
    position: absolute;
    }

  • Then let’s add the CSS we copied from instansprite
    body,html { 
        margin: 0; 
        padding: 0; 
    }
    #main {
        width:300px; 
        height:250px; 
        position:relative; 
        overflow:hidden; 
        box-sizing:border-box; 
        border:1px solid #000;
    }
    #main div {
        position: absolute;
    }
    
    /* code form instantsprite*/
    .sprite { background: url('sprite.png') no-repeat top left; height: 27px;  } 
    .sprite.bg { background-position: 0 0; width: 300px; height: 250px; } 
    .sprite.txt1 { background-position: -310px 0; width: 175px; } 
    .sprite.tx2 { background-position: -495px 0; width: 177px; height: 25px; } 
    .sprite.txt3 { background-position: -682px 0; width: 209px; } 
    .sprite.cta { background-position: -901px 0; width: 153px; height: 35px; } 
    .sprite.logo { background-position: -1064px 0; width: 157px; height: 24px; } 

  • Now test the index.html, you should see something like this:
    broken
    Right now it looks off, but don’t worry we will fix and position it properly using the guide we created earlier
  • In your HTML file add an image tag at the bottom and pull the guide that we created earlier and set an inline style for now(image below).
        <div class='sprite cta'></div>
        <div class='sprite logo'></div>
      </div>
      <img src="guide.jpd" style="opacity:0.5; top:0; left:0; position:absolute;z-index:10;">
    </body>

    This image tag will be removed/erased once we are done with the positioning
  • Now let’s position the images according to our guide, we will use the Chrome’s Developer Tool, to make the adjustment easier.Now you will see something like this:
    dev
  • Now position the classes like txt1, txt2, txt3, etc. Once positioned it will look like this:
    pos
    Now in your development tool click the style.css
    style
    It will display the styles.Once displayed, copy it and paste it to your local style.css file
    copy
  • Let’s go back in our HTML file remove the <img> tag guide you created. Then refresh and test the banner again. You should see that it is all positioned properly.
  • Once done setting up the HTML and CSS start animating

Animation

  • There are lots of ways in animating a banner, you can use GSAP/Greensock, CSS3 Animation + Javascript and other third party libraries that can be found on the internet. Just make sure that you are following the ad specs, some ad servers or publishers don’t allow some third party libraries.
    In our sample, we are using GSAP since this is tested and the easiest way to animate
  • Download the GSAP or copy the CDN file library here and include it in your HTML file.
        <div class='sprite logo'></div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
    </body>
    </html>

  • Now let’s make a simple step by step animation of this banner with just fading and sliding effect
    • In your HTML file, add this script before the closing body tag
       <script>
            var tl = new TimelineMax()
            .set('.logo', {opacity:0})
            .set('.txt1', {x:-300})
            .set('.txt2', {x:300})
            .set('.txt3', {x:-300})
            .set('.cta', {scale:0})
        </script>
      </body>
      </html>

      This will set the images and texts off stage and set the opacity as well to 0
      before starting the animation
    • After the .set code, add the animation, your code should look like this
       <script>
            var tl = new TimelineMax()
            .set('.logo', {opacity:0})
            .set('.txt1', {x:-300})
            .set('.txt2', {x:300})
            .set('.txt3', {x:-300})
            .set('.cta', {scale:0})
      
           .to('.logo', 1, {opacity:1})
           .to('.txt1', .5, {x:0})
           .to('.txt2', .5, {x:0})
           .to('.txt3', .5, {x:0})
           .to('.cta', .5, {scale:1})
        </script>
      </body>
      </html>

      Save and test your work you will now see the animation
    • Now you are done animating. Good job!
      If you want to know more about GSAP animation check out the documentation here.

Adding clickability

  • Every banner needs a clickthrough, depending on your client or agency if they need multiple clickthroughs or not
  • In our sample, we will add 1 clickthrough for this ad
  • In your HTML add another div after logo div and name it exit or clickthrough or whatever you prefer.
  • Then in your CSS and JS just add this codes, here’s an example:
    HTML:
        <div class='sprite logo'></div>
        <div id="exit"></div>
      </div>

    CSS:
    #exit{
        width: 300px;
        height: 250px;
        cursor: pointer;
        background: none;
    }

    JS:
      <script>
          var tl = new TimelineMax()
          .set('.logo', {opacity:0})
          .set('.txt1', {x:-300})
          .set('.txt2', {x:300})
          .set('.txt3', {x:-300})
          .set('.cta', {scale:0})
    
         .to('.logo', 1, {opacity:1})
         .to('.txt1', .5, {x:0})
         .to('.txt2', .5, {x:0})
         .to('.txt3', .5, {x:0})
         .to('.cta', .5, {scale:1})
    
    var clickthrough = document.getElementById('exit');
    clickthrough.addEventListener(‘click’, function(){
      window.open(clickTag)
    })
    
      </script>
    </body>
    </html>

Optimizing images

  • We are almost done! Now let’s consider the file size limit.
  • In this sample, we will need to make the file size less than 100kb.
  • We can reduce the images size through Photoshop’s save for web option but there are other online tools that can surely help you compressing your images:
LIVE DEMO HERE

4 comments: On How To Build A Basic Ad Banner

  • Everyone loves what you guys tend to be up too. Such clever work and coverage!
    Keep up the wonderful works guys I’ve added you guys to my own blogroll.

  • It is appropriate time to make some plans for the future and it
    is time to be happy. I have read this post and if
    I could I want to suggest you some interesting things or advice.
    Perhaps you could write next articles referring to this article.

    I want to read even more things about it!

  • I have been browsing online more than 3 hours as of late, yet I never
    discovered any fascinating article like yours.
    It is pretty worth sufficient for me. Personally, if all site owners and bloggers made
    just right content material as you did, the
    web will be much more helpful than ever before.

  • Hi there! This article couldn’t be written much better!
    Going through this post reminds me of my previous roommate!
    He constantly kept preaching about this. I will forward this information to him.
    Fairly certain he’s going to have a very good read.
    Thanks for sharing!

Leave a reply:

Your email address will not be published.

Site Footer