Nevertheless, there is a lot of knowledge involved in getting something basic working in any of these frameworks. In this blog post I will explore what the most stripped down version of such a framework could look like, while still keeping the ergonomics of a reactive framework.

Let's get right into it.

Imagining the framework

To make this concrete, I built a small framework called effectlayer. I will explain its building blocks in this blog post.

Building blocks

The framework is built around a single JavaScript class, which the framework enhances with reactive behavior. That reactivity is powered by Signals, a common primitive used in frameworks such as Vue, Svelte, and SolidJS.

State

All class properties are treated as state. The framework turns them into Signals, so no state annotations are needed here:

class MoodSwing {
  energy = 5;
  coffee = 0;
}

Computed Values

Computed values use standard JavaScript getters. The framework treats them as derived Signals that update automatically when their dependencies change:

  get mood() {
    if (this.energy > 8) return "🤪";
    if (this.energy > 4) return "😀";
    if (this.energy > 0) return "😑";
    return "😴";
  }

Mutations

Methods are a natural fit for mutations:

  drinkCoffee() {
    this.coffee++;
    this.energy = Math.min(10, this.energy + 3);
  }

  work() {
    this.energy = Math.max(0, this.energy - 2);
  }

Effects

The last concept we need is effects. Effects are a fancy way of saying "a thing that executes when dependent Signals change".

I chose methods starting with $ for annotating them:

  $monitor() {
    if (this.coffee > 10) console.warn("You may want to slow down.");
  }

The framework sees that $monitor() uses coffee. After coffee changes, it calls the method again.

HTML

Rendering HTML is also an effect that just returns JSX.

  $ui() {
    return (
      <main>
        <h1>{this.mood}</h1>
        <button onClick={() => this.drinkCoffee()}>☕ Coffee</button>
        <button onClick={() => this.work()}>💻 Work</button>
      </main>
    );
  }

All that is left is to make the class reactive by wrapping it in an effectlayer call:

const moodSwing = effectlayer(MoodSwing);
moodSwing.$monitor();
document.body.appendChild(moodSwing.$ui());

Calling an effect once activates it. This means $monitor() will now run whenever coffee changes.

The $ui() call returns an HTML element and keeps it up to date.

All the concepts we need

So basically the framework only needs four concepts:

• properties for state
• getters for computed values
• methods for mutations
• methods starting with $ for effects

If you want to try out this experimental framework use:

npm create effectlayer

Or check it out on npm.

Deep Dive?

Let me know if you want to see a deep dive into how I built this framework: falk.zwimpfer@liip.ch

Let's be honest: the gen-AI hype is a threat to my content business. We're seeing companies hold back investment in their content. Why?

The capabilities of generative AI make it clear that our field is about to change significantly. But this field is broad — it brings together very different skill sets and areas of work.

So the interesting question becomes: how exactly will content work in organizations change?

A shift in roles

A study by AG CommTech and GK Personalberatung looks at how roles and skills are shifting in the communications profession. Their meta-study shows that what's needed today is a combination of technological efficiency and human authenticity — a growing need for experts who can interpret data, use AI to extract relevant insights from it, and translate those insights into effective communication strategies.

In other words, strategic skills matter more than ever.

More quantity, less quality?

Why is that?
Let's look at one visible area: generated text.

A Stanford study from early 2026 shows that around 35% of all newly published websites are now AI-generated or at least AI-assisted.

The volume of generated content is growing fast. But what about quality?

That's not a simple question, since quality has several dimensions.

Let's ask Claude about it. The bot points to a survey by the Content Marketing Institute, in which only 17% of B2B marketers rate the quality of AI-generated content as excellent or very good. 44% rate it as good, 35% as "fair," and 4% as poor. At the same time, 67% say they trust AI output only moderately, and 28% say they trust it little.

That's not exactly a robust finding, but it matches my own experience. So let's dig into the question: how does this middling track record come about?

Input quality equals output quality

AI can do a lot, but it can't work miracles. LLMs need a solid foundation to produce good results.

If I want to generate content for my company's channels, a solid foundation means the following:

• Complete data — AI can't generate reliable content if it can't find the relevant information in your existing content.
• Target group needs and questions as the central point of reference for the content.
• A content playbook that personalizes the output and aligns it with the organization's communication rules and goals.

That's a fairly sobering realization if you were hoping gen-AI would simply take the work off your hands. Depending on where you're starting from, meeting these requirements actually creates new work first.

But it also shows exactly where you can start to raise the quality of your generated content.

These requirements put user-centricity and content strategy & guidelines squarely at the center — which brings us right back to strategic skills.

In an upcoming post, I'll describe what belongs in a content strategy, in my view, and which elements deserve priority.

As the cost of content production trends toward zero, two things gain massively in importance:

• Quality of content
• Visibility and findability of content

Generative Engine Optimization (GEO) for the benefit of users

Visibility and findability of content is increasingly becoming a question of AI visibility: whether your own content and your own brand show up in the answers and results of AI chatbots and agents.

Here's some reassurance: LLMs prioritize content based on criteria that are also relevant to users.

