Whitepaper

/ Complex websites

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.

Code icon

Clean code

Despite their size and various integrations, the websites achieve excellent page speed & core web vitals results and are accessible.

efficiency icon

Efficiency

The clever use of custom post types and taxonomies enables massive time savings in content maintenance.

CI icon

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”.


Backend view of Greyd.Suite's custom taxonomies
Taxonomies can be created in the post type backend of Greyd.Suite and assigned to any number of post types.

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.

Advanced filter options in Greyd.Suite
Query loops can be flexibly defined using the extended filter options in post overviews.
Screenshot of Greyd.Suite's Helpcenter website showing a tutorial and several articles
In the frontend, matching help articles from the same category can be displayed under a tutorial from the “How to Start” category.

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.

Backend settings showing advanced filter options in Greyd.Suite
The advanced filter options in Greyd.Suite also allow you to combine several filter criteria.

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.

Screenshot of feature panels on the Greyd website
Frontend display of the feature tiles.
Backend screenshot of the dynamic feature tile
In the backend, the tile template is only filled with dynamic placeholders.
Backend screenshot of the conditional content block
A conditional content block within the query loop is used to ensure that a field is only displayed if it is filled in the post type.

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.

Backend screenshot of Greyd's feature page
Backend display with two conditions: If the field is filled, the feature is displayed with a black checkmark, if not with a red X.
Backend screenshot of Greyd's feature page with a dynamic popover
When displayed with a checkmark, the feature name is also provided with a popover in which the feature description is inserted using a dynamic tag.

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.

Site editor backend showing a pattern
Backend view of the Site Editor, pattern “Watch a Demo Popup 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.

Backend post types settings to add a custom dropdown field
Core post types can also be extended with custom fields in Greyd.Suite.
  • The content editor only has to set the desired button in the dropdown to “show” on the pages.

Three dropdowns with a selection of call to action buttons
Content maintenance is very simple: the editor simply has to set the desired button in the dropdown to “show”.
  • 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.

Backend screenshot of a dynamic hero section with the list view open
Backend view of the Hero section. Title, image and text are inserted dynamically via dynamic tags. Different buttons are displayed depending on the selection in the dropdown.

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.

Frontend view in the blog area – below the default header is a second header to select blog categories.
List view screenshot of the blog page on the Greyd website
Backend view: The two purple sections are two header template parts below each other, separated by a separator.

At the same time, the main header is built in such a way that it varies depending on the screen size.

Screenshot of the header section of the Greyd website as displayed on tablet screens
Frontend view of the main header on tablet screens. The main menu is hidden, a burger menu has been added.

The off-canvas section, which is inserted via the popover block with a burger icon, is only displayed on small and very small screens.

Backend screenshot of the popover display settings
Backend view of the advanced settings available in each block. Elements can be shown and hidden depending on the breakpoint.

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.

Backend screenshot showing the advanced responsive options in Greyd.Suite
Backend view. The white button is hidden on very small screens so that only the burger menu is visible.

This way, a flexible responsive header layout is possible with just a few clicks.


Forms with interfaces & conditional thank-you pages

There are several forms on the Greyd website that are connected to various external tools via the interfaces available natively in Greyd.Forms and trigger different follow-up actions.

The 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.

Backend screenshot of the thank you page on the Greyd website
Backend view of the thank you page: Using conditional content, different content is displayed depending on the form parameters.

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.

Screenshot of the search results page of the Helpcenter website
Screenshot of the search results page on the Helpcenter website
  • 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.

Autosearch can be used to display a preview of a flexibly definable number of search results.
  • 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.

Backend settings of Advanced Search in Greyd.Suite
Backend view of the Advanced Search functions