Have you ever pulled out your mobile phone to find a new eBook, download some tunes, or find an event only to find that the content is ridiculously small? If so, then there’s a good chance the site isn’t responsive. Responsive web design automatically adjusts content to view optimally across a variety of devices (tablet, smartphone, desktop . . . you get the idea).
Normal Public Library, in Normal, Illinois (yes, it’s a real place), has made the leap to a responsive website. Now, let’s take a look at the desktop version of the home page versus the mobile version:
What’s Working:
When resized for mobile, the universal search icon clearly stands out in the upper right corner. Once the search icon is clicked, the search field expands to full-width on a mobile device. This gives users enough real estate to search long titles like, “Alice’s Adventures in Wonderland.”
Scrolling down on the library’s mobile site, the icons “My Account,” “Career & Study Tools,” etc. have been optimally resized. The touch target area is big enough for users to hit accurately (it exceeds Apple’s recommended 44 pixels wide by 44 pixels tall). This decreases the number of user errors and gives patrons a better user experience from the get-go.
Areas of Improvement:
Unfortunately, the slider images, also called “homepage banners,” are non-responsive and illegible once shrunken down for mobile. What’s happening here is that the copy on the homepage banners is embedded into the image, making it non-selectable and non-searchable for search engines. Essentially, patrons may not attend this cool event because the search engines are unable to see the text and cannot grab the keywords. Also, the content won’t be recognized by an internal search on the website.
Let’s not forget about making your site ADA accessible. We know that libraries offer everything to everybody; this absolutely includes people living with disabilities. In the web design world, it’s important to develop ADA accessible sites so all patrons have access to your library’s information.
Normal Public Library’s current slider images can’t be read by screen readers (a device used by the visually impaired to convert digital information into speech). It simply can’t access the embedded copy, so anyone using a screen reader will miss out. Of course, adding Alt tags to describe the image will help, but it’s not the end-all.
Solutions:
To solve this dilemma, optimize the content of your banners and make them fully responsive by manually coding them using HTML and CSS. You can also set an image as the background of a container and have the text (HTML) on top of the image.
Regina Public Library in Saskatchewan has this solution dialed in:
The text is handled independently from the image and resizes nicely no matter what device you’re on. The big bonus is that their Spring Book Sale is actually searchable. Go ahead . . . Google “Spring Book Sale Regina” and see for yourself. So, lose those flattened jpg banners with embedded text and watch your event attendance increase.
If that sounds too intimidating and you have a WordPress site, consider using Smart Slider 3 to successfully transform text-embedded banners into searchable, action-inspired information.
Check out one of Smart Slider’s responsive samples:
As you can see, the content has been optimized across display sizes. What’s even better is that you don’t need fancy tech skills! This is drag, drop, and publish. With Smart Slider 3, the content remains searchable and is ADA accessible for screen readers. Other benefits include faster page load time, higher rankings for SEO, and a better user experience (no more zooming into the get the perfect viewing size!).
Are you ready to take your library website to the next level? Tell us what strategies have worked best for your site in the comments below. Feel free to contact us to get your new and improved library website started.