Beyond the technical dimension – content must be readable and usable for AI systems – content also needs to meet the following dimensions:

• Built around the user
• Trustworthy
• Clear thematic positioning

This means the two aspects – quality and findability of content – are closely linked.

For a team to reach the point of producing content at this level of quality, we first need to clarify the fundamentals: without a clean alignment, no content team in the world is able to produce content of this quality in the medium term.

The Triple Content Line

We define our alignment as a content team across the following elements:

• Content strategy
• Content guidelines
• Content governance

As a team, this is where we agree on the common denominator for our content work. Only this way can we produce quality content that meets both internal and external requirements.

The line between content strategy and content guidelines isn't always easy to draw.

What belongs in a content strategy?

There's no definitive answer to what belongs in a content strategy. And beyond that, I'd describe a content strategy more as an ongoing area of work than as a finished document.

For me, the following elements belong in a content strategy:

• Content goals: What do I actually want to achieve with my content?
• Target audiences and their content needs
• Content journeys of the target audiences
• Channel strategy: Which channels do we work with, and how do they play together?
• Key messages
• Success measurement
• Interfaces to content governance and content lifecycle management

What belongs in content guidelines?

Unlike content strategy, content guidelines need to be embedded in day-to-day work. Alongside fixed reference points (e.g. the targeted language level), they often contain principles for us:

• Language level
• Language rules (e.g. consistent formatting of dates, currencies, and similar, but also topics like gender-neutral language or how to address target audiences)
• Tone of voice
• Page types
• Tools
• ...

What belongs in content governance?

Content governance defines who on the content team is responsible for what – and how we work together to make sure strategy and guidelines are actually put into practice. Without governance, strategy and guidelines remain well-intentioned documents that get lost in day-to-day business.

For me, the following elements belong in content governance:

• Roles and responsibilities: Who creates, who reviews, who approves?
• Approval processes: How does content move from idea to publication?
• Maintenance and update processes: Who is responsible for updates, and when?
• Quality assurance: How do we ensure guidelines are being followed?
• Escalation paths: What happens in case of disagreement or edge cases?
• Interfaces to other teams (e.g. design, product, marketing)

The goal? Interplay

Content strategy, content guidelines, and content governance work together: strategy sets the direction, guidelines translate it into daily practice, and governance ensures that both actually happen rather than just existing on paper. Only through the interplay of these three elements does content emerge that is consistent, trustworthy, and findable – both for users and for AI systems – while also meeting the positioning goals of your own organization.

Content production is getting cheaper. But without these fundamentals, it stays arbitrary – no matter how powerful the tools become. Whoever invests in strategy, guidelines, and governance now is laying the foundation for content that will still be found, understood, and trusted tomorrow.

How Generative Engine Optimization (GEO) works in practice will follow in upcoming posts.

A brief history of LiipGPT and ZüriCityGPT

2023, Chregu released the first version of LiipGPT. 2024, we were able to use only open-source models on ZüriCityGPT. 2025, we switched the open-source version to the newly released Apertus model. In this blog post, we talk about the insights gained since then.

Setting up the experiment

LiipGPT, our generative AI framework, has a pluggable model layer. That means we can swap the underlying language model without changing anything else — same Retrieval-Augmented Generation (RAG) pipeline, same knowledge base of official content from stadt-zuerich.ch. This gave us a straightforward way to compare models in a real deployment.

The production system at zuericitygpt.ch runs GPT-4o-mini on Azure Europe. Alongside it, we run an open-source variant at oss.zuericitygpt.ch where in the past we compared Llama and Mixtral models. We switched the open-source variant to Apertus-70B when it was released in September 2025, then moved to Infomaniak-hosted Apertus in April 2026. (To be clear: ZüriCityGPT itself and the LiipGPT platform are not open source — but the underlying language model on the OSS variant is.)

We run Apertus as the 70-billion-parameter model. It was trained from scratch on the Alps supercomputer using Swiss hydroelectricity, with 15 trillion tokens of training data spanning over 1,800 languages. It is fully open-source under an Apache 2.0 licence.

Over the last eight months, we collected over 39,000 conversations on the production side and 3,400 on the open-source side. Quality is measured using three metrics: how often an answer is acceptable (Match Rate), how often it is actually good (Match Rate +1), and how faithfully it reflects the source documents (Faithfulness). These are metrics our LiipGPT team has established as practical product metrics, not scientific benchmarks — the data is calculated real-time and asynchronously by the LiipGPT platform while users ask different questions over time, evolving website content, and model endpoint changes. Parts of the analysis were prepared with the help of Claude. Our aim is not to provide a scientific study but more a practical report. I share these results with the Apertus community because real-world deployment data of this open-source model is rare — and we think it's useful.

What we observed

Both models get the job done. On the basic question — does the user get an acceptable answer? — both models perform similarly. GPT-4o-mini scores 81%, Apertus 82% on historically matched questions. In a controlled test with 20 identical questions asked at the same moment, both hit 100%. Both models generally work as expected.

The gap shows up in answer quality. When we raise the bar to "is this answer actually good?", GPT-4o-mini scores 72% and Apertus 55%. That is a noticeable difference, and it matters for users who expect precise, well-structured responses.

