style 1200 300

Overview


It is suggested that you read this first. We always appreciate feedback, so questions are welcome.

Fontfaces — Headings and Paragraphs

This section deals mostly with defaults. Please try to always use the default. That is the key to the site having a consistent look.

Images


This section deals the trinity of website image management.

  1. Small image size and file size
  2. Consistent Image size
  3. Minimize images quantity hosted

Standard Colors


It We use the standard hex system a # followed by six letters or numbers. Upper and lower case are treated the same. Thanks for adhering to these colors. When in doubt a blue - yellow (gold) combination is safe on this site.

F A Q

None Yet.

Open

WIP

Website Styling

Your copy is a boat and your design is the ocean

The two were made for each other, but they have to work together.

Great design can make a website look good, but if users aren’t reading your content, then you may be heading towards a marketing shipwreck. It’s the same with your written content. Without visuals and good design your copy is left incomplete.

A word of warning: add too many visuals and you run the risk of drowning out your content. Trust me I’m from Belfast. We built the Titanic. Using too many colors, photos, animations and text features will make your readers jump ship.

It’s all about finding that sweet spot. Keep it clean, keep it clear, keep it readable.

—from 99designs.com

 

Our website will simply look better and be easier to use for our members if we strive to have a consistent look and feel through out the site. To that end please take a break and become familiar with the information contained within this page.

There are a few thing you may need to aware of from the world of typesetting. I will list a few herein but there are others you will pick up as you become more familiar with the processes.

A return marks the start of a new paragraph. A shift-return just starts a new line. If one does not give you the result you wish try the other.

Please do not use all caps to bring attention to something or for headings. It is a habit from the typewriter days.

Use the 'Paragraph" and Heading Styles to format your information. Please avoid the bold key above unless necessary.

Please do not change the font family or font sizes unless absolutely necessary.

Please stay within the colors of the site.

Do not over do anything. Images that are not consistent or too large disrupt the flow of the page.

Please use reverse type sparingly.

Website Fonts

The defalult fonts is: Source Sans Pro by GoogleFonts

Paragraph: Sample Text 2 rem

H-1 Sample Text 3.8 rem

H-2 Sample Text 3.4 rem

H-3 Sample Text 2.8 rem

H-4 Sample Text 2.6 rem

H-5 Sample Text 1.8 rem
H-6 Sample Text 1.6 rem

 

The Care and Feeding of Images

EFI

Essential Foundation Information

We strive to have our website be as small as possible and still meet the need of out members and admin team. Being small makes it faster and easier to navigate. In the world of digital information text takes up almost no space compared to images. So to make the site smaller we concentrate on reducing the size of images
We want to use images in our website but we strived to move the inventory of images used in galleries off-site. That is the reason for the use of Google Drive and Google Photos to host our galleries. We could use AWS's cloud storage but that is in the future.
We want to accomplish this and make our site look clean, efficient, stylish, and consistent.
So we do three things: Make the file sizes as small as possible, use consistent sizes and move galleries of images off site.

Small File Sizes

Small Image Sizes

How to Measure File Size

The file size is measured in bytes. These are historically express in thousands, Kilobytes or KB or millions, Megabytes or MB. We use predominately the JPEG format. It is suggested you chose a quality setting around five (5). If the image looks pixelated (bad) adjust accordingly. We never want an image to look bad due to over compression.

How to Measure Image Size

Here we are refering to the visual size of the image. How large is it on the page? On websites we use only one measurement the length and width in pixels. When working on the website forget all other terms. Just the px size. Always state the width first and height second.

Consistent Image Sizes—A Guide to the Right Size for the Right Location

Using Other Host for our Image Galleries

We have discovered by using Google Drive, Google Photos and Dropittome. The club can benefit from nicer image presentations and a virtually unlimited storage capacity.
We how have five individuals involved in this aspect of the task. They can each work and act independently. The process for each is:

  1. Members upload images to Google Drive via Dropittome from the links at Image Upload Central (on the website)
  2. One of the Five reviews the images and moves to Google Photos Albums.
  3. Members view images on Gallery Links from main page of website.

dark tangerine: #C22F00

orange: #FEBF06

gold: #d6a52b

header gray : #D3D3D3

table gray: #F9F9F9

font hover tangerine: #F9F9F9

lighter sand : #F2EDE3

table background blue: #E3EEFF

table background green: #E4F7E5

dark gray : #999999

brick: #7F2F12

steel blue: #266081

harvard blue : #4E84C4

harvard dark blue: #293352

harvard red: #8C1829

black: #000000

white: #FFFFFF

black: #000000

Scroll to Top