Map out your content

If you’re reading this, you’ve probably created a general wireframe of the Doc. These are further suggestions relating specifically to Content page level:

Place copy in a Doc first to see how many pages it sits across for a more natural flow instead of finalizing your designs before text is provided. It's far easier to commit to layouts when you have your text to work with - small wording tweaks later down the line shouldn't be an issue.
Run text over multiple Content pages. If it's a squeeze to fit everything on one page, use additional Content pages to give your layouts some breathing space.
Use page breaks in Content pages to define natural page splits.
Keep your number of Content pages per Chapter to 15-20 to avoid performance issues.

Tip: Try doing all of the above before you start committing to layouts!

Explore column options and different layouts

We recommend:	Try to avoid:
Getting creative with column options – four or five-column Content pages offer the most flexibility and creative freedom. Using column breaks to create large areas of white space. Find inspiration on using white space in this crisp Turtl Doc. Toggling on Turtl's baseline grid to ensure neat alignment and spacing between elements. Check out what the column dimensions are in this article.	"Blocky" layouts where all elements are constrained to a single column. Try spanning elements across multiple columns for an editorial feel. Using the wrong column layout for the job – one and two columns are for basic layouts, whereas three, four, and five allow you to get more creative.

Plain text box

Less clutter leads to a better reading experience, research shows.

Enter the plain text box.

We recommend:

Try to avoid:

Using Text boxes to span columns – it’s the only way to set text over multiple columns.
Layering text within plain Text Boxes over images, but beware, this requires careful image selection.
Using them as spacers – remember that you can always use plain Text Boxes without text and hide them on mobile.
Text boxes can also be used as a structural device. Simply remove any text from the Text Box, and use it as a block color fill.

Using large, block-color Text Boxes for headings, as will disrupt the natural page flow. Plain Text Boxes are more elegant and less "shouty"

Using lots of plain Text Boxes for long passages of text. Try to keep body text free-flowing to avoid issues like text-clipping on desktop or unwanted line breaks on mobile.

Mobile (pre)view

We recommend switching back and forth between mobile and desktop views while editing to make sure both look great.
You can check how your Content page will look to your mobile readers by selecting the mobile preview at the top of the editor, or by testing a draft link on an actual mobile device.
Also, check out this How to get the most of mobile Q&A on the subject of mobile design best practices.

Plan for widgets and interactive elements

As the engagement research shows, one of the factors behind Turtl's higher engagement rates is its ability to provide a two-way interactive experience, which is why we suggest the below guidelines.

We recommend:

Try to avoid:

Using snippets of text to style up as standout quotes, which can then be shared on social channels for better reach.
Adding a poll throughout your document to gain interaction.
Note: See this video where Turtl's CEO, Nick Mason, breaks down how Standard Charter Bank's use of polls in a Turtl Doc increased performance by 167% .
Adding an "About us" chapter/section at the end of your public-facing content. It's a great excuse to use interactive maps, videos, charts, and call-to-action buttons.

Reproducing content like for like because we're trying to #KillthePDF for a reason! Always look for ways to add extra value.
Too much interactivity within a single page e.g. multiple videos could be distracting.

Layering and pinning

We recommend:	Try to avoid:
Place widgets on top of images for an editorial, magazine-y feel – think text boxes and polls. Layer images on top of other images to add texture. Use full-bleed images to break out of the grid structure and create a more artful look. Make sure you check how the layout looks on mobile.	Obscuring the focal point of an image by layering elements. Try holding the option/alt key and using your cursor to reposition the image. Interrupt the flow of text. Layouts must always be easy to read.

Typesetting

We recommend:	Try to avoid:
Heading and subheading styles are set with a consistent style throughout the whole Doc (i.e. a combination of large headings and small headings). Remove lonely words on a single line of text by adjusting letter spacing (hold control+option and adjust with left and right keys).	Going overboard with letterspacing as this can warp text at the expense of text readability and accessibility.

Icons

Icons are funny things. Done right, they can truly elevate a Doc. Done wrong, and they can create a bit of a mess.

We recommend:	Try to avoid:
Using the same line height or size for icons throughout a Doc. Switching on the baseline grid to check your spacing is consistent. Switching off "Fill frame" in the image settings. Adjusting icon size for mobile by using the mobile tab in image settings	Increasing the size of an icon simply to fill the space in a layout. Keep icons small and subtle instead.

Alternative navigation aids

Contents page

Building a manual contents page on the Content page can boost navigation and is especially recommended for longer pieces of content.

See the Boosting navigation on a Doc by creating a Contents page video for details.

Breadcrumbing

This is done within a text box, with the current chapter name in bold and with deep links attached to the remaining chapter names of the Doc.

Collaboration

Use Turtl’s commenting feature when sending the Doc over to your wider team for feedback and proofreading.

Next step: Content review

Check out our content review guide or watch our 10-minute video.