Grant's Guide to Message Board Formatting

monkey Part 1: The Adventure Begins...

This is a (certainly not comprehensive) guide to 'hidden' features you can use when posting messages to the Meetup message boards or editing your groups' About pages.

Warning: The first priority of any message you post should be to communicate. It is possible to misuse the formatting tags described here to make messages virtually unreadable - or otherwise painful or annoying. Please use moderation in the application of any of these techniques.



Headings

You can denote sections within your message using the 6 levels of headings, [h1]...[h6]. The available heading levels correspond directly with the 6 HTML heading tags ....
Examples:
  [h1]Level 1 Heading[/h1]
[h2]Level 2 Heading[/h2]
[h3]Level 3 Heading[/h3]
[h4]Level 4 Heading[/h4]
[h5]Level 5 Heading[/h5]
[h6]Level 6 Heading[/h6]
Result:

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading
It's generally not a good idea to have a blank line between a heading and the text that follows. That creates too much white space, reducing readability.

When adding a heading, it must be no more than one level lower than the last heading that precedes it (it can always be higher). For example, if the last heading you used in your message was an h3, your next heading can be h1, h2, h3 or h4. It can't be h5 or h6 because those are more than one level lower than h3.

Note that, to follow standards, the first heading you use should be an h1 or an h2. HTML requires the first heading used to be h1, but since the Meetup message board pages already have an h1, you can use an h2.

Please DO NOT use headings just to make your text bigger. If that's what you want, use the [size] tag described below.


Size

You can arbitrarily set the size of your text using the [size] tag.

Examples:
  [size=1]Size 1[/size]...
[size=2]Size 2[/size]...
[size=3]Size 3[/size]...
[size=4]Size 4[/size]...
[size=5]Size 5[/size]...
[size=6]Size 6[/size]
Result:
Size 1...
Size 2...
Size 3...
Size 4...
Size 5...
Size 6


Center

You can center a block of text using the [center] tag.

Example:
  [center]Centered text.[/center]
Result:
Centered text.



Lines

You can put a horizontal line in your posting using the [hr] or [divider] tags.

Example:
  [hr]
Result:



Bulleted and Numbered Lists

