Skip to main content

hero banner

Slideshow

Folwell offers two full-width horizontal slideshow options.

Usage, Best Practice, and Accessibility

Consider the user experience research before choosing a slideshow:

  • Studies have shown that people look at and take action only on the first slide. If you do want them to look at more than one slide, make the first slide interesting or useful. The first slide has to sell the next slide to the user.
  • Eye tracking tests show that slideshows get little attention by website users.
  • Improper header tags, slow page load due to high bandwidth images or videos, or lack of alternative image tags can have a negative impact on your website’s SEO and user experience.
  • In theory, a slideshow should entice a user to take an action or otherwise become informed about a website goal or mission. But studies show that slideshows can actually decrease conversion rates due to the frustration of use.

"I’d hate to label all carousels as liabilities, but they also don’t belong on most websites. They can work but not as well as static hero images or thumbnail galleries.

Stick to carousels only for the purpose of showcasing visuals or slideshows. Anything more than that is a disservice to the user experience and likely won’t push visitors any further into your site."

Jake Rocheleau, "Design Debate: Are Image Carousels UX Assets or Liabilities?," Envato Blog

Example

Slideshow 1

News
Northrop
Cras lorem ante, suscipit nec cursus ac, semper vitae elit. Mauris in est in magna bibendum maximus vitae semper augue. Vestibulum id nisl scelerisque, tristique neque id, auctor quam. Nullam mollis, metus vitae auctor congue, magna diam consequt orci.
Goldy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id quam vel libero semper posuere. Vestibulum et enim just. Nullam sit amet posuere nisl. In hac habitasse platea dictumst. Etiam dictum, arcu ut
Research

Vel Condimentu

mut convallis ultricies, eros felis blandit elit, vitae hendrerit dui leo sed lectus. Suspendisse hendrerit enim massa, vel condimentum dolor faucibus a. Morbi ac odio facilisis, auctor ipsum eget, maximus arcau. massa, vel condimentum

Learn more

Slideshow 2

News

Athletics

Family Day

UofM football team will host Family Day at TCF Bank Stadium at 4 p.m. on Friday, August 10.

Athletics

Athletics

Swimming and Diving

Nine Gophers took part in the USA Swimming National Championships last week in California.

Learn more

Usage

Slideshow paragraph type can be added to Paragraphs or Layout Builder through a Content Type. It is up to your development team as to what the preferred process will be for the site you are working on.

The instructions below are how to build a slideshow once it’s been set up on your site.

Add a Folwell Slideshow

The Folwell Slideshow features photos and content side by side. Content is on a gold background that is 40% of the slideshow width.

folwell slideshow screenshot

  1. Click the Add Folwell Slideshow button in the Node Edit screen.

    add folwell slideshow button

  2. Add the slideshow header. This text will appear above the slideshow and should be added if applicable.

    folwell slideshow slide header screenshot

  3. Add slides.Click the “Add Slide” button.

    Folwell slideshow add slide button

    This will display a number of fields related to this slide.

    1. Add slide media. Select an image from the Media Library or upload a new one. See “Adding Images” for more detail.

      Folwell slideshow add slide media screenshot

    2. Enter slide header. This is the title for the slide. It will be displayed as an ## heading.

      folwell slideshow slide header screenshot

    3. Enter slide content.

      Folwell slideshow slide content screenshot

    4. Enter slide link. This will add a link to the specific slide. Currently this feature is not working.

      Folwell slideshow slide link screenshot

  4. Add additional slides. Click the “Add Slide” button to add additional slides.

    Folwell slideshow add slide button

  5. Remove slides. Click the “Remove” button to the right of the slide label.

    Folwell slideshow remove slide screenshot

  6. Reorder slides. Click and drag the crosshairs to the left of the slide label to reorder the slides. Given the size of the slide fields it can sometimes be difficult to drag slides to reorder. Another way to accomplish this is to click the “Show row weights” link and change the numbers corresponding to each slide. This will reorder them as well.

    Folwell slideshow slide reorder screenshot

