This page content was created for a LibPress webinar and updated with new quick hints as we think of them.
Images quick tips
This section discusses the recommended types of images to use. More information about Alternative Text is found in the Accessibility Module.
Slides
- Dimensions: 960 x 288 pixels
- Remember that there are navigational arrows at the left and right sides when creating your design.
- The goal of the slide is to capture attention and redirect a patron to another page for detailed information where the text can be read by a screen reader, or enlarged or have a contrast layer applied for those with low vision.
- Consider that slides will be very small on a mobile device, and any text should be large and in high contrast with the background.
Alt text and notes:
- Sample alt text would be: Novelist – find your next read, click to the page about the Novelist service.
- Remember to add “slide” to the Media tag area when you upload your custom slide.
- Enter alt text in the Slideshow Manager area:
Highlights
- General guidelines: Square 260 x 260 px, Halves (will match the spacing of a square in the column with spacing) 260 x 122 px, Thirds 260 x 76 px.
- Caveat: you can’t control the user interface, as they might have settings that will void your careful desktop design. Also, things look different in mobile and other devices.
Alt text:
- Sample: Multiple books in a stack with text that reads See our new books. Link to the New Books in our Collection page.
Events Calendar
- Note that you will be uploaded events images in the Featured Image area of the Page edit view, which will display across the various views of the calendar including the Highlights List. Other images can be added to the Event description area, but only the Featured Image will be used in the displays across the site.
- The Events Calendar (TEC) service is optimized for square images, and will be more consistent if all images are created or modified to be the same size – consider the page display for List and Photo views of the events. In particular, you’ll notice when variations (that is, square vs rectangle) are uploaded in the Highlights list widget.
- When designing an events image, know that fine detail and small text will not be legible on the website and especially in mobile view. It is best to create a strong central image and provide a title for the event only in a clear accessible font with high contrast to the background. This will help someone looking for a recurring event immediately identify the image in the listings.
- Remember that a web icon for an event is different from a poster.
Alt text cannot be added to Feature Images AFTER inserting into an event, and must be added in the media library before creating the event listing.
- Sample: Chess pawn, icon for the library-hosted Chess Club.
Pages: Logos & Links, “Decorative” Images, etc.
- Adding one or two complementary images to a page of text can help break up the visual block and add interest – however, please avoid simple decorative images that do not add to the information. Line drawings of stars, fancy scrolls between paragraphs, or simply of a smiling person, may not be the best addition and will only serve as visual clutter.
- Logos are often added on database explanatory pages to help identify the product and also to serve as a link to the login page. Be sure you are using the current logo – check the product’s promotional material/assets information.
Alt text notes:
- Sample: Novelist logo, link to the Novelist database of read-alikes and other reader’s advisory suggestions.
- Sample: [screen reader will announce Graphic where there is one, then read alt text] Shelves of books with text that reads Where do I start?
Style Guides, Branding & Logos
Your library (or city) may have a style guide about phrases, word preferences, land acknowledgements, and more. The style guide may also include notes about colour branding and fonts.
- Fonts: If your styleguide specifies a paid font, and your program (Word, Canva, LibPress, etc) doesn’t have that font available, use a Google search to find alternatives: search for ‘ Bodoni alternatives ‘ for example. Also check out Google Fonts that are free. Ensure that whatever font you use, that is optimized for either print or web use, and that it is legible for accessibility purposes.
- Logos: Be aware that logos are designed to be used as they are. Usually they can be resized, but not altered either in ratio, or cutting out parts of it, or colour changes. Check the vendor’s website (eg. Libby, Overdrive) for logos and variants.
- Colours: Canva can be used to find your hex codes! That’s the 6 number code that looks like this: #ffffff (which is white). Drop your logo into a blank template, then go to the colour picker at top bar to see what has matched. Hover over for the code!
- Links: the linked text should be descriptive (don’t use “click here” as the linked text); also for external links (outside your website), make sure to have these open in a new tab: click on the edit/pencil symbol when adding the link in Page Edit, then the gear symbol, and check the box that says Open in a new tab.
- Big Hint: check your mobile view as well as the desktop version for display issues. You can do this in the Customizer (see the Customizer section)
Page & Menu Management
Your page hierarchy and your menu setup are related, but two separate things… This can be a lot of new concepts!
- Pages: scroll through all your pages, and you’ll see whether there is a clear connection between groupings or not. If not, really look at them and consider how to match up “parent” and “child” pages. Try to consolidate information (not too much!) and pare down to only relevant content.
- Menus: You can see how your menus are set up simply by looking at what gets displayed in your Main Menu bar. Do these groupings make sense? Do you have pages that no one ever ever looks at anymore?
- Categories: When you create a page, you can assign a category. If you create categories that match your Menu groupings, it will make it easier for you to manage the content.
Links
- Best practice tip: if linking to an internal site (on your LibPress site) the link should open normally, as in change the screen to that new page. But if linking externally, you should set the link to open in a new tab. To do this, click on the link in your Edit view, and click on the Pencil/edit icon; and then, click on the Gear icon. Check that box that says Open link in a new tab and make sure to hit Update.
- Make sure your linked text is descriptive, don’t hyperlink generic terms like “click here” as this doesn’t help someone using assistive technology to understand what the link is.
- Also make sure to match your linked text to the content that is being opened. For example, if your linked text says “Databases & More” then the page that is opening should be titled Databases & More, and not Research.
“New Books” Lists in Sitka
Instead of painstakingly typing out lists in a Page, or linking to a PDF (!) of New Titles… follow the instructions in the Sitka documentation: Creating Lists. Then link to that for your patrons, where they can scan the list in Sitka Evergreen and place holds directly! See the Gibsons LibPress site for an example of What’s NEW at the Library! Or a simpler version here at Vanderhoof: New Books.
Try to avoid using tables where you can, as these are tricky and should only be used for presenting tabular data–and not for design layout. However, if you must, please read instructions for making sure your table is accessible.
Subject Guides
Most of the LibPress libraries are reliant on shared content managed through LibPress. This can be a powerful tool to make sure we’re all up-to-date on the latest and greatest links on a subject. But I need your help to maintain these: please let me know if there is a link that needs updating, or deleting, or if you find a new great resource to include, or if you’ve created a great new page that you would like to share.
- Shared Content: accessible at the bottom of the Page edit screen; scroll through to Subjects and pick the one for your province. Click Draft save, and the code snippet will appear that pulls the content from the shared server. You can add your local content either at the top or bottom if you’d like.
Free recommended graphic tool
- Canva: https://www.canva.com/ and click on Learn at top bar for tutorials
- Studio Polotno: https://studio.polotno.com/
HTML tutorials
These are just a few: