SteBre is the website of Stefan Brechbühl. https://stebre.ch/favicon-32x32.png 2025-10-01T05:30:20Z https://stebre.ch Stefan Brechbühl mail@stebre.ch 2025-04-06T00:00:00Z https://stebre.ch/en/projects/rauchfrei-tracker/

The [Smoke Free Tracker](https://rauch-frei.netlify.app/) is a webapp which, with a few personal settings, shows you how long you have not smoked and what you have achieved financially and health-wise.

2024-11-10T00:00:00Z https://stebre.ch/en/projects/landingpage-wintermarkt-wahlen/

On 30.11.2024 the time has come and the winter market in Wahlen will take place again. I have redesigned the landing page and give you a few insights into the new features.

2024-03-06T00:00:00Z https://stebre.ch/en/blog/lesezeichen-mit-der-pocket-api-nach-11ty-importieren/

Pocket offers an API with which the saved bookmarks can be used and customized. I make use of this and save the data in a bookmark post on [stebre.ch](https://stebre.ch/en/bookmarks). Bookmarks with a specific tag are taken into account. After processing, the link saved on Pocket is archived.

2024-01-29T00:00:00Z https://stebre.ch/en/projects/notion2eleventy/

`notion2eleventy` is a plugin for the *Static Site Generator* [Eleventy (short: 11ty)](https://11ty.dev). It loads content from Notion into your 11ty directory. A status-based workflow ensures that only content that has changed is downloaded. The plugin is available as a Node module at [npmjs.com](https://www.npmjs.com/package/@stebrech/notion2eleventy).

2023-12-31T00:00:00Z https://stebre.ch/en/projects/weihnachtsbuch-und-das-resultierende-md-book-with-docraptor-repository/

With the personal CSS paged media project we made our own Christmas story into a present. It was converted into a PDF with the Prince Renderer and printed. The story can also be read digitally as a [responsive website](https://stebre.ch/weihnachtsbuch2023) [not translated to English].

2023-12-17T00:00:00Z https://stebre.ch/en/blog/iphone-als-einfaches-notfalltelefon-nutzen/

With the “Assistive Access” mode, which is available from iOS version 17, the complete operation of the iPhone can be greatly reduced. Essential apps such as phone, messages and contacts can be displayed with large icons. This helps people with cognitive impairments.

2023-09-17T00:00:00Z https://stebre.ch/en/blog/11ty-mit-notion-verbinden/

I have come up with something new for stebre.ch and two other websites so far. I'm now using the much-loved static site generator 11ty in combination with Notion, a versatile content tool in the cloud.

2023-02-12T00:00:00Z https://stebre.ch/en/blog/schnelle-umwandlung-von-heic-und-webp-bildern-im-macos-finder-und-weitere-moeglichkeiten-mit-automator/

Image formats such as `HEIC` and `WebP` are not yet supported by many applications. Therefore, there are always situations in which you have to convert images into a `JPEG` or `PNG`.

2022-11-15T00:00:00Z https://stebre.ch/en/projects/stebrech-relaunch-und-namensaenderung/

stebre.ch: I have secretly relaunched my personal website and also changed the name. But I don't want to refrain from giving you a little insight.

2022-10-09T00:00:00Z https://stebre.ch/en/projects/diplomarbeit-publikationskonzept-fuer-barrierefreie-pdfs-auf-den-webseiten-der-bundesbehoerden/

In my diploma thesis I wrote how the federal authorities can improve the accessibility of their PDFs.

2022-09-27T00:00:00Z https://stebre.ch/en/projects/familienverein-wahlen/

The website for the family association in Wahlen was created in the first quarter of 2021. It is the second project that I have implemented with [Gatsby](https://www.gatsbyjs.com/). The connection to a headless CMS was a première for me and the decision was made in favor of [Netlify CMS](https://decapcms.org/).

2021-03-15T00:00:00Z https://stebre.ch/en/bookmarks/using-voiceover-to-evaluate-web-accessibility/

An extensive collection of key commands for VoiceOver.

2021-03-14T00:00:00Z https://stebre.ch/en/bookmarks/10-css-snippets-for-creating-stunning-animated-underline-text-effects/

The blog post provides inspiration for animated underlines for links.

2021-03-14T00:00:00Z https://stebre.ch/en/bookmarks/building-a-css-grid-overlay/

Instructions for displaying a layout grid with CSS Grid.

2021-03-14T00:00:00Z https://stebre.ch/en/bookmarks/colour-management-part-1/

The first part of a series of articles on color management.

2021-03-14T00:00:00Z https://stebre.ch/en/bookmarks/fast-load-times/

A section on web.dev that is fully dedicated to the topic of performance.

2021-03-14T00:00:00Z https://stebre.ch/en/bookmarks/herausforderung-der-richtige-alternativtext/

A short guide to writing an accessible alternative text

2021-03-14T00:00:00Z https://stebre.ch/en/bookmarks/optimizing-images/

A comprehensive article for the high-performance use of images for the web. This is an excerpt from the book *Designing for Performance*.

2021-03-14T00:00:00Z https://stebre.ch/en/bookmarks/our-users-have-no-disabilities/

Why it is a misconception that accessibility is not necessary is explained here.

2021-03-04T00:00:00Z https://stebre.ch/en/bookmarks/rz-byleitfaden-barrierefreiheit/

A comprehensive guide to accessibility from a university. This is publicly shared on Github.

2021-03-03T00:00:00Z https://stebre.ch/en/bookmarks/a-guide-to-combining-fonts/

What you should pay attention to when combining different fonts.

2021-03-01T00:00:00Z https://stebre.ch/en/bookmarks/accessability-2-a-practical-handbook-on-accessible-graphic-design/

A practical handbook for accessible graphic design.

2021-03-01T00:00:00Z https://stebre.ch/en/bookmarks/andi-accessibility-testing-tool/

A bookmarklet for checking the accessibility of a website.

2021-03-01T00:00:00Z https://stebre.ch/en/bookmarks/how-to-make-custom-accessible-checkboxes-and-radio-buttons/

It takes a little more to redesign the standard appearance of the form fields checkbox and radio button. The instructions show an accessible solution.

2021-02-25T00:00:00Z https://stebre.ch/en/bookmarks/5-keys-to-accessible-web-typography/

Five tips for accessible typography.

2021-02-25T00:00:00Z https://stebre.ch/en/bookmarks/an-overview-of-pdf-inaccessibility/

A summary of the challenge of accessible PDF documents.

2021-02-19T00:00:00Z https://stebre.ch/en/bookmarks/can-i-email/

Similar to caniuse.com, caniemail.com can be used to check whether features are supported and by which e-mail clients.

2021-01-10T00:00:00Z https://stebre.ch/en/bookmarks/software-localization-on-autopilot/

I have not yet had any experience with localazy. However, it seems to be a comprehensive and exciting translation tool.

2020-12-28T00:00:00Z https://stebre.ch/en/bookmarks/keep-the-footer-at-the-bottom-flexbox-vs-grid/

Modern ways of using CSS to always display the footer at the bottom of the screen, no matter how much content the current page contains.

2020-12-19T00:00:00Z https://stebre.ch/en/bookmarks/openmoji/

An open source alternative to emojis.

2020-11-25T00:00:00Z https://stebre.ch/en/bookmarks/under-engineered-responsive-tables/

A comprehensive blog article on responsive tables with a focus on accessibility.

2020-11-09T00:00:00Z https://stebre.ch/en/bookmarks/typogrep/

In InDesign, regular expressions are used to make more targeted search queries or create automated formats. This reference book will help you.

2020-10-23T00:00:00Z https://stebre.ch/en/bookmarks/state-of-css/

State of CSS is an evaluation of an annual survey on the knowledge of CSS possibilities and features.

2020-10-11T00:00:00Z https://stebre.ch/en/bookmarks/bilder-schaerfen-in-photoshop/

Many roads lead to Rome or to the desired sharpness of an image. The article shows various methods in Photoshop.

2020-10-01T00:00:00Z https://stebre.ch/en/bookmarks/print-css-rocks/

Anyone interested in PrintCSS will not be able to avoid this comparison of the best-known solutions.

2020-09-17T00:00:00Z https://stebre.ch/en/bookmarks/how-https-works/

How does https work? A light-hearted explanation with the help of comics.

2020-08-25T00:00:00Z https://stebre.ch/en/bookmarks/isoflow-network-diagrams/

Isoflow is a tool for creating visually appealing diagrams.

2020-08-18T00:00:00Z https://stebre.ch/en/bookmarks/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/

Unfortunately, checkboxes and radio buttons are not so easy to design with CSS. Sara shows how you can implement it with SVG graphics and also barrier-free.

2020-07-31T00:00:00Z https://stebre.ch/en/bookmarks/beyond-automatic-accessibility-testing-6-things-i-check-on-every-website-i-build/

Automatic accessibility tests are good and useful. But they are no substitute for manual testing. Manuel shows a few practical tips on how to test in his blog post.

2020-07-31T00:00:00Z https://stebre.ch/en/bookmarks/grid-garden/

CSS Grid Garden is a fun way to learn how to use layout grids (CSS Grid).

2020-07-21T00:00:00Z https://stebre.ch/en/bookmarks/post-css-preset-env/

Many valuable new features in CSS are now supported by browsers. postcss-preset-env is an exciting tool for using even more future possibilities today.

2020-07-21T00:00:00Z https://stebre.ch/en/bookmarks/standards-for-writing-accessibly/

"Some valuable tips on accessibility from the book ""Writing Is Designing"" can be found in this blog article."

2020-04-19T00:00:00Z https://stebre.ch/en/projects/firia/

Since I am enthusiastic about Markdown and the [iA Writer](https://ia.net/writer), I have developed the iA Writer template **FirIA**.

2019-04-27T00:00:00Z https://stebre.ch/en/projects/gian-the-lion/

I drew and vectorized the mascot "Gian the Lion" for the invitation card of our youngest's christening.

2018-06-15T00:00:00Z https://stebre.ch/en/projects/icons-matterhorn-protokoll/

With these icons I wanted to visualize the different checkpoints of the Matterhorn Protocol.

2018-05-31T00:00:00Z https://stebre.ch/en/projects/etiketten-fuer-hausgemachtes/

In our garden there is an elder tree whose flowers we harvest every year and make syrup from. We also process other things that grow in our garden.

2018-04-16T00:00:00Z https://stebre.ch/en/blog/crossmediale-textverarbeitung-mit-markdown/

A major challenge in media-neutral data production is the lack of awareness of structured content. If content is (initially) created in text processing programs such as Microsoft Word, attempts are made to make it appealing. In most cases, however, a clean structure falls by the wayside.

2018-03-05T00:00:00Z https://stebre.ch/en/projects/innocu-logo/

I created the Innocu logo for my father-in-law. It is a word-image mark and consists of the text "INNOCU" – which is short for Innovation Cueni – and the abstract signet, which combines the letters c and i.

2017-10-31T00:00:00Z https://stebre.ch/en/projects/accessible-pdfinfo/

The creation of accessible PDF documents is a passionate topic that I have been working on intensively since 2014. In my spare time, I maintain and run the website [accessible-pdf.info](https://accessible-pdf.info/en). There I share my experiences and knowledge in German and English.

2017-09-09T00:00:00Z https://stebre.ch/en/projects/wordcamp-bern-2017-design/

On 9.9.2017 the WordPress event took place in Bern. These events are called WordCamp and take place worldwide with the open source community. I was part of the organizing team and was allowed to design the logo, t-shirts, batches and more.

2016-08-03T00:00:00Z https://stebre.ch/en/projects/penguin-wordpress-theme/

I called the second WordPress theme I developed Penguin. Its design is simple and uses the so-called masonry card style on a larger desktop screen.

2015-10-13T00:00:00Z https://stebre.ch/en/projects/designer-tools/

[Designer Tools](https://thenounproject.com/browse/collection-icon/designer-tools-6729/) is a small icon collection which I drew in Illustrator and made available as vector graphics on Noun Project.

2014-10-06T00:00:00Z https://stebre.ch/en/projects/die-ersten-vier-icons-auf-noun-project/

I have made the four icons shown available on Noun Project.

2013-04-27T00:00:00Z https://stebre.ch/en/projects/icon-font-out-of-circle--wp-post-formats/

“Out Of Circle – WP Post Formats” is a small icon font that can be used to graphically polish the currently available post formats in WordPress.

2013-01-01T00:00:00Z https://stebre.ch/en/projects/albinomouse-wordpress-theme/

[AlbinoMouse](https://wordpress.org/themes/albinomouse/) was my first WordPress theme, which I developed and made available in the official directory on wordpress.org.

2012-07-04T00:00:00Z https://stebre.ch/en/projects/social-media-icons-rounded-and-glossy-v2/

Like [the previous version](https://stebre.ch/projects/social-media-icons-rounded-and-glossy-v1/), the icons consist of a series of symbols from various social media services. These icons have been replaced by a rounder background. In addition, a different gloss effect is used.

2012-07-02T00:00:00Z https://stebre.ch/en/projects/social-media-icons-rounded-and-glossy-v1/

“Rounded & Glossy” is a small package with 30 social media icons. The icons have a rounded shape with a glossy effect.