Add a Folwell Overlay Slideshow

The Folwell Overlay Slideshow features full width photos with slide content in a gold overlay box.

Folwell slideshow overlay screenshot

  1. Click the Add Folwell Overlay Slideshow button in the Node Edit screen.

    Folwell slideshow add overlay button

  2. Add the Slideshow Header. This text will appear above the slideshow and should be added if applicable.

    Folwell slideshow header screenshot

  3. Add Slide Image. Choose Browse Media or Add media to select an existing image from the Media Library or upload a new one. See “Adding Images” for more detail.

    Folwell slideshow slide image

    Note: It is recommended to select images that are wide enough for the slideshow and consistent in height.

  4. Enter Overlay Header. This is the title for the slide. It will be displayed in the overlay area.

    Folwell overlay header screenshot

  5. Enter Overlay Content. This content will be displayed in the overlay area.

    Folwell slideshow overlay content screenshot

  6. Select Overlay Position. This will place the overlay on the left or right side of the slide.

    Folwell slideshow overlay position

  7. Add Additional Slides. Click the “Add Overlay Slide” button to add additional slides. Fill out the fields for each additional slide.

    Folwell add overlay slide button screenshot

  8. Remove overlay slides. Click the “Remove” button to the right of the slide label.

    Folwell slideshow remove slide screenshot

  9. Reorder overlay slides. Click and drag the crosshairs to the left of the slide label to reorder the slides. Given the size of the slide fields it can sometimes be difficult to drag slides to reorder. Another way to accomplish this is to click the “Show row weights” link and change the numbers corresponding to each slide. This will reorder them as well.

    Folwell slideshow slide reorder screenshot

Best Practice

Slideshow recommendations:

  • Landscape-oriented images are recommended.
  • Consider the composition of your images when using a slideshow with a text box on top of the image.
  • Make sure your images are a consistent size and quality.
  • High-resolution images take a considerable amount of time to load - it is best to optimize them for the web.
  • Set up event tracking in Google Analytics to track clicks per slide to determine how your slideshow is performing.

Slideshows should:

  • Provide your visitor with the ability to stop, start, and advance the slides on desktop, keyboard, and touch screens.
  • Limit the number of slides and make sure load time is fast.
  • Keep text short.
  • Address the needs of your content strategy.

Use slideshows when:

  • The type of content fits with slideshow use. Good uses for a slideshow are:
    • an image galleryan online portfolio
    • a product (campus or program) tour
    • telling of a story.
    • You need to present a number of related things in a way that doesn't take up too much space.
  • You've consulted this website.

Do not use slideshows when:

  • You are addressing a business (internal) need rather than the needs of your site's visitors.
  • They could create distraction and confusion by not fulfilling your visitor's needs.

Alternatives to using slideshows:

  • Static hero image - Consider using one single photo with some text and maybe a call to action. Hero images provide a better user experience since they stay fixed and don't use any animation.
  • New static hero images displayed on pageload - You could select 3 or 4 compelling hero images and set it up so that a new hero image is displayed upon page load. This would present different content to your visitors during each visit.
  • Image grids - a image grids allows you to include more visuals without adding a slideshow.
  • Engaging video - The use of the video should be intentional and it should add some depth or voice to your site that a single image would not be able to deliver. There are accessibility considerations that should be taken into account when using video on your site.

Accessibility

  • Slideshows should not move automatically.
    • A slideshow’s design and frequent movement can make people think it’s an ad, leading them to ignore it.
    • Moving elements can negatively impact accessibility, especially for those with motor skill issues.
    • Many people can have a hard time reading all the text before a slider advances.
  • Dot navigation below the slideshow, as well as arrow navigation on the sides of the slideshow, allows your web visitors to move through the slides at their own pace.
  • The slideshows, as designed for the Folwell theme, are fully accessible.