Faithfulness is more nuanced than we expected. GPT-4o-mini averages 0.79, Apertus 0.50 on our faithfulness metric. But these numbers need context. We noticed something we started calling the "faithfulness paradox": when a model says "I cannot answer this," you might expect high faithfulness — no hallucination, after all. In practice, these evasive answers score low because the model is failing to use information that is available. A model that engages with its sources and cites them scores higher, even though it is making more verifiable claims. Both behaviours have tradeoffs, and both showed up across the two systems.

Sometimes Apertus gave the better answer. The most striking example was the waste dump question: "What are the rules for using the Zurich waste dump?" GPT-4o-mini responded cautiously, saying it could not provide specific rules. Apertus gave a detailed, structured answer with recycling centre details, phone numbers, and cited sources — scoring 6/6 on quality where GPT-4o-mini scored 3/6. When the knowledge base contains a clear, structured answer, Apertus can be surprisingly good at extracting and presenting it.

That said, this willingness to commit cuts both ways. In cases where the source material is ambiguous, Apertus can feel more helpful while being less strictly grounded — and for public-sector chatbots, traceability matters as much as helpfulness.

GPT-4o-mini is more concise and better at synthesis. Apertus tends to produce longer, more verbose answers. In a public-service chatbot, that is a real UX issue — users want a direct answer with clear next steps, not three paragraphs of context.

GPT-4o-mini also handles factual freshness better: it returned Zurich's current population (452,421), while Apertus fell back to a 2013 figure. When information has changed or the answer requires connecting multiple sources, GPT-4o-mini felt more reliable.

Language switching is a weak spot. When we asked "Est-ce que tu parles français?", GPT-4o-mini responded fluently in French. Apertus declined, saying it could not answer questions about its own linguistic capabilities. In more recent tests we saw that Apertus followed the language instructions in better ways, so we are looking forward to see this further improve.

The Apertus-70B IFEval score of 44% (vs 58% for comparable models) confirms that instruction following is an area where the model has room to grow.

The trend is positive. In October 2025, Apertus achieved a Match Rate +1 of 59%. By June 2026, it had climbed to 63% — the best month on record. That is not a dramatic leap, but the direction is consistent and it came without a major model update. Meanwhile, GPT-4o-mini has been stable at 63–83% throughout. The gap is narrowing.

What we are looking forward to

The Apertus team is preparing version 1.5, with improvements expected in multimodal support, agentic capabilities, tool calling, enhanced reasoning, and better training for regional Swiss languages. We plan to update ZüriCityGPT's open-source instance as soon as it becomes available and continue our quality monitoring.

What encourages us most is that the collaboration is flowing in both directions. After our aiLights talk, the Apertus team shared our findings with their staff. This close feedback loop between research and practice is exactly what makes the Swiss AI ecosystem worth investing in.

My practical advice, for anyone considering sovereign AI: start with the use case, then choose the model. If your priority is maximum answer quality today, more popular models are usually the stronger choice. If your priority is data sovereignty, transparency, and independence — and your knowledge base is well-curated — Apertus already delivers. The question is not "sovereign AI or quality" but "how much quality gap are you willing to accept for full sovereignty?" And that gap is closing.

Check the Slides and Recording for further details.

Acknowledgements

I would like to thank the ETH Zurich, EPFL, and the wider Swiss AI Initiative community for making Apertus available as a public good. As Martin Jaggi from EPFL put it: "We aim to provide a blueprint for how a trustworthy, sovereign, and inclusive AI model can be developed." (source) Eight months in, we can see that blueprint taking shape and are looking forward to test the 1.5 model in practice as well.

• Thank you Christian Stocker and the LiipGPT team for your dedication to build a practical, experiment-driven and scalable solution for AI chat and search.

• Thank you Sabine Wildemann and the aiLights team for hosting our talk.

• Thank you Oleg Lavrovsky and the Apertus community for your feedback and support.

• Thank you Public AI and our partner Infomaniak for providing the infrastructure.

Build with Apertus: join Hack Apertus

Want to get hands-on with sovereign Swiss AI? Hack Apertus is a two-stage open-source hackathon series where teams build on Apertus to develop blueprints for sovereign infrastructure across the public and private sector. Liip is a partner — we are excited to see what the community builds.

Sign up at hackapertus.ch.

Le portail fr.ch rassemble une grande quantité de contenus administratifs: démarches, législation, formulaires, prestations cantonales, informations communales. Trouver la bonne réponse dans un site aussi vaste n'est pas toujours chose aisée.

Il suffit de poser sa question en langage naturel, comme on le ferait à une personne. Si le site fr.ch est rédigé en français et allemand, canton bilingue oblige, on peut poser sa question dans n’importe quelle autre langue, pour que les citoyen·ne·s ne parlant ces langues puissent tout de même trouver les informations nécessaires.

Le chatbot IA identifie les contenus pertinents sur fr.ch et dans la base légale fribourgeoise, puis génère une réponse écrite, en citant les sources officielles utilisées.

Cette transparence est essentielle. L'IA ne remplace pas les contenus officiels, elle en facilite l'accès.

