Projekt

Fallstudie zur umweltfreundlichen Website der Sempact AG

  • KundeSempact AG
  • StartDec 1, 2022
  • Dauer1 Jahre 3 Monate
  • PartnerStudio Leeflang
  • RolleProjektmanager, Lead Fullstack-Entwickler
  • LeistungenWeb Entwicklung, Web Performance, Web Accessibility, Project Management, Maintenance
  • TechnologienWeb Components, PHP, Web Performance, Web Accessibility
Zur Projektseite
Codezeilen
LCP
Page Weight
Startseite der Webseite von Sempact AG
export class QuotesSliderComponent extends BaseComponent {
  constructor() {
    super();
  }
  async _connectedCallback() {
    this.render();
    this.startAnimation();
  }
  render() {
    this.appendChild(wrapper);
  }
  startAnimation() {
    const wrapper = this.querySelector('.slider-wrapper');
    const panels = this.querySelectorAll('.slider-wrapper > blockquote');
    const totalPanels = panels.length;
    const containerWidth = this.offsetWidth;
    let currentPanel = 0;
    panels[currentPanel].classList.add('active');
    setInterval(() => {
      panels[currentPanel].classList.remove('active');
      currentPanel = (currentPanel + 1) % totalPanels;
      panels[currentPanel].classList.add('active');
      const offset = -currentPanel * containerWidth;
      wrapper.style.transform = `translateX(${offset}px)`;
    }, 5000);
  }
}
customElements.define('quote-slider', QuotesSliderComponent);
Bild von dem dunklen Design der Webseite von Sempact AG

Im Rahmen des Engagements für Sempact AG wurde eine umweltbewusste Webseite kreiert, die das Bewusstsein für Energieeffizienz mit der Technologie eines digitalen Angebots verbindet. Die Umsetzung begann mit der Entwicklung maßge­schneiderter PHP CMS-Komponenten, die eine robuste und zugleich flexible Content-Verwaltung ermöglichen. Diese bildeten das Herzstück der Webseite und wurden so konzipiert, dass sie die spezifischen Anforderungen von Sempact AG reflektieren.

Unter Verwendung modernster Web-Technologien wie JavaScript und Tailwind wurde eine benutzerfreundliche, interaktive Schnittstelle geschaffen. Durch die sorgfältige Anwendung von Web Components entstand zudem eine strukturell konsistente und modular aufgebaute Benutzer­oberfläche, welche die Wiederverwendbarkeit von Web-Elementen und die Erweiterbarkeit der Plattform fördert.Die Zugänglichkeit, ein grundlegendes Merkmal des Projekts, wurde durch eine durchdachte

Zentral für die Umsetzungsphase war ebenso die Optimierung der Web Performance. Techniken wie Lazy Loading und Adaptive Loading kamen zum Einsatz, um die Ladezeiten zu verkürzen und den Ressourcenverbrauch zu optimieren, wodurch indirekt auch der ökologische Fußabdruck der Plattform gesenkt wurde. Die Konzentration auf Web Sustainability verstärkte die Rolle von Sempact AG als Vorreiter in der nachhaltigen Industrie, wobei die Web-Plattform selbst als Beispiel für den Einsatz umweltschonender Technologien dient.

Beschreibung

Ein Verzicht auf Drittanbieter-Integrationen steigerte nicht nur die Performance und Zuverlässigkeit, sondern verbesserte auch die Datensicherheit und -hoheit. Stattdessen wurden eigene API-Strukturen geschaffen, die eine reibungslose Anbindung und einen sicheren Datenaustausch mit anderen Systemen ermöglichten. In der Backend-Entwicklung wurde ein “No-Code”-Ansatz verfolgt, der Flexibilität für die Webadministratoren ermöglicht, ohne dass tiefergehende Programmierkenntnisse vorausgesetzt wurden.

Web Components
PHP
Web Performance
Web Accessibility
Web Sustainability
TailwindCSS
Git
ESLint
Rollup
API

Die erfolgreiche Realisierung der Webseite ist das Resultat einer detailorientierten Umsetzungsphase, die Technologie und Nachhaltigkeit auf überzeugende Weise vereint und somit die Werte der Sempact AG in ihrer digitalen Präsenz spiegelt.

Auswirkungen




  • Das größte Element (LCP) wird in weniger als 1 Sekunde gerendert
    969 ms

  • Eine „A“-Bewertung auf websitecarbon.com
    A

Neugierig geworden?

Ich bin immer auf der Suche nach neuen und spannenden Projekten. Wenn du ein spannendes Projekt hast und Unterstützung brauchst, melde dich gerne bei mir.

Lass uns zusammenarbeiten!