Key Pitfalls
Avoid these critical design traps to ensure your Foleon Doc remains responsive, on-brand, and highly engaging.
Designed on Large Screen
Designing solely on a 23-inch+ monitor hides layout crowding. Always optimize your design for a standard 1440x900 pixel window and use the built-in viewports to ensure content stacks beautifully on smaller laptops and mobile screens.
Custom Brandkit Edits
Manually overriding fonts and colors via the inline toolbar breaks brandkit links. If your brand styling changes later, these elements will ignore the update and look completely inconsistent.
Unchecked Duplication
Never copy a block or column until you have fully verified its layout across all three viewports. Duplicating early copies hidden mobile spacing issues, doubling your cleanup time.
Image Formats
- PNG is a type of image that supports transparent or semi-transparent backgrounds. It's perfect for layering, gradients, and shaped edges.
- Use JPEG image format for photographs and illustrations with many colors.
- SVG is ideal for logos and straightforward vector illustrations. An animated SVG file can also be used.
Image Sizes
Even though there are a lot of different screen sizes, we have recommendations for background image dimensions that create the best results. We recommend the following ideal dimensions for each view mode:
- Desktop: 1920x1080px (16:9 - Landscape rectangle)
- Tablet: 1024x1024px (1:1 - Square)
- Mobile: 525x934px (9:16 - Portrait rectangle)
GIF
Great for graphic animations and small videos of a couple of seconds. To allow for quick loading time, the max. size of a GIF is 2MB.
Video
Videos can be added to Foleon's media library with the URL from YouTube or Vimeo. You can also bring in self-hosted videos ending in ".mp4" (not available in every licence).
Background Images vs. Image Elements
Background Images
- These images are usually decorative.
- They can be placed on a Block level (#1) or on the Column level (#2).
- The image will always scale up to fill the shape of the background container.
- Cropping occurs when the container shape differs from the image shape.
- Can be thought of as layers that sit behind elements (#3)
Image Elements
- It will always show the entirety of an image.
- Elements (#3) are always placed inside of columns (#2).
- Column settings such as spacing and alignment affect how image elements are seen.
- Elements cannot overlap other elements.
Optimal spacing
Based on a window size of 1440x900 pixels:
- 100px column spacing on desktop.
- 50px column spacing on tablet.
- 25px column spacing on mobile.
- 30px spacing between columns. (Instead of custom spacing between columns. This will save you a lot of time resetting them repeatedly.)
- 30px bottom column border ‘spacing’ in the case of a card grid.
- Element spacing varies. Stick to default unless there is a good reason not to.
Best practises for texts
- Keep your font size above 16 pixels so that it's easy to read regardless of where it appears.
- Be mindful of your word count. Text and other elements should be in balance. A good rule of thumb is to avoid exceeding 800 words on overlays and pages.
- Reader engagement is always a topic of discussion. Be sure to create engaging content that's easy to skim and read.
- Avoid walls of text. Break up text heavy content with visual breaks and leveraging overlay pages. This helps guide the reader without overwhelming them.
Also see...
💡Best practises
- Some user roles have different abilities. The editor and author users don’t have full rights to templates.
- You're able to edit templates via the template manager in the dashboard.
- Consider how to organize your template manager using categories.
- Check if the design is responsive on tablet and mobile before saving it as a template.
- Stay consistent with spacing, colors, and styling to make your templates match.
- Be specific in how you name your templates to increase the ease of reusing them by other users.
💡Best practises
- Give your content room to breathe with white space.
- Catch your readers' attention with fullscreen background videos and adjusted scroll speeds*. However, be mindful of the page's loading speed on different types of connections.
- When you design a Foleon Doc on a 23-inch (or larger) screen, always check the result on smaller screens as they show less information.
- Use our Unsplash integration in the media library to find stock photos!
- Resizing images: You can crop your images in the media library or resize them before uploading using tools like Photoshop, Affinity, Canva.com, or Pixlr.com.
- Structure your media library into folders, that help your coworkers find what they are looking for. Example can be found here.
- Always check responsiveness before duplicating an element, block, or column.
Confinient Chrome extentions:
- Grid Ruler extension to help you feel confident in your element placement
- Window Resizer extension to help manage how your content looks on different screen sizes
- Colorzilla extension to help pick colors from a webpage to drop into the color picker or update your brand swatches. Great for matching the look of a transparent color!