4  Banners

Listing of the currently used banner values for the subsite.

Accent is useful for a site with subsites, as the subsite theme can be common to all subsites to give the whole site a similar look and feel, but with a different banner Accent for each subsite to provide some differentiation. Varying the Accent for the Subsite in conjunction with this can provide some extra differentiation.

If a subsite has no image, it will inherit from the main subsite, if it has one, but only if the subsites' Backgrounds are both Transparent or both not.

The hues of the banner are centred around the subsite's theme hue. That means that while banners can be made to show the same hue for subsites close to each other in hue by judicious Accent settings, that cannot work for divergent hues. To have the same banner colours across subsites, a banner image must be used with a Transparent Background in those subsites. A banner image can be as small as one pixel high, because the image is repeated vertically in a banner until it fills it. This allows having a patterned texture in the banner with a minimal file size.

For the Transparent Background, at least one of the three Text options should be suitable for any banner image chosen. If not, the image would need to include the text as well, and ~ should be used for the Headline.

If catering for a locale with a different text direction, and wanting the image to reverse in tandem with a change, make sure to include a variant of the background or insert image with the opposite direction to the master locale. If wanting different images for different locales, add a variant to the image for each required locale. See Files for details.

Listing of the currently used banner values for the locale.

Before getting into all the parameters that can be adjusted, a banner needs to be designed by its overall look, and not as a design-by-numbers exercise. In experimenting with the parameters, focus on seeing what effect changing the numbers has on the overall look. After experimenting, perhaps then write down the numbers.

The inheritance path for blank values for any of these is current locale of subsite > master locale of subsite > main subsite. If Headline is blank after this, no overlaid text will show, making it suitable for a fullwidth banner image with its own text text. If wanting a full-width banner image with its own text for a non-master locale where the master locale does have a non-blank Headline, use a ~. If Byline is blank, it will not be shown. If wanting no Byline for a particular non-master locale when the master locale does, use a ~.

Because Android phones usually show text about 8% larger than almost anywhere else, if not having access to an Android phone to check that Head size and Byline size do not make the text in them wrap around, allow at least 5-10% clearance either end of the text when designing on other devices. This Android upsizing also affects spacings, so that using Byline merge or Byline offset to produce tight clearances will likely result in text collisions. Err on the side of generous spacing. This is what happens when one big maker goes their own way, and everyone else is lumped with the consequences.

The actions define whether to show the banner for the subsite, and whether to reject or use the trial values.

This section specifies the key banner elements that are common for all locales for the subsite.

See the Subsite values subsection of the Subsite summaries section for the general description of the subsite banner settings. This subsection will cover any special considerations to be aware of when adjusting banner settings.

Select the Luminance that gives the right depth to the banner colour. Select the Text that gives the right emphasis to the text against the background, as it can significantly change the banner look-and-feel and the consequent emotional response.

If the current Background is Transparent and a full-width banner is specified, changing to any other background will remove the image from the banner. If an insert image is available, it can then be added. Conversely, if Background is not Transparent and there is an insert image specified, changing Background to Transparent will remove the insert image. After the change, an image from the list of available images appropriate to the new setting can be selected.

This section specifies the locale-specific text and dimensional values.

See the Locale values subsection of the Subsite summaries section for the general description of the locale banner settings. This subsection will cover any special considerations to be aware of when adjusting banner settings.

If the headline is a personal name, or a formal company or organisation name, it will tend to be the same for all locales, so the headline is the obvious place for it, by defining it only in the master locale. The byline can then be used to localise the banner for each of the other locales in their native language, while the headline is inherited. The Byline offset and Byline merge will probably need to be ajusted for each locale.

The insert values are only relevant if the Background is not Transparent and an image is selected. The current value is as it is rendered, even if it is inherited, whereas the summary only shows a value if it exists for the locale. The other columns are for reference and show the minimum, default and maximum values for each parameter. The current values are bolded so they stand out.

An insert image will not be shown if Text offset is 0, otherwise shown to the side opposite to where the text is moved. No part of an insert can ever be outside of the banner, so Insert top plus Insert height can never be more than 100. In increasing one of those, only as much as will keep the total to a maximum of 100 will be applied. Removing any of the insert values for a locale will remove all of them to prevent problem combinations with current locale and fall-through values. Increasing Insert indent may also require manually increasing Text offset to prevent collisions with the text.

Effective branding is meant to be a see-once, remember-forever sort of deal.

To that end, the banner needs to be simple. Any complexity or confusing mixtures of elements only distract from the branding goal. People may read it once, but if effective, when seen in the future, it will be remembered and responded to subconsciously. If the first vision and experience of using the site are positive, that will predispose readers to a similar reaction upon seeing the banner on subsequent visits to the site.

This means that non-branding elements need to be kept out of the banner, and that includes what might be seen as critical information. A phone number, address or URL may seem important enough to put in a banner, but since people will not read the banner again, they will expect that information somewhere else, like on a contact page.

The real important elements are the colouring, placement of text and what words are used, along with any logo that people may be used to. The magic permutation of these may take several iterations to get to a point where you are satisfied with them. However, know that beauty and balance are in the eye of the beholder, so get others, whom you trust to tell you the truth, to tell you about their reactions.

