{"id":7996,"date":"2020-06-18T17:54:25","date_gmt":"2020-06-18T14:54:25","guid":{"rendered":"\/\/?p=7996"},"modified":"2022-08-09T15:37:57","modified_gmt":"2022-08-09T15:37:57","slug":"3-mistakes-to-avoid-when-building-animated-html5-banners","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/3-mistakes-to-avoid-when-building-animated-html5-banners.html","title":{"rendered":"3 Mistakes to Avoid When Building HTML5 Banners"},"content":{"rendered":"

Banner advertising is currently on the rise. The total spending on banner ads worldwide is expected to reach over $72 million<\/a> by 2024. This number shows that businesses believe in the power of this promotion method, as it brings them the value they expect.<\/p>\n

That said, if we take a look at the average display advertising clickthrough rates<\/a> (CTR) in the first quarter of 2020, they don\u2019t impress, showing a downward trend in comparison with 2019. One of the reasons why that might be happening is that advertisers ignore essential design guidelines or try to save money by ordering the least expensive types of banners.<\/p>\n

David Ogilvy, a British advertising tycoon, once said, \u201cWhat really decides consumers to buy or not to buy is the content of your advertising, not its form.\u201d However, in the age of the Internet, the type of ad can be just as important as its content. While static ads have their merits, it\u2019s animated banners<\/b> that contribute to the maximum engagement of the target audience.<\/p>\n

We\u2019ve already highlighted the benefits of animated HTML5 banners for businesses in a previous blog post<\/a>. Today, we would like to talk about 3 mistakes to avoid<\/b> when building animated banners<\/a>. Hopefully, this information will help you achieve higher CTRs.<\/p>\n

Mistake #1: Messing Up with Colors<\/strong><\/h2>\n

\"Choose<\/p>\n

Colors are a truly powerful weapon in a graphic designer\u2019s arsenal since they have a direct psychological effect on the audience. Choosing the right colors is important for any type of ad. However, it is absolutely crucial for animated ads owing to their movement and dynamicity.<\/p>\n

Misusing colors may negatively impact the outcome of an advertising campaign. A bizarre combination of colors that change in a quick succession invokes only one desire: to close the web page immediately, let alone click the banner.<\/p>\n

There is a whole color theory<\/a> that every professional graphic or web designer must know like the alphabet. Apart from purely aesthetic aspects, you should also consider what emotions a color or color combination normally generates in humans. In addition, you should ensure that your brand colors and\/or logo perfectly fit into the overall animated banner design<\/a>.<\/p>\n

Mistake #2: Messing Up with Fonts: Number, Size, Consistency<\/strong><\/h2>\n

\"Be<\/p>\n

Choosing the right font and, just as importantly, using the right number of fonts consistently, is another thing that can contribute to higher effectiveness of an ad. As an animated HTML5 banner<\/a> includes several frames that change successively, it\u2019s important to make sure the same typefaces are used across all of those frames. Otherwise, visitors will have a hard time concentrating on your business message and especially on your call to action.<\/p>\n

Text should be easy to read regardless of animation effects and transition times. Make the font size large enough for consumers\u2019 eyes to make out. There should also be a sufficient contrast between words and the background. Keep your brand style in mind as well.<\/p>\n

While there are no hard and fast rules as to which or how many typefaces to use in a banner, following the basic principles <\/a>always pays off.<\/p>\n

Mistake #3: Miscalculating How Long a Banner Runs<\/strong><\/h2>\n

\"\"<\/p>\n

Picking the right runtime for an animated banner is yet another important factor that determines the success or failure of an advertising campaign. Banner ad creators may generally get two things wrong in this respect:<\/p>\n

    \n
  1. Their banner may run excessively long.<\/b> When it comes to animated banners, considering essential human qualities is paramount. People are mostly impatient creatures. They want to have everything right then and right there. Just a few seconds too many and your beautifully designed banner may end up being a waste of effort and money. Transition times also matter a lot. The best approach here is to calculate them on a banner-to-banner basis. It\u2019s just common sense. Does the banner have just a couple of frames? Make transition times longer. Does the banner have three to four frames? Make transition times shorter.<\/li>\n
  2. They may not be aware of the requirements that major advertising networks impose on the time limit for animated banners.<\/b> It takes all sorts to make the advertising world. Different advertising platforms require businesses to submit animated HTML5 banners with running times limited by specific values. For instance, IAB <\/a>has set this limit to be a quarter of a minute. Google, on the other hand, is more lenient. It allows half a minute<\/a> or less for an animated banner to run.<\/li>\n<\/ol>\n

    GetDevDone Creates Engaging HTML5 Banners<\/strong><\/h2>\n

    Building animated HTML5 banners is a complicated process that requires considerable knowledge and skills. Not only should developers be well-versed in HTML, CSS, and graphic design ptinciples but also know what engages consumers and gets them to click the all-important call-to-action button.<\/p>\n

    To avoid mistakes like those we\u2019ve described in this post, hiring professionals such as top-level GetDevDone banner coders <\/a>is a wise move. We have built countless simple and complex animated banners tailored to all the principal advertising networks, including AdRoll, Google Ads, Adform, Sizmek, and others.<\/p>\n

    We also create time-tested static<\/strong> and state-of-the-art interactive banners<\/strong>. The GetDevDone banner coding service guarantees invariably fast delivery (around 1 business day) of high-quality banner ads regardless of their complexity. We\u2019ll help you take your advertising campaigns to the next level. Let\u2019s get in touch<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Banner advertising is currently on the rise. But not all banner ads achieve the desired effect. Why does that happen? Among other reasons, the banner creator may make several mistakes that put potential customers off rather than entice them to convert. Read this post to learn about three such mistakes. <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[744,750],"tags":[825,786],"class_list":["post-7996","post","type-post","status-publish","format-standard","hentry","category-best-practices","category-front-end-development-services","tag-html-css","tag-ui-design"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"GetDevDone Team","author_link":"https:\/\/getdevdone.com\/blog\/author\/admin-p2h"},"featured_img":null,"coauthors":[],"tax_additional":{"categories":{"linked":["Best practices<\/a>","Front-end development services<\/a>"],"unlinked":["Best practices<\/span>","Front-end development services<\/span>"]},"tags":{"linked":["HTML & CSS<\/a>","UI design<\/a>"],"unlinked":["HTML & CSS<\/span>","UI design<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 6 years ago","modified":"Updated 4 years ago"},"absolute_dates":{"created":"Posted on June 18, 2020","modified":"Updated on August 9, 2022"},"absolute_dates_time":{"created":"Posted on June 18, 2020 5:54 pm","modified":"Updated on August 9, 2022 3:37 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":null,"featured_post_color":"#4d67e6","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/c67d54df2c6849e5b7af3126c36fe55b10f9d6a14b227d14b35af6c027abb195?s=96&d=mm&r=g","author_position":null,"reading_time":"<\/span> 4<\/span> min read<\/span><\/span>","prev_post":{"slug":"react-native-app-and-pwa-two-powerful-technologies-for-building-cross-platform-mobile-apps","name":"React Native and PWA: Two Powerful Technologies for Building Cross-Platform Mobile Apps"},"next_post":{"slug":"choosing-a-dropshipping-app-for-your-shopify-store-our-tips","name":"Choosing a Dropshipping App for Your Shopify Store: Our Tips"},"related_posts":["interactive-map-for-fundraising-site-supporting-ukraine","how-to-make-your-shopify-store-more-mobile-friendly","attracting-new-clients"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/7996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=7996"}],"version-history":[{"count":19,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/7996\/revisions"}],"predecessor-version":[{"id":24564,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/7996\/revisions\/24564"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=7996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=7996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=7996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}