The guide for special layouts and styling

Recommendations for how to build reusable and responsive websites and stories for The Michigan Daily.

Written by

This guide primarily focuses on setting up page layout and styling. For best practices with regards to development and deployment, refer to the special website checklist.

This guide is also self-referential in that I will be describing concepts that are reflected in how this page is laid out. It will be useful to have the code for this page open as you read.

Layout

Most websites include a CSS reset, a set of stylings that remove style inconsistencies between browsers. This page has a rather minimal reset to remove margin and padding from the body, and to remove margin from headings and paragraphs. While the default margins for text elements are useful to provide spacing, it is preferable to manually control the spacing through grid layout gaps.

As a news organization, many of our special websites will require large amounts of prose. People tend to have a hard time reading when a text container is wide. This is particularly an issue for some people with disabilities.

For people with some reading or vision disabilities, long lines of text can become a significant barrier. They have trouble keeping their place and following the flow of text. Having a narrow block of text makes it easier for them to continue on to the next line in a block. Lines should not exceed 80 characters or glyphs (40 if [Chinese, Japanese and Korean]), where glyphs are the element of writing in the writing system for the text.

Therefore, I start most prose-heavy layouts with a section that is 60 to 80 characters wide. CSS includes a ch unit to work with the width of a single character glyph. Note that setting a maximum width is naturally responsive, even on mobile devices.

In most cases, text should be centered on the screen. Centering can be accomplished with horizontal margin set to auto. It is also important for a section of text to take up all allotted space within the maximum width constraint by setting the width to 100%.

Some padding should also be added around the text container to ensure that the text does not touch the screen edges. This is especially important for mobile devices. Note that padding will add to the width of the container by default, making mobile screens horizontally scrollable. To prevent this, set box-sizing: border-box on the text container.

With all that we've described in terms of grid layout, maximum character width, text centering and mobile responsiveness, we arrive at the following set of styles for prose layout. 

section {
  display: grid;
  gap: 0.5rem;

  max-width: 80ch;
  width: 100%;

  margin: 0 auto;
  padding: 0.25rem 0.75rem;
  box-sizing: border-box;
}

Although I describe this as "prose layout," all of the ideas are pertinent to any good responsive layout, regardless of the amount of text content.

Breaking out

Although this default width is useful for prose, there are also situations when you might want more width to work with. In those cases, you will want to create "breakout" sections.

In a breakout section, remove the maximum width associated with a section. Then, you will have the full width of the screen to work with.

If there are parts of the breakout section that you want to retain the prose width, you'll want to re-apply the styles that set the maximum character width. Furthermore, the maximum width can be customized to be more than the prose width but less than the full width, as demonstrated in the blue rectangle above.

Note that breakout sections are less visually imposing on mobile devices due to the small screen width.

Grid layout

Grids are a powerful layout approach. They can be used for simple vertical layouts like this overall page, but can also be used for more complex two-dimensional layouts. Grids can be made to be responsive by default in some cases, eliminating the need for media queries. Relevant styles for the following example can be found in css/grid.css.

Notice that the following grid layout is part of a breakout section.

  • A
  • B
  • C
  • D
  • E

Scroll layout

There is a common storytelling method in journalism called "scrollytelling." In essence, a visual element remains in the background or to the side of an area of text as the user scrolls. The visual element usually changes several times as the reader reaches specific areas of text, denoting some sort of relation between the change and the text. Scrolling layouts are often used in data visualizations or animations to show transition points in a story.

There are a few important areas for a scrolling layout. First, there is a container with position: relative. This container will have two immediate children: 1) a figure that will remain in the background and 2) a container of steps.

The figure should stick to the top of the screen, relative to the scrolling container. In this case, it is also taking up the entire height of the screen.

The figure should also be placed behind the steps (in three-dimensional space) such that the written content appears in front of the figure. The figure should usually horizontally and vertically center any of the content inside it. 

.scroll-figure {
  position: sticky;
  top: 0;
  margin: 0;

  min-height: 100vh;
  min-height: 100svh;

  display: grid;
  place-items: center;
  z-index: 0;
}

The figure should also have something inside it. In our case, we created a purple rectangle that is 500 pixels tall.

Secondly, the child container should be made to render in front of the figure. In our case, the width is also less than the figure's width. 

.scroll-step-container {
  z-index: 1;

  max-width: 60ch;
  width: 100%;

  margin: 0 auto;
}

A step itself should take up the entire screen height. Within the step, there is another content container that has a white background. This provides the visual illusion that steps are smaller than they are. Note that the content container does not take up the entire height of the screen. 

.scroll-step {
  min-height: 100vh;
  min-height: 100svh;
}

.scroll-step-content {
  border: 2px solid black;
  background: 
    rgba(0, 0, 0, 0.5);
  color: white;
  padding: 1rem;

  display: grid;
  gap: 1rem;
}

While all of the steps on the page take up the full height of the screen, it may be useful depending on the story for specific steps to take up more or less of the screen to shorten or lengthen the amount of time it takes to scroll between steps.

For the most part, the (text) content within each step should be short. This is especially important on mobile devices so as to not completely cover the background figure.

There is a browser compatibility issue regarding the three-dimensional nature of our layout. The figure is meant to always be behind the steps, but this is not the case in Safari without some extra configuration for the figure and the container of steps. 

.scroll-stack {
  transform: 
    translate3d(0, 0, 0);
}

This forcefully creates a stacking context. I'm not certain this is necessary, but I've found it so in my experience.

The most prominent library used for scrolling layouts in journalism is called scrollama. We have published several stories and websites that use the library.

This page does not use scrollama to change the scrolling figure. It simply shows the styling and layout necessary to effectively use the library. The relevant styles can be found in css/scroll.css.

I will leave it as an exercise to read the library's documentation to figure out how to change the figure while scrolling.

Prose

The Daily uses Lora as our serif font and Open Sans as our sans serif font (digitally). In typography, serifs are small lines that are attached to the ends of a letter. We use these fonts in our styles by importing them through Google Fonts.

All text should have be at least 16 pixels large for readability. Typically, I don't use pixels explicitly. Instead, I specify 16 pixels as the base font size, and then use the rem unit to specify multiples of 16. For example, 1rem is equivalent to 16 pixels, and 2rem is equivalent to 32 pixels. I will typically increment rem units by 0.125 or 0.25 to keep some form of consistency. The lowest font size that I feel somewhat comfortable using is 0.875rem, potentially for captions or footnotes.

For larger pieces of text such as headings or titles, I will introduce a responsive unit such as vw which represents a fraction of the width of the screen. For example, the font size of this page title is clamp(2rem, calc(1.375rem + 1.125vw), 3rem);. The clamp function keeps the font size within the range of the first and last parameters, but allows the size to be flexible otherwise.

Images

Every story that gets published usually includes at least one image (i.e., the featured image). An image should almost always have the following additional elements: 1) alternative text, 2) credits and 3) a caption. The image and the additional elements should usually be encapsulated in a figure element. The caption itself should be placed in a figcaption element.

Images are heavy pieces of media. While prose is relatively light, images can often take up several megabytes (MBs) without optimization.

Our WordPress website includes the Jetpack plugin which optimizes images by using better image formats and creating several size variants for different screen sizes. In order to take advantage of Jetpack, visit the pantry.

Carousels

Stacks