To main heading

Smallsite Design

Online management help

4. Banners

Banners in Smallsite Design are meant to provide consistent branding across all pages of a subsite.

The banner for the master locale of the main subsite provides the basis for all of the banners, in that if a banner value is not defined for another subsite-locale combination, the main-master value will be used. This allows for minimal adjustments to be made for another subsite or locale while maintaining the same overall look-and-feel. Conversely, banners can be made radically different in the text, sizing and dimensions used.

Typically, the banner headline will be the same for all subsite-locale combinations, so would be defined as part of the main-master combination and left empty for all others. It is the byline where differences between the subsites and locales would be made explicit, perhaps augmented by hue differences in the subsite theme and banner.

For those who don't have a sense of visual design, perhaps get some help from someone who does to get you to a workable layout quickly. You may then feel more comfortable experimenting with slight adjustments as you go along. Just make a note of the the settings or do a screenshot of the summary page before making any adjustments.

Editing of a banner is done isolated from the normal theme colours of a subsite, as the editing environment uses a greyed light theme. However, colours can appear quite different when in close proximity to other colours, so a banner may look fine while editing, but appear different when viewed normally on a page, especially in relation to article headers. This makes getting a banner right an iterative process, though after some experience and experimentation, increased expertise as to what the effects of changes will be makes convergence on the desired look faster and easier.

It would likely be less disruptive to site continuity to get any changes to the banner wording and layout done and committed first, then iteratively tweak the colours.

When discussing the banner, references will be made to moving towards the start or end of the banner, rather than moving left or right. This is because the left of the banner is its start when using a left-to-right Latin script as used for English, but is its end for right-to-left scripts like Arabic.

Subsite summaries

This view summarises the banner values by subsite.

Subsite values

Listing of the currently used banner values for the subsite.

The fields for the subsite banner values are:
#NameDescription
1StatusWhether the banner is enabled
2Font styleBasic font styling applied to the banner text. Sans-serif is the styling used for other heading text, giving a bold look. Italic serif gives a more pseudo cursive style for a more informal feel
3BackgroundThe name for the selected hue-saturation-luminance (HSL) combination
4AccentThe variance in banner hue from the subsite theme. Not shown if Background is Default or Transparent. Each option is half of a theme Hue option step
5LuminancePage element from which the banner luminance is derived. Not shown if Background is Default or Transparent. If changed, Gradient is changed to be the same
6GradientPage element from which the banner edge luminance is derived. Not shown if Background is Default or Transparent
7TextText colour option used. Not shown if Background is Default because the subsite's theme page colour is used
8ImageImage to use in the banner. If Background is Transparent, only Banner images can be selected, otherwise onlyInsert images can be selected

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 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.

Locale values

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 columns for the locale banner values are:
#NameDescription
1LocaleLocale identifier as a jump to the details for that subsite-locale combination
2HeadlineUpper line of text in the banner
3BylineOptional lower line of text in the banner
4Head sizeSize of the banner headline text as a percentage of four times the height of the page body text, though the whole banner scales down with the width of the page
5Byline sizeSize of the banner byline text, as per Head size
6Byline offsetOffset of the byline from the headline, as a percentage of the banner width, from the start of the banner, where 0 is the centre
7Byline mergeCloseness of the byline to the headline, as the number of tenths of a percent of the font size
8Text offsetOffset of the text from the centre of the banner, as a percentage of the banner width, where 0 is the centre. The centre of any gradient is moved with the text centre. This is to allow for an insert image or significant pictorial element at the end of a full-width banner image
9Pad abovePercentage of the banner width to add as space above the text
10Pad belowPercentage of the banner width to add as space below the text
11Insert topPercentage of the banner height to add above the insert
12Insert heightPercentage of the banner height to make the insert height
13Insert indentNumber of tenths of a percent of the banner width to space the insert from the ending edge, making the maximum value of 50, 5%

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. 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.

This mode allows viewing and editing the banner details for a subsite-locale combination.

Note that only the master locale for the main subsite will have values for all the settings. If any values do not exist in the other subsite-locale combinations, they will individually fall-through to the subsite master locale value if any, then to the main subsite value.

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

The banner actions are:
#NameDescription
1StatusToggle the banner visibility
2ResetChange the trial values back to what is currently used by the subsite. Not shown if the trial values are what is currently used
3CommitUpdate what is currently used by the subsite with the trial values. Not shown if the trial values are what is currently used

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 effect of increasing each layout parameter is:

  1. a.Head size – increases the headline text size
  2. b.Byline size – increases the byline text size
  3. c.Byline offset – moves the byline towards the end of the banner
  4. d.Byline merge – moves the byline closer to the headline
  5. e.Text offset – moves the text towards the end of the banner
  6. f.Pad above – adds more space above the headline
  7. g.Pad below – adds more space below the byline
  8. h.Insert top – moves the insert away from the top
  9. i.Insert height – increases the height of the insert
  10. j.Insert indent – moves the insert away from its closest edge.

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.

The locale controls are:
#ControlDescription
a-10, -3, -1Reduce the selected parameter by the units indicated
bResetApply the default value
c+1, +3, +10Increase the selected parameter by the units indicated
dRemoveRemove the current value to allow fall-through to the master locale for the subsite then to the main subsite. Doesn't show for the master locale of the main subsite

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 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.

Design approach

There are some general design considerations in making a banner an effective means of branding.

Branding is simple

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, 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.

Background

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.

The types of image scenarios are:

  1. a.Full-width background image – a natural option if such an image has been used in your social media pages. Background must be set to Transparent
  2. b.Logo – placed at the start of the banner, displacing the banner text towards the end
  3. c.Headshot – placed at the end of the banner, displacing the banner text towards the start
  4. d.No image – just the background colour with the text in the centre.

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 during saving and reducing the number of colours until before the colours change will minimise the file size.

Text

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. The oversized text may also result in text collisions if Byline merge or Byline offset clearances are set on a non-Android device.

Tweaking distances

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 below to set how much of the banner image shows.

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.

  • History
  • Files
  • Links
  • Contact   Glossary   Policies
  • Categories   Feed   Site map

  • This site doesn't store cookies or other files on your device when visiting public pages.
    External sites: Open in a new tab or window, and might store cookies or other files on your device. Visit them at your own risk.
    Powered by: Smallsite Design©Patanjali Sokaris