Understanding Banner and Button Ads
When you first dive into the world of WAHM advertising, the two terms that pop up most often are “banner ad” and “button ad.” They’re both graphical messages that invite viewers to click, but they serve slightly different purposes and come in distinct shapes. Knowing the difference is the first step toward using them effectively on your site, in email signatures, or across partner networks.
A banner ad is a horizontal rectangle that usually spans the width of a page or a designated area. The classic size is 468 × 60 pixels, but modern web design has opened the door to a variety of dimensions. A 728 × 90 pixel leaderboard, a 300 × 250 pixel medium rectangle, or even a 160 × 600 pixel skyscraper can all be considered banner ads as long as they’re rectangular and larger than a single square. Banner ads can be static images, GIFs that animate in a loop, or HTML5 elements that change colors or text as users hover over them.
Button ads are smaller, often square, and serve a more targeted role. The standard button ad size is 125 × 125 pixels, but you might also find 120 × 90 or 180 × 150 variations, depending on the placement. These graphics are usually part of a button swap network or a banner rotation package where multiple ads rotate within the same space. Because they’re smaller, button ads can fit into sidebars, footers, or as part of a menu button set. They can be used to drive traffic to a specific landing page, promote a limited‑time offer, or simply add a visual cue that encourages clicks.
File types play a key role in how you’ll create and deliver these ads. Most designers still use GIF, JPG, or PNG because they’re universally supported across browsers and email clients. GIF works well for simple animation, while PNG handles transparency cleanly, and JPG keeps file sizes small for photographic images. If you’re using HTML5, you’ll package the ad as an HTML file with associated CSS and JavaScript. Whatever format you choose, keep the file size under 150 KB for banner ads and under 50 KB for button ads so that loading times stay fast and don’t hurt your site’s performance.
Where can you place banner and button ads? Think of any web space that can host a clickable image: your own homepage, product pages, blog posts, or even third‑party sites that accept ad swaps. Banner ads are ideal for header or footer placements where they’re visible but don’t obstruct content. Button ads fit perfectly in sidebars, within lists of links, or in the footer of an email where they can act as a “call‑to‑action” button. By diversifying the placements, you increase exposure and give your audience several ways to interact with your offer.
Once you understand the basic definitions and sizes, you can move on to creating the graphics themselves. Keep the message short and compelling. Use high‑contrast colors to draw attention and a clear headline or button label. If you’re using animation, make sure it’s subtle and not distracting. Test your ad in a variety of browsers and email clients to confirm that it displays correctly and the link works. When you’re satisfied, you’re ready to start saving and uploading your banner or button for the next steps.
From Creation to Storage: Making Your Ads Ready
After you’ve decided on the size and design of your banner or button ad, the next phase is turning that design into a digital file that can be stored, shared, and linked. This process involves a few key steps: finalizing the file format, naming the file, saving it to your computer, and uploading it to a public web folder so that the URL can be shared or embedded elsewhere.
Start by exporting the design from your graphics program. If you’re using Adobe Photoshop, Illustrator, or GIMP, export as a GIF if you need simple animation, or as a PNG for transparency. If the ad is a photograph or a complex illustration, a JPG may be best for a smaller file size. For HTML5 ads, export the entire folder containing the HTML, CSS, and JavaScript files. Be sure to keep the file names clean - use lowercase letters, hyphens, and avoid spaces or special characters. For example, “summer-sale-468x60.gif” or “new-product-125x125.png.” Clean names make it easier to reference the ad in code and keep URLs tidy.
Once exported, save the file on your computer in an organized folder structure. Create a dedicated “ads” folder and separate subfolders for banners and buttons. If you produce multiple versions, add the date or campaign name to the file name: “black-friday-banner-2024-11-28.gif.” Having a clear naming convention helps you avoid confusion later, especially if you have to retrieve or replace a specific ad.
With the file on hand, you’ll need to upload it to a location that is accessible from the web. If you own a domain, the simplest approach is to create a public folder - such as “/ads/” or “/images/ads/” - and upload the files there using FTP, SFTP, or a file manager provided by your hosting service. After uploading, the URL will look something like https://yourdomain.com/ads/summer-sale-468x60.gif. The “URL” is what advertisers use to embed or link the ad elsewhere.
Some platforms require you to provide the full HTML code for the ad. If that’s the case, the code typically looks like this: <a href="https://yourwebsite.com" target="_blank"><img src="https://yourdomain.com/ads/summer-sale-468x60.gif" alt="Summer Sale"></a>. Notice that the href points to the landing page you want users to visit when they click the ad, while the src points to the image’s location. This snippet can be pasted into a partner’s ad slot or into your own site’s HTML.
No comments yet. Be the first to comment!