Web site optimization
This is a brief document detailing some best practices as you start to build out your websites in Wordpress. If you have any questions, please reach out to us at webmaster@uflib.ufl.edu.
URLs
Until your site is made live, it will have a developmental URL. For example, the HSC Library development site is https://library-demo-a2.sites.medinfo.ufl.edu/, but once it’s made live, it will become library.health.ufl.edu.
As you’re building out your site, please make an Excel file that has a field that contains the development URL is, and a field that contains the original (current) URL. This will allow us to more easily map them to each other.
The file may look like this:
Additionally, we are prioritizing making URLs as short and readable as possible. When you make a new page in Wordpress, it will automatically take the title of the page, and make that the URL. For example, it the title of a page is ‘About the Libraries and Collections', then the final URL without edit would be www.uflib.ufl.edu/about-the-libraries-and-collections/, which is too long. This can be edited per page in the right hand menu under ‘Permalink’ - ‘URL slug’, so this page could become https://www.uflib.ufl.edu/about/.
Navigation
You have limited space across the navigation headers at the top of the site. As such, you may not be able to replicate your current menu structure.
For reference, the current homepage (cms.uflib.ufl.edu) has 6 headers that all other 54 pages are collected under:
- Using the Libraries
- Finding Help
- My Accounts
- Libraries and Collections
- About the Libraries
- Contact
If possible, due to the limited space for the top navigation, please do not include off-site links in your menu headers. An off-site link would be categorized as a page outside of your website, or the larger Smathers domain (a link to FLVC for example). Of course, these off-site links can still be included and linked within the site, and/or could be highlighted in a different way (as a Card, or Flip Flop block) on your homepage. Off-site links could also be collected under a ‘Useful links’ menu header for example.
B. Try to add all of the pages to your menu
- You should ‘Publish’ all Pages that are ready, and they should also be “included in the menu”.
- Likewise, pages that are not yet ready should be in “draft” and should not be included in the menu.
- If you have a page in your site that is published, but isn’t “included in the menu”, then it will be difficult for users to discover the page. However, this can be used if you intentionally want a page listed on the site, but generally not discoverable. This feature is used on the HSC Library site for a password protected page which features photos of student assistants.
Content
- The content of your site should be reviewed prior to, or during migration to Wordpress.
- Reviewing content, and only moving information over that has been deemed accurate in 2020, will allow our users to more quickly find the information they need.
- It will also improve the results delivered by the Site Search box.
- Recent in library user experience testing demonstrated that a majority of users search for information on our site through Google/equivalent, so accurate information migration (from your current site to your new Wordpress site) will allow the information to be better indexed by search engines, which in turn will facilitate user discovery and information delivery.
A. Make sure the page headings are used properly
Page headings should go from H1 (page title) and work its way down from H1 to H2 to H3 etc. Page titles are used to break up the pages into sections and indicate the importance of those sections. Here is an example:
H1 How to Fly
H2 Make a Plane
H3 Collect Wood
H3 Assemble Wood
H2 Fly Plane
H3 Find Hill
H4 Hill Sizes
H4 Hill Locations
H3 Go Down Hill
- You can see that the headings go in logical order, per section.
- Headings are important because people with screen readers use them to navigate pages.
- They also help with search engine optimization.
- Rather than simply making links bigger by making them headings, consider using buttons for links. A button is a separate block you can add. In the Block editor, hit to the + to add a new block - Common Blocks – Buttons.
B. Acronyms
- Generally acronyms without context are considered inaccessible because users unfamiliar with the resource will not be able to immediately understand the content of the information on the webpage.
- At first use, please explain the acronym to make the content more user-friendly. For example, ILF should be described as ‘Interim Library Facility – ILF’ (or equivalent). After it has been described once, you’re free to use the acronym as much as you’d like!\
C. Replace 'click here' hyperlinks with descriptive text hyperlinks
- Using 'Click here' language for hyperlinks that provide more information is generally inaccessible. People using screen readers navigate a page using links, so it is good accessibility practice to use descriptive text for links to demonstrate where the link is going. For example, try “View a list of Librarian Subject Specialists”, which tells people what the link is to, makes the page easier to navigate, and avoids outdated click language. It also makes it easier for general users that aren’t using screen reader software to scan the page and find the information that are looking for.
Additional options:
A. Footer
- Add in a contact email address and phone number (if applicable). There has been some reluctance in the past to include contact information on some sites, but if contact information isn’t included, then we are creating a negative user experience - putting the emphasis on the user to find out who to contact means a delayed response as they may not reach out to the correct library staff member.
- If you have address information, and it is applicable to your department/unit, we recommend adding that in as well as it will display as an interactive Google Map.
- Please note that any information you list on your page will definitely be used to contact you, so it should be a common departmental address/mailbox.
- You may also consider adding some color to your footer with one of available background images. You can access them by going to Customize -> Footer and selecting one of the images.
B. Call to action button
- We offer a call to action button which will display as an orange bar above the top menu. You can choose the text, and the URL it goes to. The plan for the Smathers site is to only use it in instances where there is something important to communicate (For example – ‘The Library is Closed Until Further Notice’), but you are free to use it as you wish. This may be to highlight a specific resource, encourage donations, schedule a consultation, or anything else you can think of!
- To add the button, go to customize -> header.
C. Homepage: Consider using the hero block
- You have the of using a big image on your homepage – this is called the Hero block. The image for this will be a high quality, landscape format image. If you don’t have an image that is large enough, or is of a lower quality, that’s okay. Please add what you think best represents your library/department, and we will work to source a similar, higher quality image.
- You have the option to use buttons in the hero block to highlight specific areas of your site or programs that are important. The hero block is the first thing people will see after the menu so use this area to direct people to an important link, or to communicate important data/statistics (if applicable).
Here are some examples of different ways that people have styled their homepages:
If you like any of these, and are having difficulty replicating the design on your site, please reach out and let us know - webmaster@uflib.ufl.edu
D. Lists
- Use numbering instead of bullet points if the material is a series of steps.
E. Cards vs page sections
Generally we don’t recommend using card blocks for content that is longer than a few sentences. This makes it difficult for people to read the material on a computer.
You can try to edit your text to make it shorter to enable it to fit into the card, or break the information into sections to make it easier to digest.
Images
- Generally, you should prioritize using horizontal images.
- Use high quality images if possible.
- If you don’t have a higher quality image, that’s okay! Use what you can, and we can review/update later, once we have access to additional imagery.
- We have access to official UF photography within Wordpress, but there are limited library photos. This will be improved in the future.
- You can access these photos by Add block – Common block – Image – Media Library – Select ‘UF Photos’ tab. You can also access this when you add a ‘Featured Image’ per page.
General Best Practices
- Use shorter paragraphs to make text easier to read on phones.
- Make sure photos are aligned with other photos or text.
- If you implement a design on a few pages that contain similar content, make sure that element is on all pages as it improves user experience.
- 'About' pages - if applicable, include library/departmental highlights/achievements.
- On images, use more descriptive alt attribute values. For example, instead of using “Student at computer” as the alt text, use “A student, in a yellow shirt, sits at a table in front of book stacks in Library West”. More descriptive alt values are a great way to get additional search presence and help with accessibility.
- Start with the highest (H1) and work your way down (H2, etc) (as detailed above). This helps search engines figure out what information is most important on the page and helps users with assistive technologies.
- If a back page serves only to link to other pages, consider removing that page and adding that link on the main page instead.
- If a page only has a PDF document on it or has text and a short PDF document on it, consider also adding the text from the PDF text to the page. It will make it more accessible and enhance your site's search engine optimization (SEO).
- Avoid using images with text on them, as they can not be read by screen readers and cause an accessibility issue. Instead, make sure the text is included on the webpage.
- Instead of using 'Click Here' for a link, use more descriptive text to move the focus to the actual content. 'Click here' is ineffective for people using a screen reader to scan a page for links as it doesn’t provide informational context. The most unique content of the link should be presented first, as screen reader users will often navigate the links listed by searching via the first letter. For example, instead of 'Click here to see the Library online’ use 'View the Library online'.
- Instead of underlining texts to emphasize them, use bold or italics. Underlining text can often confuse people because it is also used to indicate a hyperlink.
- Use bold to highlight words and italics to highlight larger sections of information. Bold is used for people to find specific words within a large body of text. For example, location, time, price, emergency note. When you bold too much text on a page, it can make it more overwhelming to read and the important information more difficult to find.
- Make sure overview pages link to back pages in the menu. On mobile, visitors can not see what the back pages are, so highlighting them using card blocks or within bodies of text can tell mobile visitors what to expect. We advise against using bullet points to hyperlink to other sections because they do not present well or provide detail about the sections and they disrupt the website flow.
- When you want to link to a webpage, instead of including the URL in the text, list the name of the webpage in the text and hyperlink that to the webpage. This makes the page cleaner and the link easier for people with accessibility needs: they do not have to listen to the screen reader read out the URL.
Accessibility info
Web accessibility is a crucial part of our mission and speaks to our values and our strategic goals and directions. Accessible design is good design and allows us to create web pages that work for everyone.
You can greatly contribute to this by creating organized and structured content, clean layouts and easy-to-read text.
The Wordpress template you’re using is designed with accessibility in mind, and complies with:
