Our relaunch from WordPress to Jamstack: Faster, more secure and ready for the future
With our fresh website relaunch, we say goodbye to WordPress and welcome the technical advantages of Jamstack and Headless CMS. Discover our new design and experience how our website is now faster, while opening the door for exciting features and future enhancements.
Saying goodbye to WordPress
As the network for IT & digitalization in Heilbronn-Franken, we naturally have high standards for our digital presence. When we were founded in 2014, we relied on WordPress. Although this CMS, which now powers 43% of all websites, is popular, it also presented us with a number of challenges. New problems seemed to arise with every update: sometimes the website didn't work properly, sometimes security vulnerabilities arose due to the many plugins and the theme used. Maintenance took a lot of time and yet the shortcomings accumulated over the years - from security problems to performance losses and display problems on various end devices.
That's why we decided to relaunch the site at the beginning of the year. And one thing quickly became clear: no more WordPress! 🙂
Jamstack with headless CMS
In recent years, the Jamstack model in combination with headless CMS has established itself among web developers as one of the most efficient and future-oriented technologies. "Jam" stands for the key technologies of web development: JavaScript, APIs and markup, while "stack" illustrates the interaction of these technologies. In contrast to WordPress, where the front-end and back-end are closely linked, Jamstack allows the front-end to be separated from the back-end (headless CMS). This results in less vulnerability to security issues while offering greater flexibility and performance. While WordPress sites often load slowly, Jamstack ensures lightning-fast loading speed and a smooth user experience. Easy scalability and maintenance are further advantages over the traditional approach. Jamstack makes it possible to create websites that are not only powerful, but also future-proof and easy to customize.
Realization & Highlights
The complete relaunch - from design to technical implementation - was realized from a single source by the digital agency gravima from Heilbronn. The relaunch not only updated the technology of our website, but also refreshed the design. It was important to us to preserve the association's corporate identity while introducing a modern and appealing aesthetic. A key focus was on prominently displaying events and news. The new website structure allows us to present important information and updates in an effective and appealing way.
A highlight of our new website is the interactive chatbot built by gravima based on the advanced technology of ChatGPT-4. The bot was trained with data from the website and other information from connect.IT. It can automatically answer many questions in natural language, for example about upcoming events, details about our association, the member companies or the membership fee for natural persons or companies of a certain size. Be sure to try it out for yourself!
For the techies in our community, we have also incorporated some playful design elements, such as the gallery at the top of the homepage for highlight events and news in a kind of playing card look, the pixel scroll effect or the interactive 3D cover images. This makes our website appear lively and appealing to all visitors.
The interview
Tim Rüdenauer from the digital agency gravima was significantly involved in the implementation as project manager. Tim brings a wide range of technical skills to the table, from front-end to back-end development. We asked Tim about the phases, challenges and solutions of the relaunch project.
connect.IT: How did the various phases of the relaunch project go and what were the biggest work packages?
Tim: Our design team started with the site design concept, while our content team planned the content strategy. Parallel to the iterative improvement of the site design, we were already able to start implementing the backend and frontend - also largely independently of each other. The Jamstack and the component-based implementation of the frontend made this possible.
Our agile approach during the implementation gave us wings instead of having to wait for each other. After the design was approved, we quickly adapted the rudimentary templates and components from phase 1 to the finalized design system. We were then able to quickly and attractively merge the page content of the old club website with the help of the flexible new building blocks.
The existing news could be imported using a self-developed script. However, our content team had to make some fine adjustments to the content, as WordPress stores the content differently to Strapi.
In the end, a project like this is always a huge team effort, from the conception to the design and technology to the content aspects.
connect.IT: What are the advantages of the Jamstack model compared to conventional websites based on WordPress or TYPO3?
Tim: The most obvious aspect is the better loading times. The decoupling of the presentation level for visitors from the content management by the website operator also increases security. Another interesting advantage is the flexibility to pass on the CMS content to other endpoints - for example a mobile app. This enables a scalable content strategy beyond the pure web presence.
connect.IT: How time-consuming is a relaunch from traditional to Jamstack-based websites?
Tim: That depends very much on the specific requirements and the content strategy. The website should support the individual goals of the company's development - such as lead generation or effective and appealing communication. The backend should offer an intuitive interface for managing and creating new content so that not every employee has to undergo extensive training.
However, it is not as complex as you might think at first. With solid planning of all requirements for design, content structure and SEO, you can even save effort, as the team can work in parallel by decoupling the data and presentation level and thus reduce feedback loops to a minimum.
connect.IT: What does headless CMS mean and which systems can you recommend?
Tim: A headless CMS (content management system) is a backend system that provides content via APIs, giving developers the freedom to design the frontend with the technology of their choice. In contrast to traditional CMSs, which connect the frontend and backend, this allows for more flexible and technology-independent content management.
For a versatile content strategy like connect.IT, Strapi is an ideal choice. The CMS offers flexible management of content types via the beginner-friendly user interface, such as events, members, functionaries or blog posts, as well as the relationship between these content types. The built-in features for API users, user and rights management and multilingualism meet the requirements of a modern and multilingual website without having to install separate extensions. Thanks to the open source approach, extensions are flexible and cost-effective and there is no vendor lock-in.
We have been monitoring Payload, which was recently released in version 2.0, for some time now. We have already looked at it internally and we really like both the process for developers and the minimalist but intuitive design of the user interface. We will definitely consider Payload CMS as an alternative for our next Jamstack projects!
connect.IT: What impact can a relaunch have on visibility in search engines?
Tim: Every relaunch should take search engine optimization (SEO) into account at an early stage to avoid typical mistakes. A lot of the groundwork for SEO is already laid during the design process. Important questions here are: What are my relevant keywords? How can I take them into account in the content structure of the entire website? What content with what structure should be provided on individual pages? What goals should be achieved and how can I create the right user flow? Which metadata and structured data, such as job offers, products or reviews, need to be taken into account?
Unfortunately, we have already seen many website relaunches where visibility has plummeted. Aspects that are not taken into account early on in the project have to be implemented later at great expense.
Jamstack websites have some advantages over traditional systems in terms of visibility in search engines. For Google, factors such as performance, security, a good user experience and a clear structure of code and the page structure are among the key ranking factors.
connect.IT: Extensions are already planned for our website. What can you tell us about this and how does the chosen CMS support us?
Tim: The first step is to translate the website into English, as our region is becoming increasingly international. Strapi CMS offers integrated support for multilingualism. This allows us to flexibly add additional languages.
Accessibility is also becoming increasingly important and is high on connect.IT's list of priorities. The component-based implementation of the front end with Next.js and React enables iterative adaptation and optimization of the existing page elements for screen readers and other assistive technologies. As a nice side effect, this often also improves the SEO values.
In the future, it would also be conceivable for members to submit their own events and blogs to the site in order to further strengthen the network. With the relaunch, we have laid a good foundation for future innovative enhancements.
connect.IT: How time-consuming is such a relaunch and what costs can be expected?
Tim: The duration and costs of a relaunch depend heavily on the desired services. We converted our own website gravima.de from WordPress to Jamstack within 2 weeks with an effort of only about 12 man-days. The project at connect.IT took several months, including breaks for coordination with the board. We took a full-service approach and took care of all aspects, such as updating the design and revising the content. Generally speaking, a smaller project starts at around €9,000. However, the investment makes sense in order to be well equipped for the digital future.
Conclusion
Our website now has a more modern and fresher look that reflects the innovative strength and dynamism of our network. We would be delighted if you also like our new website, both functionally and visually, and find it inviting to explore and linger.
