A slideshow, sometimes referred to as a carousel, is an invaluable website feature that can quickly and effectively engage patrons by spotlighting various resources and upcoming featured programs offered by the library. Because this content does need regular updates and is so graphics-based, it can be a frequent problem point for library websites. Our guide to library slides includes helpful tips for making the most of your slideshow and a free graphics kit!
Using Slides on Your Site
Where should slides go?
Slides should always go “above the fold,” the top part of the page that can be seen on both mobile and desktop devices before any scrolling is needed. Slide content is usually best-suited for your homepage and high-level landing pages such as a children/teen department page, local history page, Friends page, etc
How many slides should be in a slideshow?
Keeping the slide count consistently between 4-8 slides at a time ensures that the patron won’t be overloaded with information and that each slide will have ample time in the spotlight.
Should slides auto-rotate?
Auto-rotating slides allow for multiple opportunities to promote events and resources while keeping patrons updated on important library news. Keep your rotation quick enough for users to realize new content will roll over before they navigate to another page, but slow enough for users to absorb the content. An average baseline you can adapt for your website is 4 seconds per slide. Make sure your slideshow includes navigational controls (such as back/forward arrows and slide indicators) so a user can get back to a particular one if they need.
We highly recommend using a random sort order for your slideshow blocks to increase the likelihood that a single user will see most or all of your available slides; not presenting slides in the same order each time helps keep users engaged, as people often stop paying attention to repeating patterns.
How often should I update my slides?
Regularly maintaining and switching out slides will keep the content fresh and relevant. Exactly how often you add new slides will depend on several factors, but we recommend setting a goal of one new slide every two weeks, if possible. You don’t want your users to start dismissing the slides if they haven’t seen anything new in their last several visits.
What should my slides feature?
When possible, always link your slides to relevant content (either internal or external). A slide is like a billboard—meant to capture attention and provide a call to action. A slide’s life cycle will depend on what it’s promoting, but some common things to feature include:
- Big ticket events: add to the site at least one month before the event and remove immediately following
- Popular recurring events: keep these general and without dates (i.e., “Baby Storytime every Tuesday at 10 am”) so they can be featured long term and temporarily removed if more relevant slides need to be added
- Digital library resources: like recurring events, these slides can be featured long term and be “bumped” for other content as needed; vendors will often provide digital graphics you can use in promoting these services
- New library services: add to the site once the service is available and remove after 3-6 months
- Summer reading: add to the site shortly before summer activity registration begins and remove once concluded
- Library closings: add to the site 1-2 weeks in advance and remove as soon as the closing concludes
- Library announcements: highly variable depending on the content, but we recommend limiting your slideshow to only one high-level announcement at a time
- Social initiatives: whether acknowledging Black History Month in February, Pride month in June, or something similar in your community, add slides promoting social initiatives for the duration of that period (i.e. March 1-March 31 for Women’s History Month)
Keep the copy short and sweet, and use graphics that are overall consistent with your established brand.
Designing Slides for Your Site
When creating new slides for your website, keep in mind the importance of design. Since slides are usually the focal point of the page, slide design is critical in effectively promoting events and resources. The more aesthetically pleasing a slide is, the more successful it will be in drawing the patron’s attention and engaging their interest.
Keeping a design-forward mindset while creating slides will foster cohesion among all slides and support a visually pleasing theme that will improve the feel of the page as a whole. Des Moines Public Library is a client of ours that consistently produces creative slides that complement the overall website theme.
Even if your library doesn’t have a graphic designer, you can still design engaging slides for your site, making sure to consider the following:
- Copy: slides are to capture attention—use only key details such as dates and avoid full sentences
- Typeface: use a highly-legible font, not a decorative one
- Type size: make sure your words are easily legible even when the slide is viewed on a phone
- Color contrast: use light letters on a dark background or vice versa; a tool like WebAIM’s Contrast Checker is invaluable in making sure your graphics meet accessibility requirements
- Graphics: only use graphics that you own the rights to; some of our favorite sources of free stock photos and graphics include Pixabay, Unsplash, Pexels, and Font Awesome
Perhaps now more than ever it is important to keep your patrons up-to-date on any digital resources, virtual events, and COVID-19-related news through the use of slides. Take advantage of the focal real estate on your homepage and landing pages by making use of the slide content type in creative and innovative ways.
Free Slide Graphics Kit & Guide
We took these principles and developed a free, downloadable slideshow kit for COVID-19 and popular digital resources that any library can take advantage of. The kit includes image files you can add directly to your website as-is and design templates for customizing.
Choose a Ratio
We’ve included two different Adobe Photoshop files within this slideshow kit download at both 3:1 and 2:1 ratios. This will allow you to select the files that best match the proportions of your website’s slide region.
After selecting which ratio files work best for your website, open the file in Adobe Photoshop. If your library does not have an Adobe Creative Suite subscription, you can purchase Adobe Photoshop Elements for as little as $100 or even download a free editing program like GIMP. In order to use the features below, you will need to use Adobe Photoshop.
Hiding & Showing Layers
Upon opening the file you will see there are eight different layer groups (folders) in the Layers panel, one for each slide. You can hide or show each of the slides by clicking the space just to the left of the layer groups to hide or show the eye icon. If the eye icon is shown, that layer group (or layer) is shown on the canvas. We suggest hiding all but the layer group you are currently editing.
Resizing the Canvas to Fit Your Needs
Do you need the slides to be a different size? No problem! (If not, you can skip this section and move on to Editing). All but a few of the layers in all of the slides are scalable, vector artwork. This means that you resize the canvas without fear of artwork becoming pixelated or distorted.
From your menu bar, select Image and then Canvas Size. Input your desired size in pixels and select an anchor point. For these slides, we have found it easiest to use the top-left anchor point versus the default center anchor. This means that the canvas will reduce or enlarge from the top left corner and you will only have to shift items that fall off of the canvas on the right side versus all the way around if you resize from the center.
Confirm your resize options and you will see that your canvas has now changed and some artwork may look clipped or not really in the right place. Simply use your Move Tool to move each layer until you get the composition you would like, and then move on to the next slide and do the same. It shouldn’t take more than a few minutes per slide to correct any positioning of elements.
Editing the Slides
Because the artwork is in vector format, you have the added ability to edit the vector artwork in Adobe Illustrator by double-clicking any of the layers that feature a Smart Object icon within the layer preview (a small document icon with a rectangle removed from it).
In addition, any layers that are vector shapes (indicated by a frame icon in the layer preview) can be easily recolored by double-clicking the layer and selecting a new color.
The copy in these slides uses Montserrat, a Google font. The font files are included with the download package or available for free from Google Fonts. Just download and install the font to edit all of the text layers to suit your needs. Select the Text Tool from your toolbar and click on any text seen in the slide. You can even edit the button text if you are comfortable with resizing the button to match the new text.
To change the size of the button, also a vector shape that can easily be recolored, simply find the layer named “button” within a layer group of the same name. With the button layer selected you can press CMD+T (or CTRL+T on Windows) and use the bounding box to resize the button as you need to. Since the button is a vector shape, it won’t pixel or distort the rounded corners. If you prefer a non-rounded button, you can simply change or remove the rounded corners using the Properties panel.
Exporting the Slides for Your Website
Once you have made the edits you would like to make, you are ready to export the slides as images. You can do this by hiding all but the slide (layer group) that you wish to export and then going to File > Export > Quick Export as PNG, choosing a location on your computer to save the file, and clicking Save. You can do this for each layer group that you want to export and upload to your website.
Download the Kit
Download Free Slide Graphics Kit
The kit is absolutely free for any library to use--download yours today and start designing! And if you need a web development partner who understands libraries, please contact us today.
