What is This?

This page lays out the default styles used across liquidchurch.com, it was created and is maintained to serve as a central and authoritative descriptions of the styling that should be utilized on the site and includes directions on how to implement various styles.

List of Contents

  1. Text
    1. Paragraph Text
    2. Text Headings
      1. H1, H2, H3, H4, H5, H6
  2. Media
    1. Workflow
      1. For Images
      2. For Video
    2. All Images
      1. What File Format: JPEG vs. PNG
      2. Compressing Files
      3. How Big Is Too Big?
    3. Media Sizes
      1. Slider: 1920 x 720 px (8:3 ratio)
        1. Currently slider functionality is only on the home / front / main page)
      2. Page Headers: 1920 x 720 px (8:3 ratio)
      3. Front Page (“Home Feature”) Boxes: 960 x 480 px (2:1 ratio)
        1. These appear below only on the front page below the slider.
      4. Other Boxes: 960 x 480 px (2:1 ratio)
        1. These are used on all other pages that have image based navigation.
      5. Series / Message Features: 1920 x 1080 px (16:9 ratio)
  3. Classes for Styling
    1. Body Text (body-text)
    2. Buttons (blue_btn)

Text

Paragraph Text

  • > 767 px wide = 20 px
  • < 768 px wide = 18 px
  • < 319 px wide = 14 px

Text Headings

All text headings are in Avenir Next LT Pro Demi font.

  • Color: #14a7e0
  • Line Height: 110%
  • Text Transform: Uppercase
  • Margin (Top) 1.2rem (Right) 0 (Bottom) 1.5rem

H1

There are different font sizes depending on how wide the screen is:

  • = > 768 px font size = 44 px;

  • >319 px or <768 px font size = 32px;

  • <319 px font size = 24 px;

H2

There are different font sizes depending on how wide the screen is:

  • = > 768px font size = 40px;

  • > 319 px or < 768 px size = 28 px; (need to fix)

  • < 319 px size = 22px; (need to fix)

H3

There are different font sizes depending on how wide the screen is:

  • > 768 px font size = 30px;

  • > 319 px and < 768 px = 24 px;

  • < 319 px it is 20 px;

H4, H5, H6

Headers 4-6 are rarely utilized. The font size for each of these will be whatever the default size is in a particular browser – this can vary between browsers.

  • This is H4, it is the browser default size

  • This is H5, it is the browser default size
  • This is H6, it is the browser default size

Media

 

Workflow

 

For Images

Images should go through a consistent workflow before being placed on the site. Outlined below are some of the more technical details, this section focuses on a higher level overview of the persons involved.

  1. When an image addition/update/delete request is made it should be logged in the IT help desk.
  2. IT should ensure that the Communicators Director and the Graphics Director are both aware of the image change request and in agreement with the update. Oftentimes the request will not be for a specific image, in this case responsibility should be handed off to the Graphics Director for selecting the image.
  3. The Graphics director will return a finished image – whether the pre-selected or another image – and this is the image that should be posted to the site.
  4. The technical steps outlined after this workflow section should be followed before the image is actually posted to the site.

For Video

Video media should go through a similar consistent workflow before being placed on the site, technical details are outlined later in this document, this is focused on the workflow process and the individuals/departments involved.

  1. Any video request should be created in the IT help desk.
  2. IT should ensure that the Communications Director and Creative Services Director are both aware of the video request and have signed off on the request.
  3. Technical steps and specifications are outlined later in the document.

Note that any video placed on the site needs to be responsive. This can be accomplished by encircling any video (e.g. Vimeo, YouTube) with a div with class set as videoWrapper.

<div class="videoWrapper"><iframe src="https://theurl.com/here" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

All Images

There are some general considerations when preparing images for the web. If you are unfamiliar with how to execute these preparations, please speak with me (Dave), I’m happy to help.

What File Format: JPEG vs. PNG

There are a number of different formats in which images can be saved including JPEG, PNG, BMP, GIF, TIFF, WebP, and SVG. For various reasons different formats are best used in varying circumstances. Older formats like BMP, GIF, and TIFF should almost never be used. WebP and SVG are newer formats that work well on the web but only if people’s browsers meet the requirements, which is not always the case. This leaves us with essentially two formats to choose from: JPEG and PNG.

