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.

If catering to locale with different text directions, 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, the headline will exist but be blank, making it suitable for a fullwidth banner image without overlaid text. If Byline is blank, it will not be shown. If wanting no Byline for a particular locale or subsite if others do, 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 don't make the text in them wrap around, allow at least 5-10% clearance either end of the text when designing on other devices.

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. 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 indent values for a locale will remove all of them to prevent problem combinations of 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, don't 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, don't expect precision, as browsers can make slight variations when rendering.

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. Note that the centre of the effect will shift away from the side where any Text offset is applied, which may make the gradient ineffective 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.

Indents 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. Consider making the background of an indent transparent, perhaps with fade to transparency to blend in with the background. PNG images allow transparent backgrounds. For high-quality rendering of logos, use a width of 390 pixels for the source image to upload.

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 shouldn't 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.

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

If there is no Headline text, 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 bottom to set how much of the banner image shows.

If using a byline, often the text can be made to look more visually integrated by merging the byline towards the headline. This can be done in small increments. While generally the byline can 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 no ascenders or there is a gap between words in the byline.

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, can be offset near the end of the headline, 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.