The main content area is the space between the hero banner and the footer. This is where you tell the story or help the user complete their goals and find information about the services offered. In this section, you'll find options as they relate to how page structure displays content and some general ideas about how to place content on a page. The template guide will have several examples showcasing what can be done.
The highest level of the page is the container. The USU template has two container options. Both containers function exactly the same when the screen is 992px or smaller (992px is a little smaller than the size of an iPad screen viewed in landspace orientation). At screen widths larger than 992px, the narrow container option maintains a more narrow maximum width than the default. The reason for this is to improve readability for long lines of text.
You can think of the container as the box that prevents the text from going too far to the edges of the screen. If you are reading this on a large monitor, there will probably be white space on either side of the screen. That is because the container has a maximum width. You don't need to worry too much about containers. The main thing to know is, if you have a very simple page that is just a long wall of text, like an article or a policy, you may want to use the narrow container option so it's easier to read.
An essential part of putting content onto a page is aligning the content into columns horizontally. The USU template uses a 12 column grid system to help layout content onto a page. In essence, you put your content into these columns much like an Excel spreadsheet. You can merge them to create wider columns too. Unlike a spreadsheet, however, these columns can change their widths at different screen sizes.
Take for example this page. It's currently utilizing nine columns for the content on the right (what you are currently reading) and four columns for the navigation on the left. On mobile, however, it uses all 12 columns for each content area, thus resulting in stacked content. This is called responsive design and is critical to grasp with so many users accessing USU's website on their phones.
Within any content area, you get a new set of 12 columns. These columns are equally spaced content areas you can use. Think of it like putting an entire new spreadsheet inside of one of the cells on a spreadsheet. This column framework makes it easy to space content out on a page.
Deciding on how to organize your content isn't always easy. However, there are some key things to remember that will help you in this endeavor.
1. Before Creating the Page
It's much easier to organize your content when you have all of it at the start. Step one should be to gather all the content you want for the page. Then, organize it with the headings you think you'll use once it's on a webpage.
2. Prioritize and Group Content
Look at what you have and determine what is important information and what is secondary information. Also try to determine some types of content that might be worth separating or grouping on the page, such as:
- Links or actions you think might be useful for your users
- Dates, locations, or other contact information relevant to the page as a whole
- Alerts, Important Messaging, or Warnings
3. Decide on Page Structure
Next, choose a layout. You have three main options for the page as a whole. Within the page, content layout can vary, but generally, the overall page is going to be a single column, two column with left navigation, or two columns with a right sidebar. Each layout has a place:
A single column layout is best when you have a page with simple straight forward content and you think the user is likely to find all of it useful. If you think a user may want to skip around on a page, or there is critical information or otherwise some complexity, other layouts will probably be better. Homepages, directory listings, news listings, policies, instructions, and similar content work well with a single column layout. It's also often beneficial to use the narrow content container to improve legibility.
Two Column with Sidebar
Most of the time, the two column layout with sidebar works best. It is the format of the page you are reading. It allows you to have your main content on the left and supplemental content on the right. This format maintains good readability for the main content and additional content you want to highlight on the right. The right side of the page is great for cards that contain in-page navigation, event details, alerts, warnings, contact information, or other content that may get lost if it's only embedded in the main content area.
Two Column with Left Navigation
Some sections of sites need a sub-navigation. We actually discourage this type of navigation, as it would be better to possibly review and modify your overall site architecture and main navigation. However it is sometimes necessary, (this is the case for this page/section of USU brand). When necessary, it must follow some rules for consistency and be placed on the left. However, the rest of the left column can be used similar to a sidebar as with the other layout.
Other Layout Options
Layout options are technically limitless, but these three are the core of most pages. Within a single column layout, you could have four equally sized columns. Within a main left column, you could do the same. You could have a two column layout at the top and then further down, switch to a single column. You can look at some sample page layouts in the template guide.