Whitepaper
/ Complex websites
Build complex websites without third-party tools
Customer:
Greyd
Successes
Great user experience
Users benefit from a unique user experience, whether in searches or on pages that are automatically personalized for each user via conditions.
Clean code
Despite their size and various integrations, the websites achieve excellent page speed & core web vitals results and are accessible.
Efficiency
The clever use of custom post types and taxonomies enables massive time savings in content maintenance.
Simplified content management
Synchronized patterns, custom post types and dynamically filled templates make content maintenance easy and clear.
The project
- The Greyd website and Helpcenter are to be redesigned for the launch of the new Full Site Editing Greyd.Suite.
- The Greyd website is a website with numerous subpages and interfaces to several external tools.
- In the Helpcenter, Greyd.Suite users should be able to quickly find the information they need among numerous help articles and tutorials.
Goals & requirements
- Since the last Greyd websites were created, the Greyd.Suite has been enhanced with numerous powerful features. These are now to be used on the Greyd pages for the first time and significantly reduce the effort required for content maintenance.
- A particularly good user experience is particularly important in the help center.
- The websites must be seamlessly integrated into the company processes in order to enable effective lead nurturing and excellent customer service among others.
- Despite numerous integrations and the large number of pages, the websites should have very good pagespeed performance and be accessible.
The implementation
The new websites were implemented with the new Full Site Editing version of Greyd.Suite.
Post types with cross-post-type taxonomies & conditions
Greyd.Suite natively offers the possibility to create custom post types and taxonomies. A whole range of custom post types have been created for the Greyd website, e.g. for testimonials, partners, whitepapers, features, job advertisements, changelogs and much more.
Some of these post types have individual post (“single”) templates, e.g. whitepapers. Others are only used for simpler and clearer content maintenance and flexible presentation with the help of post overviews.
Cross-post type taxonomies were also used in the Helpcenter. Both the post type “Posts” and the post type “Tutorials” use the same taxonomy “Topics”.
This makes it possible, for example, to display tutorials on the topic “Forms & Popups” together with a query loop with posts from the post type “Posts” on the same topic. To do this, the option “Filter by taxonomy” is set in the query in the advanced filter options and “Terms of the current post” is selected as the criterion.
With conditions in query loops, it has also been possible to display the data of one and the same post type on different pages with different displays and filters. The “Features” post type, for example, is used on both the roadmap and the feature page. A “released” taxonomy is used in the backend to store the information as to whether it is an existing feature or one that is still under development.
Greyd.Suite’s extended filter options in query loops can now be used to display all functions in the “Pagebuilding” category on the feature page, for example, for which the “Released” taxonomy is also set.
The same query is set on the roadmap with the filter “Taxonomy Released = No”. This means that the content team only needs to maintain functions in one place. If a feature is published, the taxonomy only needs to be changed from “No” to “Yes”. The corresponding post is then automatically removed from the roadmap page and appears on the feature page instead.
The display of the individual posts varies depending on their post fields. The post overview uses a Dynamic Template, which is filled with dynamic tags. In addition, conditions have been added that allow the “Learn more” link to only be displayed in the frontend if the corresponding field in the backend is filled.
In the same way, a feature is displayed on the prices page either with a red X or with a black checkmark and an inline popover in which the description is placed using a dynamic tag, depending on whether a description of the feature has been placed in the corresponding field.
Efficient content management with patterns
Recurring sections (e.g. testimonials) on the Greyd website were created with synchronized patterns. This ensures that the content is always the same everywhere and that content maintenance effort is minimized. Adjustments only have to be made in one place at a time, without the content editor having to think about where the testimonial section could be integrated and having to adjust each section individually.
In order to simplify content maintenance as much as possible, not only larger sections were built with patterns. There are also patterns for individual elements, such as the download button.
Instead of having to insert, style, fill and link a button each time, only the corresponding pattern needs to be integrated. This type of page building makes sense when elements appear in many places. Even if the insertion of a button is a seemingly small effort, using patterns makes things considerably easier and saves time on a website with dozens of sub-pages.
In some areas, content maintenance is even easier. There are several pages on the Greyd website whose hero sections are all structured in the same way, although a different button should be displayed for each page. The following steps were taken to achieve this:
The core post type “Pages” has been extended in the Greyd.Suite post type settings with custom fields, including several dropdowns for the various buttons.
The content editor only has to set the desired button in the dropdown to “show” on the pages.
The header section was created as a pattern containing a query loop that displays the corresponding custom fields via dynamic tags and uses a condition (see above) to query whether and, if so, which of the buttons was selected by the content editor.
Different (responsive) header templates on different pages
With Full Site Editing, it is very easy to display different headers (or footers) on different subpages of the Greyd website or to place several headers one below the other. In the blog area, for example, a second header was added below the default header.
At the same time, the main header is built in such a way that it varies depending on the screen size.
The off-canvas section, which is inserted via the popover block with a burger icon, is only displayed on small and very small screens.
At the same time, the navigation menu is hidden when the burger icon appears. The demo button, on the other hand, remains visible and is only hidden on very small screens via the advanced block functions.
This way, a flexible responsive header layout is possible with just a few clicks.
Forms with interfaces & conditional thank-you pages
There are several interfaces available natively in Greyd.Forms and trigger different follow-up actions.
on the Greyd website that are connected to various external tools via theThe contact form, for example, sends a corresponding e-mail notification to the Greyd email stored in the backend after a successful double opt-in.
The download form sends the entire data record to the CRM HubSpot after a double opt-in, takes the user to a dedicated thank you page on which the download link is only made available via Dynamic Content after a successful opt-in using this very form. If a user accesses the page via another route, different content is displayed.
The support form is in turn linked to the HelpScout support tool via Zapier, where a support ticket is automatically created.
In this way, the Greyd websites are optimally integrated into the various company processes.
Unique user experience with Advanced Search integration
Several Advanced Search functions have been activated to ensure that users can quickly find the right results in the Helpcenter via the site search:
Live Search: If another term is searched on the search results page, the search results are updated directly instead of having to reload the page each time. This makes searching much more convenient for the user.
Relevance sorting: The most relevant result is displayed first, which may save the user a long search.
Auto Search: Suitable results are suggested to the user as soon as they type into the search field.
Advanced post search: As WordPress only searches the content and title of posts by default, content in custom post fields would not be included in the search. Activating the corresponding function in the backend ensures that all relevant search results are displayed to the user.
Contact Person
Thomas Koschwitz
Would you like to find out more about the customer case or do you have a similar project? Write us an e-mail and let’s talk about it!