Page Layout Basics

• Match Current Content Layout & Formatting
  • Be sure to review the current content of the website, and use the same formatting of content e.g. heading text, CTAs, etc.
• Paragraph Lengths:
  • Keep paragraphs to around 5 lines max. We don’t want big blocks of text.
• Images:
  • Use images that are related to the topic of the page. Only use stock images if the Media Library or client drive “Creative” folder does not have any suitable images.
  • Resize images to the exact width/height that will be used on the page, do not resize large images to fit. And before uploading run through tinypng.com to compress.
• Break up content with images:
  • There should always be an image or element (webform, CTA, etc.) visible when scrolling. We don’t want to see a wall of text from top to bottom of viewing area. See before and after example below, should be clear which version will keep the visitor engaged.

• Think about both the Entire Page and Each Section Concurrently
  • We want to encourage users to continue to scroll down the page. To do this we want the page to have a flow and something that is easy on the eyes. Reusing a 1 column and 2 column 50/50 layout will be boring and eventually the reader will feel they got the gist of the content and stop reading.
  • Break down the content you will be adding/updating into sections/rows and work on figuring out how to make these sections flow from one to the next.
    • 1st section = Hero with title and subtitle
    • 2nd section = 1-2 paragraphs with an image
    • 3rd section = Additional text with a different image and layout
    • 4th section = Additional images
    • 5th section = Final text and CTA
  • The key is to vary your sections. Try not and have 2 identical sections next to each other as this makes the page seem more static and newspaper like. In the above example you could do something like so:
    • 1st section = full width with a background image and centered text
    • 2nd section = a 2 column layout with 40% for text and 60% for an image
    • 3rd section = a 2 column layout with the above columns reverse
    • 3rd section = a 3 column layout with the text in the first 2 and image in the 3rd with a larger row width
    • 4th section = a full width gallery
    • 5th section = text above a custom CTA element with a webform
  • Playing around with row widths, background colors, and column layouts are a great way to change up content from section to section. Once you have a section how you like it consider saving it for later use on other pages.
• Padding is your friend:
  Padding and margins are important to give the content breathing room and make it easier on the eyes. On top of this it will help fill up the page.