As brand consistency is important to represent your company’s print materials and ads, it is also important to maintain consistent branding on your website. CSS also called Cascading Style Sheets or Style Sheets for short is a programming code used to format the layout, colours, and fonts of your website’s basic branding. It determines how these visual elements are displayed on your site, giving you a consistent look every time they are used.

What elements are you talking about?

All the fun elements you can add to a post or page: buttons, headlines, accordions, and column layouts to name a few. The website’s style sheet file is the central control centre for their colour, size, placement, font families, and a bunch of geeky things we won’t get into. Every time an element is used, the style sheet creates the ‘default’ look without you having to guess how it should look. These elements will look the exact same on all your post and pages.

While you do have some ability to override the default look – for example making a warning headline stand out by changing the font to bold and red instead of the default blue – we recommend you do so sparingly so every page of your site looks uniform and professional. We know getting wild with glitter and rainbows can be fun but let’s keep it to the occasional birthday party. Consistency equates to a better user experience, longer page visits, and faster conversion rates.

What does a style sheet look like?

Once I save out the final design concept of your new website and start translating the design file into this style sheet code and other technical coding languages. I create a very long list of element names and code commands as shown in the right column. This list can go to hundreds of lines of code or more to make this code to make a pixel-perfect site!

Have you ever encountered inconsistent branding?

Your brand is one of the most important things in your company; it is how the world identifies you. While branding isn’t just about your logo, it still plays a key part in helping people easily recall your brand. You should always be protecting and monitoring the use of your logo and branding elements. It’s when things aren’t unified and consistent that branding efforts can start to fall apart.

There are two simple ways that you can implement now to help ensure that your brand is being represented correctly. The first is to create a Brand Usage Guideline and the second is to have an Identity Kit in a place readily available to any employees that may need it. Both of these can help if you ever use a designer. All the files they will ask for in relation to your brand will be in this folder.

A usage guideline

This guideline contains all of the basic information about your branding that you and your employees can keep at their desks as a quick reference guide. More in-depth pieces such as a whole branding/identity manual can be created that covers much more in-depth uses.

Identity kit

This is a folder located in a central location that contains all of your logo files, font files, and any secondary elements used in your marketing.

1. Your logo and any variations of it that are okay to use

Make sure to have these in several different high-resolution file formats:

  • A vector file such as an Illustrator (.AI) or .EPS file – These types of files allow graphics to be resized at any scale without losing quality. If you have any design-related work sent out, this is the file the vendor will more than likely ask you for.
  • Transparent .TIF or .PNG – These types of files allow an image to be saved with a transparent background allowing you to place it on different backgrounds as needed.
  • .PDF
  • .JPG – Versions for both print and web.

Having more than one orientation (horizontal and vertical) is very helpful as a logo will be placed on multiple different platforms. For instance, a logo version in a square format comes in handy when uploading to Facebook or Twitter as a profile picture. This ensures that your logo won’t be cut off anywhere and made unrecognisable. 

2. Specific fonts

More than likely your logo uses a specific font for the text. Be sure to include the font files so folks aren’t randomly choosing fonts that are close to or completely different from the ones that are supposed to be used.

3. Secondary Elements

Secondary elements you may use consistently while marketing your company could be photos, graphics, patterns, and icons; anything you use to support your brand. Like your logos, make sure to have high-resolution files of them on hand in several different file types.

4. Colour Palette

Keep a text file that has different colour profiles for your company colours. The most common form is the hex number, a combination of numbers and letters that a device converts into a colour.

London web designer – Thomas Albohm - Resources