Une IA pensée pour la souveraineté numérique

La souveraineté des données est au cœur du projet. La Chancellerie souhaitait en effet absolument garder la maîtrise complète de l'infrastructure et du traitement.

Le chatbot s'appuie sur LiipGPT, notre plateforme d'IA générative. Notre moteur de Retrieval Augmented Generation (RAG) sélectionne les contenus officiels pertinents pour chaque question. Il est hébergé en Suisse chez Exoscale.

Côté modèle de langage (Large Language Model, LLM), nous utilisons Mistral AI, un outil européen majeur. Le modèle est lui aussi hébergé en Suisse, chez Infomaniak, pionnier de l'hébergement web éco-responsable et durable s’il en est. Les serveurs du LLM utilisent exclusivement des énergies renouvelables, avec refroidissement naturel et réutilisation de la chaleur, sans oublier l’utilisation de matériel recyclé et optimisé ainsi qu’une compensation carbone locale.

Cette architecture réduit la dépendance aux grandes plateformes américaines et privilégie une approche suisse et européenne de l'IA générative. Les requêtes sont anonymisées et aucune donnée personnelle n'est transmise à des tiers. L'ensemble reste sous juridiction suisse, conformément à la législation en vigueur sur la protection des données.

Une collaboration ancrée en Suisse romande

La Chancellerie d'Etat de Fribourg a piloté le projet, avec une vision claire des enjeux administratifs et politiques. Notre équipe, notamment active à Fribourg, a développé la solution en étroite collaboration avec la Chancellerie. Ceci a permis de répondre au mieux aux besoins réels issus du terrain.

Cette proximité a permis des échanges rapides et une attention forte portée à l'expérience utilisateur·rice. Au-delà de la technologie, l'enjeu était de créer un outil qui soit à la fois utile, fiable et compréhensible pour la population fribourgeoise.

Une première étape vers une administration plus accessible

Depuis le premier déploiement en mars, nous avons retravaillé certains éléments afin d’améliorer la qualité des réponses. Pour ce faire, notre client bénéficie notamment de nos solutions d'évaluation automatisées afin de contrôler en continu le niveau de qualité des réponses.

Cette première version couvre les informations publiques se trouvant sur fr.ch et la base légale fribourgeoise. Mais le périmètre ne se limite pas au seul portail cantonal: il s'élargit progressivement aux informations publiées par d'autres institutions cantonales et par certaines communes. Qui dit nouvelles sources, dit bien sûr vigilance accrue pour s’assurer que le niveau de qualité des réponses demeure. L'Etat de Fribourg tient d'ailleurs à jour une page dédiée au chatbot, qui détaille notamment les sources de données utilisées.

Une conviction guide ce travail. L'IA dans le secteur public peut être souveraine, transparente et utile. Pour y parvenir, il est nécessaire de toujours garder la maîtrise de l'infrastructure et de citer ses sources.

Envie d'échanger sur l'IA pour votre institution? N'hésitez pas à me contacter.

La séparation claire entre Services et Administration rend immédiatement la finalité de la plateforme compréhensible et met en évidence sa valeur pour les habitant·e·s et les entreprises. L’intention du site est ainsi immédiatement perceptible, avec des contenus structurés de manière logique et cohérente. Ce n’est pas seulement notre avis: le jury des BOSW l’a également reconnu en attribuant cette année un bronze dans la catégorie User Experience (un peu de fausse modestie: nous avons occupé deux des trois places du podium, avec également l’argent pour le nouveau site du Museum für Gestaltung Zürich).

Une architecture de l’information pensée utilisateur·rice·s

L’architecture de l’information est soigneusement conçue et adaptée aux besoins des publics cibles. Tous les services sont centralisés, clairement catégorisés et suivent une structure cohérente pour répondre aux questions: de quoi ai-je besoin, comment se déroule le processus et quels sont les canaux disponibles?

Cette standardisation permet de comprendre rapidement les infos pertinentes et de naviguer avec assurance dans des processus complexes. Les informations sur les services sont aussi présentées de manière transparente, afin que même les utilisateur·rice·s occasionnel·le·s puissent immédiatement identifier les étapes à suivre.

Fonctionnalité, interactivité et utilisabilité au service de l’efficacité

Les fonctionnalités du site sont conçues en fonction des besoins des utilisateur·rice·s. Chaque page de service propose des instructions claires et faciles à comprendre, ainsi que des éléments intuitifs et simples à utiliser. Le tout avec un accompagnement à chaque étape: que ce soit via des services numériques ou des canaux plus traditionnels comme des formulaires, des appels téléphoniques ou des visites sur place.

Cette approche réduit les incertitudes, limite les demandes de clarification et améliore l’efficacité dans l’accès aux services cantonaux.

Un site inclusif conçu pour tou·te·s

so.ch respecte les normes d’accessibilité numérique conformément aux directives WAI, garantissant un accès équitable à tou·te·s les utilisateur·rice·s. Les contenus sont rédigés de manière claire, la navigation est cohérente, les interactions sont intuitives, et la plateforme prend en charge des accès numériques et non numériques.

