CAMAC solutions | Corporate website for a software firm

[schwarzdesign]

We recently finished the relaunch auf camac.de, a client from the software industry, focused on controlling and business integration solutions. Concept, design and implementation by schwarzdesign.

The site is focussed on longer content pages with text and image combination, with technical information for potential customers. It also offers multiple options for Call-to-Action elements to maximize conversions. Finally, the site is heavily optimized with caching and minification at every stop to be instantly readable even on slow connections.

Features

• No hard-coded sections in any template: Almost all content types use the same repeater matrix field with several section types. This way, the entire site and all parts of the layout can be moved around and combined in any way imaginable.
• Custom Call-to-Action options: Two different contact forms, custom external links or a general CTA text.
• Automatically generated page navigation and human-readable anchors (as seen here)
• Every page fully loaded and interactive in ~1 second, even on poor mobile connections
• Automatically generated SEO meta tags, with overwrite fields available on every page

Modules used

• ProFields
• FormBuilder
• Tracy Debugger
• Sitemap
• Duplicator
• ALIF - Admin Links In Frontend
• WireMailSMTP

Content and conversions

Every visitor is a potential customer - this is why we made sure there are ample opportunities to generate leads. At the end of every page, there are multiple options for the CTA section:

• A contact form with a customizable message (built with FormBuilder)
• A download form that allows visitors to download PDFs (e.g. the full article) in exchange for their name and E-Mail address.
• Other text + image combinations with custom links or buttons.

The download form was custom coded, as it allows the editor to upload a file specific to the current page and make it available behind a small form. After successfully submitting the form, an e-mail is sent to the site owner, and the file is directly streamed to the client as a download.

Technical insights

This is one of the first pages where I used Twig for templating, and it's been a great developing experience. With Twig, you get content escaping and much better seperation between logic and view / display. I also spent some time working out a solid structure for the twig templates, with useful defaults, reusable blocks for page and section template (you can read more about the approach in my recent tutorial on integrating Twig with ProcessWire, part 1 and part 2).

I also started using Parcel as a lightweight alternative for Webpack, when all I need is to compile a couple of small scripts (for the navigation, the lightbox, a dismissable cookie notice et c). What's great about parcel is that you get bundling of your own code and external libraries out of the box, as well as ES6+ transpilation and minification for production usage. Still, it required no configuration but a couple of command line options. This way, you get one bundled, minified JavaScript file, the same way we produce a minified CSS file with SCSS, but without the additional overhead of configuring Webpack.

Screenshots