Deciding on content hierarchy

Once you understand how Open Framework's responsive regions adjust for different screen widths, you can better decide where on the page to place your blocks and content.

The main thing to keep in mind is which content you want to show up first in mobile. For the smallest screens, your content will be stacked vertically in the order of the DOM (Document Object Model, or the code order). The one exception is if you have modified the responsive content order in the theme options (to "show main content before sidebar content").

By default in mobile, the order of your content will be as such:
(Blue = Flow region, Yellow = Stacked region, Red = Sidebar, Bold = special region)

1. Admin Shortcuts (for logged-in users only)
2. (Site title - Not a region, just part of the page template)
3. Header
4. Navigation (by default, the Main Menu is placed here. You can replace this by placing any other menu block in the Navigation region)
5. Search Box (place the search form block here)
6. Main Top
7. Main Upper
8. First Sidebar
9. Highlighted (intended for system alert messages)
10. Help (intended for optional in-page help content)
11. Content Top
12. Content Upper
13. Content Body (where your page content goes)
14. 2-Column Flow
15. 2-Column Stacked (1st column)
16. 2-Column Stacked (2nd column)
17. 3-Column Flow
18. 3-Column Stacked (1st column)
19. 3-Column Stacked (2nd column)
20. 3-Column Stacked (3rd column)
21. 4-Column Flow
22. 4-Column Stacked (1st column)
23. 4-Column Stacked (2nd column)
24. 4-Column Stacked (3rd column)
25. 4-Column Stacked (4th column)
26. Content Lower
27. Content Bottom
28. Second Sidebar
29. Main Lower
30. Main Bottom
31. Footer

So if you want your "About Us" paragraph to be seen first before other content blocks, consider adding it to the Main Top, Main Upper, or First Sidebar regions. Within each flow and stacked region, the order of the blocks on desktop (left to right, top to bottom) will translate to the vertical order of the content, so if you have three blocks you are placing in the 3-Column Flow region, the first block you place will show up first on mobile.

Visit the Open Framework regions demo page to see how these regions behave.

Follow your page goals

We encourage you to think about your page goals when deciding on your content hierarchy. By defining the specific goals you have for each page, you can create content that is more relevant to your visitors. We call this a "content first" approach. For a detailed post on our process in defining page goals, messaging, and content, check out Megan's post, "Content Comes First" on the SWS Blog.