Creating Custom Websites that are Easy to Edit with Squarespace

Content Management Systems Are Now Expected Features

Many modern websites now incorporate a Content Management System (CMS) on the back end. Originally an expensive feature that allowed clients to add or edit website content themselves, it is now a feature within the reach of even small websites. Savvy clients understand that a well designed CMS will allow them to be more productive with respect to creating new content or editing and maintaining existing content, but facing budget constraints, will often choose to focus on the user experience (UX), design and appearance of the front end of their website, rather than that of the back end CMS.

Our Philosophy on Content Management

One of Kallistic’s primary goals when developing websites is to allow our clients to easily add and edit content as needed. When working with clients that will benefit from a fully featured CMS, Squarespace is one of our favorite platforms. It has a sophisticated built-in GUI that allows clients to easily add, modify or rearrange content, whether text, photography or video. Users can directly edit their pages with a WYSIWYG (what you see is what you get) editor, or use intuitive tools such as galleries and blogs to edit content.

Minimal Interaction with Code

Squarespace’s editing GUI allows for drag and drop, copy and paste editing and does not require any coding. We aim to preserve this ease of use with our customizations. When web developers add custom features or custom design to a CMS, these customizations often hinder the ability of clients to edit the site, or require clients to directly edit HTML or Javascript code. One of our specialities is applying customizations to the back end of Squarespace that maintain the friendly GUI and minimal interaction with code inherent to the Squarespace platform, enabling clients to remain self-sufficient.

Clients are Prepped for Handoff

Every client has different needs, and we ensure that clients are provided with training to confidently edit all the parts of their website they need to update themselves. Clients are able to engage us in interactive tutorials in person or through screensharing, and leave our training sessions empowered with the ability to use a CMS that’s designed for regular users.

Let’s take a look at three examples of customized features on websites that we built for clients that remain easy to edit and modify:

1. Kung Fu Tea

Kung Fu Tea is a leading bubble tea company, headquartered in NYC, with nearly 100 store locations in the United States. They needed a redesign for their website that would reflect their brand’s bold East meets West personality. Part of this effort included animating elements of their website such as this card flip animation shown below.

However, as Kung Fu Teas’s products and featured products change from time to time it was important to maintain the ability to edit their content easily.

We accomplished this here by modifying a standard Squarespace gallery block. Any content added to it is automatically turned into a flip animation, so it remains easy to edit or modify. We also developed a custom flip effect for some of their image blocks, where the reverse side of the animation automatically displays formatted image caption text.

See the full site live at: www.kfteausa.com

2. The Nation

The Nation is a design firm in NYC with prominent international clients. They wanted to completely redesign their old website, and create a new, interactive site based on the Squarespace platform. Our role was to translate their static designs into a viable responsive website. The design had to be state-of-the-art, and on brand, involving considerable custom development to create the desired layouts, typography and interactive features. Their company bios section features a custom hover effect to display formatted text (hover over example below to see it in action).

We accomplished this by modifying a standard Squarespace image block. The text caption is automatically laid out as per The Nation’s requirements, with customization to make the text display only on hover. Text set in the Squarespace GUI editor to Bold changes to a larger font style in a specific shade of blue, while text set to Italic changes to a smaller all caps font style. This allow The Nation to quickly modify their bios yet retain their desired formatting.

See the full site live at: www.wearethenation.com

3. School of Visual Arts Products of Design

The School of Visual Arts Products of Design website is a striking but very content rich website. We assisted Products of Design in migrating their old site from WordPress to Squarespace, and redesigning it for Squarespace. Their old WordPress site had become too cumbersome to maintain and they wanted to be able to quickly and easily add content to their site and move existing content around. One of our challenges in this project was to provide customization that still allowed them to take advantage of the Squarespace editing GUI. This included custom site navigation, blog customization and custom galleries. Products of Design now creates articles with minimal effort using the Squarespace blog post editor and a magazine style website structure. Here, we take a closer at the customized system that we set up to display their blog posts throughout the site in a variety of formats.

Article #3 - SVA Gallery

One blog post will automatically populate the website in multiple sections with their own styles. Here is a preview of the blog in Projects & News.

A custom footer offers additional navigation automatically displaying latest News and Press and Featured articles by tags.

Image populating is all drag and drop. Here the main image will automatically become a banner inside the blog article.

All blog posts are automatically indexed by the site’s own search function.

Multiple Ways to Navigate

Users can browse and search content by category, keywords, feature posts, or chronological order. Multiple interfaces allow users to browse several posts at a time or one at a time.

One Article Automatically Displays Four Ways

The system we developed uses a series of customized summary blocks to display information entered in a single blog post a number of ways. One blog entry populates the content in multiple sections of the website each with unique layouts and custom styling for: 1) featured projects on the homepage, 2) latest news on the homepage, 3) a grid style gallery for footer navigation, and 4) a long scrolling page for projects and news.

Editing a single blog post automatically updates information displayed in up to four different areas of the SVA Products of Design website, and an unlimited number of blog posts is supported. Kallistic developed this structure and workflow to allow the department’s editors to quickly and efficiently add, remove or edit content on the site.

See the full site live at: productsofdesign.sva.edu

Conclusion

Feel free to contact us if you have any questions about our customization or consulting work. We hope to host a Squarespace meetup at our offices in uptown Manhattan in early 2017 where we will feature some of our custom work. We will post details on the upcoming meetup on Squarespace Circle and Meetup and notify any of our previous meetup attendees by email.