Exware is now working remotely! For quickest response, please contact us by .

Skip to main content
Grow. Retain. Engage.

Grow. Retain. Engage.

Website Style Guide, Part 3 - HTML

posted on Oct 12, 2017

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.

Website Style Guide, Part 2 - Text

posted on Sep 29, 2017
The special characters tool gives you access to punctuation marks that might not be easy to type.

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.

Website Style Guide, Part 1 - Visual Style

posted on Sep 6, 2017

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.

Exware to help merge two Associations into one

posted on Aug 8, 2017

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
WBCP
Tagged as: Exware News

Exware launches integration with MailChimp, Constant Contact and Google Groups

posted on Jun 6, 2017

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.
Tagged as: Exware News

Marketing Engagement - in beta release

posted on Jun 6, 2017

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!

Tagged as: Exware News

Google Drives The Internet: Technology Changes that Impact all Website Owners

posted on Sep 22, 2016

SSL

Starting in January 2017, Google will be making aggressive changes in an effort to increase SSL adoption on the internet.
 
What is SSL?
SSL is a technology that encrypts communications to and from your website. When you use SSL, the beginning of your web address changes from http: to https: and many browsers show a green lock icon by the web address.
 
What is driving this change?
Several years ago, people surfed the internet from private access points such as their office or home landlines. However, with more mobile devices in use and the widespread usage of public WIFI, security is becoming increasingly more important. People are now shopping and surfing while riding transit, sitting in coffee shops or in hotels. Using public WIFI opens the door for unscrupulous hackers to monitor what you're doing and steal your information.
 
By putting your entire website behind SSL, it protects your visitors/members by:
  • preventing eavesdropping on your internet communications, increasing your privacy
  • blocking many types of hacks and security intrusions
  • verifying to the visitor that your website is really you, and not some "spoof" that was set up to trick people
Why is Google Pushing This Change?
Google wants everything on the web encrypted (protected by SSL) because it provides for a safer visitor experience while also allowing them to roll-out new features and functionality that requires this level of security. For example, wider usage and applications for location tracking, etc.
 
Can Google Force me to use SSL?
Not exactly but they can make it so your visitors/members demand that you use it. Google's Chrome browser will start to indicate sites that are not using SSL by adding the following in the address bar:
 
Google has said that they eventually intend for the padlock to turn red. Eventually, they may make the message even more noticeable. With Chrome having 53% market share according to the August 2016 projection of web tracker Net Market Share, one can expect that other browsers will follow suit.


ATTN: Exware Clients - contact us to find out how this affects you directly and the options available.

What Content Should You Post on Website, Twitter, Facebook?

posted on Sep 2, 2014

Social Media

Your website is your real location--think of it as your online office. This is where the "official" version of everything belongs.

Your Facebook page is a place to socialize--think of it as the lunch room, coffee shop, or after-work watering hole. This is where people will engage in "light" conversation and banter. It is a good place to post links and news of interest in your field, but which are not directly related to your organization. Important conversations (such as meetings, policy discussions, and so on) probably do not belong on a social website, and are better handled on a forum or blog discussion on your website. Although you can announce that those discussions are happening via Facebook, with a link back to the actual discussion.

Your Twitter feed is a place for timely announcements--think of it as an announcement over a PA system.

Let's take a typical example of something that could involve all three online services, and see how each could play a role that compliments the others without pointless duplication. Say you are hosting an important event - an annual conference:

Website: your website should host the official event calendar and description, possibly with online registration and other event-related services.

Twitter: this is for timely announcements, so use Twitter to send out short notices for things like registration openings and deadlines, changes in itineraries or agendas, and perhaps a welcome and thank you note at the actual start and end of the conference.

Facebook: add a brief event announcement, which points back to your official web page. You can make this a Facebook event if you like, but that is optional since you aren't really using Facebook's calendar services. Pre-event announcements are helpful to build interest, but Facebook really excels at post-event socialization, such as posting results, awards, photos and albums, or videos. These are the sort of things that people enjoy reminiscing and bantering about in a social medium like Facebook.

Tagged as: SEO, Social Media

Tips for Designing CMS and Responsive Friendly Websites

posted on Sep 2, 2014

Responsive examples

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?

Does Social Media help with Search Engine Optimization?

posted on Nov 21, 2011

Social NetworkSearch 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.

Tagged as: Social Media