Regarding colour, care must be taken to not clash with the heading colours of the subsite theme. In general, unless the colours are very compatible, do not use the Dark or Headings options for the Background for both the banner and the theme. Perhaps get an opinion from someone with good colour-matching sense before committing to such combinations.

In general, using the same colours for the banner across the whole site is best, especially if they are long associated with the brand. However, if wanting to differentiate subsites, using a different Accent may work without losing the feel of the branding. Check in with those familiar with the brand to see if brand identity is still maintained.

Like article headers, banners scale with the width of the page, so their elements stay in the same spatial relationship to each other, including any insert. However, do not expect precision, as browsers can make slight variations when rendering, but especially as Android oversizes text by 8%, possibly resulting in text collisions if Byline merge or Byline offset are set using non-Android devices.

The background of a banner sets the tone for how a visitor responds to a subsite as it is the first thing seen, if only subconsciously.

Colours invoke an emotional response, so they need to be carefully considered. In general, what sort of colours we like when we are thinking about what the site is for will lead the way. That means the optimal colours may not be what we love to use as our computer desktop colours, but what best evokes the sentiment we want customers to have towards us. It's like if we were a dentist who liked strong classical music or heavy metal, we would be unlikely to play that music while trying to keep patients relaxed in the chair, unless we only want patients who like that music, which may severely cramp our financial viability!

Dark banner colours can play off well against the lighter page themes, making for a striking banner. For a more gentle site look, making the banner have one of the light settings, but with a small Accent can make a more harmonious banner. However, making the banner have the same Accent as the theme heading can make the look too strong. In this case, perhaps make the banner have a 0 Accent, while leaving the mild theme Accent.

Gradient provides some subtle flair to a banner. In general, for a light-coloured banner, what tends to be the aesthetically pleasing is to choose Navigation for Luminance and Heading for Gradient, and vice versa for a dark banner, as this draws attention to the centre of the banner. See Dark theme for an example. The centre of the effect will shift away from the side where any Text offset is applied, which may make the gradient less pronounced at the other end. A Text offset of 0 hides any insert image.

Background images can be quite large, allowing for so-called hero pictures. If wanting to use such large pictures, they must be fairly clear of detail where the text will go, otherwise they may make the text unreadable or visually confusing.

Inserts can be sized and positioned, making them perfect for logos. An insert will scale with the vertical size of the banner, which is roughly the sum of the text heights and the padding. This may cause it to encroach on the text if too much padding is applied and not enough Text offset is applied. For high-quality rendering, use a width of 390 pixels for the source image to upload.

Consider making the background of an insert transparent, perhaps with fade to transparency to blend in with the background if for a headshot. PNG images allow transparent backgrounds. For logos, selecting the palette option in your image editor during saving and reducing the number of colours until before the colours change will minimise the file size.

Like with article headers, banners have a headline and an optional byline.

The headline-byline paradigm is borrowed from newspaper front pages, where the headline is short and catchy, attracting immediate interest, while a byline helps provide more context if the headline is too terse or vague. However, to be taken seriously, the headline must still be relevant to what the site is about, rather than just a means to draw people in, otherwise, it is what is known as bait-and-switch, which is deceptive.

Normally the headline will be large, and if there is a byline, it will be sized to be roughly the width of the headline, or slightly wider. If the byline is too long at a readable size, perhaps consider rephrasing it. Conversely, the two lines can be juxtapositioned to make the headline into a smaller introductory phrase with a larger byline as the effective headline. The Headline and Byline names are guidelines, not rules, and the two lines have the sames ranges of heights and number of characters.

Typically, the Headline will be a personal, company or product name, and the Byline will be an aspirational, values or benefits statement. It can take a while to get a byline that works, and it may evolve over time.

Note that on Android phones, fonts occupy about 8-10% more space than on other phones or desktops, which means that text lengths should not be pushed too close to the edges. On a banner, a minimum space of 10-15% or so of the allowable space needs to be at each end of the longest banner text to not appear cramped, which would also allow for the oversized Android characters. The oversized text may also result in text collisions if Byline merge or Byline offset clearances are set to make the text close on a non-Android device.

Placement of text and inserts can be optimised for best effect.

If the Headline is blank or ~, no text is displayed and all the parameters for Head or Byline are ignored. This is the setup for using a full-width banner with its own text. In this case, just use Pad below to set how much of the banner image shows. If not wanting a byline when the master locale does, use a ~.

If using a byline, text maybe made more visually integrated by merging the byline towards the headline. While the byline can generally be left in the centre, if the headline has descenders, like with the g, it may be better looking to offset the byline to one side of the descender, rather than un-merge away from the headline. Alternatively, line up the headline's descender with where there are there is a gap between words or no ascenders in the byline. Just be wary of making them too close on non-Android devices because its 8% oversizing of text may result in text collisions.

Another use for offsetting the byline is where the headline text is the same as the core name of the domain, so a small byline with the suffix domain(s), like .com.au, can be offset near the end of the headline, perhaps after the last descending letter, and merged close to it, to do double duty as the full domain name, without cluttering up the banner.

Pad above and Pad below can be used to make the banner taller, or move the text to be more optimally placed vertically in a hero picture, while using Text offset to optimally move the text horizontally.