Skip to content
Marketing Factory Digital GmbH
Contact
Logo Marketing Factory Digital GmbH
  • Agency
    • About us
    • History
  • Services
    • Consulting, Analysis and Strategy
    • Programming and Development
      • Interface Development
      • PIM/ERP Links
      • Custom Development
      • Seamless CMS Integration
    • Hosting and Support
      • Operation on our Colocation Hardware
      • Cloud Strategies
    • Services with Third Parties
  • Technology
    • TYPO3
      • Current TYPO3 Versions
    • Shopware
    • IT Security
      • DDoS Protection
      • Continuous Upgrading
      • Privacy First
    • Tech Stack
      • Commitment to Open Source
      • Technology Selection
      • PHP Ecosystem
      • Containerisation & Clustering
      • Content Delivery Networks
      • Search Technologies
  • References
    • Projects
    • Clients
      • Client List
    • Screenshot of the homepage of the new Maxion Wheels websiteNEW: Relaunch of the corporate website of Maxion Wheels
  • Community
    • Community Initiatives
  • Blog
  • Contact
  • Deutsch
  • English

You are here:

  1. Blog
  2. Hello Dark Mode, my old friend: our new frontend
Illustration of the two color schemes
  • Development
12.05.2022

Hello Dark Mode, my old friend: our new frontend


Our new website has recently gone live! In the last year, our relaunch team has invested a lot of time and passion. And of course, we would like to present some of the new features and explain some decisions to you. We also overcame a few obstacles during the implementation. Today, we'll take a closer look at the frontend.

The prototype

We started with some screen design variations in Sketch. After the desired direction was decided, we were able to start developing a prototype.

This prototype is based on a Symfony application with Twig templating. This allowed us to develop the template of the new website without much overhead – no Docker and no CMS rendering process. Twig made it possible to move repeating components like the site header and navigations into partials. Thus, we got the best of both worlds: the speed of static HTML and the flexibility of a template engine.

The frontend build process with Yarn and Webpack is configured (almost) identically to the subsequent TYPO3 project. We also installed the Bootstrap Package via Composer (without any further functionality) to be able to include its SCSS partials.

We organized all stylesheet partials using the ITCSS architecture, which will keep the styles maintainable and scalable in the long term. In my point of view, we also found suitable positions for the included partials of Bootstrap (and Bootstrap Package) in the ITCSS layers.

For the approval of feature branches, a Kubernetes cluster was already available for the prototype.

When the prototype had reached a certain level, we transferred the styling to the newly created TYPO3 installation, configured the website template and content elements, and finally start with editing content.

Show larger version for: Light version of the website
Show larger version for: Dark version of the website

Color schemes a.k.a. light/dark mode

What do you choose when you can't make up your mind? Both! Our website can be used with a light or dark background. The content and other elements of the website adapt to the choice accordingly (except for the header, which is always light).

Initially, the selected appearance of the operating system or browser is taken into account as the color scheme. The user can make a manual selection for the page via the button in the header, which is stored in the browser's LocalStorage.

The colors are then assigned via CSS Custom Properties, colloquially called CSS variables. For each color scheme, a set of variables is assigned to the website elements. Custom properties are not required for all color values: for semi-transparent backgrounds (such as cards) the current website background simply shows through.

It has to be said, that using such color chemes means some extra work. Not only in technical implementation, but also in regards to content: logos, icons, and other images without a background must remain recognizable on both light and dark backgrounds. That's why we mostly rely on graphics in SVG format, whose source code we render directly into HTML using a Fluid ViewHelper. In the SVG code we then work with the keyword currentColor to adjust fill colors to the current color scheme. In the case of customer logos, there is a possibility to set an alternative image, which is then only shown in dark mode.

 

Show larger version for: The menu item "Technology" was selected by tab key, the submenu is now displayed
In the main navigation, you can either open the link to "Technology" (Enter key) or show the submenu with further levels (Space bar).

Accessibility and usability

Although this subject is only covered towards the end of this article, accessibility and usability have been taken into account from the very beginning. Among other things, all elements of our website have well-defined focus styles for keyboard control. The order of focus is kept logical; hidden elements will not be focused until they are set visible.

Starting from tablet viewport, the main navigation supports touch, mouse and keyboard control. When using the keyboard, the Enter key will open the current link while the Space bar will show the submenu (information is also communicated via screen reader). This avoids a common problem in navigations, where you need to focus every given subpage via tab key.

Show larger version for: Comparison of the mobile view
If you scroll down in the mobile view, the logo is transformed into a circle. A contact button is displayed in the free space.

All the small things

Internet Explorer no longer matters to us. In June 2022, even Microsoft will finally send it into well-deserved retirement. This decision spared us some workarounds and polyfills.

For our self-written JavaScripts as well as all third-party plugins, we forgo the jQuery library and thus slim down the frontend resources.

When scrolling on mobile devices, we transform our logo to a circle to make room for the contact link. The animation initially caused some problems in Safari: after a while, the SVG transformation reset itself regardless of the scroll state. The reason was the combination of the SVG transformation and the scroll event listener. With the switch to the IntersectionObserver, the issue was solved.

That should be enough for now. In the next article, Christian will take you into our engine room.

Sebastian Klein

Standing somewhere between the front-end and back-end. With a soft spot for usability and documentation. Always on the lookout for good practices.

More posts by this author

Get blog posts as RSS feed

All parts of this blog series

  1. Homepage key visualMarketing Factory goes TYPO3 Version 11
  2. Illustration of the two color schemesHello Dark Mode, my old friend: our new frontend
  3. The Main Engineering set as part of Star Trek Original Series Set TourMessage from main engineering: Our tech stack - what do we use and what do we rely on?
  4. Detail view of the German blog front pageBehold our new and brilliant blog!

Please feel free to share this article.


Comments

No comments yet.

Write a comment.

I have been informed that the processing of my data is on a voluntary basis and that I can refuse my consent without detrimental consequences for me or withdraw my consent at any time to Marketing Factory Digital GmbH by mail (Marienstraße 14, D-40212 Düsseldorf) or e-mail (info@marketing-factory.de).

I understand that the above data will be stored for as long as I wish to be contacted by Marketing Factory. After my revocation my data will be deleted. Further storage may take place in individual cases if this is required by law.

  • Data privacy policy
  • Legal notice

© Marketing Factory Digital GmbH

Picture Credits
  1. "Article image color schemes": © Sebastian Klein / Marketing Factory Digital GmbH
  2. "Services in light mode": © Sebastian Klein / Marketing Factory Digital GmbH
  3. "Services in dark mode": © Sebastian Klein / Marketing Factory Digital GmbH
  4. "Open main navigation": © Sebastian Klein / Marketing Factory Digital GmbH
  5. "Mobile version of the website": © Sebastian Klein / Marketing Factory Digital GmbH