Custom front-end for Knack Database (in Squarespace)

Job Information

Callum Boase
October 1, 2020
Knack, Squarespace, Web Development,
Animations, API Integration, CSS, Javascript / Jquery, and Responsive Design

Job Description

Callum helped the Edmund Hillary Foundation (New Zealand) by creating a beautiful and user friendly customised front-end for a Knack database.

We integrate the two platforms using custom coding (HTML, CSS and Javascript) to create a directory of user profiles on the Squarespace website, along with click-through pages for each individual. The data for the profiles is all stored in the Knack database, meaning the pages on the Squarespace website are fully dynamic.

Users can update their profile data via login-protected pages built in the Knack database, and the changes will be instantly reflected on the Squarespace website directory & profile pages.

This integration is very exciting, because Knack lacks the ability to display data in such a beautiful, user friendly way, while Squarespace lacks the ability to let users log in and manage data. This gives us the best of both worlds and opens up many exciting possibilities for other clients!

Outstanding user experience was a key focus for EHF, so we developed some awesome features on the Squarespace website:

  • Fully responsive design, so the pages look good on large monitors through to phones.
  • A pleasant netflix-style loading animation during the short wait while we fetch data from the Knack database.
  • Smooth and subtle animations as data loads and changes on-screen.
  • Lazy loading of images to show data on-screen more quickly, with a customised scroll offset so most users won’t notice the lazy load.
  • Fast search and “load more” performance due to data data being fetched in the background and cached in the browser.
  • User-friendly searching as you type (instead of having to press “enter” or “search”).

The directory is performing very well, with over 500 user profiles displayed on the website and has saved EHF staff days of manual data entry work.