RMBS Web Style Guide

The black title at the tippy top is automatically generated and sized.

The presentation is managed in WordPress’ Appearance > Themes. The current theme is Holi, which is a sub-theme based on the widely available “Twenty Thirteen.”

Overall

The above header is crazy big.  Why, oh why?  It also creates a lot of wasted white space; that’s “Header 1”.  We’ll talk header/titles more.

Overall:

  • Text items will be left-aligned, and conform to a basic color
  • Images in pages and articles will be inserted in-line, wrapped into the text, which is a default behaviorPurple rain (right)
  • For accent colors, we should decide on a few, say, that lovely jade green and deep purple…
  • Home/index page aside, pages should be presented with a single theme or topic
  • Future content or dates should be the focus; to ensure the site feels looked after and current, past events should be either moved to the end of the page (“Past Events you may have missed”, or “We missed you at…”or removed altogether.  )

Link and their behaviors

Links to other places should allow default handling/formatting to prevail – without special colors, formats, sizes or fonts from page to page.  Something like this (sample link, doesn’t go anywhere).

  • ON-SITE LINKS
    • Links should open in the same window/tab/view, not a separate window
    • Links should be highlights of the link text, not a web address, i.e. … there are many benefits to a RMBS membership.
  • OFF-SITE LINKS
    • Links should open in a new window/tab/view.
    • Links should be the web address name, not text — such as http://www.google.com, and NOT as A big search engine site.
    • To manage visitor expectation, the link to off-site content should be followed with the text: “(link will open a new window)“, for example (red text only here for emphasis)
      • http://www.google.com (link will open a new window)
      • For visitors with pop-up blockers, the additional text can help indicate why a new link isn’t opening… it’s their machine, not the RMBS’ site failure to deliver the content

This is Header 3

Header 3 is a nice size for section headers. This text is “Paragraph” and suitable for all in-line body content. For giggles, we’ve set a separate color for this size, as it seems popular to use as a sub-page title.  Other sizes are:

Header 2

Header 4

Using “4” as the bold text for Business Member/Artisan contact info.

Header 5
Header 6

Dividers & Content Separators

These could be cute and theme-related.  Like this maybe — though it’d be super to have a REAL photo we modify for this purpose

divider

Business Member / Artisan Pages (this is Header 3, nice, eh?)

(Logo image appears first, not to exceed 500 pixels wide, and roughly 300 pixels high, as shown, the rest is sample text and styles.  Images will not have text appearing on either side, just white space.)

If present, the header logo should link to the home page of the business/artisan web page, NOT back to itself.

<start of actual visible business page user experience>

Paragraph of business description, marketing “blurb” or content appears next.

Business Name — all in Header 4
123 Old Main Street, Suite A
Denver, Colorado 80000
Store Hours (if applicable)
303-999-9999, FAX: 303-999-9999
email address       [text only, not a live, spam-encouraging link]
http://www.business-name.com
LIKE us on Facebook!
VIEW us on Instagram!

logo_sample

<end of actual visible business page user experience>

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save