Skip to page content

Slides

Overview

Slides within the template layout

Slides are the most interactive components in the layout. These allow content to remain hidden unless slid into view, by either using the buttons or swiping on a touch sensitive device. Most commonly, this refers to the Slideshow panel, however, when referenced as the action of "sliding" on the screen, it may be used on other modules that have rotating content. 

Correct Use

Since they are special, slides have some strict standards. All slides have multimedia. That multimedia must be the same proportions as the multimedia on all the other slides in the Content Module Block, and they have to be a particular set of dimensions as defined in our cheat sheet for image and video dimensions. Each slide must be consistent in their use (e.g. all buttons, all text and buttons, all text) in order to function correctly.

It is important to reiterate the inappropriate or inconsistent use of text on these modules can cause some functionality issues if not reviewed beforehand:

  • In any of the block or aside components that use slides, the content should not go beyond the height of the average mobile device screen. This is due to the readability of the content when sliding through.
  • In any of the block or aside components that use slides, the textual content should be about the same length on each slide, recommending the first block have the most length. This is due to the awkwardness of some blocks having too much blank space, given too little content, and looking broken on the screen.
  • In any slideshow, the combination of the main heading and sub heading text should never pass the row of buttons or hide behind them when testing on a tablet screen (the shortest width that a slideshow displays with the image in the first column and the text in the second column).

All slides should also have relevance to one another to prevent surprises. Users should be introduced to content in a manner that expects the following slide would have similar and relevant content to the previous content. Slides abused in a manner that hides content reduces user experience and engagement.

Content Modules using this Layout Component

Example(s)

See the example(s) below for potential solutions for content organization. Please note that not all examples are available as many of these content molecules and components can be flexible. Contact Web Services for creative solutions.

Champions counter

These images should have a description that aids in their relevance to the content. For example, the Champions Club has multiple amenities for Tarleton students. 

Guys playing the Wii

While images are allowed, use this feature in moderation. A page should not be more than 1-2 MB to load. This takes a long time and discourages visitors from staying.

Girl sitting at computer in lime green hoodie

Slideshows are interactive, but are less effective the more slides you have. Keep these rotating content areas shorter than the typical mobile phone's maximum screen height.

Guy drinking a water bottle

Not many people swipe to this last slide. The content should be engaging, create a purpose for viewing, not merely become a photo album. Photo albums are better suited on social media (e.g. Facebook, Pinterest, Instagram).

Rotating Aside Feature Panel: Champions Club

In the Champions Club, students can purchase kinesiology gear, class supplies, snacks, and water. They can also get help with Professional Development (PD) points. Student workers in the Champions Club are available to help upload PD points.

The club has a laid back and inviting atmosphere for students to relax and hang out between classes. Students are also able to meet with classmates and utilize the available computers. The Champions Club is located in the Kinesiology Building, Room 102.  

Rotating News Panel

Images should be 720 pixels wide by 480 pixels tall

Content blocks should be relevant to each other and a height no more than a mobile phone's screen.

1,900+

Students Enrolled

Dimensions

700x700

Format

PNG

1,900+

Students Enrolled

Dimensions

700x700

Format

PNG