SAME Web Style Guide

The redesign of the SAME national website during 2015 was done to achieve four goals: make finding information faster and browsing more efficient for the user; become mobile-friendly given the rise in smart phone usage; integrate with the membership database for more seamless accounting, registration, and membership functionality; and to integrate Post websites with SAME national in support of a "One Society" philosophy and to be able automatically populate the national calendar with Post and Regional events.

Driving the design was also a motivation to make the website terminology and menu system more active and modern, and with fewer sub-menus and pages. The previous SAME national website became very cumbersome over the years as information was added. It was a goal to have anything on the website be findable within three clicks.


BAD PRACTICE things to avoid

  • Changing font family on your text editor (WYSIWYG). System will always apply default font, no need to change that.
  • Using images for titles or image files with text on it. [ Bad for SEO and usability ]
  • Using the color blue for text that is not hyperlinked. [ color: blue; ]
  • Adding long, over descriptive file names to files in your File Management.
    Files named using non alpha-numeric characters will break the URL. Use only letters, numbers, underscores (_) and dashes (-) when naming your files.
  • Leaving image alt tags blank is not a good practice for usability and SEO. Make sure to add an image description to all your images.
  • Use the tag <hr/> or select the line break icon on your text editor to break blocks of text instead or creating lines using asterisks (********) or dashes (----------).

 

Titles & Body Text

Internal Pages

 

<h1>Title of Page </h1>

<h2> Subtitle </h2>

<h3> Header of text block</h3>

Select appropriate titles for each page, <h1> being the higher level. All titles should be set as title should be capitalized in internal pages.
DO NOT STYLE THE TITLE TO UPPERCASE IN INTERNAL PAGES.

Body Text


<p> tags, or Standard Paragraph text should be used for body text.

Homepage

SAME National website and Post website homepages titles are the ones used to separate blocks on content. These titles have their one style that is not used anywhere else on the website


font-size: 20px;
line-height: 1;
color: #346669;
white-space: normal;
font-weight: bold;
text-transform: uppercase;

When copying text from other Word Documents, make sure to clear any styles by first pasting the text on a Plain Text Editor program such as Note Pad, Note pad ++ or Sublime text to clear any styles.

Back to top

 

Tabs and Accordions

When using the any tabs or accordion modules, make sure to add titles to each section of the accordion or each tab.
Example:

 

Back to top

 

Font Family

Let the system determine your font family. The default font is "Arial, Helvetica, sans-serif". In order to keep the design consistence throughout all pages, avoid changing the Font Family in your editor.
If you are copying text from Word, it is mostly likely that the text will come with the font family style from Word. Make sure to visualize your code on HTML view and remove all tag properties that say "font-family:..."
Example:

Remove all font-family tags from your HTML code view.

 

Back to top

 

Color Schemes

SAME has three main foundation colors:

  

Additional Colors:

When using text on a background color box that is already created.

Option 1

Option 2

If you are creating boxes to organize the layout of your page, make the box a light tint of the original grey color and do not change the text color

 

Avoid making your text 100% (HEX: #000 or HEX: #000000). If changing the text color is needed, make sure to use shades of grey.

Back to top

 

Files and Images

Documents

  • When naming your file to be uploaded to the website, avoid any type of punctuation besides - (dashes) and _ (underscores). Periods, commas, parenthesis, and any type of punctuation to separate words will generate a corrupted URL and when someone clicks on the file nothing will come up.  Also avoid spaces between words. Use dashes or underscores to separate words, blank spaces will generate a % sign that can corrupt your URL.
  • Remember this is a mobile friendly system and certain file types, such as Word Docs and Excel, will not open on a mobile device. Try converting all your files to PDF before uploading to the system.

Images

  • Saving an image for the web before uploading to the website is a good practice to keep page loading time fast. Make sure to save the image for the web ( Using a photo editor program) and change the image mode to RGB.
  • All "alt" tags for images should be filled out with the description of your image, and make sure to always add a "img-responsive" class to the image tag on your HTML view.  This will readjust your image size depending on the screen size your page is being viewed.
    This is how a good image tag should look like on your HTML view.

< img alt="Image Description" src="URL of your image here" class="img-responsive" />

Back to top

 

Calendar of Events

Here are a few items to keep in mind when adding an event to the calendar of events.
Important Items on your event editor:
- Title: Make sure to add a descriptive title that is not too long;
- Importance: select as this field will not be displayed on your event's page;
- Category: DO NOT leave category blank. Make sure to select the appropriate category of you event so it can be sorted on the calendar of events. Options are National Events, Post Events, Regional Events and Partner Events;
- Location: Select none and add the event location under the description box.

 

On your event description please follow the style below to create an event header with all the information necessary regarding the event before adding additional description.

-If your event has an image banner, that should be the first item on the page and the correct size for the banner is 800px by 200px;
-Following the banner these are the items that should be entered and the corresponding HTML tags:

<h1> Title of the Event - same as the one used above on the event editor</h>
<p><strong>Date:</strong> Date of your event on the format below "Month Day, Year - time of the event"</p>
<p><strong>Location:</strong> Complete event location with detailed address</p>
<p><strong>POC</strong>Add here the name of the event POC with the email address hyperlinked</p>
[If there is a registration button it should go here - please view the buttons item on this style guide to see how to add an
interactive button to your page]

</hr>
<p> Additional information about your event</p>

Example:


View the event on the website here

Back to top

 

Sidebars

Sidebars are used to highlight content on your page, or to adjust your page layout. In the SAME system sidebars are not used in all pages, but if there is a need for one, here are a few items to keep in mind.

Sidebar Grid

If you are in edit mode and go to Edit Page > check the View in Layout Mode you will see the template's grid for that page. SAME system has 5 different templates:
- SAME National homepage
- SAME National Inside pages [Banner version and No-banner version]
- Post website homepage
- Post website inside page

Sidebars will be used on LeftOutPane pane and LeftOutPane2 pane for SAME National templates, LeftPane for Post website homepage template and RowOne_Grid3_Pane pane for Post website inside page template.

Sidebar Background Color

When you have a content sidebar using a simple HTML module, the background color will be changed. For additional modules such as Twitter feed, blog module and calendar of events, the background color remains the same.


 

Back to top

 

Social Media Icons

SAME has designed a set of Social Media icons to be used by National, Post websites and Committees & Councils pages.

For National website footer the size of the icons is 40px by 40px. For Post websites and Committees & Councils pages the size is 30px by 30px.
Social Media Icons can be found in File-management/Root.

Back to top

 

Buttons

This system is built using a framework called Bootstrap. To add buttons to your pages all you have to do is call button class with a simple HTML code.
SAME's default button color is blue:

 

<button type="button" class="btn btn-primary"><strong>REGISTER TODAY</strong></button>

SAME allowed additional button color:

<button type="button" class="btn btn-danger"><strong>SIGN UP TODAY</strong></button>

[Only to call attention to a deadline or an urgent message]

 

Default button code linked to registration page:

<button type="button" class="btn btn-primary"><a href="Add URL Here"><strong>SIGN UP TODAY</strong></a></button>

Back to top

 

Bootstrap

Considering the fact we use Bootstrap as a framework, it's a good idea to use Bootstrap's components as a resource for easy to apply UI elements and page layout design that do not require extensive HTML and CSS coding.
Visit http://getbootstrap.com/components/ to see all component options and learn how to make your pages more user friendly.

Back to top