Main Content

So someone is on your website, the page is loaded, and now what? You have this giant white void of space to tell your story or help your user complete their goals. On this page we'll be focusing only on your options as they relate to how page structure portrays to your content and some general ideas about how to place content on a page. Other sections of this guide will have more specifics on other content topics.

Container

The highest level of the page is the container. The USU template has 2 container options. Both containers function exactly the same when the screen is 992px or smaller (992px is a little smaller than size of an iPad 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.

Columns

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 8 columns for the content on the left and 4 columns for the content on the right. On a phone 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 ares you can use. Think of it like putting an entire new spreadsheet inside of one of the cells on a spreadsheet. This column framework the template uses makes it easy to space content out on a page.

Placing Content

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. Put it in a Word document if you'd like, but 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

This is where the rubber meets the road. It's time to choose a layout. Really you have three main options for the page as a whole. Within the page content layout can vary, but generally your overall page is going to either single column, two column with left navigation, or two columns with a right sidebar. Each layout has a place and we'll very briefly cover them below.

Single Column

A single column layout is best when you have a page with simple straight forward content and you think the user is likely to potentially 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.

Honestly, 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. However it is sometimes necessary. When it is, it must follow some rules for consistency and be places 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 4 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. We'll compile some page layouts so that you can see the different ways to layout content and the USU web team as well as University Marketing and Communications is available to help you implement any of the page layouts that you find here or on other sites.

Main Content Topics