Site Information (effective July 2018)

Domain Registrar: GoDaddy
Domain Registrant: Dana Geffner, 800-631-9980
Domain expiration: March 25, 2019
Web Host: SiteGround (GoGeek shared hosting plan)

The domain is hosted on an open source LAMP (Linux Apache MySQL PHP) web server, running PHP 7.2, that meets WordPress requirements.

Performance Analysis (June)

Google PageSpeed Insights
Mobile Speed: 75/100
Desktop Speed: 58/100
Domain Authority: 47/100

GTMetrix: B 81/100

Pingdom: D 64/100 (faster than 65% of tested websites)

WebPageTest Speed Index: 4,314 (median = ~4,493; top 10% = <1,388)

Yahoo YSlow: D 66/100

Total Page File Size: 2.1 Mb (2017 Average Page Size = ~2.4 Mb)
Total Web Server Requests: 72 (27 Images + 18 Scripts + 18 CSS + 8 Other + 1 HTML)
Total Page Load Time: ~2.3 seconds

HTML Style Elements

CSS separates content from presentation. The majority of presentation effects (e.g. background colors, borders, colors, columns, font type, font-size, layout, line height, margins, etc.) of page elements (including headers, subheaders, paragraphs, lists, links, etc.) are determined by the theme CSS files.

Below is an example of the default HTML horizontal rule: <hr/>

Simple horizontal rule: <hr class="line"/>

Default Fonts: Work sans-serif, Yeseva One, and Slabo 27px serif

Heading 1: 42 pixels, Yeseva One, 27px, normal weight (no longer valid)

You can create a non-breaking paragraph (no bottom margin) by holding down the Shift key while pressing Enter/Return.
Below are the “semantic HTML elements” for your website. Check the source code, via the “Text” tab on the right side of the Page Editor, to see embedded elements within paragraphs.

Heading 2: 34 pixels, Yeseva One, normal weight, all caps

Heading 3: 32 pixels, Slabo 27px, normal weight

Heading 4: 28 pixels, Slabo 27px, normal weight

Lorem ipsum paragraph: 16 pixels, Work Sans

This is bold, or strong, text. Nullam dignissim convallis est. Quisque aliquam. This is emphasized, or italicized text. 53 = 125. Water is H2O. The New York Times (That’s a citation). Underline – do NOT ever do that because underlines are reserved for links only!


List Types

Definition List

Definition List Title
This is a definition list division.
Definition
An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Ordered List

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
    • Nested list item A
    • Nested list item B
  • List Item 3

HTML Table

Note: HTML tables should be used only for tabular data – not for layout purposes. Because tables are not optimized for smaller mobile devices, when necessary, use as few columns as possible and keep table cells fluids (i.e. no “fixed widths”)

Table Heading Table Heading Table Heading
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

HTML Table with CSS class of ‘table-border’:

Table Heading 1 Table Heading 2
Division 1 Division 2
Division 1 Division 2
Division 1 Division 2

Call attention to a span of text with this class

<span class="attention">Call attention to a span of text with this class</span>

Transparency for TPP and No Fast Track

<span class="entry-meta posted-on">08/23/2017</span><a class="subsection-title" href="https://fairworldproject.org/blogs/saying-no-tpp-just-became-a-little-more-fun/">Transparency for TPP and No Fast Track</a>

Blockquotes: 28 pixels, bold

Be sure to style the optional citation via the Text (HTML) tab.

Hoosier marketer? A CSS superman – faster than a 300kb page load and able to leap long URLs. He hails from Indiana, the home of General Knight. With his four sidekicking hens, he now guards his Morgan Junction office in West Seattle, Washington.
Scott Marlow

A blockquote with CSS class=”pullout” will align to the right on desktop monitors:

FWP believes a just economy works for farmers, workers and the environment

Links

Active links are automatically yellow and underlined.

Create 4 different Call-To-Action links by adding the appropriate CSS class(es) via HTML (Text tab) or copy and paste – see below:

Default Editable (red) Button Link

<a class="button" href="https://marketingbymarlow.com">Editable Button Link</a>.

Food (green) Style Editable Button Link

<a class="button green" href="https://marketingbymarlow.com">Food Style Editable Button Link</a>.

Climate (blue) Style Editable Button Link

<a class="button blue" href="https://marketingbymarlow.com">Climate Style Editable Button Link</a>.

Work (yellow) Style Editable Button Link

<a class="button yellow" href="https://marketingbymarlow.com">Work Style Editable Button Link</a>.

Although PDF documents can open in new windows, to adhere to accessibility and usability guidelines links to other sites and pages should never open in new windows.

Colors

The colors used in the site theme are listed below in their hex and RGB equivalents.

  • Dk Brown: #433830, rgb(67,48,1)Style Guide colors rev 1.2
  • Brown: #612719, rgb(97,39,25)
  • Green: #687E33, rgb(104,126,51)
  • Teal: #017880, rgb(1,120,128)
  • Yellow: #D4A429, rgb(212,164,41)
  • Dk Yellow: #A67411, rgb(166,116,17)
  • Blue: #025c64, rgb(2,92,100)

Do NOT use the Visual (WYSIWYG) HTML editor to color individual spans of text.

Posts vs. Pages

The Blog (“News“) page (Settings/Reading) publishes content from Posts, by default, in chronological order. Therefore, you do NOT edit the News page via Pages/Edit. Adding/Editing Posts automatically updates the Blog page.

