Machine translation. This article was translated automatically from German into English and has not been reviewed. Read the German original.
The goal
When I started planning WEBinklusiv, I had a clear picture in mind: the site should show what I stand for. It has to be accessible, lightning fast, climate-friendly and free of unnecessary dead weight – and beautiful, of course. In this post I take you behind the scenes and show you, step by step, how the project came about and which tools I chose for it.
Who is this article for?
For everyone who likes tinkering with the technical and conceptual foundations of a lean, accessible and fast website – developers, designers and anyone who is simply interested.
The technical basis – Eleventy (11ty)
I deliberately did without a heavy CMS or a huge JavaScript framework and chose Eleventy (also called 11ty). Eleventy is a static site generator – which means that every page is turned into a finished HTML file at build time.
Why this worked for me:
- Performance: the server only delivers finished HTML, CSS and a minimum of JavaScript. No database queries when a page is requested.
- Security: without a classic database or back end there is hardly any attack surface.
- Simplicity: content lives in plain text files (Markdown or Nunjucks templates).
- Maintenance: there are no CMS updates to deal with in future, so maintaining the site takes very few resources.
- Styling: Sass and vanilla CSS – no overhead from big frameworks.
Styling – Sass and vanilla CSS
I decided against big CSS frameworks such as Bootstrap or Tailwind. Frameworks like these often bring a lot of code I do not need at all – and that costs loading time and energy. Besides, my website is actually very small (few pages, little content), so any use of external libraries would be overkill.
Instead, I write the stylesheet in Sass (SCSS). That lets me define variables for colours and fonts and structure the CSS files logically. During the build, everything is combined into a single, compressed CSS file. With PostCSS (Autoprefixer) I make sure the styles also work in older browsers.
Interaction – vanilla JavaScript
There is no React, Vue or Angular anywhere on the site. The few interactive elements run on plain JavaScript. That keeps the page weight low and spares the batteries of mobile devices.
Hosting and deployment – Netlify
The site is hosted on Netlify. Netlify provides not only the hosting but the complete build pipeline too. As soon as I push code changes (a new blog post, for example), Netlify takes over:
- Eleventy generates the HTML.
- Sass compiles the CSS.
- The result is delivered on a global CDN within seconds.
Unfortunately, green web hosting is not guaranteed – depending on the CDN node the website is delivered from, the server is either green or it is not. For years, several website owners have been pointing out that this makes a certificate from the Green Web Foundation (External link, opens in a new window) impossible. I intend to contact Netlify about this as well.
Focus on accessibility
Tools are only one part – what counts is how they are used. From day one, I put accessibility at the centre:
- Semantic HTML – tags such as
<nav>,<main>and<article>give screen readers a clear structure. - Keyboard accessibility – every interactive element can be operated without a mouse and has a clearly visible focus outline.
- Contrast and legibility – the colour scheme was checked for high contrast so that text is easy for everyone to read. I used the accessible colour palette generator by Venngage (External link, opens in a new window) to help.
Conclusion
A modern, accessible and fast website does not have to consist of a jungle of complex systems. Often a solid basis of HTML, CSS and JavaScript is enough, together with a practical generator like Eleventy and a smart hosting service like Netlify. The result is an inclusive, fast and sustainable web experience.