KALDEWEI website relaunch
In 2016, Marketing Factory was commissioned to relaunch the international corporate website of KALDEWEI. Firstly, the aim was to ensure that the application was based on a modern technical foundation so it can evolve in a future-proof and secure manner. Secondly, the user guidance was to be optimised and a new brand design implemented. New content features were also developed to offer customers additional consulting services online.
| Client | Franz KALDEWEI GmbH & Co. KG |
|---|---|
Project duration | 2015–2016 |
Discover the project from the perspective of:
CMS technology
The TYPO3 content management system was upgraded from version 4.7 to version 7.6 during the relaunch of the KALDEWEI website in 2016. TYPO3 is primarily used because of its impressive multi-site and multi-language capabilities. The KALDEWEI website incorporates 11 languages presented on 14 main domains – including several versions (German, French and Italian) for the Swiss website.
CMS technology
The existing TYPO3 CMS was upgraded from version 4.7 to 7.6. At the same time, the TemplaVoila-based templates were replaced by a modern site package with frontend rendering based on css_styled_content. Several microsites and landing pages were integrated as additional page trees in the "multi-language tree" in addition to the corporate website.
A special frontend login area with different user groups was set up for content that can only be accessed in-house.
Search technology
The KALDEWEI site search is based on the Solr search technology. This enables content pages, the product range, press releases and content downloaded from the media library to be indexed and searched. The search results page categorises results by type, so that users can filter the number of results based on their search intent. A suggest function proposes search terms to users as soon as they have typed in the initial letters. This features is particularly beneficial for the proper names of products. Typing errors are remedied by suggested corrections on the search results page.
Solr is also used to display the products on the product overview pages and filter them by specific criteria. This enables users to filter the extensive product range using useful and relevant criteria (including combined criteria) and content-managed subpages can be created and populated for specific criteria.
Search technology
Downloaded content (also in the form of PDF files) is only created at one location to enable efficient and time-saving maintenance of content. From there, it is available to download to multiple domains (e.g. an English-language file to display on the US, CO.UK or COM domain). Solr includes a special download indexer that publishes this content on all the intended domains and also in the site search.
The Tika extension was also incorporated and configured to extract and index text from files. It enables users to find important data sheets or certificates more easily, thanks to significantly more search terms.
Other backend and frontend technologies
Most content elements are customised to meet the brand's exacting online standards and achieve cross-channel standardisation of communication.
We also use extended image rendering to make the display of image content more flexible on different end devices and appropriate to screen sizes and resolutions. We employ image-cropping techniques that take into account the focus of the image to display each image in all viewports in a controlled and channel-appropriate manner. This ensures that the relevant part of the image is always visible, regardless of the available space.
A proprietary content element for images with multiple overlays (rectangles, circles, polygons) allows content to be displayed with clickable hotspots.
The exhibition search is geolocation-based (by postcode, town/city and map display) and can be filtered by products.
Other backend and frontend technologies
The Grid Elements extension was used for the customised content elements, which we have supplemented with a special rendering.
We use responsive image rendering and responsive cropping to display image content on various devices, and jQuery FocusPoint to define the focus of the image. We developed an in-house solution to manually define the centre of the image with a convenient preview function in the backend. We also incorporated the responsive display of image maps with content that can be managed and maintained for the hotspot layers.
The deployed SCSS was custom-developed and modular, obviating the need for a frontend framework.
Shower Planner
The Shower Planner can be used to define which shower solutions and accessories are suitable and needed for each installation scenario. Specifying the available width, length and height dimensions enables customers to select the right product and configure it for their installation.
Shower Planner
The Shower Planner guides customers step-by-step through possible configurations, with the additional selection options being loaded by AJAX. The configuration result can be transferred to the product area with one click to be configured there, downloaded as a PDF, or emailed.
Product Configurator
Every product can be combined and configured as required. In addition to typical criteria, such as colour and dimensions, the available accessories also play a key role. A complex exclusion logic enables the available combinations to be intuitively displayed and viewed. The product image adapts itself immediately to the selection made and thus visualises the expected impact on the overall product. The configuration can be saved as a PDF or sent by email.
Product Configurator
The Product Configurator is based on a complex exclusion logic enabling visitors to the website to see the available combinations at any time. When the configuration is adapted, the preview image is immediately updated by AJAX. The basic configuration and available accessories may differ according to country.
Provision of planning data
Planning data is stored in different formats for almost all products in the CMS. Users first select a product with their requested dimensions in the frontend, and then their required file formats. All the content they need is then available to download. If need be, users can provide contact information in a form to have a direct conversation with a BIM contact at KALDEWEI.
Import and export tasks
Importers and exporters for retailer searches, catalogue orders, BIM files and also the Product Configurator are specially designed to meet the client's requirements, enabling efficient data maintenance and reducing sources of errors.
Hosting and monitoring
KALDEWEI's products are marketed internationally, with the American and Chinese markets being especially important alongside Europe. Performance is also a key ranking factor.
The website is hosted in MFC's data centre, which is directly linked to one of the largest IP networks of an international Tier 1 provider. This means that the website can be accessed very quickly in Europe as well as internationally. A CDN on the HTTP/2 layer is used for the delivery of static content, further reducing the transmission time for the media-intensive presentation of products.
A special live copy was directly set up on a system in China for the Chinese website. It allows Chinese users to access the content directly without the traffic needing to pass through a firewall.
The performance data of the websites is constantly monitored by various measuring points worldwide, so that action can be taken immediately in the event of poor performance.
Hosting and monitoring
KALDEWEI's products are marketed internationally, with the American and Chinese markets being especially important alongside Europe. Performance is also a key ranking factor.
The website is hosted in MFC's data centre which is directly linked to one of the largest IP networks of an international Tier 1 provider. This means that the website can be accessed very quickly in Europe as well as internationally. A CDN on the HTTP/2 layer is used for the delivery of static content, further reducing the transmission time for the media-intensive presentation of products.
A special live copy was directly set up on a system in China for the Chinese website. It allows Chinese users to access the content directly without the traffic needing to pass through a firewall.
The performance data of the websites is constantly monitored by various measuring points worldwide, so that action can be taken immediately in the event of poor performance.
Winner of the TYPO3 Award in the Enterprise/Industry category
In October 2016, the KALDEWEI corporate website was presented with the TYPO3 Award in the Enterprise/Industry category at T3CON 2016.
The relaunch involved an upgrade from TYPO3 CMS 4.7 to TYPO3 CMS 7.6, a complete redesign of the corporate website, and the incorporation of an intuitively operated (installation) configurator for the KALDEWEI bathtub and shower tray range.
Together with our client KALDEWEI, we are thrilled about the award and our future cooperation!