What This Template Is For
You've digitized thousands of records and built a catalog, but your users are overwhelmed by search results.
The National Archives and Records Administration (NARA) faced this issue with over 24 million descriptions and 92 million digitized pages in its Catalog. Their solution: the Record Group Explorer, a visual tool that lets users browse before they search. It shows what's available, what's digitized, and where gaps remain.
This template helps you create a similar discovery interface for your archival holdings. You'll build a browsable collection overview that complements your catalog search, giving users a map before they dive into the ocean of records.
What you'll build: A structured HTML/JSON-based collection navigator displaying your holdings by record group, series, or functional classification, with digitization progress indicators and direct links to catalog entries.
Who this is for: Archivists managing digitized collections larger than 10,000 items, where catalog search alone creates cognitive overload for first-time users.
Prerequisites
Before you start, ensure you have:
- A working catalog system with API access or exportable metadata (title, record group/series ID, format, digitization status).
- Digitization metrics, counts of physical items vs. scanned items per collection or series.
- Collection hierarchy data, your Business Classification Scheme or record group structure.
- Web hosting with support for static HTML or a CMS that accepts custom page templates.
- Basic HTML/CSS skills or access to a web developer.
You don't need custom software. This template uses static pages with periodic manual updates, similar to NARA's monthly updates.
The Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collection Navigator</title>
<style>
.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 20px;
}
.collection-card {
background: #0066cc;
color: white;
padding: 20px;
border-radius: 4px;
cursor: pointer;
text-align: center;
}
.collection-card:hover {
background: #0052a3;
}
.progress-bar {
width: 100%;
height: 8px;
background: rgba(255,255,255,0.3);
border-radius: 4px;
margin-top: 12px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #00ff00;
}
.detail-view {
padding: 30px;
display: none;
}
.detail-view.active {
display: block;
}
.format-links {
display: flex;
gap: 12px;
margin: 20px 0;
}
.format-link {
padding: 10px 20px;
background: #f0f0f0;
border-radius: 4px;
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<h1>Browse Our Holdings</h1>
<p>Click any collection to see what's available online.</p>
<div class="collection-grid" id="collectionGrid">
<!-- Generated from your data -->
</div>
<div class="detail-view" id="detailView">
<button onclick="showGrid()">← Back to Collections</button>
<h2 id="collectionTitle"></h2>
<p id="collectionDescription"></p>
<h3>Digitization Progress</h3>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<p id="progressText"></p>
<h3>Browse by Format</h3>
<div class="format-links" id="formatLinks"></div>
<h3>Additional Resources</h3>
<ul id="additionalLinks"></ul>
</div>
<script>
// REPLACE THIS DATA with your actual collection metadata
const collections = [
{
id: "RG001",
title: "Executive Office Records",
description: "Records of the executive branch, 1789-present",
digitizedCount: 45000,
totalCount: 150000,
formats: {
"Photographs": "https://catalog.example.org/search?rg=001&format=photo",
"Textual Records": "https://catalog.example.org/search?rg=001&format=text",
"Maps": "https://catalog.example.org/search?rg=001&format=map"
},
catalogLink: "https://catalog.example.org/recordgroup/001",
undescribedLink: "https://catalog.example.org/search?rg=001&status=undescribed"
}
// Add more collections here
];
function renderGrid() {
const grid = document.getElementById('collectionGrid');
grid.innerHTML = collections.map(c => `
<div class="collection-card" onclick="showDetail('${c.id}')">
<strong>${c.title}</strong>
<div class="progress-bar">
<div class="progress-fill" style="width: ${(c.digitizedCount/c.totalCount*100)}%"></div>
</div>
</div>
`).join('');
}
function showDetail(id) {
const collection = collections.find(c => c.id === id);
const percent = Math.round((collection.digitizedCount / collection.totalCount) * 100);
document.getElementById('collectionTitle').textContent = collection.title;
document.getElementById('collectionDescription').textContent = collection.description;
document.getElementById('progressFill').style.width = percent + '%';
document.getElementById('progressText').textContent =
`${percent}% of textual pages available online (${collection.digitizedCount.toLocaleString()} of ${collection.totalCount.toLocaleString()} pages)`;
document.getElementById('formatLinks').innerHTML = Object.entries(collection.formats)
.map(([format, url]) => `<a href="${url}" class="format-link">${format}</a>`)
.join('');
document.getElementById('additionalLinks').innerHTML = `
<li><a href="${collection.catalogLink}">View all described records in this collection</a></li>
<li><a href="${collection.undescribedLink}">Records not yet described</a></li>
`;
document.getElementById('collectionGrid').style.display = 'none';
document.getElementById('detailView').classList.add('active');
}
function showGrid() {
document.getElementById('collectionGrid').style.display = 'grid';
document.getElementById('detailView').classList.remove('active');
}
renderGrid();
</script>
</body>
</html>
How to Customize It
Step 1: Export your collection metadata
Pull from your catalog system:
- Collection or series identifier
- Collection title and scope note
- Count of physical items (or estimated page count)
- Count of digitized items
- Links to catalog searches filtered by that collection and format
Step 2: Populate the collections array
Replace the sample data in the JavaScript collections array. Each collection needs:
id: Your record group, series, or functional classification codetitle: Short, recognizable namedescription: One-sentence scope note (what's in this collection, date range)digitizedCountandtotalCount: Used to calculate the progress barformats: Object mapping format names to filtered catalog search URLscatalogLink: Direct link to browse all records in this collectionundescribedLink: Link to items lacking full description (optional but valuable)
Step 3: Adjust the grid layout
Change grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) to control card size. Increase 200px for wider cards, decrease for more columns.
Step 4: Brand the interface
Update colors in the CSS:
.collection-card background: Your primary brand color.progress-fill background: Highlight color for progress indicators- Fonts: Add your organization's typeface in the
<head>
Step 5: Add user feedback hooks
Insert a feedback form or survey link at the bottom of the detail view. NARA explicitly asks users for input on refinements. You should too.
Validation Steps
Before you publish:
Test all catalog links. Click through every format link and verify the search results match the collection.
Verify progress calculations. Spot-check three collections: do the digitized vs. total counts match your actual holdings? A 10% error margin is acceptable for estimates, but label them as estimates.
Check mobile display. The grid should collapse to single-column on phones. Test on an actual device, not just browser dev tools.
Confirm update frequency. Decide how often you'll refresh the data (monthly, quarterly). Document this on the page so users know when to check back.
Accessibility review. Run the page through an accessibility checker. Ensure all interactive elements work with keyboard navigation and screen readers can parse the progress bars.
User test with a novice researcher. Find someone unfamiliar with your holdings. Can they locate a specific format in a specific collection within two minutes? If not, simplify your collection titles or add more description.
This isn't a replacement for catalog search. It's a browsing layer that prevents the "drowning in results" problem NARA identified. When users understand the shape of your holdings first, they search more effectively second.
Update your data monthly. Track which collections get the most clicks. That tells you where to focus future digitization efforts.
