Why not try it out while you read: Create a new article right away!

A basic article follows a certain template for optimal readability, consistency and user experience:

• Header image
• Title
• Lead
• Body
• References

Header image

When editing a page, header images are uploaded in the "Video and images" tab.
Upload high resolution images and optionally crop the image when it is uploaded.

The CMS will always keep the original image and take care of creating web and mobile friendly versions of your images. 

Cropping is how you select a certain area of an image to be displayed and the surrounding area to be discarded. The website will for instance show square cropped images in lists of articles teasers. Croppings are created automatically for each image. Each crop can be manually adjusted, and the editor should try out different crops until an optimal crop is found.

• Extra wide crop - is used to display the header image across the full width of a page. The locked height of this crop assures the title and body text is visible below the image on most devices.
• Square crop - The frontpage stream and other lists will display square images in the article teasers. If the automatic cropping is not optimal use the square crop to manually select the optimal crop.

If you want an alternative teaser image instead of the main image or if you do not want a main image but still have a teaser image, upload a teaser image in the "Teaser tab"

Preferred image formats are .jpg and .png. 

Title

Titles should be descriptive, attention calling, not too long, not too short, and invite the reader to go explore the content. Avoid click-baiting and provide the title as a reliable service to the curious honest reader.

Lead

The lead is 1-3 short paragraphs that frames the actual content of the article.

Most online readers are swamped with quality content channels and so much relevant content to read. 

The lead should be

• a 3 second read that will let the speed-readers decide if this article is relevant
• a promise about what the content will return
• a hook that makes the reader curious about...

Body

The actual content of the article is in the body part. Several tricks will improve the readability and the quality of the content.

In many cases the content is copied from Word or a similar program. In that case copy the text, and click the "Paste from word" button and paste the text into special box.

[[{"fid":"2245","view_mode":"teaser_large","fields":{"format":"teaser_large","field_file_image_alt_text[und][0][value]":"Click that cool Paste from Word button","field_file_image_title_text[und][0][value]":"Click that cool Paste from Word button"},"type":"media","link_text":null,"attributes":{"alt":"Click that cool Paste from Word button","title":"Click that cool Paste from Word button","height":109,"width":597,"class":"media-element file-teaser-large"}}]]

This procedure removes Word-specific styling, and prepares the content for optimal web presentation.

Break the content into sections of related paragraphs and assign headers to important sections. The headers also serves as input to search engines. To assign headers, avoid using bold or strong. Instead select the header text or place the cursor inside the header text, and select "Header" from the styles dropdown. Applying the correct header style improves search results significantly:

[[{"fid":"2246","view_mode":"teaser_large","fields":{"format":"teaser_large","field_file_image_alt_text[und][0][value]":"Header styles","field_file_image_title_text[und][0][value]":"Header styles"},"type":"media","link_text":null,"attributes":{"alt":"Header styles","title":"Header styles","height":135,"width":679,"class":"media-element file-teaser-large"}}]]

Pasting content from Word, can sometimes introduce or reveal duplicate linebreaks between paragraphs. Remove duplicate line breaks for a smoother reading experience.

Lists

Variations in the rythm of paragraphs throughout content will improve the reading experience. Sometimes a paragraph can be converted into a list of bullits. 
A list makes short paragraphs stand out, and can be a pleasant variation of rythm. 
Use the bullit style to create lists.

Links and Buttons

You can format links as buttons, by adding the class button in the advanced section of the link:

[[{"fid":"2882","view_mode":"teaser_large","fields":{"format":"teaser_large","field_file_image_alt_text[und][0][value]":"","field_file_image_title_text[und][0][value]":""},"type":"media","link_text":null,"attributes":{"height":354,"width":376,"style":"width: 376px; height: 354px;","class":"media-element file-teaser-large"}}]]

A button link

Create a download link

To attach a file to a button, you first need to upload your file in the Attachment and links tab. When your file is uploaded, copy its URL by right clicking the uploaded file. In your content flow, add a link and insert the file-URL. Remove all before /sites/default/files/attachments/[your-file-name] of the URL. 

In the advanced section of the link pop-up, add the classes button and download - and you are ready to go. You file will be available inline in the content, and in the downloads section at the end of your article.

Download Brandguide 

Audio

You can add audio in the content flow. Add a mp3 file via the media-insert button.

If you mark a paragraph text just before the audioplayer with the text-style Image-text, this will be used as a description of your sound:

This is marked as Image-text

Images

Placing images or videos in the content flow is highly recommended. However the quality,size and placement of the image should be handled carefully to make sure the image looks nice on all devices.

Simple images can be inserted with the "Add media" button:

[[{"fid":"2248","view_mode":"teaser_large","fields":{"format":"teaser_large","field_file_image_alt_text[und][0][value]":"Image upload","field_file_image_title_text[und][0][value]":"Image upload"},"type":"media","link_text":null,"attributes":{"alt":"Image upload","title":"Image upload","height":141,"width":714,"class":"media-element file-teaser-large"}}]]

Use the text-format image text to add descriptive text to your image

Avoid clipart, icons, low-res images. The image should never just serve an aestetical purpose.

For more advanced layouts with images see the Section engine.

References

Progress in Mind features an automatic reference system that with very little effort can be copied directly from Word. 
The inline reference must be marked with simple superscript¹ using a numerical index, or a complex interval^1,3-5
The list of references must be pasted into the References tab and marked as a numbered list. Each reference should be linked to it's source whenever applicable

[[{"fid":"2249","view_mode":"teaser_large","fields":{"format":"teaser_large","field_file_image_alt_text[und][0][value]":"References","field_file_image_title_text[und][0][value]":"References"},"type":"media","link_text":null,"attributes":{"alt":"References","title":"References","height":302,"width":962,"class":"media-element file-teaser-large"}}]]