{"id":44225,"date":"2017-11-23T09:14:40","date_gmt":"2017-11-23T12:14:40","guid":{"rendered":"https:\/\/newblog.creatopy.com\/blog\/?p=44225"},"modified":"2023-07-24T14:16:06","modified_gmt":"2023-07-24T11:16:06","slug":"html5-banner-examples","status":"publish","type":"post","link":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/html5-banner-examples\/","title":{"rendered":"20 Outstanding HTML5 Banner Examples to Inspire Your Next Design"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">As a marketer or as a designer for a marketing campaign, it is never easy to always come with fresh new ideas and even harder to create something that will inspire your audience and get the most out of your campaign.<\/span><!--more--><\/p>\n<p><span style=\"font-weight: 400;\">However, this is your job and if you are not doing it properly, nobody will. We\u2019re sure that you are already doing whatever it takes to get yourself informed and study the market and everything that happens in your industry. At the same time, you need a constant source of inspiration in order to prepare yourself for the brainstorming session prior to the creative process.<a href=\"https:\/\/app.creatopy.com\/auth\/create-account?internal_source=internal&amp;internal_medium=Blog&amp;internal_campaign=BlogContentCTA\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-70331 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png\" alt=\"create and launch ad campaigns from start to finish\" width=\"700\" height=\"90\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png 700w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-600x77.png 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-150x19.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/span><\/p>\n<p><span style=\"font-weight: 400;\">We are going to offer you some inspiration to work with:<\/span><\/p>\n<h2><b>HTML5 banner e<\/b><b>xamples<br \/>\n<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">We\u2019ve learned together about the importance of HTML5 when it comes to marketing visuals, and especially advertising banners. In order to <a href=\"https:\/\/www.creatopy.com\/create\/html5-ads\/\">create an HTML5 banner<\/a> it&#8217;s useful to have some examples in mind before starting the actual creation process. Here are some of the most inspirational examples of HTML5 banners we can view online at this point.<\/span><\/p>\n<h2><b>1.<\/b> <b>Principal<\/b><b> \u2013 Effective message through simplicity<\/b><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-44226 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/01.-principal.jpg\" alt=\"Principal HTML5 banner example\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Our first example comes from <a href=\"https:\/\/www.principal.com\/\">Principal, a company that offers financial products and services<\/a> with a history of almost a century and a half. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">You\u2019d think that they had enough time to evolve and learn how to keep things simple but believe me, sometimes this is the hardest thing to do.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, not always, as their banner makes the first on our list not for its design but for its quality in delivering a straightforward message by using nothing else than a logo and a call to action button set up on a monochromatic background.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bx9fvsqqp\",\"width\":1200,\"height\":900,\"t\":1511436058,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>2.<\/b> <b>Under Armour<\/b><b> \u2013 The banner that makes us want to know more<\/b><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-44227 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/02.-under-amour.jpg\" alt=\"Under Armour Banner idea\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">When it comes to advertising a product or a series of products, there will always be debates among marketers about <\/span><span style=\"font-weight: 400;\">how to write the best actionable message so that the clients will show some interest in their products. Well, sometimes the message is just the product itself and if you have a genuine and <a href=\"https:\/\/www.underarmour.com\/\">intriguing new product like Under Armour<\/a> advertised here, then you might come as a winner.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> There is no text here, besides the company\u2019s logo and the name of the product advertised. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The focus is on the product and its name. The viewer will wonder what Swacket means and there\u2019s a good chance they will click on the banner just out of curiosity.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxnfofaac\",\"width\":1200,\"height\":900,\"t\":1511435529,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>3.<\/b> <b>Stack Overflow<\/b><b> \u2013 Go for an illustration if you are offering something abstract<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44228 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/03.-stack-overflow.png\" alt=\"Stack Overflow HTML5 banner example\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/stackoverflow.com\/\">Stack Overflow is one of the most popular and most trusted online communities for developers<\/a> where they can share knowledge, learn new things, and build their careers. The following banner is dedicated to those who are looking for jobs in this industry.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Why did I choose it for this list? Well, they could have made it quite easier, by mixing a stock office or computer image with their copy text. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead, they have chosen to feature an illustration with a spotlight focusing on an office with a computer. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is a great example of a design based on soothing colors, a straightforward message, and a representative illustration.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxpfvsqqp\",\"width\":1200,\"height\":900,\"t\":1511436508,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>4.<\/b> <b>PayPal<\/b><b> \u2013 Match the visuals with the text message<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44229 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/04.-paypal.jpg\" alt=\"Paypal banner example\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Check out this <a href=\"https:\/\/paypal.com\/\">perfect banner distributed by PayPal<\/a>. We all know what PayPal is and therefore I am not going to talk about the company. However, there is much to talk about their banner which is a great example of consistency between the message and the visual image. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u201cNever waste a minute,\u201d they say, \u201ccheckout faster and get on with life\u201d. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">They are talking about speed and the value of time. You get to relax when daily, usual things, do not take much of your time. This is exactly what the image suggests with the speedy train passing by the relaxed woman.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bx9fdaeen\",\"width\":1200,\"height\":900,\"t\":1511437028,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>5.<\/b> <b>WordPress<\/b><b> \u2013 The banner that said it all<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44230 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/05.-wordpress.png\" alt=\"Wordpress HTML5 banner example\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Can you design a banner able to tell the audience your entire story, who you are, what you are offering, and how you can help them?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, it seems that nothing is impossible if you are inspired to create the perfect banner for a marketing campaign. This is the case with this WordPress ad, <a href=\"https:\/\/wordpress.org\/\">the company that gave us the most popular blogging platform<\/a>. The copy text is not only effective and straightforward, but it also says everything about the platform. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Moreover, the image in the background, suggests inspiration and consistency, the two things you need when you start a blog. The call to action button seems almost superfluous.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxu3b8ssu\",\"width\":1200,\"height\":900,\"t\":1511437283,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>6.<\/b> <b>KIND Healthy Snacks<\/b><b> \u2013 Change a mindset with a colorful palette<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44231 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/06.-kind.jpg\" alt=\"KIND web banner\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">When we hear somebody talking about healthy food, most of the time, we imagine something colorless, odorless, or something without taste. This is why the following add presented by <\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.kindsnacks.com\/\" target=\"_blank\" rel=\"noopener\">Kind<\/a> is something to look for as an inspiration. Do it, especially when you are asked to create a similar campaign for a food company.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Kind\u2019s banner adds a color palette to their line of healthy snacks. The concept is simple, with a focus on an image that presents the products arranged in an attractive manner, accompanied by some nuts and fruits. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">There\u2019s nothing exceptional about this banner except the fact that by being simple, it manages to get the most out of the products and transmit a message. The color palette also adds to its attractiveness on a psychological level.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bcm01y443\",\"width\":1200,\"height\":900,\"t\":1511437638,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>7.<\/b> <b>Nordstrom<\/b><b> \u2013 When warm colors make the difference<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44232 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/07.-nordstrom.jpg\" alt=\"Nordstrom banner example\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s another banner that stands out from the crowd due to its colors. We have another great example of a product-based banner but this time, we are shopping for jewelry. <\/span><span style=\"font-weight: 400;\">We all know that most of the time, jewelry is being placed close to the skin, whether it\u2019s a ring, a necklace, or a pair of earrings. This is where <a href=\"https:\/\/www.nordstrom.com\/\">this Nordstrom banner makes a difference<\/a>. <\/span><span style=\"font-weight: 400;\">The background color is similar to the color of the human skin. Thus, the client gets to imagine how the jewelry looks on them. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">At the same time, the warmer tone is attractive, and it puts the products in focus and highlights the message of the banner.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bci4pbvvs\",\"width\":1200,\"height\":900,\"t\":1511438198,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>8.<\/b> <b>Wyndham Grand<\/b><b> \u2013 Focus on the extras<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44233 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/08.-wyndham-grand.jpg\" alt=\"Wyndham Grand banner design\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Sometimes, if you want to create the perfect banner for your campaign, you should think outside the box. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">That is exactly how the marketer who created this banner thought.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A group of hotels, <a href=\"https:\/\/www.wyndhamhotels.com\/\">Wyndham Grand came up with an interesting banner<\/a> that depicts not their rooms, their facilities, or their prices. There are no offers and no price cuts whatsoever. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead, they focused their banner on the free breakfast offered every morning and to this end, they managed to depict it with a perfect picture.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bc9lw3881\",\"width\":1200,\"height\":900,\"t\":1511438483,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>9.<\/b> <b>Phillips 66<\/b><b> \u2013 Attract your audience with motivational messages<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44296 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/Page-1-1.png\" alt=\"Phillips 66 banner design\" width=\"618\" height=\"250\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-1-1.png 618w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-1-1-600x243.png 600w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">There\u2019s nothing fancy about buying gas for your car. In fact, this is a day to day task that some of us don\u2019t even figure out at a conscious level. We are doing it out of instinct after so many hundreds and maybe thousands of times we did it before.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">How to attract your audience when you want to advertise a gas station? How to motivate them to click on your banner? Well, it seems that Phillips 66 managed to answer these questions and they did it quite easily.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">How?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s quite obvious: in order to motivate the audience, <a href=\"https:\/\/www.phillips66.com\/\">Phillips 66 created a series of motivational banners<\/a>. The messages are simple and easy to comprehend but at the same time, they are straightforward and effective. See the examples available below for a clearer understanding of how their banners talk to the audience.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxt30p99v\",\"width\":1200,\"height\":900,\"t\":1511438838,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>10. Target \u2013 Go traditional<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44236 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/10.-target.jpg\" alt=\"Target online banner\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">People at Target know what they are doing, although their banners, at a first glance, don\u2019t seem to give us much to be inspired of. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, they did exactly what people were expected of them: they have chosen a product, a traditional image, and a traditional copy text, a call to action, and a warm background. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">They all mix up together nicely and appealing.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxcjscnno\",\"width\":1200,\"height\":900,\"t\":1511439233,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>11. Tesla \u2013 Remind your audience why you are their best choice<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44297 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/Page-2.png\" alt=\"Tesla banner examples\" width=\"618\" height=\"250\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-2.png 618w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-2-600x243.png 600w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">I am sure that everybody who reads this article knows about Tesla and their electric cars. We\u2019d probably get the job done easier if we\u2019d count those who did not hear about this company.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Therefore, why would Tesla need advertisements to send their messages? <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Well, regardless of how well known your brand is or how popular your products are, there are times when you need to remind your audience that you are still there, on the market, waiting for their attention.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As the examples available below suggest, they did a terrific job, by reminding their audience why their cars are so popular these days. Unlike what we\u2019d expect from a car company, we are not bombarded with specs or low prices. Instead, Tesla reminds us that their green cars are on the top and that they are there for the long run.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bcfqol00k\",\"width\":1200,\"height\":900,\"t\":1511442445,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><span style=\"font-weight: 400;\"><a href=\"https:\/\/app.creatopy.com\/auth\/create-account?internal_source=internal&amp;internal_medium=Blog&amp;internal_campaign=BlogContentCTA\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-70331 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png\" alt=\"create and launch ad campaigns from start to finish\" width=\"700\" height=\"90\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png 700w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-600x77.png 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-150x19.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/span><\/p>\n<h2><b>12. Samsung \u2013 Design a banner that catches the attention without being intrusive<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44299 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/Page-3-1.png\" alt=\"Samsung banner ideas\" width=\"618\" height=\"250\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-3-1.png 618w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-3-1-600x243.png 600w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Samsung\u2019s banners, like the two presented here for a gaming laptop and their last smartphone line S8, are a great example of a simple design that stands out from the crowd without being too intrusive. There are no bright colors; in fact, the background is monochromatic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Why are these banners effective? Well, look at the images and analyze the backgrounds, by trying to remember how a web page looks like. Most of the web pages we know are based on a white or light-colored background. The contrast created by these banners makes them easier to notice.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bc50vaeen\",\"width\":1200,\"height\":900,\"t\":1511442846,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>13. Microsoft Office 365 \u2013 Give your audience all the details with visuals<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44241 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/13.-microsoft.jpg\" alt=\"Microsoft Office 365 banner example\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Another example of an effective banner and a great banner design comes from Microsoft. Their Office 365 ad gives us all we need to know about their product by simply looking at the visuals included there: We learn about the compatible devices and the software programs the suite contains.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxhiw3881\",\"width\":1200,\"height\":900,\"t\":1511443213,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>14. Nike \u2013 Showcase the plus factors<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44300 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/Page-4-1.png\" alt=\"NIKE banner sample\" width=\"618\" height=\"510\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-4-1.png 618w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-4-1-600x495.png 600w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s take a look at another series of banners that made it to the top of this list. This time, they come from Nike, one of the leading sportswear brands in the World. They come with nothing spectacular in particular but they have a tremendous impact on the eye of the beholder. There\u2019s the advertised product in the center of the view and an oversized text that advertise the product\u2019s main attributes.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bcnqd0yyj\",\"width\":1200,\"height\":900,\"t\":1511443448,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>15. Starbucks \u2013 Chill together<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44246 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/15.-starbucks.jpg\" alt=\"Starbucks advertisement example\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Who likes to have a drink alone? Moreover, who wants to drink their coffee alone? Well, I guess most of you will answer with the same statement: \u201cNobody\u201d.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is why this Starbucks banner is a great example that had to be included in this list. There are many retail shops and food\/beverages related venues that come with 1+1 offers.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, Starbucks&#8217; offer is not just about the extra cup of coffee you get when you buy one. It\u2019s about doing it together with somebody. This is how they tapped into the audience\u2019s social needs, relationships, and emotions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> Everything&#8217;s better when you are doing it together with somebody you like or love and this sentiment transcends from the banner into the Starbucks cup of coffee. When you see the banner, you think immediately about someone close to you. This is a positive feeling that in many cases, advertisement banners fail to trigger.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxhjej337\",\"width\":1200,\"height\":900,\"t\":1511443741,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>16. Pepsi \u2013 The banner that makes us thirsty<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44301 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/dcb1342a75818525e7dae80fe3d7670c.jpg\" alt=\"Pepsi banner design\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Ever wondered why when you watch a movie and someone pours something into a glass you feel suddenly thirsty? This is how our brains work and the sound of the liquid pouring into the glass serves only as a reminder that we need to hydrate.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is exactly the message the next banner sends us only by looking at it. You can almost hear the liquid pouring out of the can.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bc3avaeen\",\"width\":1200,\"height\":900,\"t\":1511443961,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>17. Mercedes Benz \u2013 Convince the audience to learn more<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44302 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/Page-6-1.png\" alt=\"Mercedes-Benz advertisement example\" width=\"618\" height=\"250\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-6-1.png 618w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2017\/11\/Page-6-1-600x243.png 600w\" sizes=\"(max-width: 618px) 100vw, 618px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">People are curious. They are always hungry for new information and if they have questions, they cannot rest until they are answered. You are a marketer and you work with visuals and messages that should trigger emotional responses. Why not take advantage of this curiosity?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Take for example these two Mercedes-Benz ads. They showcase the product and if you are not paying attention to them, they are not different from any other banner available out there. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Take another look and read the copy text. It appears to be a simple question but in many ways, it\u2019s more than a question. Each of these two questions is also a statement. Furthermore, they trigger the audience\u2019s curiosity and make them want to learn more, find the answers and why not, consider investing in a new car. What\u2019s really impressive here is that the image of the car is not even important in the context. The message prevails.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxjsrsqqp\",\"width\":1200,\"height\":900,\"t\":1511444173,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>18. Sony \u2013 Create a visual image of the sound<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44250 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/18.-sony.jpg\" alt=\"Sony banner example\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">How do you imagine the sound in a visual style? Can you do it? Well, it seems that whoever designed the latest Sony Bravia banners managed to do so. This banner is a great example of creativity, imagination, and inspiration.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I know, there will not be many instances in which as a marketer, to be asked to do something similar. However, the example serves as an inspirational banner not by what it is or what it represents but for its simplicity. The simplicity of delivering the exact message in a creative design is staggering here.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bc5exy443\",\"width\":1200,\"height\":900,\"t\":1511445677,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>19. NFL Network \u2013 Find out what people want and give it to them<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44251 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/19.-nfl-network.jpg\" alt=\"NFL Network banner examples\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">What do people want? Some will say happiness, others will say money, a family, or a holiday overseas. These are however abstract wishes that we all have regardless of the social status. However, there is something everybody wants. People want to relax, enjoy their free time, and be able to de-stress after a hard week of work.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is where NFL Network\u2019s banner excels. It triggers yet another positive emotion, the endless weekly longing for the weekend. This is the time when we relax, enjoy our lives, and shed the day-to-day work-related accumulated stress. For a football fan, the banner offers a positive emotion we usually associate with weekend nights.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bxpfol00k\",\"width\":1200,\"height\":900,\"t\":1511444947,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<h2><b>20. Apple Music \u2013 The banner without visuals<\/b><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-44252 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2017\/11\/20.-apple-music.png\" alt=\"Apple Music web banner\" width=\"300\" height=\"250\" \/><\/p>\n<p><span style=\"font-weight: 400;\">I will conclude this list with probably one of the most intriguing and yet inspirational banners I got to see in the past few months.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This Apple Music banner is a great example that if you know what you are doing and how to do it, you don\u2019t need colors, images, or copy texts.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Apple is a company that knows how to advertise and most of all, how to take advantage of professional, clean designs. The following banner serves as a reminder that whatever you do, you can do it better even if you don\u2019t do much. More is not always better but you have to know how to implement the \u201cless\u201d so that it will be effective.<\/span><\/p>\n<p><script type=\"text\/javascript\">\nvar bannersnack_embed = {\"hash\":\"bc8wh4bb8\",\"width\":1200,\"height\":900,\"t\":1511445262,\"userId\":262561,\"responsive\":true,\"type\":\"html5\"};\n<\/script><br \/>\n<script type=\"text\/javascript\" src=\"\/\/cdn.bannersnack.com\/iframe\/embed.js\"><\/script><\/p>\n<p>Now let\u2019s talk about the display banners and the need to adapt to today\u2019s environment and formats available to designers.<\/p>\n<h2><b>The HTML5 versus Flash banners war<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">We all know that until a few years ago, if you wanted to display an animated banner you needed to learn flash or at least, hire a flash professional to build your banner. Things have changed after HTML5 was released, as the new version of Hyper Text Markup Language (HTML).<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> You can now <a href=\"https:\/\/www.creatopy.com\/create\/animated-banner\/\">create animated banners<\/a> \u2013 and all kinds of other types of animations \u2013 easier than ever and without worrying about all the issues that came along with the Adobe Flash plugin. <a href=\"https:\/\/www.creatopy.com\/features\/animation\/\">Customize and animate your ads<\/a> to match your product or services.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are many people who still believe that Flash is better than Html5 while others are already convinced that the latter is our next and most natural step towards normality when it comes to web multimedia. In order to make up our minds, however, we need to understand what each of these languages means and why Html5 banners are a better choice when it comes to marketing and advertising.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Adobe Flash is a multimedia platform and a rich internet application tool at the same time. It is used to add animations and interactivity to websites, games, and video clips but it is more valued for the excellent visual experience it provides. There are, however some issues that flash applets may cause, especially in the past few years. Why, you will ask?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The popularity costs and Flash is no stranger to security threats and breaches. Although patches were released quite frequently, people became somehow annoyed by these problems and the consequent crashes. When you patch something over and over again, it\u2019s almost impossible to deliver a stable version indefinitely. The result? Browser vendors, including Apple and Google, moved away from flash. As HTML5 is natively supported by all browsers, it seems like the war has almost ended with the latter one arising as a winner.<\/span><\/p>\n<h2><b>Why HTML5 banners are better<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">HTML5, unlike Flash, is now natively supported by all browsers. It\u2019s not a surprise, since the Hyper Text Markup Language is native to all browsers for a long time now. In other words, HTML5, coupled with CSS3 and sometimes Javascript, offers cross-platform compatibility while Flash is no longer supported by some browser and operating systems.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At the same time, in order to be able to play Flash banners and other types of visuals, you need to install the Flash plugin, a third party software that may or may not work with your favorite browser or operating system. In 2017, people expect that content to be delivered to them without the need to install anything, without putting much of an effort.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> When it comes to advertising, it\u2019s obvious that your audience will not be willing to install an unstable and outdated plugin just to be able to view some banners. Therefore, you need to adapt to the market and the society and be able to deliver ads that everyone will be able to see without investing time in making their systems or browsers compatible with your visuals.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Finally, if you choose HTML5, you don\u2019t need to worry about adapting your scripts so that they will be displayed correctly on all web browsers. Native support is already available, past issues such as browser compatibility are long since gone and forgotten.<\/span><\/p>\n<h2><b>The differences between HTML5 and Flash<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Flash is owned by Adobe while HTML5 was developed by many developers and over time, it\u2019s more likely to adapt easier to the requirements of today\u2019s web environment. While HTML5 is open-sourced, Flash is a proprietary script which makes it harder to patch and adapt to the newest requirements of the 2017\u2019s environment. There are however other important differences and I will try to explain them in this chapter:<\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"><strong> Mobile compatibility<\/strong>. HTML5 is widely supported by all mobile devices, it consumes less power and thus, it does not impact the battery life. This is an important fact since all mobile users complain about batteries and that they don\u2019t last enough. We include here smartphones, tablets, and laptops. This<\/span> <span style=\"font-weight: 400;\">experiment<\/span><span style=\"font-weight: 400;\"> demonstrates how <a href=\"https:\/\/iss.oy.ne.ro\/HTML5-Video-Battery\">Flash drains out batteries more than HTML5<\/a>.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong> Ease to design and create.<\/strong> With the help of an online HTML5 banner maker like<\/span> <span style=\"font-weight: 400;\">Creatopy<\/span><span style=\"font-weight: 400;\">, creating and embedding HTML5 banners is easier than ever. You don\u2019t need to learn how to code or how to work with complicated software. You need to access only your designer skills and implement them immediately.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong> There may be compatibility issues even on desktops.<\/strong> Flash is updated and patched for many years now. There are so many versions available out there and this can result in the plugin being often installed on desktops, but not in the right version.<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><strong> HTML5 does not require an external player<\/strong> or other third party software or plugins in order to run on a mobile device or a computer. Natively, it is supported by all browsers, a feature that makes it ready for today\u2019s requirements but also for the future.<\/span><\/li>\n<\/ol>\n<h2><b>Conclusion<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">As a marketer, when it comes to banner design and copywriting, you will always need inspiration and an open mind to make the best out of each campaign. Everything matters, starting with the visuals you get to use for design and up to the file format in which you save the final banner.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With this article, I have tried to pinpoint why HTML5 is better for banners, especially when they are animated or when you want to include clickable calls to action. I\u2019ve also presented some of the best 20 banners we can view online now, and why each of them is important in this context.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What do you think about this list? Did you try to create HTML5 banners? <a href=\"https:\/\/app.creatopy.com\/auth\/create-account?internal_source=internal&amp;internal_medium=Blog&amp;internal_campaign=BlogContentCTA\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-70331 size-full\" src=\"https:\/\/newblog.creatopy.com\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png\" alt=\"create and launch ad campaigns from start to finish\" width=\"700\" height=\"90\" srcset=\"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1.png 700w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-600x77.png 600w, https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-content\/uploads\/2022\/03\/create-ad-campaigns-1-150x19.png 150w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a marketer or as a designer for a marketing campaign, it is never easy to always come with fresh new ideas and even harder to create something that will inspire your audience and get the most out of your campaign. However, this is your job and if you are<\/p>\n","protected":false},"author":163,"featured_media":44360,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3995,3985],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/posts\/44225"}],"collection":[{"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/comments?post=44225"}],"version-history":[{"count":20,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/posts\/44225\/revisions"}],"predecessor-version":[{"id":82264,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/posts\/44225\/revisions\/82264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/media\/44360"}],"wp:attachment":[{"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/media?parent=44225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/categories?post=44225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creatopydevelopmentblog.kinsta.cloud\/blog\/wp-json\/wp\/v2\/tags?post=44225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}