In our third style guide, we will look at some HTML formatting issues that commonly arise, and how to deal with them in a consistent and user-friendly fashion.

Links

Try to be consistent about using "open in a new window" - for example, only use it on links that leave your site. Inconsistency with this feature creates a confusing navigational experience for your visitors.

Links can be made to look like buttons, but the extra padding and spacing around buttons means they don't work well embedded in paragraphs or other blocks of text. Only use this effect on short links that are on their own line, like this:

Register now

Link anchors (the text that you actually click on) should be descriptive of the link destination. Do this:

download the brochure

not this:

click here to download the brochure

It is a good idea to avoid "click here" language in general.

Images

Avoid using high-resolution images, which are very slow to download. Upload images to your photo albums, and choose the recommended resizing options.

Pay attention to the aspect ratio and orientation of the image and its intended placement. For example, portrait (vertically-oriented) images don't work well in horizontal carousels, and elongated images don't work well as thumbnails, especially if the latter are usually square on your site.

Tables and Floats

Use tables for presenting tabular data, not for laying things out side-by-side. Use caution with tables, because the more columns you add, the less well the table will work on small screens like mobile devices.

"Floats" are things like images and sidebars that are moved to the left or right so that they are displayed side-by-side with other content. When inserting images, you have an option to align the image left or right, which accomplishes this effect. But beware of over-using this layout effect. It only works well on larger screens like desktop computers that have lots of horizontal display room. On smaller mobile screens, there is no room to move things to one side, and the results could be unpredictable or sloppy. Getting floats to work well on all types of display can be a complicated problem that may require a graphic designer.

Importing Text

When pasting formatted text into your website, you might end up copying a bunch of styles that are not compatible with your own design. Use the "clear formatting" tool to wipe these foreign styles clean so that your own design can assert itself.

Email Addresses

Do not insert email addresses directly into a public page, as it makes it easy for spammers to get new addresses to send to. If you want to make a MailTo hyperlink (that opens a compose email window when you click it), use the MailTo applet, which will disguise the email address.

If you just want to post an email address somewhere and don't want it to be clickable, a simple trick is to write it out without the @ character, for example: your-name AT gmail.com. The reader must replace the "AT" with a @ character, which is a mild inconvenience. If you don't want to burden your readers with that inconvenience, use the MailTo applet instead.

If you are putting MailTo links onto private (eg. member-only) pages, it is safer to just make a regular MailTo link, because spambots cannot read those pages.

In our second style guide, we will cover the subject of the text itself.

There are some formatting styles that cannot be automatically applied using CSS, and only come into play as you type. Keeping consistent on these points will help to convey a sense of neatness and professionalism.

Headings

Try to use a consistent headline case. For example:

• Our new website won an award (sentence case)
• Our New Website Won an Award (title case: important words capitalized)
• Our New Website Won An Award (capitalized)
• OUR NEW WEBSITE WON AN AWARD (uppercase)

CSS settings can help with some of these (all-caps, or capitalized, for example). But if you follow a different convention, you will have to do your heading capitalization manually.

Try to use heading numbers consistently. HTML headings run from H1 to H6—these are not simply sizes as you might think, but sub-section levels. In other words, h1 is a document title, h2 is a section heading, h3 is a sub-section heading, and so on. When adding events and articles, the title will usually automatically be turned into an h1, so you should stick to h2 and h3 in your text. This may help to visualize it:

This is the main title (h1)

1. This is a section heading (h2)

1.1 This is a sub-section (h3)

2. Another section (back to h2!)

2.1 Another sub-section (h3 again)

There should not normally be more than one h1 heading on any given page—and you usually don't need to provide it, since in many cases, the CMS automatically converts your title to an h1 heading.

Do not start your articles with a heading, because that heading goes right under the article title, which means you would have two headings in a row. It is rare to use h4 and lower unless you are writing a very long and complex document with many sub-sub-sections. If your article is not too long, avoid the use of headings altogether, since your title is probably adequate.

Alignment

