TLS Style Guide for Medium
This guide is aimed at helping Medium content creators at the University of Manchester Library produce their posts in a more consistent style.
--
This guide contains a number of standard approaches we ask you to follow when you are creating posts for MLE, MRE and SLS publications.
The aim isn’t to cramp your individual style, creativity and flair but there are some easy things you can do that will make your content easier to read and make sure all of our content has a consistent look and style.
Contents
Tone, readability and structure
To make your Medium posts as easy to use as possible, we try to make sure a few elements are always included. You can see some good examples of these things in any of the previous Digital Society topics.
Tone, register and plain English
We often use a fairly informal tone in posts, with a non-academic register, and standard contractions (you are -> you’re, and so on). The UoM house style is to use ‘we’ and ‘you’ rather than the third person.
Sometimes you might want something more formal, but either way, choose the formality of your post and stick to it!
We also try to write in plain English, which means avoiding unnecessarily complex or confusing language, including figurative or idiomatic phrases. This helps to make your post easy to understand, especially for neuro-diverse readers, or those who speak English as an additional language.
Introductions
Your intro should set clear expectations for what the post will cover, just as a session has learning objectives. Let them know what’s in this post (as opposed to any previous or later posts), links to any workshops it might support or complement, and how it’ll help them. Place your intro below any top image, and above the menu.
Medium calls posts ‘Stories’. However, we normally refer to them as ‘posts’. If you’re writing a more informal blog-style post (like an MLE blog post) you can call it a ‘blog post’ if you wish.
Conclusions and summaries
If your post is a long one, a conclusion or summary might be really helpful for your reader. Place this before the ‘Further support’ section if you have one.
Title and subtitle
Title
The title is the first line of every Medium story. You’ll see the word ‘Title’ in the left hand margin when the cursor is in this section (see screenshot above).
Important — The title is the name of your story or post. Choose your title wisely as once published this will be included in the web address and will be shown in Medium search results and any publications where the story is added.
Subtitle
Use the subtitle to provide the reader with more context about the post.
To create a subtitle simply add text below the title and format it as the smaller of the two header styles (see screenshot below). Alternatively, select the text and press ‘Ctl-Alt-2' (Cmd-Alt-2 on Mac) on your keyboard.
The screenshot below shows what the title and subtitle look like in a published article.
Headers
Headers take the form of larger, bolder text and are used to show the start of sections and distinct items within sections.
There are two sizes of header you can use. To turn text into a header select it and choose the large or small ‘T’ from the menu (see screenshot below).
Large header
This sentence is an example of a large header.
When you’re breaking up your story into sections the large header should be used at the start of each section. You can see examples of this in the story you’re reading now. This section — 3. Headers — has a title using the large header formatting.
Small header
This sentence is an example of a small header.
The small header is used to label distinct items (sub sections) within a section. The two sub sections you’re reading now — ‘Large header’ and ‘Small header’ — each start with a small header to make them stand out.
Breaking up your text
In the words of Neil Sedaka, breaking up is hard to do. But if you want your Medium story to be as easy as possible to read then you’ll have to forego those page-long paragraphs and break up your text.
There are a number of ways to do this.
Adding paragraph breaks
Adding paragraph breaks creates a natural pause between one sentence or paragraph and the next. Compared with Word documents or journal articles, paragraph breaks are used much more frequently for online content.
A paragraph break moves the cursor down two lines leaving a clear space in between.
To add a paragraph break press the Enter (Return) key
The sentence you’re reading now is an example of where a paragraph break has helped to break up the text.
Adding a single line break
There may be occasions when you want to type something on the next line and don’t want a paragraph break with the clear line space in between. Like this:-
Line 1
Line 2
To add a single line break hold the ‘Shift’ key when you press ‘Enter’.
Adding quotes and quotation styles
Another way to break up the text is by adding quotes and quotation styles.
This is the first Medium quotation style. By default it uses an italic font that you’ll need to remove for accessibility purposes (see ‘italics’ below). Click the italics icon to remove it.
Quotations can be used for actual quotes (see use of ‘quotation marks’ below) or for highlighting important sentences you want to make stand out . This post uses this quotation style throughout to highlight parts showing you how to do something.
This is the second Medium quote style. Pick the style you prefer and use the same one throughout your story.
Whereas newspapers will often lift quotes from an article and place them in a quote box or under an image, in Medium there’s no need to duplicate a quote. Instead it should be part of the natural flow of the text.
To add a quotation style select the text and click the speech mark icon. Click it again to choose the second style, and click it a third time to return to regular text.
Adding a tip or note
You can use the first quotation style to make content stand out in the form of a Tip or Note.
Adding section dividers
See those three dots in the centre of the page at the end of this section? That’s a section divider. Use a section divider to separate one distinct section from the next.
To add a section divider (“add a new part” in Medium-speak) press Ctrl-Enter (Cmd-Enter on Mac).
Speech marks, inverted commas, italics and bold
In the words of the well know Medium writer Mary Poppins…
“Whiskers on kittens, speech marks, inverted commas, italics and bold text are a few of my favourite things”.
However, just because they’re available to use doesn’t mean you should always use them, everywhere, for everything, all the time.
Whiskers on kittens
These are nice to have, particularly if you own a kitten, but aren’t relevant in the context of using Medium. Let’s move on… (Sorry, Mary!)
Speech marks
You should only use speech marks if you’re including a direct quote from another source, such as when Obi-Wan Kenobi said to Luke Skywalker “Use the force, Luke”.
See the ‘Adding quotes’ section for use of quotation styles.
Inverted commas
These are used when you want to highlight a specific word or term, like when you’re telling someone to click the ‘submit’ button on a website. Please don’t use speech marks for this.
Italics
In short, don’t use italics.
In a bit more detail, don’t use italics because they’re harder for people with certain sight impairments to read. I’ve not even used italics in this example!
Bold
Bold text is useful to make specific words or phrases stand out. This can be used with or without inverted commas as appropriate.
Using images
They say a picture paints a thousand words. We wouldn’t go that far but when adapting the content of text-heavy Word documents or PDFs the addition of images is a great way to make the online reading experience easier and more pleasant on the eye.
Unlike the Batman rubber ducky photo above (thanks Phil!) your photos, illustrations and graphics should be appropriate and relate to the contents of the story. Decorative images with abstract patterns can be used but try not to add too many.
What images can I use?
- Creative Commons images
- Images to which we (the Library) own the copyright
- Images you’ve created yourself and are happy to share
- Free image repositories
Please check the details of the licence and where required credit the source, state the license and link back to the source (see ‘Captions’ below).
Image size and placement
To add an image simply drag and drop it where you want it to go. If it’s an image from a website you can copy and paste it.
Medium supports the following image formats — JPG, JPEG, PNG and GIF — up to 25MB in size.
Medium gives you up to four image placement options depending on the size of the image. Small images (such as the screenshot above) can’t be made bigger than they actually are, but larger images will be shrunk down to fit. Your image needs to be at least 1060 px wide for all four options to show.
- Left justified — please avoid using this unless you have plenty of text to float round it.
- Text justified — in line with the left and right edges of the text. This is the placement we use the most.
- Large — exactly how large depends on the size of the image.
- Screen width — some of our Medium resources have a screen width image at the top of the page immediately below the title and subtitle (see ‘Featured images’ below). You should only use landscape images for this.
Alt text
All images should have ‘Alt text’ to describe what the image shows. This is for visually-impaired readers and those using text reading software.
To add Alt text click to select the image then click ‘Alt text’ (see screenshot above). Add your description in the pop-up window then click ‘Save’ (see screenshot below).
Captions
Add image licence and credit details to the caption beneath the image. There’s no need to repeat the Alt text description.
The Digital Society story Support for your coursework has more information about screenshots and images, where to find them, and how to use them appropriately.
Colours and visual identity
Making images or diagrams for your post? Stick to the visual identity colours for the service area you’re creating content for — MLE, MRE, SLS or WP.
You can find the colour codes for SLS on the SLS PowerPoint master on Library Connect.
Featured images
When posts are added to our MLE, MRE and SLS Medium Publications depending on which section they’re in they will sometimes display with the title and subtitle on top of an image. Medium will automatically use the first image it comes across, so it’s a good idea to add a suitable photo at the top of the post underneath the title and subtitle to represent the post.
Below are two examples — one where no image has been added and Medium has used the first image from the post, in this case a screenshot — and one where an illustrative image has been added at the top of the post. I know which I prefer!
Using GIFs
GIFs can be useful and nice demonstrating short click information. However, they are generally very inaccessible and easy to get wrong. If you use GIFs follow the below guidance but bear in mind you may get asked to change them as apart of QA checks.
- If your GIF is demonstrating some step by step clicks or instructions make it no longer that 2 click steps. If it needs to be longer create a video.
- Ensure your GIF is set to loop not just run through once. GIFs have no controls so if the user misses it and it doesn’t repeat.
- Don’t rush the steps, take your time. When recording, a rushed set of actions will mean the viewer may have to watch it repeatedly to get all the steps.
Embedded content and web links
Embedded content
Medium makes it easy to embed video and audio hosted on other platforms, such as videos from YouTube and Vimeo, and audio from SoundCloud, Bandcamp and Spotify.
Simply copy the URL of the item you wish to embed, paste it into Medium, then press ‘Return’.
Please note:-
- Media will automatically embed as a square object — you won’t be able to change the size or shape.
- You can add a caption if you wish
- You won’t be able to play the embedded media while you’re in edit mode. To test it out, use the draft link in a different web browser, or with a different user profile on the same browser.
Web links
If you copy a web link and paste it into Medium then press ‘Enter’ it will be added as a rectangular item with the name, details and image pulled from the page. See this example below.
If you need to show a web address you should remove the http:// or https:// from the start, and any / at the end.
For example https://www.library.manchester.ac.uk/ should be shown as www.library.manchester.ac.uk
To add a hyperlink to text, select and copy the link, then select the text you want to add the link to and paste it on. It should show like this: The University of Manchester Library.
Alternatively you can select the text and click the link icon, or press Ctrl-K (Cmd-K on Mac), then paste the link into the box provided.
Building a clickable menu
If you have a post with multiple sections, clickable menus are a really good way to help readers navigate your resource easily.
There are a couple of ways to build a clickable menu in medium, the first is to install this browser extension for Chrome which will automatically create and copy a link for the text you have highlighted to your clipboard. Next just paste the link to the menu item as you would normally.
Alternatively you can find out the #code for your self by highlighting the section you wish to link to and following the instructions in this post.
Each section of your post should end with a ^ back to contents link which takes the reader back to the menu. Remember to link to the word ‘Contents’ above the menu rather than to the top of the page.
Note: Clickable menus currently don’t work on all web browsers.
Keyboard shortcuts, embedded content, TK, code and emoji 😁
Keyboard shortcuts
Ctrl-? (CMD-? on Mac) brings up lists of keyboard shortcuts for use when writing and editing on Medium.
TK
Typing the letters TK anywhere in your story adds an orange TK in the left hand margin, as shown in the screenshot below.
This is a way of marking a particular place you’d like to come back to. Maybe it’s waiting for a link, or the spelling needs to be checked. Whatever the reason, if you try to publish a story that contains any TKs you’ll receive a warning message first.
The orange TK mark is only visible in edit mode — anyone not logged on to the same Medium account and viewing the post with a draft link won’t see it.
Adding code
Press Ctrl-Alt-6 (Cmd-Alt-6 on Mac) to turn text into a ‘code’ box. This is handy if your story contains actual code, but can also be used to highlight other pieces of text to be copied.Emoji 😁
Emoji are graphical symbols that can be added to text. We can use these to denote embedded elements such 💬 Contribute (comment stream), ✍ Task, and ✅ Poll.
All currently available emoji can be found on emojipedia.org along with images to show what each one looks like on different platforms (Apple, Google, WhatsApp, etc).
Again be cautious with their use as most may not pass style guidance for the program or accessibility checks, they can be used more flexibly where a blog rather than a resource is being created.
