0000 Style Guide

Trinity Web Site Style Guide

This guide holds persistent information on the style and construction recommendations for the web site of Trinity on the Green, www.trinitynewhaven.org, and for associated social media sites. It  is in addition to or on top of the Web Profile from QT which is also stored on our web page (see WordPress Template Primer-version 11)  The Web Profile will tell you what is available for templates, and the sizes of images to edit.  This style guide tells you what is recommended for layout and formatting, and the ways a new user should go about naming and storing media.  Temporarily, we also keep a content map (see Website Content Map-20140708) and a map of the old site to the new (see 03 Map – Current Content to New Website).

TBD areas include branding, financial links, using constant contact for eNews and other events,

Branding

This is under review.  Our lack of branding is a serious issue.

We have agreed that the preferred name of our church is “Trinity on the Green“.  We intend to brand this short unique name as our own identity.  Other, less preferred options, are “Trinity on the Green, New Haven”, “Trinity Church on the Green, New Haven”, “Trinity Episcopal Church, New Haven”, etc.

Our Green Bar logo in “Trinity Green” and “Spring Green” is a fine logo, images can be found at [tbd].  The font style is [tbd].

There are, by some count, about 15 different “Trinity” logos that have been used over the last forty years.  The “Trinity hat” logo is under review.

Items under editor-level user control

  • Pages – the traditional page, save that selected pages can have “featured” images for display on the bottom for the home page.  Two page templates (02 and 06) have a special “automatic population” feature.  By setting a parameter, you can automatically populate the bottom of the page with a list of posts that have a “tag”.  This is a neat feature we use a lot.
  • Posts – note that “blogs” in the commonly used sense with comments are turned off; the Rector’s blog is one way.  Posts are almost always used not for lists of transient commentary, but for directing the user to a block of information.  Post all have “featured page” images.  It is important for consistency to keep the image size the same (480×263) as the template automatically inserts images of the right width, but leaves the height alone.
  • Events – like many church we keep two scheduling  calendars.  One is the EventON calendar for displaying public events, the other is a Google candler for scheduling nt to either the parish secretary or backup administrator, or one of the editor-level webmasters.office and church resources.  Public events can be simple sets, or link to posters or full pages, or be short “event pages” themselves.  Request for events should be sent to the parish secretary
  • Tables – there is the native table of WordPress or TablePress enhanced tables.
  • Sliders – Soliloquy plugin
  • Media – photos, images, pdf files, doc files, audio files, and video files
  • Contact – a very simple contact form.  This is under review, as we may wish to have more information and more secure forms in the future.

Appearance, Users, Plugins and other WordPress dashboard menus are not to be used by author or editor level users.

General Note on Look and Feel of site:

The site is mission oriented — that is it is marketing and visitor oriented not member oriented in general, and certainly on the home pages and calendars.  We want people to come to the site, then come to Trinity and see the same thing there they saw on the web.

Trinity is a very busy downtown city church with many urban problems, and often five Sunday services, 3 choirs, a drama group, two bible study groups, two home churches, Monday and Wednesday services, and 59 committees. Security staffing is expensive but necessary for building events. The building is scheduled 7 days a week; keeping up the calendar is vitally important.

It is imperative that we design for mobile phones. About 2/3rd of all Americans haven them, and almost all of the younger demographic have them. All future web access devices will all be cell phones with at least a 1024×768 display – comparable to tablets and PC screens.

Having said that, Trinity’s web design group has gone to great lengths to make responsive designs that work on any device, any browser, and on reasonable zoom levels. But text isn’t that responsive, and impatient users want text and video, along with links to Social Media.

1) Thus user interactions, save for occasional hyperlinks and the carefully selected front page direct link (not pull-down) menus have to be “finger friendly” images. Photos are required, text is dis-recommended.

2) Images where possible should not be “taken off the web”, stock-photos, or cartoons.  Most of these are not technically legal in any case, and are not good “WYSIWYG” marketing.  We have a large library of original content on the Trinity Facebook sites, google+, and Youtube sites, plus a Parish Secretary Album of photos on Picassa Web Albums. Also the need to keep the site current means we will continuously take photos and replace old photos with new.  Images should ideally not be staged, but show real people in the Trinity Church or Parish environment.  User feedback shows this impresses our customers.

Quick edit and image notes:

Fonts: Arial, Arial Bold, Arial Italic

Other font styles are discouraged, save within images as part of a unique graphic design, and the Trinity logo. [note that our Logo and branding is under review, as is our SM strategy and our public Event management].

Colors: (hexadecimal – 6 digits)

Headings: #006C4F (dark green or Trinity Green)
Alternate column heading: #757575 (medium gray)
Text body copy: #000000 (black)
Highlight: # CCCC49 (spring green)

Column widths

