Jump to content
Sign in to follow this  
schwarzdesign

CAMAC solutions | Corporate website for a software firm

Recommended Posts

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

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

camac-front-1-homepage.png

camac-front-5-software.png

camac-front-3-service-list.png

camac-front-6-cta-download.png

camac-front-6-references.png

camac-front-7-articles.png

camac-back-1-header.png

camac-back-2-sections.png

camac-back-3-section-types.png

camac-back-4-cta-options.png

camac-lighthouse.png

  • Like 9

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By design-a-point
      Hi,
      a while ago, we redesigned the corporate identity for the event- and catering agency p.events Event & Catering oHG based in Germany.
      Along with the new corporate design we also developed a new website based on ProcessWire 2.7:
      http://www.p-events.de

       
      The website's current focus is the presentation of p.event's services and therefore makes use of many images. It is planned to extend the website with a blog and a more sophisticated inquiry form in the future.
      The website is fully responsive (including images with srcset), uses free-flow image sliders and some CSS3 features like animations.
       
      We're looking forward to your feedback 
       
      Cheers
      Alex
    • By sajjid
      Hi all, 
      My 1st submission here -
      MeBilling.com - A website for a medical billing solution provider. 

      What I did in this:
      Logo, Website Design, Processwire integration 


      Processwire modules used:
      Mostly utilised core 3.0.x modules, with Frontend editing feature for ease of content editors. 
       
      Let the opinions flow in.

    • By Kuba Pawlak
      Hello!
      I like to share a project developed using ProcessWire. App-UNIVERSE.net is a modern online service with software database download. We provide access to a rich app database for desktop operating systems based on Windows and Mac OS. Within each category we present both free and commercial apps used by professionals in industries as movie creation, interior design, transportation, creating presentations, coding apps and games, etc.

      All available apps in App-UNIVERSE contain information like license, name of developer, date of app update, actual description of main features and direct links to files hosted on developers homepage. Site visitors can search for apps not only through the catalog, but also an advanced search engine. Applications can be searched by criteria such as category, developer, name of the application or alternative.
      Unlike many competing sites we do not offer download of files via download assistant that under the pretext of simplifying the process of installing apps are spying software and are installing in system toolbars and other unnecessary components. We focus primarily on all valuable apps that we can height recommend to our users.
    • By onjegolders
      Had a couple of quieter days last week and decided to take a deeper look at some new software out there for designing mockups/prototypes.
      Some of them I was familiar with, others less so.
      http://www.balasamiq.com
      http://www.moqups.com
      http://www.uxpin.com
      http://www.axure.com/
      http://www.wireframe.cc
      http://www.easel.io
      The one that I personally find most promising was UX Pin. It seems to be relatively simple to use and yet has a wider array of stencils to use for quick prototyping. Some of these tools have quite a focus on CSS fidelity, others are just tools to sketch with. Some are purposefully low-fidelity (Balsamiq, Moqups) while others you could theoretically use to build out a whole design, complete with animations and interactions.

      I'm interested how some of you guys are building nowadays? Do you still stick regimentally to the full design in a PS/FW or do you have a more iterative process?
      Another feature of a lot of these apps is presenting for clients and there are some apps which do just this:
      http://www.invisionapp.com
      This can offer a more favourable approach than just emailing a PDF or even pointing at one face-to-face on a screen.
      Have any of you used any of these and what were your experiences?
×
×
  • Create New...