This guide will explain the basic functionality of html based banners compared with traditional jpeg banners. I will be giving the positives and negatives of both methods and suggesting how they’re best used within web spaces.

What is a responsive html banner?

Consider HTML banners, not as flat images, but instead as two independent layers. The foreground is made up of text whilst the background is made up of imagery. Although this background remains a normal JPEG, the text is controlled through the use of html in the websites backend. Unfortunately, this means that creativity and flexibility is slightly restricted due to the codes inaccessibility. Only the words of the text can be changed through Magento. An example of how HTML banners work is shown below.

html_banner_example

As you can see the JPEG background is a completely separate piece of imagery from the text in the foreground. Space has been allocated within the JPEG in order for HTML text to sit comfortably within the same frame.

The Benefits of HTML Type

Creating a banner with vector type, separate from the JPEG has multiple benefits. The key advantage of using HTML based text is that it gives the banner dynamic flexibility, allowing it to respond towards the size of the browser window. For example, if you were to view a website on a mobile device, you’d find that the image scales down, but the text remains at a readable size. To summarise, keeping type and image separate allows for a dynamic composition which adjusts itself to suit whatever media platform it is viewed from. This is shown in the example below.

devices-for-carousel-sr

Notice how the type responds to the size of the screen. It shifts from the right of the image, allowing itself to rest at the bottom. This wouldn’t be possible if the banner was one solid JPEG. Mobile devices are just one example of how a website responds to browser size. If you resize the browser window on your computer it would have a similar effect.

The Use of JPEG Banners

Whilst responsive HTML is useful for keeping type legible in smaller browsers, it’s not an essential part of every banner. In many cases, JPEGs still remain the easiest, quickest and most effective way of updating messages on your site. Short-term product sales and promotions, for example, are fine for use in small banners without HTML, so long as the point sizes remain reasonably large. A site can still function perfectly fine with simple JPEG compositions if you follow these basic rules. Below is a visual guide to how poor jpeg use can effect the sites layout on mobile.

Bad_site_example2

  1. Low font sizes can appear too small in jpeg banners
  2. Large banners may have their type cropped if it’s left as JPEG
  3. keep fonts at a reasonable point size
  4. HTML type can move into the correct position

There is also another method which allows imagery to adjust to mobile. Having two JPEGs which interchange with one another can create a similar effect to that of HTML. This way you get the flexibility of JPEGs with added responsiveness.

jpeg_example

This method is still not recommended for larger banners, however, as larger banners require greater flexibility for changing window sizes. If the size of a window is being adjusted on desktop, the type must also adjust with it.

This is where HTML text gets the upper hand as you get more reliable results with only one jpeg upload. You do not need to update more than one image at a time. The code deals with any adjustments automatically.

Summary

Html banners have become extremely important in adjusting web spaces for small browsers and portable devices. Whilst the use of multiple JPEGs gives you the ability to update your site frequently, having type separate from imagery allows for content to remain dynamic, forming a layout which best suits whatever platform it is viewed from.

Both methods have their own advantages and dis-advantages, meaning that neither one is completely perfect. Instead these strengths need to be managed responsibly in the areas of your site where they’re most suited.