Best Practices

Things to keep in mind while you build your site

General

  1. Give the elements on the root level of the page (so not inside of anything else) a width less than 100% so the content inside never touches the edges of the screen.
  2. You can apply styling changes to multiple elements at one time by shift clicking and selecting all the items before applying the change.
  3. Label the elements (all or just some of them) in your Page Structure Panel so you and whoever works on your site knows what they are clicking on.

Images

  1. Make sure to optimize your image for web BEFORE​ you upload to Brandcast. We only optimize your images for Tablet Landscape and down, not at Desktop.
  2. If you want to crop into your image, place it into a container. If you want the entirety of the image to show use an image element.
  3. If you want 3 images side by side to be the same height, either make sure all 3 images are the same size before uploading to use the image element, or place the images as background images in containers so you can force them to be the same size.
  4. If your image rotates when uploaded to Brandcast, that's because of the EXIF data in the image. Using any image editor on your computer, rotate it until it gets back to the correct orientation, then save it and re-upload it.

Preset Animations

  1. Preset animations fade in when the middle part of the element comes into view. To prevent any issues, DO NOT​ place preset animations on any tall or long elements since it might not trigger properly. And keep mobile in mind—a text element might be not so tall on desktop but once you go down to mobile the text will wrap and the element will grow taller and potentially not animate properly.

Text

  1. Keep your paragraph styling in Global Styles blank and have it inherit website styling
  2. Don't over-style anything in Global Styles so that you're able to apply element level changes to the text like color and weight
  3. If you want to make your text responsive, or change the line height, DO NOT​ directly select the text to make changes. Instead, either use Global Styles or set your text to Paragraph and click once to select the element before making the text changes on different device modes.
  4. Keep different H values in separate text elements so you can control the distance between then with margin or padding.
  5. Zip up your text elements to be 0px tall so that the size of the text element is determined by the size of the text.