Responsive Banner Basics: Fully Responsive vs. Breakpoints in HTML5 Ads

Main content

Responsive Banner Basics: Fully Responsive vs. Breakpoints in HTML5 Ads

Html5 Inside Top 02


Can you spot a responsive website or ad? Most web users believe they can, but often misidentify what makes a page responsive. With HTML5 as one of the year’s hottest topics, many people have come to automatically assume that if a website, or ad, is created in HTML5 that it must be responsive. This is, unfortunately, a widely held misconception and inaccurate. 


Just like its HTML predecessors, HTML5 gives you a baseline from which you can code powerful and dynamic websites, ads and tools.  The level of responsiveness within these, however, is completely dependent on how and what you create.


Not all responsive ads and websites are created equal.  There are two common approaches to responsive. These are fully-responsive, also sometimes called fluid design, and breakpoint based semi-responsive designs.  Each have different benefits and when making the choice between how responsive your website or advertisement will be, it’s important to think strategically.


Html5 Inside 02


Fully Responsive Design (Fluid Design)


A fully responsive ad or website is, as the name implies, completely responsive. This means that it will re-size smoothly regardless of how big, or small, your screen is and will fluidly adjust all content to ensure it fits. If you picture a square box and imagine dragging one side of that box until it becomes a long rectangle, every point along that progression creates a fully-functional and fully-modified version of the original box. This means that the version of your ad or website displayed at 67% of its total width is different than at 68%, 69% etc. and this is what is occurring with a fully responsive design.

The advantage of this type of responsive design is that you are fully rendering each ad or page and taking complete advantage regardless of the dimensions available. You also benefit from the responsive content fully filling and utilizing all available space. The downside is slightly reduced control when compared to fixed or adaptive design, since any range of dimensions is possible and must be planned for when compared to the 4-8 set breakpoints most commonly used for adaptive designs. For an example of what looks like in action, see a live-demo of our Responsive Overlay format here or read the Case Study.


Html5 Inside 01


Adaptive Design (Breakpoint Based Semi-Responsive Design)


This approach to a responsive design establishes set breakpoints which content is designed to re-size to once a threshold is passed. For example, you might specify one design or layout when at 25% of total width, a different one at 50%, 75% and 100%.  In the case of an ad, content may be modified significantly to ensure that your core message is communicated while various secondary visual elements are added or subtracted depending on which breakpoint is met.  You can see an example of this in action in our Responsive Pushdown Takeover which starts as a Leaderboard format before expanding. Click here to see it in action.


When using breakpoint based design, content between 25% width and 49% width will remain static regardless of how you shrink or expand the page. It’s only at 50% (or whatever the breakpoint you’ve established) is reached that the next responsive size kicks in. This provides a more stable canvas for your message, while still allowing you to gain most of the benefits of a responsive ad and allows you to integrate your ads into most responsive websites.


You might also use these pre-defined formats to create device-oriented versions of a page or ad. For example some designers will create three breakpoints at 320px, 760px and 960px which can then be selectively rendered for mobiles, tablets and desktops based on simple device detection.


Other Things to Consider

  • Responsive ads align best with responsive pages
  • With HTML5 fonts are crisp and re-size smoothly
  • A responsive website is not the same as a mobile app, or a mobile-specific version of a website
  • Adaptive design typically uses breakpoints at 320px, 480px, 760px, 960px, 1200px, and 1600px in width
  • Overlays should be designed to be responsive and to keep in mind device orientation


Why HTML5?


The reasons to work with HTML5 are numerous. Some of the most popular are HTML5’s mobile friendly nature which in turn offers greater monetization opportunities, particularly within mobile and video. It is designed to better integrate with video and a rich media driven internet, while also delivering advanced functionalities that allow for more compelling and engaging advertising options.


HTML5 is a universal language that is supported across all of the major devices.  This means HTML5 ads are often simpler to execute and can be made without requiring expensive and complex software. Because of HTML5’s structure it is also much more practical to choose from a variety of responsive and/or mobile HTML5 templates and then to edit those ads either by modifying the code or using a drag and drop interface like Adform’s free HTML5 studio. It also makes testing responsive ads in a real ad server environment and pushing ads into campaigns easier and more accessible than ever.  The results are better ads created with powerful tools like our free HTML5 studio.


Want to experiment a bit? Try the studio, it’s powerful, free and doesn’t require login to get started.


Unsure which is right for you?


Ready to do more with HTML5 and responsive content?  Reach out to your local account manager, request a free demo or consider a conversation with one of our Brand Solution experts. They work daily with some of the world’s leading brands and publishers on innovative new ways to get the most out of responsive capabilities.  


comments powered by Disqus