Posts should be used for multi-relational, categorical content, as well as any time-sensitive content. Posts can be used more dynamically throughout the site than pages.

Pages should be used for ‘static‘ content that does not need to be archived or categorized.

Page Attributes: Page Templates

Page layout can be changed by selecting 1 of 2 Page Templates from the Template dropdown:

  1. Default Template
    The main content area has a maximum width of 880 pixels
  2. Full-Width Page Template (e.g. homepage)
    The main content area has a maximum width of 1,190 pixels

The site layout is mobile responsive, optimized for 1,280 pixel x resolution monitors. The site theme (design) is based on _Underscores, the 1,000 head start Theme by Automattic.

Appearance: Widgets

“Widgets” are the standard method for showing and hiding content in sitewide containers – including sidebars and footers.

Only site Administrators can edit Widgets via Appearance/Widgets, from within the WordPress Dashboard.

Media Library

The Media Library contains all your uploaded images and file documents (PDFs, .DOCs, etc.). Although images can be uploaded as any dimension, your custom WordPress theme provides 3 default sizes to maintain better brand consistency:

Fair World Project logo
a sample full-sized image, aligned right, with optional caption
  1. Thumbnail: 180 pixels wide x 135 pixels tall (max)
  2. Medium: 400 pixels wide x 400 pixels tall (max)
  3. Large: 1024 pixels wide x 768 pixels tall (max)

Additionally, the following specific image sizes are recommended for certain areas of the site

  1. Optional Featured (Post) Images: 400 pixels wide x 266 pixel tall (3:2 ratio)
    Images that display on certain Post Templates in the Post header; and in the sitewide footer  (Latest Blog Posts & Magazine Articles) as 180 pixel wide Thumbnails
    – editable in the lower right hand corner of the Edit window.
  2. Homepage Featured Campaign grid images:
    2x Portrait: 272 pixels wide x 566 pixels tall
    2x Landscape: 400 pixels wide x 266 pixels tall (3:2 ratio)
  3. Homepage 4x Explore Images: recommended size 282 pixels wide x 323 pixels tall
  4. For reference, the FWP logo, in the header and footer, is 240 pixels wide x 100 pixels tall

Theme ‘header’ images are ‘hard-coded’ into the Theme via style.css; those image are 1,440 pixels wide x 480 pixels wide; however, only 380 pixels of the image height (cropped from the bottom) is shown on desktop monitors.

In-body images should include a style for optional captions.

Image settings can be configured by site Administrators via Settings/Media within the WordPress Dashboard.

The Media Library includes a Title and Alt Text associated with each image. The Title displays as a ‘tip’ when a visitor hovers over the image; the Alt Text is what screen readers ‘see.’

Use semantic naming conventions for both the Title and Alt Text. For example, an appropriate Title might be: headshot: FirstName LastName; and appropriate Alt Text might be: FirstName LastName, headshot. Why list headshot first in the Title? Because that method allows all of your headshots to display in order in the Media Library, under headshot, instead of by name – making them easier to find.

User Roles

  • Administrator – somebody who has access to all the administration features within a single site.
  • Editor – somebody who can publish and manage posts including the posts of other users.
  • Author – somebody who can publish and manage their own posts.
  • Contributor – somebody who can write and manage their own posts but cannot publish them.

Dashboard: Updates

Periodically, Automatic (the makers of WordPress) release feature updates. Site Administrators can update WordPress. Some updates includes security patches; these updates are more critical than feature-only updates.

Site Credits

Visual Design: Modern Species
WordPress Development: Scott Marlow

This site is powered by WordPress – an award-winning, open source, semantic Content Management System (CMS) used by over 80 million sites. WordPress powers 1 of every 5 new websites.

Help & Support

You can find support at wordpress.org (NOT wordpress.com, the free blog hosting platform). The most recent WordPress for Dummies book is also a good resource.

Developer Notes

  • Never underline text that is not a link. Instead use bold or emphasis (italics)
  • Use only lower case for all html tags and file names (like images and documents)
  • Do NOT open links to other websites in new windows.
  • Do NOT double-space after periods, colons, etc. Digital typesetting now handles the spacing after characters. Also, double spaces can create odd characters in HTML.
  • Avoid the use of inline styles – like <span style=”color: #000000″>. Instead, create new styles in the CSS file to achieve new presentation effects
  • For more precise control of layout, try editing within the HTML (“Text”) editor instead of the “Visual” editor.
  • All headers and subheaders should contain some text, e.g. like a paragraph. Try not to follow a header directly by a subheader.
  • Include alternate text for all images uploaded to the Media Library
  • Be cautious of installing third-party Plugins (and Themes), which can contain code conflicts or malicious code that can break your theme design or site functionality. Deactivate and remove all unused Plugins and Themes to help secure your website.
  • Admins, Editors and other users should always use secure passwords:
    10-character, alpha-numeric passwords with at least one uppercase letter and one special character are most secure
    .

Note: You may notice minor layout discrepancies between operating systems (PCs and MACs) and various browsers (e.g. Chrome, Firefox, Internet Explorer, Opera, Safari, etc.). This is due to how browsers render HTML and CSS; not all browsers, particularly older ones, conform to W3C specifications.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share
Tweet
Pin
+1
0 Shares