“That’s it! I’m done with Webflow! It’s been nothing but a nightmare. We’re moving to a headless CMS, and we’re doing it now. No more wasting time!”… is what could have easily been heard about two months ago in our office, after (yet again) discussing whether to make a move to a headless CMS for our company website or not.
In reality the discussion was much longer and much more boring to sum up here. But what is true, is that for the past few months we have been working hard to revamp our website after growing frustrated with Webflow, and we finally launched it! So after completing this strenuous path, we decided to share the journey insights with you.
A short history of what we tried and why it was time to move on.
So, as evident from the title, we of course used Webflow, but we also tried out WordPress, as well as hard coding our website using React and considered a few other alternatives. However, each of these options was in some way too limiting for our needs.
Hard coded website
- Took too long to set up.
- Difficult to edit content.
- Can’t outsource the editing work to a non-technical team.
Webflow
- Limited by the selected theme.
- It requires more technical understanding than expected – when editing the content, you can easily change something on one page that changes the layout, or some other design aspects on other pages as well. This was at least in part a problem with the theme we were using, but Webflow did not help either.
- There are some live preview issues.
- Localization was not built-in until very recently.
- The customization is very hard and a lot of things were taken out of our hands (performance, fine-grained SEO, lazy loading etc.).
WordPress
- Performance is subpar.
- Localization issues in the headless version.
- Bottom line: If you are using WordPress as a template it works fine but as a headless CMS it mostly sucks because of subpar API support.
We also considered Squarespace, Wix and Framer, and although it is possible to use them as headless CMS, they are also quite limiting. So we decided to find a suitable headless CMS, meaning we could use Next.js (our beloved framework) for frontend development and develop a completely custom website, but still have a content management system, which allows a relatively simple input and editing of content.
What we were looking for:
Based on our experience we decided to go for a suitable headless CMS for managing the content of a Next.js-based landing page, allowing full customization and seamless integration. Other requirements we had were also support of custom sections or components that emulate a purposely primitive website builder, rich text editor support, user-friendly admin interface, SEO support, multi-user support, media hosting and easy backups and restoring.
We conducted quite an extensive research when it came to choosing the right solution for us. As this was long enough for a whole separate blog post, we decided to post it here:
The solution
In the end, we (web)landed on Payload because of its superb integration with Next.js – our technology of choice for web development.
This approach allows us to:
- Have absolute control over performance.
- Play around with SEO and analytics on a lower level than with other solutions.
- Have a great experience for the content editors.
- Build a tailored website including great animations and easter eggs.
- Use our favorite libraries and tools along the way (Framer Motion, Tailwind CSS, shadcn/ui among others – take a look at our Next.js template on GitHub).
The results speak for themselves:
So far, we are loving it, but what we love even more is the new website, built by our team of talented developers. Check it out!
Here are also some before and after shots, so you can compare the improvement for yourself:
Landing page before:
Landing page after:
About Us page before:
About Us page after:
Visualization of our development process before:
Visualization of our development process after:
Services page before:
Services page after:
Contact form before:
Contact form after:
Source link
lol