Columns and containers

Most pages organize elements into columns or some other container, ClarkU has a few to choose from.

When designing a page with different columns, it’s important to consider that at least a third of your visitors will be using a smartphone with a small screen. Usually, the layout will “stack” so content in different columns appear further down the page. But there is nuance.

Landing pages and stories are the most common uses for one column layouts, but any page can be one column.

One column layouts allow you to take advantage of different alignments and create dramatic designs. When you create a blank page, by default, you’re working in a one column layout. It’s normal for a one column layout to have sections that contain two, three, or four columns as you move down the page — the University homepage is a good example.

When working in a one column layout, ensure that text doesn’t get too wide. As you start typing your text will appear only as wide as a single column. But, if you place your text in a group, the group and everything in it will be as wide as the whole column. Use a two column layout within the group to maintain readable line lengths.

ClarkU’s default two column layout is roughly two thirds on the left side, and one third on the right side. But it’s not exactly thirds, so be sure to use the special class names of either sidebar or sidebar-right. It’s OK if one of the columns is empty, in fact, it’s pretty common. Don’t feel pressure to fill the space.

You can also use two column layouts to display elements side-by-side in a 50/50 design. A set of cards or boxouts is a good example of a two column layout.

Other column layouts

ClarkU allows for customized page layout using columns. You can choose the number of columns and their widths. Keep in mind that when some elements get very narrow, they can be less impactful or hard to read.

Containers

In addition to columns, there are other containers that offer variety in how messages are presented.

Grids

Use a grid to display a collection or related elements. Grids look like columns, but it’s easier to add/remove/rearrange items within them because the entire collection reflows.

On mobile devices, a grid will stay a grid, so elements inside might get quite small. To make your grid “stack” on small screens, set a manual number of columns.

Text grid / matrix…

Use this element to display short and related pieces of information. It’s very useful for displaying things like metrics, or short text blobs in a snackable side-by-side way.

64

Majors, minors, and concentrations.

Find your program

100%

of students complete an internship or experiential learning.

The Clark Experience

66%

Students receive need-based financial aid

Financial assistance

9:1

Student-to-faculty ratio in the classroom

Our faculty

Carousels

Carousels can display any type of content in a special, slide-defined interface. And while a carousel can display anything, they should be thematic: all panes in a carousel should relate to one another. If you plan to use a carousel for photos only, consider using a Gallery instead.

Carousels don’t perform well at the top of the page.

Visitors scroll past them without even seeing what’s in the second slide.

But once a reader is engaged, they’re more likely to flip through a carousel to learn more.

So use carousels to get into details without taking up a lot of space, not as a way to display urgent messaging.

Don’t take my word for it. Read the research on using carousels.

Galleries

Galleries are the easiest way to display a collection of photos. You choose the number of columns, and the computer does the rest.

Tip: set a gallery to one column, and it’ll appear as a carousel.

ClarkU WordPress