Ainsi, chacun·e peut utiliser le site de manière efficace et autonome, indépendamment de son expérience technique, de son âge ou de ses capacités.

En se concentrant systématiquement sur les besoins des utilisateur·rice·s, so.ch propose une plateforme intuitive, transparente et inclusive qui rend les processus administratifs complexes compréhensibles. Des objectifs clairs, une architecture de l’information réfléchie, des fonctionnalités accessibles et un design sans barrières créent une expérience centrée sur l’utilisateur·rice. Ce qui permet de simplifier et optimiser les interactions avec les services cantonaux.

Souhaitez-vous améliorer le site web de votre organisation? Je serais ravi d’en savoir plus sur vos besoins et vos défis.

Au fin 2022, j'ai vu ChatGPT pour la première fois dans une vidéo TikTok et je l'ai tout de suite essayé. Il pouvait m'expliquer des contenus plus rapidement que mes enseignant·e·s, résoudre des tâches mieux que si je les avais faites moi-même, et même développer des idées auxquelles je n'aurais jamais pensé. Ça m'a vraiment fasciné.

Mais c'est seulement en commençant mon apprentissage que j'ai réalisé à quel point l'IA est puissante et importante. Aujourd'hui, je l'utilise quotidiennement. Pas pour qu'elle fasse mon travail à ma place, mais pour apprendre de nouvelles choses, faire des recherches plus efficacement et travailler plus efficacement sur certaines tâches.

Mon apprentissage est varié. C'est justement ce qui le rend passionnant

J'effectue un apprentissage de Développeur·euse en Commerce Numérique CFC. J'en suis actuellement à ma deuxième année. Après la première année au Bbc Basislehrjahr, j'ai rejoint Liip durant l'été 2025.

Ce que je trouve particulièrement passionnant dans cet apprentissage, c'est la diversité des tâches. Je travaille dans différents Circles, des équipes auto-organisées basées sur l'holacratie. Cela me permet de découvrir de nombreuses perspectives, tâches et personnes différentes.

Cette variété me correspond bien. J'aime travailler de façon structurée, je communique activement et je trouve stimulant d'analyser et d'améliorer les processus de travail. Chez Liip, j'ai la chance de pouvoir prendre des responsabilités tôt dans mon apprentissage. Je travaille sur des projets internes et externes concrets, je prends des décisions et j'apporte mes propres idées. Pour moi, c'est ce qui distingue vraiment Liip de nombreux autres employeurs proposant des apprentissages.

La relation avec les clients en fait partie

Un aspect de mon apprentissage peut-être moins visible de l'extérieur réside dans la relation avec les clients. J'apprends à communiquer de façon professionnelle, à bien représenter mon entreprise et à comprendre les facteurs importants pour une bonne collaboration. Cela implique notamment de transmettre des informations claires au sein de l'équipe, de recueillir des exigences et de communiquer de manière structurée dans les projets. Parce que je participe à de vrais projets dès le début de mon apprentissage, je développe rapidement un bon sens de ce qui compte réellement pour les clients.

Comment j'utilise l'IA concrètement

L'IA devient particulièrement utile quand je lui fournis beaucoup de contexte. Un outil généraliste se transforme alors en véritable partenaire de réflexion. L'IA me soutient surtout quand j'ai un objectif clair et que j'ai besoin d'une bonne première ébauche rapidement. Je l'utilise pour brainstormer, comprendre de nouveaux termes, faire des recherches ou structurer des textes.

• Anecdote au passage: ce billet de blog a aussi été partiellement structuré avec l'IA. J'ai rassemblé mes idées, expliqué le contexte, puis j'ai reçu de l'aide pour créer une structure cohérente. C'est comme ça que j'utilise l'IA au quotidien.

Un bon exemple est le manuel pour le backend LiipGPT que j'ai rédigé. Au départ, je n'avais pratiquement aucune expérience dans la rédaction de manuels. J'ai donc d'abord appris les bases avec l'aide de l'IA. Ensuite, j'ai fourni un maximum de contexte à l'IA et développé une ébauche étape par étape avec elle. Le résultat est un manuel utilisé régulièrement en interne et adapté individuellement pour les clients. Pour moi, c'est le moment où j'ai réalisé la valeur ajoutée que l'IA peut apporter: je pouvais non seulement travailler plus vite et sans expérience préalable, mais aussi créer un résultat qui aide vraiment les autres dans leur quotidien.

Je n'utilise pas ces outils sans réfléchir. Je les teste, je les compare et je réfléchis soigneusement aux cas d'usage où ils ont pleinement du sens.

L'IA, mon meilleur compagnon d'apprentissage

L'IA a un fort potentiel pour l'apprentissage. Elle simplifie les contenus, donne des exemples et s'adapte à mon niveau. Aucun manuel ne peut faire ça. Prendre en main un nouveau sujet devient ainsi plus rapide. En tant qu'apprenti·e, je pose à l'IA des questions et des questions de suivi que je n'oserais pas poser en classe.

En même temps: l'IA ne doit jamais remplacer ta propre réflexion. Ceux et celles qui ne comprennent pas comment l'IA fonctionne et comment l'utiliser finiront par très peu apprendre.

Pour moi, l'ouverture d'esprit et le questionnement critique font partie intégrante de l'utilisation de nouveaux outils. L'IA peut autonomiser les apprenant·e·s, mais uniquement si elle est utilisée consciemment comme un outil. C'est pourquoi il est important que les apprenti·e·s se familiarisent avec l'IA pendant leur formation. Pas plus tard, quand tout le monde sera déjà utilisateur·rice chevronné·e.

Et toi, comment utilises-tu l'IA?

Peut-être vaut-il la peine de faire une courte pause après ce billet de blog et de réfléchir à ta propre utilisation de l'IA. Comment utilises-tu vraiment l'IA dans ton quotidien aujourd'hui? Quelle valeur ajoutée concrète t'apporte-t-elle? Est-ce simplement un outil que tu essaies de temps en temps? Ou est-ce que tu l'utilises consciemment pour travailler mieux, plus vite ou de façon plus structurée?

Chez Liip, je vis directement comment une organisation n'utilise pas seulement l'IA, mais la façonne activement:

• des échanges de connaissances réguliers et des Liip Talks sur l'IA, des nouveaux modèles aux questions éthiques.
• des formations à l'IA pour tou·te·s les collaborateur·rice·s. En interne, nous proposons des ateliers et des modules spéciaux pour que chacun·e reste à l'aise avec l'utilisation de l'IA.
• le développement et la mise à jour de nos propres outils IA comme LiipGPT, déjà utilisé par des clients des secteurs de la santé, du droit et du secteur public.
• des lignes directrices sur l'IA durable, un cadre interne qui garantit que les projets d'IA sont mis en oeuvre de façon éthique et durable.

Cela me montre à quoi peut ressembler une organisation qui ne déploie pas l'IA aveuglément, mais qui en assume la responsabilité.

Comment les collaborateur·rice·s de ton entreprise utilisent-ils·elles l'IA? Y a-t-il des règles claires ou des offres pour utiliser l'IA de façon pertinente? Où l'IA pourrait-elle concrètement te soutenir dans ton rôle si tu l'utilisais de manière plus délibérée?

L'IA n'est pas un concept figé qui fonctionne de la même manière pour tout le monde. Mais ceux et celles qui l'utilisent tôt réalisent rapidement: la question n'est pas de savoir si tu as encore besoin d'un apprentissage, mais combien tu en tires davantage grâce à l'IA.

Museum für Gestaltung: un chef-d’œuvre d’intérêt public et d’expérience utilisateur

Le nouveau site du Museum für Gestaltung Zürich sert de hub central pour la communication digitale du musée et permet aux visiteur·euse·s de créer un lien avec celui-ci. En co-création, nous avons conçu une solution qui laisse le design s’exprimer pleinement, au service d’une plus grande valeur publique. Le jury des BOSW l’a reconnu en attribuant au site le prix d’argent dans les catégories “User Experience” et “Public Value”.

En savoir plus sur le projet primé

Comme le souligne Clelia Kanai, Head of Marketing & Communication:
«Pour nous, le design signifie clarté et responsabilité – y compris dans le domaine numérique. Avec Liip, nous avons trouvé un partenaire qui partage et porte ces valeurs, de la conception initiale jusqu’à la vérification finale de l’accessibilité. Le fait que ce projet ait été récompensé par deux prix d’argent aux BOSW, dans les catégories User Experience et Public Value, est à la fois une validation et une magnifique reconnaissance pour nous.»

so.ch: transparence, accessibilité et simplicité pour renforcer la confiance du public

Nous avons développé un nouveau site pour le canton de Soleure, so.ch. Il crée une véritable valeur publique en rendant les services cantonaux transparents, accessibles et faciles à comprendre, renforçant ainsi la confiance du public, des autorités locales et des acteur·rice·s économiques dans les services publics.

Comme bs.ch nous l’a montré l’an dernier, un site centré utilisateur·rice est essentiel pour améliorer le quotidien des citoyen·ne·s, qui doivent de plus en plus accéder à leurs informations et documents en ligne. Le jury a reconnu la qualité de l’expérience utilisateur de so.ch en attribuant le bronze dans cette catégorie clé.

En savoir plus sur le projet primé

Même si nous n’avons pas remporté autant de prix que nous l’aurions souhaité (et que nous pensons bien sûr mériter :), c’était une belle occasion de prendre le pouls du secteur. Nous félicitons chaleureusement « Swissgrid 24/7 », Master of Swiss Web 26. À l’année prochaine!

À la lumière des récents développements politiques, un « do-talk gap » a (une fois de plus) été constaté dans le domaine de la durabilité. La Zurich Climate Week s’attaque précisément à ce point: s’engager face à l’urgence climatique et en parler.

Et c’est exactement ce dont nous avons besoin aujourd’hui. Car la transformation durable ne se fait pas en silence. Elle naît là où des perspectives différentes se rencontrent: économie, politique, recherche et société civile. Là où les connaissances sont partagées. Là où des solutions sont développées et mises à l’échelle ensemble.

Pourquoi nous nous engageons