You can use the [list] tag to specify a list of items (<ul> and <ol> in html). Each item is specified by a [*] tag to define a paragraph as a "list item" (<li> in html). The [*] tag differs from most others in that you do not use a closing tag (e.g., [/*]) with it. The end of the list item is marked by the line break at the end of the paragraph (even if there isn't a blank line separating the paragraph from the next chunk of text).

If you put the first list item on the line after the opening [list] tag, you'll get an extra blank line in front of the list. To avoid that, put the [list] and [*] on the same line.

Example:
  [list][*]A list item.
[*]Another list item.
[/list]
Result:
  • A list item.
  • Another list item.

Sub-lists

You can have lists within lists. A sub-list can follow any list item, and will be indented relative to that item.

At the end of the sub-list, after the closing [/list] tag, put the next tag on the same line (whether it's the next list item [*], or the tag to close the containing list [/list]).

Example:
  [list][*]Item 1.
[list][*]Sub-item A.
[*]Sub-item B.
[/list][*]Item 2.
[list][*]Sub-item C.
[*]Sub-item D.
[/list][/list]
Result:
  • Item 1.
    • Sub-item A.
    • Sub-item B.
  • Item 2.
    • Sub-item C.
    • Sub-item D.

Ordered/Numbered Lists

To have your lists be ordered/numbered instead of bulleted, just modify the [list] tag to [list=1] (which gives you an <ol> in html).

Example:
  [list=1][*]The first numbered list item.
[*]The second.
[/list]
Result:
  • The first numbered list item.
  • The second.

There are other variations, as well. You can substitute "a" or "A" for the "1" to get an alphabetical list instead of numeric, and you can substitute "i" or "I" for the "1" to get Roman numerals.

Note that the current way the Meetup boards format numbered lists doesn't work for all browsers. Some use bullets instead of numbers. I've put in a bug report and identified how to fix it, so hopefully that will be corrected soon.


Available Text Colors

In addition to the buttons for red and blue text coloring, the other colors you can set (just use tags like "[color=SOMECOLOR]my text[/color]") are:


darkred, firebrick, crimson, red, tomato, orangered, orange, coral, yellow (yellow), olive, limegreen, seagreen, green, teal, skyblue (skyblue), cyan (cyan), blue, royalblue, darkblue, navy, indigo, purple, deeppink, violet (violet), pink (pink), silver (silver), beige (beige), burlywood (burlywood), sandybrown, chocolate, brown, sienna, white (white), black


This isn't quite the full list of 'standard' html colors (missing are gray, aqua, fuchsia, lime and maroon), but should be plenty for almost everyone.

For many of the colors, it is best to use them only with bold text because the colors don't provide enough contrast with plain text on a white background.

Example:
  [b][color=red]R[/color][color=orange]A[/color]
[color=yellow]I[/color][color=green]N[/color]
[color=blue]B[/color][color=purple]O[/color]
[color=indigo]W[/color][/b]
Result:
RAINBOW


sick Please exercise extreme caution in using color. It is very easy to render text unreadable. Note that people with reduced vision or color blindness are particularly susceptible to problems with color text.


Monospace Font

The [code] tag gives you a block of monospaced text (possibly in the Courier font), where spaces and line breaks are honored. It's identical to the <pre> tag in html.

Example (where {sp} means a single space):
  [code]{sp}{sp}Example text.
{sp}{sp}A second line.[/code]
Result:
  Example text.
A second line.



Other Fonts

Using the [font] tag can give you a limited number of fonts.

Here they are:

  • [font=arial] Arial [/font] = Arial
  • [font=century gothic] Century Gothic [/font] = Century Gothic
  • [font=courier new] Courier New [/font] = Courier New
  • [font=times new roman] Times New Roman [/font] = Times New Roman



Strike

You can put a line through text using the [strike] tag.

Example:
  [strike]Not this.[/strike] This instead.
Result:
Not this. This instead.


Line breaks

There isn't likely to be any occasion when you actually need this function, but you can make a line break without having to put a line break in your text using the [br] tag.

Example:
  First line.[br]Next line.
Result:
  First line.
Next line.



Tips

Please do not use blue (or skyblue or royalblue) or underline for your text. Those are the standard indicators of web links, so create confusion when used for non-link text.

I recommend using green in place of blue when you want to use color to draw attention to text.


shhh Super Secret Trick: Showing Code

Some of you may be wondering how I manage to show the tags in this message - since they should normally be replaced with formatting.

Basically, I embed a tag within the tags I want to show as code so that they don't get treated as formatting instructions.

Example:
  [[color=black]tag[/color]]
Result:
  [tag]
If you're ever curious about what tags someone used to format their message, just use the "Quote in reply" link to see their message code.


Extra Secret Trick: Un-truncating URLs

Unfortunately, Meetup truncates web links so you don't see the whole link (the link is still properly clickable, but it reads weird).


To force the entire URL to be shown, use the "Link to..." button to make a link to your link. Then, wrap the "http:" part in a color tag.
Example:
  [url=http://groupart.meetup.com/4/about/]
[color=royalblue]http:[/color]
//groupart.meetup.com/4/about/
[/url]
without the line breaks, produces:
http://groupart.meetup.com/4/about/
Instead of:
http://groupart.meetu...


You can also just drop the "http://" part from the text for the URL.
Example:
  [url=http://groupart.meetup.com/4/about/]
groupart.meetup.com/4/about/
[/url]
without the line breaks, produces:
groupart.meetup.com/4/about/



monkey Part 2: Creating Clarity In Your Message...


It's all well and good to have the various ways available on these message boards for 'fancying-up' your messages but, in the end, the point here is to communicate.

Note that the same rules generally apply to email, too.


Keep your paragraphs short

The web is not like paper.

Unlike a book, where a single paragraph may cover an entire page, web readability demands short paragraphs. It's often not unreasonable to have only one sentence per paragraph in a web or email message.

A general rule is to avoid extending beyond 5 lines of text per paragraph, and to favor 2 or 3 lines per paragraph for the majority of your message. This usually works out to one or two, and sometimes 3, sentences per paragraph.

The reason for keeping things short is that it's a lot easier for the eye to lose its place when reading on a computer screen. Computer monitors are harder on the eyes than paper, and there are typically lots of visual distractions on the screen, too.


Use headings and other emphasis formatting

People tend to skim when they read online. When faced with a computer screen showing paragraph after paragraph of plain text, they might skip the message altogether.

The trick to pulling people into your text online is to provide some visual variety - without compromising clarity.

For a short message (usually less than 6 paragraphs), no extra formatting is needed. However, anything more than that will benefit notably by "breaking up the text."

Headings

The most basic tool for creating visual variety in a message is the heading (h1 thru h6 - covered in part 1 of this guide).

Any message with a half-dozen or more paragraphs can probably be divided into sub-sections. Come up with a clear, and very short statement that describes the topic of the sub-section (one word is ideal, preferably no longer than half a line in total length).

Readers will use a heading to figure out if they want to go to the effort of reading your text, so it should very clearly identify what you're talking about in that section. You might think of a heading as a map sign-post that the reader uses to figure out if they want to go to that destination.

Other formatting

Bulleted & numbered lists (covered in part 1) and indented quotes can also be useful for putting some visual variety in your text.

People will tend to skim a bulleted list in more detail than they will a bunch of plain paragraphs - unless the bulleted list is long (try to keep lists down to less than 6 items). One trick to make lists more useful for readers is to write the text so that a key word, or the main point, is at the start.

For example:
  • Employees will receive a week of vacation.
  • Contractors are out of luck on this one.
As opposed to:
  • For vacation, employees get a week.
  • There's no vacation for contractors.

In the first example, a reader can skim through the first words of each list item to figure out if it's something they want to read. In the second, they have to read almost the entire item to figure out what its focus is.

The use of bold for a word or two at the beginning of a list item also goes a long way to enhancing readability - assuming those highlighted words make clear the focus of the item (as in the first example).

Lines

"Horizontal Rules" (the HR tag covered in part 1) should rarely be used. However, if you have a particularly lengthy message (such as this guide), they can be helpful in maintaining readability.

Basically, if your message is going to be more than a couple screenfuls, and has more than a couple sub-sections (headings), you might use lines to separate some of the sections.

This is especially true if your message is long enough that some of your sub-sections have sub-sections (again, such as this guide).


Conclusion

That's it for now.

Contributors

A few other folks contributed information used in this guide. Thanks go to:

Contributions Welcome

Suggestions for additions and clarifications to this guide remain welcome. Please share any tricks you come up with on the message board


(You can also check out Grant's Guide to Meetup Smilies)

monkey Grant</pre></ol></li></ol></ul>

Table of Contents

Page title Most recent update Last edited by
Dean's Video Posting Guide March 27, 2009 1:14 AM anonymous
Video Posting Guide September 18, 2006 10:06 AM anonymous
Chris C's Guide to Animating Images October 16, 2006 8:50 PM anonymous
Hilary's Guide to Images: About Pages February 20, 2007 9:11 PM anonymous
Grant's Guide to Meetup Smilies October 17, 2006 7:41 PM anonymous
Grant's Guide to Message Board Formatting October 18, 2006 9:34 PM anonymous
About X: Virtual Test Subjects of the Meetup Conspiracy June 28, 2007 2:45 AM anonymous

Organizer:

Grant Neufeld
Contact

Fealty tithe

CAD1,000.00 for Grant's Lego

This covers:

Payment is accepted using:

  • PayPal
  • Cash or check

Your organizer will refund you if:

  • Please contact your organizer for more details.

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy