Project

Sustainable Web Development for Studio Leeflang

  • CustomerStudio Leeflang
  • StartSep 1, 2023
  • Duration5 months
  • RoleLead Fullstack-Entwickler
  • ServicesWeb Development, Web Performance, Web Accessibility, Project Management, Maintenance
  • TechnologiesWeb Components, PHP, Web Performance, Web Accessibility
Project link
Lines of code
LCP
Page Weight
Image of the home page of the Studio Leeflang website
Illustration with an illustrated person at a laptop working on a website.
window.customElements.define('gif-component', class GifComponent extends BaseComponent {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  _connectedCallback() {
    this.render();
  }
  attributeChangedCallback() {
    this.render();
  }
  render() {
    const imgSrc = this.getAttribute('data-img-src');
    this.shadowRoot.innerHTML = imgSrc;
  }
});
Image showing the CO2 savings through Studio Leeflang's website.

The project aimed to develop a sustainable and data-protected website that seamlessly integrates both aspects. Sustainable IT solutions were implemented to minimize the digital carbon footprint. The website was designed with accessibility in mind, ensuring usability for all user groups.

Deliciously avoiding third-party services enhances website performance and effectively safeguards user data. In the backend, a no-code platform enables easy maintenance and flexible customization options, simplifying website administration and facilitating continuous evolution.

Implementing web components created a unified and modular user interface that promotes efficiency and scalability.

The website for Studio Leeflang was developed to encourage digital engagement for ecological responsibility. Advanced techniques like JavaScript and Tailwind contributed to a dynamic and user-centered interface.

Description

Accessibility was central to the project, achieved through meticulous adherence to web accessibility standards from the start. This ensured smooth usability for all users. Innovative optimization strategies such as lazy loading and adaptive loading were employed in web performance to improve page response time while minimizing energy consumption, thereby reducing the ecological footprint. Independence from third-party solutions enhanced system performance and effectively protected user privacy. Custom-developed API structures ensured secure data transfer and seamless integrations.

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

With a no-code system in the backend, web administrators could effortlessly manage and customize the site without extensive programming expertise. Overall, the completed website reflects the fusion of innovative technology with environmental ethics, showcasing Studio Leeflang’s commitment to a sustainable digital future.

In addition to the aforementioned points, one notable highlight is the implementation of a “Carbon-Aware” extension for the website. This feature allows for displaying different content during nighttime, presenting a significantly reduced version of the website to raise awareness about CO2 conservation at night.

Curious?

I'm always looking for new and exciting projects to work on. If you have a project that you would like to work together on, please get in touch.

Let's work together!