Chez Liip, nous avons décidé de contribuer au programme de la Zurich Climate Week pour plusieurs raisons:

• Pour soutenir l’initiative en participant activement au programme
• Pour renforcer notre engagement en faveur de la durabilité au-delà de la Climate Week
• Et surtout: pour partager nos expériences, apprendre des autres et élargir notre réseau de personnes engagées

Notre contribution à la Climate Week, tout comme les deux thématiques de nos événements, s’inscrit selon un même principe: assumer notre responsabilité.

Notre contribution

Liip est présent dans le programme avec deux formats, tous deux axés sur l’échange, la pratique et la mise en œuvre concrète.

Hacking for Sustainable AI

Plus d’informations & inscription

L’intelligence artificielle fait désormais partie de notre quotidien. Elle semble offrir des solutions à de nombreux problèmes et constitue souvent le premier réflexe lorsque nous arrivons à une impasse. Pourtant, ses impacts environnementaux et sociétaux restent encore largement sous-estimés.

Dans quels cas l’IA crée-t-elle réellement de la valeur? Et comment l’utiliser de manière à contribuer à un avenir plus durable?

En collaboration avec opendata.ch, nous mettons ces questions au centre d’un mini hackathon. Développeur·euse·s, designer·euse·s, expert·e·s en durabilité, entreprises et toute personne intéressée sont invité·e·s à imaginer ensemble de nouvelles idées, prototypes et perspectives.

👉 Objectif: développer des approches concrètes pour utiliser l’IA de manière pertinente, responsable et à fort impact.

Sustainability Reporting for SMEs: Real Cases, Practical Steps

Plus d’informations & inscription

Les PME jouent un rôle central dans la transformation durable. Et pourtant, beaucoup se posent les mêmes questions: par où commencer? Qu’est-ce qui est vraiment pertinent? Et quel est le niveau d’effort nécessaire?

Dans cette session, 4 PME partagent leur expérience du reporting de durabilité volontaire.

Le format est interactif: sous forme de table ronde, les participant·e·s peuvent poser des questions, partager leurs propres approches et discuter ensemble des moyens de surmonter les obstacles.

👉 Objectif: réduire les difficultés de départ, montrer que le premier pas est accessible et faire grandir une communauté de PME engagées.

Du discours à l’action collective

La Zurich Climate Week incarne un état d’esprit que nous partageons: allier urgence et optimisme. Ne pas seulement parler des problèmes, mais faire avancer des solutions concrètes. Assumer ensemble notre responsabilité et générer un impact réel.

Dans un contexte où les incertitudes augmentent et où les priorités évoluent, il est plus important que jamais de rester engagés. La durabilité n’est pas une tendance à court terme mais bien une nécessité à long terme. Et en même temps, une opportunité: pour l’innovation, pour de nouveaux modèles économiques, pour une différenciation réelle et au final pour une meilleure qualité de vie.

Ce dont nous avons besoin, ce sont davantage d’espaces d’échange. Plus de transparence. Et plus de courage pour partager ce qui est encore en construction.

La Zurich Climate Week crée précisément ces espaces. Nous sommes ravis d’en faire partie.

The application does one - rather complicated - task, with lots of business logic. There was no way we could rewrite it to include it directly into the website code. And because the application comes with its own Javascript and CSS, we decided to use an iframe to embed the application with clean isolation.

The company maintaining that application provided us with a version - running as a Docker container - where they had stripped all extra elements like the navigation, so that it would visually fit within the website. There was however no way for us to customise anything within the application.

iframe security

The promise of an iframe is to keep a clean security boundary between embedding page and embedded content. This means that it is by design not possible to call Javascript across the boundary.

Because injecting iframes could potentially trick a user into submitting data to an attacker (clickjacking), as the iframe may be from a different origin than the main page. Thus, to even render the iframe, the browser checks the Content-Security-Policy (CSP) HTTP header. That header has a field frame-src to control what may be included as an iframe. With this, I allowed the domain of the application to be included in iframes.

Content-Security-Policy: frame-src https://my-embed.com;

But not only does the including page need to allow an iframe. The page to be embedded also needs to allow being included with the frame-ancestors attribute of the CSP header. As we run the application Docker image under our control, I was able to add that header in the proxy that runs before the Docker image:

Content-Security-Policy: frame-ancestors https://my-website.com;

Several things to note:

• If you have other CSP rules, merge them with the rules, nginx will overwrite the header and not add to it
• Both options also support "self" to allow embedding resp. being embedded with the same webserver
• Prior to the CSP becoming a standard, there was an unofficial header X-Frame-Options, which is still supported by browsers
• Content-Security-Policy must be an actual HTTP header, <meta http-equiv=”...”> is ignored for Content-Security-Policy (and also ignored for X-Frame-Options).

Size of the iframe element

Now we get to the weird parts. To prevent multiple scrollbars, we need the iframe element to be exactly big enough for the embedded page. If it is too small, there is an additional scrollbar (or hidden content). If it is too large, there is odd whitespace.

The size of the element needs to be set on the iframe, owned by the parent. The dimensions of the content are however only known by the embedded application. HTML / CSS do not provide any means to let the parent page declare that it wants the iframe to have the “necessary size”.

