At GetDevDone, we’re committed to staying on top of the latest web development trends, continually expanding our offerings to meet and exceed our clients’ evolving needs. We work with a wide range of technologies and content management systems, from the respected veterans like WordPress and Drupal to the innovative newcomers like Hubspot and Webflow.
One of the latest strings added to our bow is website development using Craft CMS, a cutting-edge content management system known for its flexibility and user-friendly interface.
In this post, we’d like to showcase a particular Craft CMS project that has been a significant milestone for us. We developed it for Hallingcast, a digital agency renowned for its forward-thinking approach and demand for excellence.
Our collaboration with them not only highlights our multi-faceted technical expertise but also underscores our steadfast dedication to client satisfaction, delivering tailor-made solutions that result in top-quality outcomes.
The Client
Hallingcast is a Norwegian digital agency, offering a broad spectrum of services that span film production, photography, website development, and more.
In addition to visual content creation, Hallingcast excels in enhancing online visibility for their clients through effective SEO strategies, ensuring websites not only look great but are also easy to find. They incorporate Artificial Intelligence into their projects as well, using it to complement traditional marketing methods effectively.
Leveraging both in-house talent and external specialists as needed, Hallingcast adeptly navigates a wide range of marketing challenges, delivering comprehensive solutions that reflect a blend of creativity and strategic thinking.
The Challenge
Hallingcast turned to us for assistance in creating their new corporate website using Craft CMS. Our primary task was to convert the Figma designs provided by the client into four full-fledged web pages:
- Homepage
- Subpage
- Blog overview page
- Article page
Each of the pages on the list included specific custom features and dynamic effects that we were required to implement as well (see the details below).
The client also requested our help with setting up the Craft CMS back end and installing and configuring several essential plugins to extend the website’s functionality:
- Reading Time to show the estimated reading time of blog posts, in minutes.
- Craftagram to add Instagram feeds to the website.
- Campaign for email marketing.
- Formie to create forms on the website.
- SEOmatic for search engine optimization.
- Star Ratings for assessing blog posts.
After resolving the financial and technical details, our developers got down to building Hellingcast’s website. Here’s what we did.
The Solution
Homepage
First off, we handled the Homepage, which involved creating a number of interesting features.
Hero Section Videos
One of the most challenging tasks was adding two videos to the hero section:
- A short background video that plays automatically on page load.
- A longer video (uploaded to Craft CMS) that users can start themselves. To address this task, we added an image with a Play button to the hero section and a button under the tagline. Once the user clicks the Play button on the image or the Watch the movie here button, the text and image layers fade away and the main video starts playing with sound. The video has Pause and Stop buttons on top of it. Clicking the latter closes the video and displays the original hero section with the short background video.
To implement this functionality, we applied some JavaScript magic we’re so famous for.
The Main Page Heading with Sequentially Changing Letters and Words
Another amazing JavaScript effect that we added to the Homepage is the main heading with dynamically changing letters and words. The changing letters are like an anagram. First, English characters change into random Greek ones and then back into English characters to form a new word.
For example, the words Interior Design change into Greek letters first and then back into English letters to display the word Marketing with a question mark at the end. The words are always picked at random but the same word is never displayed twice in a row (e.g., Marketing doesn’t change into Marketing). The question mark only appears when the entire word has been formed.
Why did Hallingcast decide to do this trick with Greek letters? That’s because many of their clients are not familiar with web development, photography, or marketing. And when we don’t understand something, we often say “It’s all Greek to me.” Hence, the effect for more audience engagement and fun.
Open-Close for the Methodology Section
Our developers also created the JavaScript open-close effect for the Methodology section of the website’s homepage. But apart from the sliding animation, we made this section more functional on the client’s request by turning the scissors icon into a clickable element.
Depending on the сlient’s current needs, by clicking on the scissors users can either open a specific web page or download a PDF document using their default browser. That can be set up in the Craft CMS back end.
Customers’ Logos Carousel
Yet another feature that we created on the Homepage is a carousel displaying the logos of the agency’s key customers. By default, groups of logos change automatically in a loop at an interval of a few seconds. Alternatively, users can click on one of the three dots at the bottom of the carousel to see the next group of logos.
Featured Blog Articles
Finally, we set up the section with featured blog articles selected in a random order from the Craft CMS database. Clicking on a specific card takes you to that article in the blog.
Subpage
A subpage is like a Lego constructor for the other pages of Hallingcast’s website:
- Film & Photography
- Webpages & Tech
- Design & Marketing
The Subpage includes a hero section with a background image and an image specific to a certain page like Film & Photography. It also features an “image+text” list, an image gallery (with an image opening in a fancy box), a partners section for internal board members, Instagram images, a price table for hosting web pages, and a contact form.
Here’s what the Subpage looked like in the design:
The client wanted to use all those sections of the Subpage on the other pages, depending on the setup they chose.
After converting the Subpage design into a fully functional web page with all the requested sections and features, we could easily build the rest of the pages. Here’s a quick overview of those.
Film & Photography Page
We added Instagram feeds to this page using the Craftagram plugin:
Using JavaScript, we also created an image gallery, with each image opening in a lightbox:
Webpages & Tech Page
A background video with an image atop of it:
An image from the Reference websites section opening in a lightbox:
Design & Marketing Page
A logo from the References visual identity section opening in a lightbox:
Blog Overview Page
Our next target was the blog overview page, which was also abundant in interesting features. To begin with, we added the respective blog post cards collection to the Craft CMS database. Each card in the collection includes the following attributes:
- Post photo
- Post title
- Post excerpt
- Author’s photo
- Author’s name
- Time to read
- Publication date
- Category (labeled with a specific color provided by the client)
A category page can be filled with six blog post cards. Besides, it includes a top-rated article card at the top of the page, spanning its entire width.
In addition to the attributes listed above, we added the SPENSTIG (meaning “Bounce” in English) stamp as an overlay graphic to the top-rated article card.
Another feature that we added to this page is filtering blog posts by categories. To implement it, we used the Asynchronous JavaScript and XML (AJAX) technology.
If a category contains a top-rated article, it’s displayed at the top.
Article Page
Finally, we reached the Article page. It includes the following main attributes:
- Post title
- Post category
- Author’s photo
- Publication date
- Time to read
- Featured Image
- Blog post content
We also added the share functionality to the Article page by means of the ShareThis plugin. The social media for sharing an article include Facebook, X, and LinkedIn.
That’s not all though. The most interesting feature on the Article page is the rating system that we implemented using the Star Ratings plugin. It allows readers to evaluate a specific post based on a 5-star rating.
When a user clicks the fifth, rightmost star, two things happen:
- The SPENSTIG stamp appears.
- As soon as the stamp hits the pad, the background of the rating frame (bright blue) shakes, producing a spectacular fountain of emojis. We customized this effect a bit on the client’s request (number of emojis, time interval).
Finally, there’s a Related posts section at the bottom of the Article page, containing three blog post cards randomly selected from the Craft CMS database.
Other Notable Features and Effects
Apart from page-specific features, we also created several website-wide sections and effects.
Sticky Header
The sticky header remains fixed on scroll no matter the page a user is currently on.
Another exciting feature that’s universal for all the website’s pages is a footer that only appears when a user scrolls down to the very bottom of a page. Notice how the footer’s top edge smoothly joins the page’s separator.
Language Selector
We also made Hallingast’s website bilingual by setting up the appropriate functionality in Craft CMS. The site’s content is available in Norwegian (the primary language) and English. Notice the round flag icons that we added to the language selection dropdown, although the design originally featured no icons.
The Outcome
As is the case with any complex project, regardless of the technology or content management system used, there were some comments and update requests from Hallingcast throughout the development process.
Those concerned various page sections, features, and effects. For example, the client asked us to adjust the emoji fountains to appear 750 milliseconds earlier. Or, add more dots to the customer logos carousel on the homepage (initially, we only made two).
However, Hallingcast was impressed with how expertly we managed to bring their vision to life right on the first attempt. Moreover, we delivered the project for review 10(!) days before the ETA. Here’s what the client said at that point:
Wow! Very cool that you managed to deliver before ETA! I have looked over it briefly. It looks very much how I imagined it.
Our back-end developer who set up the functionality in Craft CMS was particularly lauded by the client for his expertise and skill:
…and also a big shout out to the BE developer who did the setup BE for Craft. There seems to be lots of options to choose from which makes the site easy to customize from page to page.
The entire project took us 26 business days to complete.
Looking to build a website with Craft CMS under the hood, too? Look no further! Our team specializes in creating web solutions that leverage the power and flexibility of this amazing CMS.
From bringing your unique designs to life to designing and developing your entire website from scratch, we’ve got you covered. Need custom tweaks to your current project? Or perhaps ongoing maintenance and support to keep your site running smoothly? We’re up for the challenge.
Tell us about your Craft CMS development needs and watch your web vision become a reality.