In almost all cases JPEG is the preferred file format. The exception being when one is creating a transparent image, in this case PNG may be necessary. The JPEG file will provide visually identical visual quality while having a significantly smaller footprint than a similar PNG.

Compressing Files

Note: Creatives, Communications, etc. are welcome to optimize images in this manner – but these instructions are primarily meant for whoever is uploading the image to the site. An image should never be placed on the site until it has been optimized.

In addition, files should always use the maximum lossless compression. Lossless means that the data in the file is optimized while lossy compression means that data is removed from the image. The latter usually causes loss in visual quality and is generally avoidable.

On Mac you can use ImageOptim to compress image files (JPEG, PNG, GIF) in a lossless mannner. On Windows you can use FileOptimizer which handles a wide variety of files including JPEG, PNG, GIF, PSD, etc. PNG files can take quite a while to optimize and reduce the usability of your computer while they are being optimized. For this reason I generally recommend using TinyPNG (a web-based service) for optimizing PNG files.

In addition to these tools on any JPEG image you should also use JPEGmini. The free version allows up to twenty conversions per day, if you find yourself needing to optimize more than this many images we can purchase a professional license for you for $20. This tool is lossy, but uses advanced algorithms so that while data is removed the visual quality of the image is maintained. This can reduce the file size by 35%-50%.

If an image is still on the large size after using JPEGmini, I recommend running it through ImageOptim or FileOptimizer and then re-running through JPEGmini, this oftentimes results in significant savings. I don’t find that further rounds of running it through these two programs gives any significant space saving.

How Big Is Too Big?

The final question we need to address before uploading an image is “How big is too big?” Web pages consist of many parts, each of which must be downloaded to the viewer’s computer. The larger the size of these files the longer it takes to load the page. The old saying was that folks began abandoning sites after 5 seconds of waiting for a site to load, I’d suggest that a current figure is closer to 2 seconds.

The uploaded image file should never exceed 800 KB and ideally images should be under 100 KB. For sliders / page headers this can go up to 300 or 400 KB, but the smaller the better. If you are to get the file to this size, please contact Dave before uploading and he will review if anything further can be done to reduce image size.

Media Sizes

(Front Page) Slider: 1920 x 720 px (8:3 ratio)

HomeFeature_slider_SPWwk2

Page Headers: 1920 x 720 px (8:3 ratio)

PH_FAM_Liquid_Kids_6_20_16

(Front Page) “Home Features” Boxes: 960 x 480 px (2:1 ratio)

Welcome to Liquid!

(Other) Boxes: 960 x 480 px (2:1 ratio)

NAV_FAM_Liquid_Kids_6_20_16

Series / Message Features for Message Archives: 1920 x 10 px (16:9 ratio)

Reference Image Coming Soon!


Classes for Styling

A CSS class is used to style a specific element in a certain way. For example, in the buttons above we are using the blue_btn CSS class. In this section we’ll touch on a few different classes that are available for formatting a page.

Body Text (body-text)

On some pages you may want to use the entire width of the page available, but on other pages this may feel crowded – especially if the page is primarily text. This class will force the text to use only 800 px in its placement of the text and will center this placement (of the text area, not the actual text, which remains left justified).

Usually the best way to use this class is to place a div before and after the content of the page. For example:

<div class="body-text"> <p>Some text here.</p> <img src="some_name_of_file.jpg"> <p>Some more text.</p> </div>

Buttons

There is a default button style for Liquid pages, it is contained in a class called blue_btn. You can make a hyperlink into a button like so:

<a href="https://www.liquidchurch.com/" class="blue_btn;">Liquid Church</a>

The blue button looks like this:

Liquid Church

  • Color: #0074c8
  • Font Size: 16px
  • Line Height: 16px
  • Font Weight: bold
  • Font Variant: normal
  • Text Align: center
  • Text Transform: uppercase
  • Background: #fff (white)

If a blue button is placed within a span like so (this isn’t actually true, it should be…will fix):

<span><a href="https://www.liquidchurch.com/" class="blue_btn;">Liquid Church</a>

The font size increases to 40 px, the line height increases to 40 px and the color becomes #f08a41 like so:

Liquid Church