We can have 1,2, or 3 columns.

  • The maximum width or “full” one column is 960 dots.
  • A “sidebar” is the rightmost column; is it populated in DEFAULT templates by “widgets”.  It is 205dots wide.
  • A left column is also 205 dots.
  • If there are two columns the wider column is 631 dots
  • If there are three columns, the wider center column is 466 dots.

 Photos:

  • Images for posts and pages: approximately 400px by 400px at 72 dpi
  • Should be NOT wider than 550 unless you want it to span the page like a Featured image
  • Images for ‘Featured Image’: 960×469; this fills the whole full page
  • Images for “Featured PAGE”: 480×263; this is default for the featured-images on posts (that will be displayed on the featured page; you should make them all the same so that when they are automatically displayed they all look consistent.
  • Images for WIDGET thumbnails: 300×300
  • Images for home page “slider”
  • Images for sidebars work best at 205 wide max.

Templates

We have 8 page templates, and two post templates.  Default templates you the widgets sidebar (right side) column; all others use variants of one, two, or three columns.  Templates go a long way to preserving the look and feel of a site.

There are currently no event templates.

Home Page Items

The original design of the home page assumed we would have two “featured posts” and four “featured pages”. To this we have added Services, Visit (including parking), and a public events calendar.

We typically change these five times a year to match the change in liturgical seasons: summer with Children’s summer school, fall with Holiday Bazaar, post-Christmas with Advent, etc.   Changes must be authorized/instigated by the Rector.

Media

Generally we use .jpg or .pgn imaged: videos are mp4 on YouTube to enhance our social media presence and allow most uses to find us quickly.  We have a informal naming convention.  The first word reflects the page, the text following the hyphen is free form.  As we have almost 1000 images, it is recommended that you use a long name with descriptive text; this descriptive text is also automatically the “ALT” text displayed when images can’t be3 displayed, so it makes your job easier.

The media search engine is a bit sensitive, and tends to work best on simple words.

For example:

  • Slider – Christmas pageant at Trinity in 2013 with lama kissing rector Luk.jpg
  • History – Trinity Church postcard from 1889.png

Are better than

  • IMG042.jpg
  • Music – October 2008.png

Note that you can upload word , powerpoint, and pdf documents as well.

Menu “A” level pages off the home page

Menus are selected by the Rector and should not be edited save with his/her permission. The should link to a page The age Title should express something unique about Trinity and what is on the Content page.

  • They will typically be 02-Pyramid Style templates.
  • You define the posts that will be populated using the “show_tag” field in the Customs Field form in the middle of the edit page. Typically this a version of the Title.
  • They will typically be post populated pages to allow tablet users to finger press images for navigation instead of pull down menus. The content should be formatted as follows:

Title (will be h1 style in dark green, automatically inserted by WordPress)

Subheading – the first line of content. It should be a bible quote if possible, using the shortcode pair

…text…

Large image or slider – NOT A FEATURE IMAGE – 960×469 that says it all in a photo

  • Dis-recommended option: one or two lines of text. Move explanatory text into an overview post. You don’t need “click on the below” as that is so obvious today.
  • The order of the posts should be 1) most important to visitor, 2) most important to members, 3) all others. The final post is possibly the second most important one.

Posts that are used as navigation pages (finger-click posts)

The Title (and image) should express a major point that will attract the visitor. Posts are inserted automatically into the viewed post by WordPress.

  1. Use the feature image to set the picture image: it should be 480×263. If you don’t set this exactly, images will look asymmetrical on the mother page. It is inserted automatically into the viewed mother page by WordPress.
  2. Identify the mother page (or pages) you want the post to automatically appear on by setting a unique tag, typically a version of the mother page.
  3. To change the post order, you simply go up to the date and “Edit” it to some fake date. You can set the date to July 4, 2014 (or something) and indicate the order by hours.
  4. Teaser – this is the snippet of text officially known as the “Excerpt”, about 140 character long. It is automatically generated and inserted after the feature image by WordPress. You may override the place where WordPress cuts off the teaser by using the “Exerpt” box down toward the bottom of the editor.
  5. Basically, after the teaser, you can do anything you like in these terminal posts, but use the pull down headers and try to use default image sizes. On the other hand, variety is good. On the other hand, so is consistency.

Dynamic Posts

Each of these will have their own style. Designing a consistent format for multiple posts is important, as the teaser is generated automatically by stripping out all formatting and just dumping the first 140 characters of text under or next to the featured image.

Sermons

The opening should be cut and pasted then edited from an existing sermon. Note the single hyphen after the date, and the triple em after the preachers name: these are important as the teaser will smash them all together without additional punctuation.

Third Sunday after Pentecost (Proper 8)

June 29, 2014 –

The Rev. Dr. Luk De Volder, Rector —


To welcome is a verb that comes with more sacrifice than we often realize…sermon text…

 Articles, and documents that replace pages: a Word / PDF Template

Here is a word template in the style (header/colors) of our pages, except that the title information is right justified with a title and subtitle formatting type.

When you upload media, the file name is the name of the document and is displayed as is.  For example, this document would by add media be Word Template for Articles v3.  If you want a different name then just edit the text. Word Template for Articles with a better title.

YouTube / Google+

Trinity’s Google+ site is currently a reflection of the YouTube site plus a possible storage site for offically approved public photos, though we pay for the Picassa Web Album for private storage of Web images, and most of our photos are on Facebook.  This simply reflectsthe situation as of 10/2014 with Google’s purchases of Picassa and YouTube.

Trinity has a policy of using YouTube for music and videos.  It saves disc space, handles large audio/video files, provides many features, presents a modern social media image, and can be monetized.

We typically “embed” images, though linking to our web site is possible (see icons upper left on homepage).

Two parameters are sometimes adjusted.  The height and width are 560×315, or 300×145 (the scaled proportions of HD iamges from YouTube’s recommendations. Sometimes #t=NNmMMs allows you to start the video with an NNminute MM second delay.

There are several legacy Trinity related YouTube sites. The policy w to leave them up but not update them.

Example:

<iframe src=”//www.youtube.com/embed/WDSSYTS5TUg?t=10s” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Facebook

Trinity has its own Facebook site.  There is a music site, a Episcopal New Haven site, a Holiday Bazaar site.  Major events should be entered on these site, or a site created, and “friends” and “likes” encouraged.

Twitter

 tbd

Pinterest

tbd