How to Make a Website Banner? Creating an Effective Website Banner.

Advertisement in general is a necessity for any website in general. However, there are some cases when you might be spending far more on the advertisement than you’re getting out of that same advertisement. In these cases, it’s no surprise when someone tries to figure out the means of spending less on their advertisements. This is one of such cases.

The definition of a banner

Banner advertisement on the internet implies a rectangular promotional image with either static or animated content. Both pictures and texts can be included as a part of a banner. It’s not uncommon for most of the banners to have a hyperlink that activates when you’re clicking on a banner in question. A logical step from this concept is a video banner, which can play its video as soon

Contextual advertisement has also risen greatly in recent years, with banner advertisement targeting specific items or services that can be associated with the contents of the website in question. Knowing the means of creating an advertisement banner is important, but it’s also just as important to know the differences between banner types. Some of the banner types are listed below:

• Static banners have a single image as their base, could be in either JPG or PNG format. It’s not uncommon for static images to have low file weight that does not affect the page’s loading speed.

• Animated banners, on the other hand, include anything from several images in quick succession to actual videos. For example:

  • GIF banners consist of several images shown in a specific order and with a specific delay between them. The weight of such a banner directly depends on the amount of images used in the animation.

  • Flash banners are somewhat different in their approach, using Flash as the main source of animation. Flash animation is slightly more reactive when it comes to responding to user’s actions.

  • HTML5 banners are somewhat similar to Flash ones, using HTML5 as the main technology for animation purposes. Commonly accepted as the successor of Flash, HTML5 is supposed to be easier to understand and more versatile than its predecessor. It is also much more prevalent now, after Flash was officially discontinued in the beginning of 2021.

Interactive content could be presented in the form of a game or a survey, with the addition of sounds, pictures, and so on. Parts of animation could be created using vector graphics.

Banner details and variations

When it comes to sizes, there are many of them to choose from, with some banner sizes being as old as the online advertisement itself, and others being several years old, at most. Here’s a list of banner dimensions in no particular order:

• 728x90

• 300x250

• 160x600

• 150x150

• 468x60

• 125x125

• 300x600

• 336x280

• 120x600, and more.

It’s not uncommon for the process of website design to include potential advertisement banner placements, too. Some other logical assessments that are connected with advertisements are:

• It’s easier for a banner to be noticed if it is relatively big, and the increase in common screen resolutions brought the need to use bigger banners, such as 300x250 and others.

• Animated banners have an easier time when it comes to attracting attention of the visitors, due to the nature of the human eye that instinctively responds to any movement.

• The upper part of the web page seems to be the most suitable placement for banner advertising, with side banners and end-of-page banners being slightly less effective in comparison.

How to create a website banner and use it for advertisement purposes?

Figuring out the target placement for your banner is a good place to start, since you’ll be able to figure out the best ad size for this specific place. Usually, static banners could be easily added into the page’s HTML code by using the following basic command:

<a href=”/resource link” title=”title” target="_blank" rel="nofollow"><img src="/image path" alt="alternative text" /></a>

• a href=”/resource link” – a specific page that would be shown to the viewer after he clicks on the banner;

• title=”title” – a line of text that pops up whenever a visitor is hovering over the banner;

• target=”_blank” – sets specific rules for the one providing the advertisement after the transition to the resource link (_blank means that the page would be open in the new window);

• rel=”nofollow” – another line of settings for the banner, this one restricting search bots from indexing this specific link;

• img src=”/image path” – direct link to the image that is used as the main part of the banner;

• alt=”alternative text” – a line of text that is shown whenever the original image cannot be loaded correctly.

Additionally, this kind of code could also be generated automatically by one of the many tools on the Internet. All you have to do is to input the target resource address, banner image address and its description, and the code for your specific case would be generated in a second.

At the same time, it’s possible to operate with a more modern ad format such as HTML5. This allows for your banners to be both animated and customized extensively, and the process of uploading such a banner is far easier, too.

How to make a website banner with Viewst?

Viewst is an extensive but user-friendly online ad builder that works with a multitude of different banner sizes, types and offers many templates for specific cases. Aforementioned templates include different banner sizes, such as 728x90, 300x250, and more, and there are also various social media templates, such as Facebook profile image, Twitter header, Instagram picture and so on. Here’s how to create a regular banner using Viewst’s toolkit:

1. To get to the “My projects” page, you have to either sign in or register first, and then click one of the “Get started” buttons on the Viewst landing page.

2. “My projects” page is mostly used for all of your banner management duties, including their creation, editing and deletion. To continue, you’ll have to click the “New project” button, or choose one of your existing projects.

   1. Creating a new project specifically requires a few extra steps performed, such as choosing the correct size of your future banner, via either a number of presets or by inserting a banner’s dimensions manually.

   2. One more step that needs to be done here is connected with choosing the template. Blank background option is also available, but keep in mind that the vast library of templates that Viewst provides is also available for you to use as you see fit.

3. The major part of the process is directly tied to the things that you want to do with your banner, such as adding objects, changing backgrounds, adding text boxes, figuring out animations, transition effects, and many other options that Viewst provides. Additionally, Viewst operates with objects a bit differently, meaning that you don’t have to prematurely crop each and every image for the banner, but you can leave the cropping for the correct size to the Viewst.

4. Correctly saving the results of your alterations is also extremely important. You’ll start by clicking the “Download” button within the Viewst’s interface. Next you’ll have to choose between multiple different options, such as: saving the project within Viewst, or exporting the project in one of the file formats, such as PNG, GIF, MP4 or HTML5.

It is worth noting that Viewst allows you to generate a permanent link to your banner once you’ve downloaded it at least once, no matter the format. Additionally, link generation allows for both static and animated banners to be added to the website’s code using the method we’ve described above.

You can also use the traditional method of downloading the banner file in any format and uploading it to the website in question if your administrator toolkit is capable of that. All of the supported file formats are commonly used, and even HTML5 archive can be easily added to your website if it’s capable of supporting HTML5 code in the first place.

Conclusion

Understanding how to make a website banner is important, since online advertising is extremely popular and is capable of showing amazing results, too. The correctly created banner would be able to easily attract many viewers to your product or service, and animating said banner is bound to bring even better results.

In that regard, Viewst is incredibly useful with its versatile interface and its range of features, from image editing to animating and transition effects. A user-friendly interface helps with understanding how to create a website banner the right way, and several different exporting options help you with choosing the one format you prefer the most.