Vital Styling Tips

Quick Overview

1) Decide your topic and stay concise, using the Add a Title field to be brief and descriptive (maybe using no more than 6-8 words: “Experimenters Field Day”, “Building a 4m Transverter”, “Results of the August 2m Contest” etc).

2) Use Headings to divide up your post (like you did at school/university). Avoid using Heading 1 (that’s already in use by the website), but do use Heading 2, 3, 4, etc

3) Different types of posts (Events, Articles, Blog posts etc) each need a little bit of different information from the others. You choose the type of post by selecting the appropriate category (refer to the correct “How to create…” guide for your post type). 

4) Focus more on writing your facts and less on how the post looks. You can improve upon your post’s appearance later.

5) Images are a great way to illustrate points and demonstrate examples concisely. The website has a gallery of images available, and you can upload new ones.

Lastly, anywhere you see the 🐉 symbol on this page… be careful; there be dragons!

Introduction

The Joke: how do we make a website look like “Johnny’s First Website, aged 3¾”?

The Punchline: Johnny formats his posts by appearance, rather than by intent.

The point: When you’re writing something for our club website, and you’re perhaps thinking: “now, how shall I make this text  green on purple ?” , let me warn you: 🐉 there be dragons!!!

Firstly: green on purple? Seriously?🤣

Secondly: learn to spot that you’re thinking by appearance, rather than by intent.

Capture the thought: “I want the following text to be really big – I know: headings can be really big… I’ll choose the biggest heading I can find…”, you’re on a dangerous path. Headings have a specific purpose, and “being big” is not one of them. Think instead: “what is the intention of me formatting this bit of text?”  Is your intention to highlight a point? (use: bold, italic, underline). To list some points? (use bullet points). To quote someone’s sayings? (use blockquote). To illustrate something artistically? (use an image).

When you understand your intention of formatting something, you can then choose the most appropriate formatting tool from the editor’s Formatting Control Panel. Your post will not only stay legible and performant, it’s intention will remain comprehensible by important devices you may not be familiar with.

In short: formatting by intent significantly reduces the likelihood of problems occurring in your post, of disturbing people with visual impairments who use screen readers, and leaves our website looking great and legible on a wide variety of modern devices (Screen Readers for the blind, Smartphones, home TVs, etc).

🐉 Lastly, and most importantly, do you see the purple button to the right?
It loads an advanced web page building tool, so anywhere you see it, best not to be pressing it!

But, before we get detailed with the exciting world of WordPress formatting, two quick words from our sponsors: the visually impaired.

2) Position-Agnosticism

Consider: “will the reader of my article be using a desktop computer with a huge screen? A laptop with a smaller screen? A thin-screened smartphone? A screen-reader that supports a blind person?”

Answer: You really won’t know.

The point here is that, as someone writing an article, it’s common behaviour to assume that your readers will be seeing exactly what you’re seeing as you write the post.

So, you may naturally write text such as “…so referring to my image on the right…”. 

The difficulty here is that, when you consider the great number of web devices being used, you cannot guarantee that the image you placed on the right WILL be displayed “on the right” when it’s viewed by someone else.

The visitor’s web browser might have moved the image to below your text, above, or removed it entirely.

Try thinking with position-agnosticism, Don’t assume that what you see will be what the reader sees. Try referring to images with less distinct terms:

• “…referring to my first image…”.
• “Looking at the image with the large antenna”.
• “After glueing it all together (image with me looking very relieved)”,

Useful Formatting Styles

At the basic minimum of formatting a post, the styles you’re encouraged to use the most often are:

• Headings,
• Bold,
• Italic,
• Bullets,
• Blockquotes
• …and maybe alignment (left, right, center).

Anything else – without employing considered rationale – risks reducing your serious post into one not taken seriously.

The danger zones are marked with a dragon (for “here be dragons…”) 🐉

The Oft-Used Styles

The Editor’s Formatting Toolbar

At the top of this editor, you will see the Formatting Toolbar. This offers safe formats to use on this website.

Here’s a run through:

• Strikethrough: makes text strikethrough.
• Horizontal Line: creates a dividing line between sections.
• (🐉) Text colour: For website consistency, please do not colour your text (unless you have a good reason to do so).
• Paste as Text: puts whatever’s on your clipboard into the post, removing formatting and other stuff that might make your post go wonky.
• Clear Formatting: select some (or all) of your post’s text, click this button, all formatting is removed.
• Special Character: characters that are difficult to access via your keyboard: ¾∋∑ etc.
• Decrease/Increase Indent: decreases/increases the left-hand side indentation of a paragraph, or a list (bullet points or numbered). Try to avoid using indentation to make text align up; you may become unstuck when your post is viewed in different kinds of devices.
• Undo / Redo: equivalent to control-Z / control-Y on your keyboard.
• Keyboard Shortcuts Help: keypresses to make editing faster.

Headings

Remember when you wrote essays at school? You’d be encouraged to use headings to delineate sections in your writing. The same works in WordPress – but here they have a very important purpose in making our articles attractive to Search Engines (Google, Bing, Yahoo etc).

Outlining your article using Headings 2-through-6 (we’ll come to Heading 1 in a second) and dividing your post into smaller pieces makes reading the article easier to digest.

It also allows search engines to learn more about how your material is structured. Rather than sending a website visitor to the top of your article, and leaving the visitor to find what they are looking for on their own, headings can direct a search engine to send the visitor straight to the relevant section of your post.

Clever, huh?

(🐉) Do not use Heading 1

A post must only have one Heading 1.

The website automatically inserts a Heading #1 (using your post’s title), in an area outside of your control.

Let the website do it’s thing with Heading 1s. Don’t use this heading yourself.

Add Media

You may insert media into your post. You might use media that’s already in the website library (images of our field weekends, homebrew equipment, logos, etc). The [Add Media] opens to library to make your selection.

If no library media is suitable and the image is essential for your post, you may upload new media (please read about Squoosh for reducing image file sizes).

Some media is not allowed to be uploaded to the website for safety reasons (e.g. fonts, executable files, etc).

Distraction Free Mode

Want to focus on your writing, like when using a Word Processor?

<– that button is your friend. Press it to hide all the stuff that appears around your editor. Press it again to unhide the stuff.

(🐉) Here be More Dragons.

[Visual] [Text]

These two tabs switch your editor from wysiwyg (Visual) to HTML coding (Text).

If you know how to write in HTML (hypertext markup language) you might find the Text options of the tabs “[Visual] [Text]” handy. Otherwise…

The Divi Builder

That button looks tempting, doesn’t it? It launches an advanced web page builder that does amazing things. And you’ll be welcome to use the Divi Builder when you feel competent with website design.

But for now, maybe don’t press the button!