Your website styles already define how to align, justify, and center text in your headings, paragraphs, and elsewhere. Generally speaking, avoid use of text alignment tools unless you absolutely need to achieve an irregular effect.

Use the blockquote tag if you want to pull out a section of text with altered margins, such as a quotation or excerpt. Here is a blockquote example:

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

–Antoine de Saint-Exupery

If you need to line up individual characters on different lines, you will need to use a monospaced font. Or, use the preformatted tag, which accomplishes the same effect, as shown here:

YES     #####################################
NO      #######################
%       1        10        20        30        40

Punctuation

Try to be consistent in your use of punctuation conventions like smart quotes, Oxford commas, and dashes. If you are going to going to get fancy with your dashes, know the difference between hyphens (-), en-dashes (–), and em-dashes (—), and don't mix them with typist shorthand like double-dashes (--).

If you don't know how to produce the correct punctuation marks from your keyboard, the special characters tool gives you access to a variety of additional punctuation marks and other characters.

Emphasis

If you need to emphasize text, it is usually okay to use bold and italic, but try to be consistent. For example, use bold for important words, and italics for titles, quotes, or extracts.

Avoid these bad practices:

• underlined text (it looks like links)
• ALL CAPS (it looks like shouting, and makes you seem angry)
• making text larger (it changes your line-heights and looks messy)
• using coloured text, especially red (which looks like an error message)
• using background colours (it makes your page look like an unfinished draft copy)
• DOUBLING OR TRIPLING UP ON EMPHASIS (yikes!)

• using headings for emphasis

  (just plain wrong!)

Pasting Text from Other Sources

Often you will have your article or text in another format, such as a PDF or Word document. The easiest way to get it into your website is to copy and paste the text into the CMS.

But when you paste formatted text, you will also be pasting the text styles of the original source document, and those might not match your own style guide. Even worse, you might end up pasting cosmetic styles like fonts and colours. The clear formatting tool in the HTML editor will help to clean out those cosmetic styles so that your own style sheet can take over, but it will not make the text itself conform to your style guide. You will have to manually proofread and correct your headings, punctuation, and other text issues.

Developing a style guide for your website will help to maintain consistency and a professional appearance as your website evolves and grows. These in turn will improve usability for your readers.

There are several different areas that your website style guide should touch on. In the next few blog posts, we will go over some of the more important ones to take into consideration, starting with Visual Style.

Visual style is an aspect of your web design, involving layout, fonts, and colour choices. Visual style is often the easiest type of style to get right—you can usually nail it by following one simple rule:

DO NOTHING.

This is because your website already has built-in rules for how things should be styled. It already knows what fonts and sizes to use and where, it knows how to colour your text, headings, and links, and it automatically lays out everything according to pre-defined templates. By doing nothing at all, you allow these rules to take effect, and your web designer's best intentions can be realized. All you need to do is decide what the functional role of your text should be. For instance, what is a heading, what is a list, and so on. In the editor, your text will be shown using a generic functional styling, but after you submit it, your website styles will take over and show you how it will appear to visitors.

Colours: In some special cases, you might find it helpful to break with the rule of not setting colours. For example, when quoting from an extensive set of rules and regulations, you may not be able to alter the formatting to highlight the passages of interest. In that case, you might choose to use colour to highlight the important words. Avoid colours that will make the highlighted text look like links.

Fonts: Your website already has its preferred fonts set up. Don't override those settings, or your pages could end up looking like a ransom note. But there are cases where you may find it helpful to override those settings. For example, technical text (like code) often works best using a monospace font. (Note that there is a code tag in HTML that makes this easy for you.)

Layout: Be very cautious when playing with your text layout. Multi-column layouts, floating images, and other such effects will work on one type of viewer (eg. computer desktops), but not on others (eg. mobile phones). Do not even try to get text placements or line breaks exactly right, because there are a wide variety of viewing devices and they will all lay out the text in completely different ways. In the end, you may find that you are only managing how the text appears on your own screen. Best practice is to keep it simple so that those different devices can understand what purpose the text serves, and do something reasonably clean and consistent with it.

In short, follow the K.I.S.S. principle, and keep it simple! The whole point of a good graphic design is that you should not need to think about your visual style at all when making website updates.

In July 2017, The Washington Center for Psychoanalysis (WCP) and Baltimore Washington Center for Psychotherapy and Psychoanalysis (BWCPP) merged and is now known as Washington Baltimore Center for Psychoanalysis (WBCP).

Exware will work with both groups to merge members, data, events, and courses into one system. The former BWCPP has used the Exware AMS Premium Package for just over one year now.

"Exware - Great Support! Still learning!"
Elizabeth Manne
Executive Director, WBCP

We are pleased to launch several new modules that integrate with MailChimp, Constant Contact and Google Groups.

These new modules allow you to use these third party tools to seamlessly integrate with your member database.

Use MailChimp or Constant Contact to send out HTML email and newsletters to your membership.

Use Google Groups to create association mailing lists or "list serves".

With integration:

• your mailing lists will never be out of sync with your centralized database on the Exware AMS system.
• new members are automatically added to your mailing lists and archived/unsubscribed members are automatically removed.
• you can also use Exware's Report Builder to create any member/contact list and synchronize it daily with MailChimp, Constant Contact or Google Groups.
• everything is automated so you can spend less time updating lists and more time interacting with your members.

Exware releases a new module to help you understand event popularity, compare event attendance, and market to members that haven't yet registered.

Use this tool to:

- plan new events
- promote events to past registrants who attended similar events
- encourage unregistered members to sign-up

If you are interested in testing out this new module, please let us know.
This module will be ready for general release in June. At that time, all Supported Clients will receive it at no charge!

Although most Content Management Systems (CMS) can handle almost any kind of design, there are other factors that should also be taken into account when coming up with a new website design:

Maintainability:
Can casual users with no technical or graphic design knowledge maintain the content easily? If content is constrained by tight boxes, complex layouts, or is strongly coupled to images, editors may not be able to easily modify the text without breaking the design's layout. If images have strict proportions, resolutions, or color requirements, then the appearance can be spoiled when they are replaced with images that do not match. A maintainable page can tolerate text and images of different sizes. It should have room to stretch and breathe no matter what the website owner might try to stuff into it.

Responsiveness:
If your website should work well with phones and mobile devices, then it must be designed accordingly. Layouts that rely strongly on columns and grids can have problems, because side-by-side presentation does not work well on tiny screens. In order to be adaptable to mobile devices, layouts must easily "re-flow" to smaller numbers of columns (and ultimately to just a single column) without changing the HTML itself.

Navigation:
Your navigation and menus should be designed to grow. Website owners can add or remove pages and even whole sections on a whim. Menus should be designed to grow or shrink automatically when this happens.

Accessibility:
Please take a moment to consider how people with visual or motor disabilities will interact with your website. Is all of the important information clearly visible as text, or is it contained in images or videos? Is navigation clean and simple, or does it require skill and accuracy with a mouse?

Search engines rank websites using many factors, one of which is the number of external third party pages that link to your website (inbound links). Using Social Media can help raise awareness of your website and increase the number of these inbound links. If you link to something interesting or useful on your website using social media tools like Facebook or Twitter, then other people help spread the word by retweeting, liking, relinking, sharing, etc. Every time this happens you get more inbound links, which helps your SEO.

The key to Social Media and Search Engine Optimization is to have quality content that your target market wants to read, share, and/or dialog about. Try to have content that is not just focused on your products & services but is relevant to your industry. For example, include postings and tweets on industry news, events, articles, trends, etc.

The Exware AMS gives associations the ability to incorporate various social media widgets on its websites.

Examples include:

• Facebook like badges
• Facebook feeds
• Twitter Followers & Feeds
• Social Media logos & links

In addition, What's New and Event postings to your website can be post automatically to your Facebook, Twitter, and LinkedIn pages.

Want to learn more? Call or email us today.