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)
Video and Animations
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!