We ended up with a really convoluted way, which seems the only way to achieve this: sending messages from the child page to the parent. This problem spawned dedicated javascript libraries like iframe-resizer. We ended up reimplementing the logic in the React application, as it was so small that a dedicated library felt like overkill. Following the tutorial at iframe-height (which also has some interesting background on the discussion about iframes in the Whatwg), we came up with this code for the containing website:

// register an event listener for messages
window.addEventListener('message', receiveMessage, false);

// handle a message
function receiveMessage(event) {
    const origin = event.origin || event.originalEvent.origin;
    // we configure the expected domain to allow for this additional sanity check
    if (expectedDomain !== origin) {
      return;
    }
    if (!event.data.request || 'iframeResize' !== event.data.request) {
      return;
    }
    // the id is known in the js class. we need to find the element that needs to be resized
    const iframe = document.getElementById(`iframe-${id}`);
    if (iframe) {
      // pad the height a bit to avoid unnecessary tiny scrolling
      iframe.style.height = (event.data.height + 20) + 'px';
      // width could be handled the same way if necessary - in our case the width is fix
    }
}

Now we need to make the embedded content send a message with its height. The Javascript for that is a bit verbose to allow for different browsers, but not complicated either:

(
    function(document, window) {
      if (undefined === parent || !document.addEventListener) {
        return;
      }
      function init() {
        let owner = null;
        const width = Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);
        const height = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
        if (parent.postMessage) {
          owner = parent;
        } else if (parent.contentWindow && parent.contentWindow.postMessage) {
          owner = parent.contentWindow;
        } else {
          return;
        }
        owner.postMessage({
          'request' : 'iframeResize',
          'width' : width,
          'height' : height
        }, '*');
      }

      if (document.readyState !== 'loading') {
        window.setTimeout(init);
      } else {
        document.addEventListener('DOMContentLoaded', init);
      }
      // this is needed to also adjust the iframe if something (e.g. the Javascript of the application) changes the size of the iframe without an actual page reload.
      const observer = new ResizeObserver(init);
      observer.observe(document.body);
    }
  )(document, window);"

iframes with same origin

If the iframe comes from the same origin (= domain) as the parent page, Javascript can cross the boundary. From parent to child, there is a contentWindow property on the iframe element. From child to parent, there is window.parent. With same origin, those elements expose all things the window usually has. For different origins, they only expose the function postMessage for the secure separation.

Injecting content with Nginx

Remember how I said we can’t modify the application? That still holds true. If we would have loaded both applications from the same domain, we could have had the parent page add a listener inside the iframe to directly update dimensions as needed. But the application contained absolute paths for its assets, so providing it from a subfolder of the same domain would have been tricky and we had to run it on a separate domain.

I ended up injecting the above snippet of Javascript in the Nginx proxy that sits in front of the Docker container:

proxy_set_header Accept-Encoding ""; # make sure we get plain response for substitution to work
...
sub_filter_last_modified on;
sub_filter "</body>" "<script language='javascript'>${script}</script></body>";
sub_filter_once on;
...
proxy_pass https://my-embed.com$request_uri;

Now the embedded iframe communicates its size to the containing page, which adjusts the iframe size accordingly.

(Note that Nginx does not execute these statements in order. The sub_filter instructions apply to the response, wihle proxy_set_header and proxy_pass apply to the request.)

Alternatives

Web Components are a more lightweight solution to combine separate sources into one website. If what you need to integrate is just an element and not a whole application, they might be a better fit. My collegue Falk wrote about Web Components last week.

Bonus: Access control for the iframe content

Because the application is not under our control, we need to manage access to it. We told the supplier of the application to remove access control and simply allow items to be created and edited by ID. Of course, this means that the application must never be directly exposed to the internet, but only reachable through the proxy.

On the embedding side, we track which user is allowed what ids, and have Nginx do a pre-flight check against the website to get the access decision:

# at the beginning of the location for the main request to the embeded application
auth_request /auth;

location /auth {
    # preflight authorization request with symfony
    fastcgi_pass phpfcgi;
    include /usr/local/openresty/nginx/conf/fastcgi_params;
    fastcgi_param SCRIPT_FILENAME /app/public/index.php;
    # forward the original request URI to allow our main application to verify access to the specific resource
    fastcgi_param REQUEST_URI /embed-check$request_uri;
    # body is not forwarded. we have to remove content length separately, otherwise PHP-FPM will wait for the body until the auth request times out.
    fastcgi_pass_request_body off;
    fastcgi_param CONTENT_LENGTH "";
    fastcgi_param CONTENT_TYPE "";
    internal;
}

If the call at /embed-check/... returns a 2xx status, Nginx continues with the request, otherwise it returns the response with the status code to the client, allowing for example to redirect to the login page. In my case, i return an empty response with status 204 if the user is allowed to access the specific resource.

On Symfony side, I use Symfony security to make sure the user is logged in. And then parse the path to know which item in the application the request wants to access, and check if the user has access. This leaks knowledge about the URL design of the embedded application, which is not avoidable for granular access control.