The user experience of the responsive CONTENTdm website
OCLC designed the responsive CONTENTdm website to provide end users an efficient experience when exploring your collections. On smart phones, tablets and workstations, user will have fewer clicks, faster content delivery, and a better user experience, including those with limited vision or hearing.
As the collection manager, the responsive CONTENTdm website:
- boosts your site’s search engine ranking because it provides mobile support
- secures your digital collections and maintains user privacy
- supports WCAG accessibility compliance so everyone can access your collections
- speeds content to users
- showcases your collections using innovations developed by the IIIF community
Existing side by side: The 6.x and the responsive
Until you have made the switch, the responsive website coexists with your current production 6.x CONTENTdm website.
- You can see the responsive website by removing /cdm from the end of your 6.x CONTENTdm website URL and replacing it with /digital.
- End users will not know of the existence of the responsive website unless they manually put in the URL with /digital. Search engines will not add /digital links to their indexes, because the responsive website URLs have not been added to your site’s sitemap.
- The two websites are two separate portals showcasing your digital items—the full content of your collections. Work done through Project Client only affects your digital items and won’t affect your work on the responsive website or the final switch. The same is true for operations through CONTENTdm Administration.
- Your responsive website has its own Website Configuration Tool, which you need to use to add all of your site-specific descriptions and customizations. When you first access the responsive CONTENTdm website, you’ll see familiar text from your old site that OCLC copied over in the background.
Note: You can continue to work with the Project Client and your collections while conversion to the responsive site is taking place.
Switching to the responsive CONTENTdm website
Step 1: Take a tour and make a plan
Tour your responsive CONTENTdm website to get a feel for what it looks like and how users navigate it. Use a smart phone, a tablet and a workstation to see how colors, words and icons display on each type of device.
OCLC copied some of the text, header images, and color configurations over from your old site. During your tour, review these customizations to ensure they make sense and look good, given the layout and navigation of the responsive CONTENTdm website on different devices. Refer to Mobile-friendly considerations below to guide your review.
Make notes about where you need to adjust settings and text. If you have custom pages in your old website, determine which, if any, of them you want to recreate in the responsive paradigm.
Step 2: Update and review all Global Settings
Using the Website Configuration Tool, walk through each of the tabs in Global Settings: Appearance, Search & Browse, etc. Update settings in each of these sections based on the notes from your tour. Determine if there are any features you’d like to configure, such as search facets, which you can configure either globally or by collection (Search & Browse > Facets).
After you have updated these areas, conduct a review of the end-user experience to ensure you’ve captured the changes you intended to make. See Website Configuration Tool for more information.
Step 3: Update and review all Collection-Level Settings
Using the Website Configuration Tool, walk through each of the tabs in Collection-Level Settings for each of your collections. Make updates using your notes from your tour.
After you have updated these areas, conduct a review of the end-user experience of each collection to ensure you have captured the changes you intended to make.
Step 4: Code, upload, and test custom pages
Code any custom pages you would like using Advanced website customization as your guide. Make sure to keep your code in a source control system outside CONTENTdm so you can easily edit and adjust your customizations in the future.
After you have uploaded your custom pages, conduct a review of the end-user experience to ensure the pages function as you would expect.
Step 5: Review your CONTENTdm URL
What is the URL you use for your CONTENTdm site? If it looks like the following, then it is a system-assigned CONTENTdm URL.
If it looks like the example below, then it is a custom CONTENTdm URL in the OCLC domain.
Either of these types of CONTENTdm URLs will work fine with your responsive CONTENTdm website without any special configuration. Continue to Step 6.
If your CONTENTdm URL does not match either of these patterns, then it is likely a custom CONTENTdm URL in your institution’s domain. This type of URL requires an SSL Certificate to work with the responsive CONTENTdm website. See Custom CONTENTdm URLs for more information, and follow the steps outlined in the section Advanced: Use a URL in your institution’s domain.
Step 6: Conduct an end-user preview of your responsive CONTENTdm website
We recommend that you engage with a few end users to preview your responsive CONTENTdm website. Take notes on the comments they make, and adjust any settings or customizations before making the permanent switch.
Step 7: Make the switch
Once you are ready to upgrade to the responsive website, please contact OCLC Support. You will be scheduled for an upcoming cutover time slot. These cutovers happen approximately every two weeks. OCLC will need one week of advance notice to put your institution on the calendar.
Caution: Upgrading to the responsive website is a one-way process and it is permanent. Your 6.x CONTENTdm website will no longer be available to you or your end users.
After your upgrade to the responsive website
After the switch:
- End-users see the responsive CONTENTdm website.
- OCLC takes your old site offline and archives it—configurations, captions, custom pages and all.
- You see only the Website Configuration Tools for the responsive CONTENTdm website.
- CONTENTdm updates your sitemap with the /digital URLs, so Google and other search engines will begin to index your responsive site.
- CONTENTdm redirects all your old URLs to the proper responsive CONTENTdm website URL, including all previous versions of CONTENTdm reference URLs back to version 4.0.
The responsive website was designed to render well on small and large screens. This means that some aspects of the UI in the 6.x CONTENTdm website do not work as well and could not be directly translated.
Review the following
- Text and HTML descriptions. Check the text you have added to collection landing pages to see how it renders in desktop and mobile browsers. If you have added HTML to your landing pages using the web editor in the Website Configuration Tool, pay close attention to how that looks in different browsers. Note that the Responsive Website Configuration Tool gives you two separate places to describe your collections. One block is intended for the “collection cards” that appear on the responsive homepage. The other block is for the discrete collection-specific landing pages. You have more space on the landing pages than you do in the collection cards on the homepage.
- Image sizes. If you have added images or other static content, like tables, to your collection landing pages, verify that they render correctly on mobile browsers. Images typically resize properly but, depending on how the images have been marked up in the HTML, they might be forced to a larger size than can be viewed on a phone or tablet.
- File sizes. Your end users will increasingly use their phones to browse your digital repository site. If you have placed large images or PDFs on your landing pages think about the size of those files that are being downloaded. Phone users often have capped data plans or slow connections in areas with marginal reception.
- Page header. The header that appears atop every page in the responsive website has a different layout on small screens and large screens. This likely means that your custom header in the 6.x CONTENTdm website will not directly transfer over. You may need to experiment with a new design or a simplified design for your page header in the responsive website.