Page Layout
One of the core pieces of using the Statamic CMS is laying out page content. Building off of the content first approach the layout organizes how this content is distributed across the page and also influences how the users view and consume the content.
When thinking about how to build out content its good to think about the page in sections. Some of the most common sections of a page are as follows:
Header - This is the top section of the page often the navigation menu and logo are included in this section.
Body (main content area) - The content area of the page is the area that this documentation will focus on the most. This is the bread and butter of most websites as this is what users will be visiting the site to see.
Footer - At the bottom of every page on a website there's a footer. The footer is often a place for quick links for navigating the site, contact information, and often social media buttons.
Diving deeper into page layout there are a few patterns to consider when building out the body of a page. The way we view and consume content is something we don't think about but subconsciously our eyes have natural patterns they follow. When laying out the content here are a few formats in which we can do so:
F Pattern - Just as the letter implies our eyes follow a letter F pattern when reading a page. This means that when we layout our content we should consider starting with the message we want to convey the most clear and break down the content from that point down.
Z Pattern - Similar to the F pattern it's natural that our eyes follow a zig zag pattern from the top left of the page over to the right and down again. This is most commonly used on landing pages where a call to action is prominent.
In addition to the F and Z layout patterns of a page there are a few other ways that sections can be spread across a page.
Grid Layout - Content on a page is laid out in a grid formation. This is popular on many sites today and is a good way to break up content for digestible reading.
One Page - Some pages have content that flows from top to bottom in a single column. This is often used on content pages such as a blog post or informational business pages.
Split Screen - When choosing to display various pieces and sections of content a split screen format is helpful. Common uses are an image on the left and text on the right or comparison use cases. Split screen is also commonly used on pages that implement the z pattern.
By applying these principles we can effectively meet our objectives concerning how we communicate brand, messaging, and call to action to our users. Organizing content across common sections optimizes user experience, guided by natural eye patterns like the F-pattern and Z-pattern. Versatile layout options facilitate clear presentation and interaction, creating compelling digital experiences that achieve goals efficiently.