Skip to main content

Smallsite Design

Online management help

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.

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.

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 like English, but is its end for right-to-left languages like Arabic.

Subsite summaries

This view summarises lists the banner values by subsite.

Subsite

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

Locale

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

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, use a ~.

This mode allows viewing and editing of 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, the main-master value will be used.

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

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

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

Clicking on the Reference label of the Layout field will show a table of the maximum, default, minimum and current values for each of the banner adjustments.

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. Keep it simple.

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

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.

Setting Gradient to be different to Luminance makes it the colour of the edges of the banner. The Luminance colour moves with the centre of the text when Text offset is other than 0. This complements any banner insert image, such as a logo. The insert image will appear at the start of the banner if Text offset is positive, at the end if negative, and not at all if 0.

In Smallsite Design, the principal background options are:

  1. a.Full-width background image – a natural option if such an image has been used in your social media pages
  2. b.Logo or headshot – placed at the end of the banner, displacing the banner text towards the start
  3. c.No image – just the background colour with the text in the centre.

For a full-width banner image, Background must be set to Transparent.

Smallsite Design allows for quite large background images, so allowing 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. Consider pictures devoid of significant elements in the centre so the text is clear, and so clearly displays its message.

An insert will scale to fill the visible 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 of Text offset is applied. Consider making the background of an indent transparent, along with transparent padding if wanting a floating logo effect. PNG images allow transparent backgrounds.

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.

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 20-30% 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.

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


Manage         Help   Powered by: Smallsite Design©Patanjali Sokaris         art-a  3  0  2020-10-05-19-41-11