[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories":3,"dossiers":50,"articles-2--":113},{"data":4,"meta":45},[5,13,21,29,37],{"id":6,"documentId":7,"name":8,"slug":9,"createdAt":10,"updatedAt":11,"publishedAt":12},6,"qryh6hip60vwuwt4yr7iwo2m","Design","design","2026-05-21T15:08:22.865Z","2026-05-21T15:08:32.122Z","2026-05-21T15:08:32.128Z",{"id":14,"documentId":15,"name":16,"slug":17,"createdAt":18,"updatedAt":19,"publishedAt":20},7,"t5c8vl76p2cf19fg2aosv9ps","Entwicklung","entwicklung","2026-05-21T15:08:22.917Z","2026-05-21T15:08:32.143Z","2026-05-21T15:08:32.152Z",{"id":22,"documentId":23,"name":24,"slug":25,"createdAt":26,"updatedAt":27,"publishedAt":28},8,"o3cc2218ws96byxg7zenmkcj","Print","print","2026-05-21T15:08:22.976Z","2026-05-21T15:08:32.184Z","2026-05-21T15:08:32.190Z",{"id":30,"documentId":31,"name":32,"slug":33,"createdAt":34,"updatedAt":35,"publishedAt":36},9,"cth9u5cwmxxvqdzj6v8fgbd6","Publishing","publishing","2026-05-21T15:08:23.024Z","2026-05-21T15:08:32.201Z","2026-05-21T15:08:32.215Z",{"id":38,"documentId":39,"name":40,"slug":41,"createdAt":42,"updatedAt":43,"publishedAt":44},10,"xi9ce0bxja68s9u6qds52nkv","Tools & Technik","tools-and-technik","2026-05-21T15:08:23.074Z","2026-05-21T15:08:32.233Z","2026-05-21T15:08:32.240Z",{"pagination":46},{"page":47,"pageSize":48,"pageCount":47,"total":49},1,100,5,{"data":51,"meta":111},[52,61,68,75,82,90,97,104],{"id":53,"documentId":54,"name":55,"description":56,"createdAt":57,"updatedAt":58,"publishedAt":59,"locale":60},25,"my6ws5iwxuyotlpatvhts6n2","Adobe InDesign",null,"2026-05-21T15:08:24.225Z","2026-05-21T15:08:32.464Z","2026-05-21T15:08:32.469Z","de-CH",{"id":62,"documentId":63,"name":64,"description":56,"createdAt":65,"updatedAt":66,"publishedAt":67,"locale":60},26,"bo5cn16ii3rtpj4yba1bxlc4"," Daten strukturieren","2026-05-21T15:08:24.247Z","2026-05-21T15:08:32.494Z","2026-05-21T15:08:32.499Z",{"id":69,"documentId":70,"name":71,"description":56,"createdAt":72,"updatedAt":73,"publishedAt":74,"locale":60},27,"l3a6ag7spc06iedkhor1ec9e","Jamstack","2026-05-21T15:08:24.261Z","2026-05-21T15:08:32.509Z","2026-05-21T15:08:32.516Z",{"id":76,"documentId":77,"name":78,"description":56,"createdAt":79,"updatedAt":80,"publishedAt":81,"locale":60},28,"i1iw0avlyoavgoa3456n0oiw"," Miro","2026-05-21T15:08:24.278Z","2026-05-21T15:08:32.526Z","2026-05-21T15:08:32.533Z",{"id":83,"documentId":84,"name":85,"description":86,"createdAt":87,"updatedAt":88,"publishedAt":89,"locale":60},29,"o8bxoum1cm6lhnprcdskca85","Strapi","Strapi ist eines der beliebtesten Headless CMS, das auf dem Javascript-Framework NodeJS basiert.","2026-05-21T15:08:24.294Z","2026-05-21T15:08:32.545Z","2026-05-21T15:08:32.550Z",{"id":91,"documentId":92,"name":93,"description":56,"createdAt":94,"updatedAt":95,"publishedAt":96,"locale":60},30,"p4nijk2j8b092s1zjqvt7rz0","UX-Design","2026-05-21T15:08:24.317Z","2026-05-21T15:08:32.561Z","2026-05-21T15:08:32.567Z",{"id":98,"documentId":99,"name":100,"description":56,"createdAt":101,"updatedAt":102,"publishedAt":103,"locale":60},31,"z20qvnh3g4zahqqrk3jh3s5h","Webdesign","2026-05-21T15:08:24.334Z","2026-05-21T15:08:32.578Z","2026-05-21T15:08:32.591Z",{"id":105,"documentId":106,"name":107,"description":56,"createdAt":108,"updatedAt":109,"publishedAt":110,"locale":60},32,"vtl8anckmrznwgeuzra62uzn","Webentwicklung","2026-05-21T15:08:24.351Z","2026-05-21T15:08:32.602Z","2026-05-21T15:08:32.610Z",{"pagination":112},{"page":47,"pageSize":48,"pageCount":47,"total":22},{"paginatedArticles":114,"highlightedArticle":1134},{"data":115,"meta":1131},[116,527,616,833,1048],{"id":117,"documentId":118,"title":119,"alternativeTitle":120,"description":121,"content":122,"publish_at":449,"slug":450,"highlight":451,"curated":451,"createdAt":452,"updatedAt":453,"publishedAt":454,"locale":60,"image":455,"category":517,"author":518,"source":56},74,"rbi6uad2mk27nl9dz01lujd0","Ein Rezept für Content First","Content First mit dem Headless CMS Strapi","Content-Management-Systeme sind im Publishing gerade hoch im Kurs und vereinfachen das Publizieren über verschiedene Kanäle. Warum es sich lohnt, seine Prozesse mit den Prinzipien von Content First neu zu denken und welche Rolle dabei Headless CMS spielen können, erfährst du in diesem Artikel.",[123,129,135,139,157,167,171,175,179,249,258,262,266,270,274,278,282,286,290,294,298,360,364,368,429,433,437,441,445],{"type":124,"children":125},"paragraph",[126],{"text":127,"type":128},"Microsoft-Word, InDesign, die Datenbank der Webseite – das sind nur einige mögliche Orte, an denen Inhalte in einem «klassischen» Publishing-Workflow abgelegt werden können. Doch in welcher Version pflegt man nun die Inhalte? In welcher Datei oder in welchem Tool werden Korrekturen ausgeführt? Diesen Fragen wird man sich unweigerlich stellen müssen, wenn ein klassischer Print-Workflow plötzlich mit weiteren Ausgabekanälen ergänzt werden soll. Bei meiner Leibspeise – den Bündner Capuns – sagt man liebevoll: «Es gibt so viele Rezepte wie Grossmütter.» So ähnlich verhält es sich mit Antworten auf die soeben gestellten Fragen, nur sind es dann meist keine Rezepte, sondern Ansätze und Tools. Mit meinem Rezept oder anders ausgedrückt, mit meiner Publishing-Empfehlung möchte ich neben einem konkreten Ansatz auch das Open-Source-Tool Strapi vorstellen und in einer Artikelreihe die verschiedenen Möglichkeiten im Publishing aufzeigen.","text",{"type":130,"level":131,"children":132},"heading",2,[133],{"text":134,"type":128},"Content First mit Finesse",{"type":124,"children":136},[137],{"text":138,"type":128},"Content First bedeutet, dass der Inhalt und somit auch die Person, die diesen Inhalt konsumiert, an erster Stelle stehen. Inhalte sollten also immer über dem Layout oder dem Ausgabemedium stehen und so aufgebaut sein, dass sie für den Leser relevant sind. Ansätze wie Print-First oder auch Web-First bergen das Risiko, dass die Inhalte nicht medienneutral aufbereitet werden, sondern bereits durch den jeweiligen Ausgabekanal beeinflusst werden. Ein Klassiker bilden dabei zum Beispiel Verweise auf bestimmte Seiten im Printmedium, die den Weg irgendwie in den Web-Artikel gefunden haben. Oder umgekehrt – überfüllte Bildergalerien, bei denen sich der Leser im Netz selbst einen Reim darauf machen muss, zu welchem Kontext das jeweilige Bild passt. Diese Bilder landen dann oft im Print-Artikel in einem liebevoll gestalteten Bildraster, leider ohne Bezug zum Inhalt. Du denkst dir nun vielleicht: «Das muss doch auch besser gehen.» undUnd damit hast du natürlich auch vollkommen recht.",{"type":140,"image":141,"children":154},"image",{"name":142,"alternativeText":142,"url":143,"caption":56,"width":144,"height":145,"formats":146,"hash":147,"ext":148,"mime":149,"size":150,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":152,"updatedAt":153},"headless_cms_aufbau.svg","https:\u002F\u002Fcontent.punktzwei.ch\u002Fuploads\u002Fheadless_cms_aufbau_8f95f15fbb.svg",292,199,{},"headless_cms_aufbau_8f95f15fbb",".svg","image\u002Fsvg+xml",10.35,"local","2026-05-27T13:29:11.381Z","2026-05-27T13:35:32.773Z",[155],{"type":128,"text":156},"",{"type":130,"children":158,"level":131},[159,160,165],{"text":156,"type":128},{"url":161,"type":162,"children":163},"\u002Fuploads\u002Fheadless_cms_aufbau_8f95f15fbb.svg","link",[164],{"text":156,"type":128},{"text":166,"type":128},"Abstraktion mit Headless CMS",{"type":124,"children":168},[169],{"text":170,"type":128},"Um eine medienneutrale Datenhaltung zu gewährleisten, die sich für alle möglichen Ausgabekanäle eignet, hat eine Entwicklung in die Richtung von Headless CMS stattgefunden. Wie der Name bereits vermuten lässt, sind Headless CMS im wahrsten Sinne des Wortes kopflos. Mit Kopf ist in diesem Fall das Frontend gemeint – also die Präsentationsschicht, die Inhalte in einem bestimmten Layout darstellt. Man kann sich natürlich darüber streiten, ob Systeme besser werden, wenn man einfach gewisse Teile oder Funktionen weglässt. In diesem Fall löst diese Abstraktion aber die bereits beschriebenen Probleme, dass Inhalte beispielsweise mit der Print- oder Web-Brille erstellt werden. In klassischen CMS wie Wordpress, Typo3 oder Drupal werden Inhalte in der Regel im Backend – also der eigentlichen Schaltzentrale – verwaltet und im Frontend ausgegeben. Um den Benutzern das Erfassen und Editieren von Content zu erleichtern, werden meist sogenannte WYSIWYG-Editoren zur Verfügung gestellt. Dieses Prinzip funktioniert wunderbar, solange der Content in der Form dargestellt wird, auf welcher die Vorschau basiert. Möchte man die Daten nun in einen anderen Ausgabekanal einspeisen, ist man darauf angewiesen, dass sich die gegebene Struktur in die Form des neuen Ausgabekanals übersetzen lässt. Dies ist leider meist mit Kompromissen verbunden. Mit dem Headless-CMS-Ansatz versucht man nun, die Kompatibiltät für ­verschiedene Ausgabekanäle zu erhöhen, ­indem man die Präsentationsschicht ganz einfach weglässt. ",{"type":130,"level":131,"children":172},[173],{"text":174,"type":128},"Inhalte mit Struktur",{"type":124,"children":176},[177],{"text":178,"type":128},"Wer sich mit dem Thema Headless CMS befasst, kommt unweigerlich zum Punkt, an dem er sich mit der Modellierung der Inhalte befassen muss – und das ist auch gut so. Bevor man Inhalte ausgeben kann, müssen diese erstellt werden. Doch, welche Inhalte sollen überhaupt erstellt werden und wie müssen diese aufgebaut sein? Welche Zusatzinformationen (Metadaten) werden benötigt? Wärmen wir nun also unsere Analogie in Bezug auf Publishing-Ansätze und Capuns-Rezepte nochmals auf und überlegen uns, wie ein grundsätzliches Rezept aufgebaut ist. Ein Rezept verfügt zum Beispiel über einen Titel, eine Kurzbeschreibung und ein Tellerbild. Auch die Zutaten, die Mengenangaben sowie die einzelnen Zubereitungsschritte dürfen in einem guten Rezept natürlich nicht fehlen. Mit diesen Überlegungen haben wir nun bereits unser erstes Inhaltsmodell für den Inhaltstyp «Rezept» definiert. Überlegungen zur Content-Strategie und zur Datenmodellierung bilden also den Ausgangspunkt eines Content-First-Prozesses.",{"type":140,"image":180,"children":247},{"name":181,"alternativeText":181,"url":182,"caption":56,"width":183,"height":184,"formats":185,"hash":244,"ext":187,"mime":190,"size":245,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":246,"updatedAt":246},"content-first-workflow.png","https:\u002F\u002Fcontent.punktzwei.ch\u002Fuploads\u002Fcontent_first_workflow_0829de0cc4.png",2137,296,{"lg":186,"md":196,"sm":204,"xl":212,"2xl":220,"3xl":228,"thumbnail":236},{"ext":187,"url":188,"hash":189,"mime":190,"name":191,"path":56,"size":192,"width":193,"height":194,"sizeInBytes":195},".png","\u002Fuploads\u002Flg_content_first_workflow_0829de0cc4.png","lg_content_first_workflow_0829de0cc4","image\u002Fpng","lg_content-first-workflow.png",31.75,1024,142,31752,{"ext":187,"url":197,"hash":198,"mime":190,"name":199,"path":56,"size":200,"width":201,"height":202,"sizeInBytes":203},"\u002Fuploads\u002Fmd_content_first_workflow_0829de0cc4.png","md_content_first_workflow_0829de0cc4","md_content-first-workflow.png",22.37,768,106,22373,{"ext":187,"url":205,"hash":206,"mime":190,"name":207,"path":56,"size":208,"width":209,"height":210,"sizeInBytes":211},"\u002Fuploads\u002Fsm_content_first_workflow_0829de0cc4.png","sm_content_first_workflow_0829de0cc4","sm_content-first-workflow.png",18.15,640,89,18152,{"ext":187,"url":213,"hash":214,"mime":190,"name":215,"path":56,"size":216,"width":217,"height":218,"sizeInBytes":219},"\u002Fuploads\u002Fxl_content_first_workflow_0829de0cc4.png","xl_content_first_workflow_0829de0cc4","xl_content-first-workflow.png",42.38,1280,177,42378,{"ext":187,"url":221,"hash":222,"mime":190,"name":223,"path":56,"size":224,"width":225,"height":226,"sizeInBytes":227},"\u002Fuploads\u002F2xl_content_first_workflow_0829de0cc4.png","2xl_content_first_workflow_0829de0cc4","2xl_content-first-workflow.png",51.2,1536,213,51200,{"ext":187,"url":229,"hash":230,"mime":190,"name":231,"path":56,"size":232,"width":233,"height":234,"sizeInBytes":235},"\u002Fuploads\u002F3xl_content_first_workflow_0829de0cc4.png","3xl_content_first_workflow_0829de0cc4","3xl_content-first-workflow.png",69.97,1920,266,69971,{"ext":187,"url":237,"hash":238,"mime":190,"name":239,"path":56,"size":240,"width":241,"height":242,"sizeInBytes":243},"\u002Fuploads\u002Fthumbnail_content_first_workflow_0829de0cc4.png","thumbnail_content_first_workflow_0829de0cc4","thumbnail_content-first-workflow.png",5.79,245,34,5791,"content_first_workflow_0829de0cc4",12.98,"2026-05-21T17:43:54.841Z",[248],{"type":128,"text":156},{"type":130,"children":250,"level":131},[251,252,256],{"type":128,"text":156},{"url":253,"type":162,"children":254},"\u002Fuploads\u002Fcontent_first_workflow_0829de0cc4.png",[255],{"text":156,"type":128},{"text":257,"type":128},"Beziehungen und Module",{"type":124,"children":259},[260],{"text":261,"type":128},"Was ist, wenn wir das soeben definierte Inhaltsmodell genauer anschauen? Wir stellen fest, dass die Zutaten im Rezept selbst wiederum über eine Bezeichnung und allenfalls über ein Produktbild sowie eine kurze Beschreibung verfügen können. Es ist also nichts anderes, als ein weiterer Inhaltstyp, der in einer Beziehung zum Inhaltstyp «Rezept» steht. Der Vorteil solcher Relationen ist, dass eine Zutat nicht in jedem Rezept neu erfasst werden muss, sondern einfach aus einer Sammlung an Zutaten verknüpft werden kann – wir minimieren also Redundanzen in unseren Daten.",{"type":124,"children":263},[264],{"text":265,"type":128},"Mit dem Prinzip der Modularisierung betrachten wir unsere Inhalte nicht mehr als Ganzes, sondern zerlegen die verschiedenen Bereiche in Module. Diese Module können dann beliebig oft sowie in unterschiedlichen Kontexten verwendet werden.",{"type":130,"level":131,"children":267},[268],{"text":269,"type":128},"Inhalte ausspielen, aber wie?",{"type":124,"children":271},[272],{"text":273,"type":128},"Ich habe bereits erwähnt, dass mit einem Headless CMS das Frontend weggelassen wird. Dies ist nur die halbe Wahrheit. Auch ohne Frontend müssen die Inhalte über einen Weg in die verschiedenen Kanäle gelangen. Dies wird durch eine Schnittstelle (API) ermöglicht. Im Web und vor allem bei Headless CMS kommen dabei oft sogenannte REST-API’s zum Einsatz. Hierbei wird in der Regel eine Anfrage über HTTP an den Server gestellt. So können Ressourcen über eine URL\u002FURI mithilfe bestimmter Methoden abgerufen, verändert oder gelöscht werden. Das Prinzip lässt sich einfach mit dem Beispiel einer Bibliothek erklären. Ein Kunde (Anfrager) betritt die Bibliothek und möchte ein bestimmtes Buch (Ressource) ausleihen. Der Bibliothekar – in diesem Falle die Logik der Schnittstelle –prüft, ob das Buch bzw. die Ressource zur Verfügung steht und ob der Kunde berechtigt ist, das Buch auszuleihen. Ist alles korrekt, kann das Buch ausgeliehen werden. REST-API’s funktionieren im Grundsatz nach diesem Prinzip, mit dem Unterschied, dass sich die Daten natürlich über das Web abrufen lassen. Als Austauschformate kommen in der Regel JSON, HTML oder XML zum Einsatz. REST-API’s zeichnen sich durch eine hohe Flexibilität, Skalierbarkeit sowie Sicherheit aus. ",{"type":130,"level":131,"children":275},[276],{"text":277,"type":128},"Klassisch, Headless oder beides?",{"type":124,"children":279},[280],{"text":281,"type":128},"Die typischen Vertreter von klassischen CMS geniessen grosse Bekanntheit. Doch wie sieht es im Bereich der Headless CMS aus? Alle WordPress-Fans kann ich an dieser Stelle beruhigen. Auch dieses CMS kann durch die implementierte REST-API und zusätzlichen Erweiterungen einfach zu einem Headless CMS «umgebaut» werden, genauer gesagt spricht man dann in diesem Fall von einer progressiven Entkopplung (Progressive Decoupling). Auch andere Systeme bieten hybride Möglichkeiten. Georg Obermayr erklärt zum Beispiel in einem seiner Blogbeiträge, wie man mit dem CMS Kirby die Vorteile des Headless-CMS-Ansatzes nutzen kann.",{"type":130,"level":131,"children":283},[284],{"text":285,"type":128},"Strapi – Content-Lieferant für alle Kanäle",{"type":124,"children":287},[288],{"text":289,"type":128},"Mittlerweile gibt es auch eine stattliche Zahl an Vertretern aus den Reihen der Headless CMS, die sich voll und ganz der Abstraktion des Frontends verschrieben haben und als reine Content-Plattform fungieren. Das Tool Strapi ist einer dieser Vertreter, dessen Vorzüge nun etwas genauer beleuchtet werden. Fünf Jahre nach der ersten Veröffentlichung des Projekts auf Github hat das Open-Source-Headless-CMS im letzten Jahr den sogenannten Stable Release herausgegeben und sich dadurch zu einem vielversprechenden Kandidaten gemausert. Strapi besticht durch eine einfache Benutzeroberfläche, um Inhalte zu erfassen sowie durch eine automatische Bereitstellung von API-Endpoints, um die erstellten Inhalte über das Web abzurufen. Die Installation von Strapi ist aktuell nicht ganz so einfach, wie dies zum Beispiel bei den bekanntesten CMS der Fall ist. Mit Hilfe der detaillierten Dokumentation des Herstellers ist das System jedoch schnell aufgesetzt und konfiguriert. Zudem soll nächstens eine Cloud-Version veröffentlicht werden, mit welcher das Selfhosting entfällt.",{"type":130,"level":131,"children":291},[292],{"text":293,"type":128},"Content Management im Eigenbau",{"type":124,"children":295},[296],{"text":297,"type":128},"Ist Strapi erst einmal installiert, ermöglicht es durch die flexible Datenstruktur das Erstellen von individuellen Inhaltsstrukturen. Dies geschieht mit dem sogenannten Content Type Builder. Strapi unterscheidet hier zwischen verschiedenen Content-Typen wie Sammlungen, einzelnen Einträgen und Komponenten. Wie der Name bereits sagt, können Sammlungen im Gegensatz zu Einzeleinträgen mehrere Einträge mit der gleichen Struktur enthalten. Dies kann zum Beispiel eine Sammlung verschiedener Blogbeiträge sein. Komponenten können in ­verschiedenen Sammlungen sowie Einzeleinträgen verwendet werden. Sie erhöhen also die Wiederverwendbarkeit von Datenstrukturen. Ein Content-Typ kann mittels verschiedener Feld-Typen strukturiert werden. So können unter anderem Felder für gewöhnliche und formatierte Texte, Listen ­sowie Bilder hinzugefügt werden. Relationen können ebenfalls ganz einfach mit einem dafür vorgesehen Feld-Typ definiert werden.",{"type":140,"image":299,"children":358},{"name":300,"alternativeText":300,"url":301,"caption":56,"width":302,"height":303,"formats":304,"hash":354,"ext":187,"mime":190,"size":355,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":356,"updatedAt":357},"content-types-builder.png","https:\u002F\u002Fcontent.punktzwei.ch\u002Fuploads\u002Fcontent_types_builder_45693bcc95.png",2874,1522,{"lg":305,"md":312,"sm":319,"xl":326,"2xl":333,"3xl":340,"thumbnail":347},{"ext":187,"url":306,"hash":307,"mime":190,"name":308,"path":56,"size":309,"width":193,"height":310,"sizeInBytes":311},"\u002Fuploads\u002Flg_content_types_builder_45693bcc95.png","lg_content_types_builder_45693bcc95","lg_content-types-builder.png",221.31,542,221306,{"ext":187,"url":313,"hash":314,"mime":190,"name":315,"path":56,"size":316,"width":201,"height":317,"sizeInBytes":318},"\u002Fuploads\u002Fmd_content_types_builder_45693bcc95.png","md_content_types_builder_45693bcc95","md_content-types-builder.png",131.09,407,131086,{"ext":187,"url":320,"hash":321,"mime":190,"name":322,"path":56,"size":323,"width":209,"height":324,"sizeInBytes":325},"\u002Fuploads\u002Fsm_content_types_builder_45693bcc95.png","sm_content_types_builder_45693bcc95","sm_content-types-builder.png",87.91,339,87912,{"ext":187,"url":327,"hash":328,"mime":190,"name":329,"path":56,"size":330,"width":217,"height":331,"sizeInBytes":332},"\u002Fuploads\u002Fxl_content_types_builder_45693bcc95.png","xl_content_types_builder_45693bcc95","xl_content-types-builder.png",334.56,678,334555,{"ext":187,"url":334,"hash":335,"mime":190,"name":336,"path":56,"size":337,"width":225,"height":338,"sizeInBytes":339},"\u002Fuploads\u002F2xl_content_types_builder_45693bcc95.png","2xl_content_types_builder_45693bcc95","2xl_content-types-builder.png",476.02,813,476016,{"ext":187,"url":341,"hash":342,"mime":190,"name":343,"path":56,"size":344,"width":233,"height":345,"sizeInBytes":346},"\u002Fuploads\u002F3xl_content_types_builder_45693bcc95.png","3xl_content_types_builder_45693bcc95","3xl_content-types-builder.png",726.78,1017,726783,{"ext":187,"url":348,"hash":349,"mime":190,"name":350,"path":56,"size":351,"width":241,"height":352,"sizeInBytes":353},"\u002Fuploads\u002Fthumbnail_content_types_builder_45693bcc95.png","thumbnail_content_types_builder_45693bcc95","thumbnail_content-types-builder.png",17.78,130,17777,"content_types_builder_45693bcc95",344.78,"2026-05-27T23:20:43.838Z","2026-05-30T15:13:03.944Z",[359],{"type":128,"text":156},{"type":130,"level":131,"children":361},[362],{"text":363,"type":128},"Strapi durch Inhalte mit Leben füllen",{"type":124,"children":365},[366],{"text":367,"type":128},"Die mit dem Content Type Builder definierten Inhaltsmodelle bilden im Grunde das Grundgerüst für unser Headless CMS. In dieses Grundgerüst fliesst dann der eigentliche Content, der in Strapi mit dem Content Manager erfasst und editiert werden kann. Dafür steht ein übersichtlicher Editor zur Verfügung, mit welchem Texte erfasst und mittels Markdown formatiert werden können. Neu lassen sich auch Inhaltsvarianten in verschiedenen Sprachen bzw. für verschiedene Regionen verwalten. Für die Verwaltung von Medien wie Bilder, Videos und Audio-Inhalte stellt Strapi eine einfache Media Library in Form eines Plug-ins zur Verfügung.",{"type":140,"image":369,"children":427},{"name":370,"alternativeText":370,"url":371,"caption":56,"width":372,"height":373,"formats":374,"hash":424,"ext":187,"mime":190,"size":425,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":426,"updatedAt":426},"strapi_media-library.png","https:\u002F\u002Fcontent.punktzwei.ch\u002Fuploads\u002Fstrapi_media_library_412638bbb8.png",2879,1751,{"lg":375,"md":382,"sm":389,"xl":396,"2xl":403,"3xl":410,"thumbnail":417},{"ext":187,"url":376,"hash":377,"mime":190,"name":378,"path":56,"size":379,"width":193,"height":380,"sizeInBytes":381},"\u002Fuploads\u002Flg_strapi_media_library_412638bbb8.png","lg_strapi_media_library_412638bbb8","lg_strapi_media-library.png",515.18,623,515180,{"ext":187,"url":383,"hash":384,"mime":190,"name":385,"path":56,"size":386,"width":201,"height":387,"sizeInBytes":388},"\u002Fuploads\u002Fmd_strapi_media_library_412638bbb8.png","md_strapi_media_library_412638bbb8","md_strapi_media-library.png",287.82,467,287820,{"ext":187,"url":390,"hash":391,"mime":190,"name":392,"path":56,"size":393,"width":209,"height":394,"sizeInBytes":395},"\u002Fuploads\u002Fsm_strapi_media_library_412638bbb8.png","sm_strapi_media_library_412638bbb8","sm_strapi_media-library.png",202.56,389,202564,{"ext":187,"url":397,"hash":398,"mime":190,"name":399,"path":56,"size":400,"width":217,"height":401,"sizeInBytes":402},"\u002Fuploads\u002Fxl_strapi_media_library_412638bbb8.png","xl_strapi_media_library_412638bbb8","xl_strapi_media-library.png",822.94,778,822940,{"ext":187,"url":404,"hash":405,"mime":190,"name":406,"path":56,"size":407,"width":225,"height":408,"sizeInBytes":409},"\u002Fuploads\u002F2xl_strapi_media_library_412638bbb8.png","2xl_strapi_media_library_412638bbb8","2xl_strapi_media-library.png",1235.85,934,1235852,{"ext":187,"url":411,"hash":412,"mime":190,"name":413,"path":56,"size":414,"width":233,"height":415,"sizeInBytes":416},"\u002Fuploads\u002F3xl_strapi_media_library_412638bbb8.png","3xl_strapi_media_library_412638bbb8","3xl_strapi_media-library.png",1989.39,1168,1989388,{"ext":187,"url":418,"hash":419,"mime":190,"name":420,"path":56,"size":421,"width":241,"height":422,"sizeInBytes":423},"\u002Fuploads\u002Fthumbnail_strapi_media_library_412638bbb8.png","thumbnail_strapi_media_library_412638bbb8","thumbnail_strapi_media-library.png",33.22,149,33216,"strapi_media_library_412638bbb8",1301.54,"2026-05-27T23:21:09.842Z",[428],{"type":128,"text":156},{"type":130,"level":131,"children":430},[431],{"text":432,"type":128},"Benutzer, Rollen und Rechte",{"type":124,"children":434},[435],{"text":436,"type":128},"Mit der implementierten REST-API spielt Strapi die eigentliche Stärke eines Headless CMS gekonnt aus. Die mit dem Content Manager erstellten Inhalte können nach deren Veröffentlichung sofort über die jeweiligen API-Endpoints abgerufen werden (z. B. https:\u002F\u002Fstrapi-example.ch\u002Farticles). Die Daten werden im JSON-Format ausgeliefert und können so einfach im Frontend verarbeitet werden. Mittels Benutzern und Rollen kann der Zugriff auf die verschiedenen Inhalte detailliert gesteuert werden. ",{"type":130,"level":131,"children":438},[439],{"text":440,"type":128},"Volle Roadmap",{"type":124,"children":442},[443],{"text":444,"type":128},"Strapi bietet schon jetzt eine einfache Benutzeroberfläche und eine Vielzahl an Funktionen. Die Zahl der Features ist seit dem Stable Release im letzten Jahr stetig gestiegen, weitere sollen mit den nächsten Releases folgen. Ein Blick in die Roadmap zeigt, dass man in Zukunft einige spannende Entwicklungen erwarten darf. Auch die Community liefert stetig neue interessante Plug-ins.",{"type":124,"children":446},[447],{"text":448,"type":128},"Im nächsten Artikel erfährst du, wie man mit Strapi einen einfachen Content-First-Workflow mit Ausgabekanälen für Web und Print definieren kann.","2021-07-20T22:00:00.000Z","content-first-mit-dem-headless-cms-strapi",false,"2026-05-21T15:08:26.615Z","2026-05-30T15:13:39.633Z","2026-05-30T15:13:39.673Z",{"id":456,"documentId":457,"name":458,"alternativeText":458,"caption":458,"focalPoint":56,"width":459,"height":460,"formats":461,"hash":513,"ext":463,"mime":466,"size":514,"url":515,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":516,"updatedAt":516,"publishedAt":516},146,"h71g1ytajbeludsydzfkytri","sam-roman-ljZ2KRh_gZM-unsplash.jpg",3024,4032,{"lg":462,"md":470,"sm":477,"xl":484,"2xl":491,"3xl":498,"thumbnail":505},{"ext":463,"url":464,"hash":465,"mime":466,"name":467,"path":56,"size":468,"width":201,"height":193,"sizeInBytes":469},".jpg","\u002Fuploads\u002Flg_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084.jpg","lg_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084","image\u002Fjpeg","lg_sam-roman-ljZ2KRh_gZM-unsplash.jpg",261.42,261415,{"ext":463,"url":471,"hash":472,"mime":466,"name":473,"path":56,"size":474,"width":475,"height":201,"sizeInBytes":476},"\u002Fuploads\u002Fmd_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084.jpg","md_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084","md_sam-roman-ljZ2KRh_gZM-unsplash.jpg",158.67,576,158673,{"ext":463,"url":478,"hash":479,"mime":466,"name":480,"path":56,"size":481,"width":482,"height":209,"sizeInBytes":483},"\u002Fuploads\u002Fsm_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084.jpg","sm_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084","sm_sam-roman-ljZ2KRh_gZM-unsplash.jpg",117.87,480,117870,{"ext":463,"url":485,"hash":486,"mime":466,"name":487,"path":56,"size":488,"width":489,"height":217,"sizeInBytes":490},"\u002Fuploads\u002Fxl_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084.jpg","xl_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084","xl_sam-roman-ljZ2KRh_gZM-unsplash.jpg",372.46,960,372458,{"ext":463,"url":492,"hash":493,"mime":466,"name":494,"path":56,"size":495,"width":496,"height":225,"sizeInBytes":497},"\u002Fuploads\u002F2xl_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084.jpg","2xl_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084","2xl_sam-roman-ljZ2KRh_gZM-unsplash.jpg",504.8,1152,504797,{"ext":463,"url":499,"hash":500,"mime":466,"name":501,"path":56,"size":502,"width":503,"height":233,"sizeInBytes":504},"\u002Fuploads\u002F3xl_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084.jpg","3xl_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084","3xl_sam-roman-ljZ2KRh_gZM-unsplash.jpg",714.17,1440,714173,{"ext":463,"url":506,"hash":507,"mime":466,"name":508,"path":56,"size":509,"width":510,"height":511,"sizeInBytes":512},"\u002Fuploads\u002Fthumbnail_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084.jpg","thumbnail_sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084","thumbnail_sam-roman-ljZ2KRh_gZM-unsplash.jpg",9.94,117,156,9944,"sam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084",2437.22,"\u002Fuploads\u002Fsam_roman_lj_Z2_K_Rh_g_ZM_unsplash_5b7a558084.jpg","2026-05-21T15:08:26.592Z",{"id":30,"documentId":31,"name":32,"slug":33,"createdAt":34,"updatedAt":35,"publishedAt":36},{"id":519,"documentId":520,"firstname":521,"lastname":522,"email":523,"createdAt":524,"updatedAt":525,"publishedAt":526},4,"s97koltfa36386jjkoyjrfdi","David","Maissen","david.maissen@punktzwei.ch","2026-05-21T15:08:22.598Z","2026-05-21T15:08:32.097Z","2026-05-21T15:08:32.102Z",{"id":528,"documentId":529,"title":530,"alternativeTitle":531,"description":532,"content":533,"publish_at":550,"slug":551,"highlight":451,"curated":451,"createdAt":552,"updatedAt":553,"publishedAt":554,"locale":60,"image":555,"category":614,"author":615,"source":56},75,"wbaph3zk3ldzpo0x91dceawb","Ein Workaround für runde Ecken","Tipps für InDesign-Tabellen","Auch in der neusten Version von InDesign sucht man vergeblich nach der Option für abgerundete Ecken bei Tabellen. Sicher ist das kein Feature, auf das die gesamte Publishing-Community wartet, doch findet man im Netz unterdessen zahlreiche Hilfestellungen für Probleme dieser Art. Wie kommt man also mit einfachen Mitteln zu abgerundeten Tabellenecken?",[534,538,542,546],{"type":124,"children":535},[536],{"text":537,"type":128},"In einem ersten Schritt erstellt man die Tabelle in einem separaten Textrahmen. Danach zieht man einen weiteren Grafikrahmen auf und versieht diesen mit einer Kontur und abgerundeten Ecken. Der Trick ist nun, dass man den Textrahmen, in welchem sich die Tabelle befindet, ausschneidet und mittels der Option In die Auswahl einfügen in den zuvor erstellten Grafikrahmen einfügt. Zum Schluss kann der Grafikrahmen an die Grösse der Tabelle angepasst werden. Möchte man die Tabelle zusätzlich farbig hinterlegen, kann der gesamte Grafikrahmen eingefärbt werden. Um Kopf- bzw. Fusszeilen abzuheben, können die Zellen entsprechend formatiert werden.",{"type":124,"children":539},[540],{"text":541,"type":128},"Erstellt man eine Tabelle in einem Textrahmen und kopiert diesen anschliessend in einen Grafikrahmen mit abgerundeten Ecken, erhält man das gewünschte Ergebnis.",{"type":124,"children":543},[544],{"text":545,"type":128},"Eine weiterer Lösungsweg stellt die Absatzschattierung dar. Über Absatzformate kann man Text in den Zellen farbig hinterlegen. Anstelle einer Farbe für die Zellfläche definiert man im Absatzformat eine entsprechende Absatzschattierung. Über die Versatzoptionen kann man die Schattierung genau in die Zelle einpassen. Zu beachten ist, dass man für jede Eckenposition ein separates Absatzformat benötigt, in welchem jeweils eine Ecke abgerundet wird. Die Absatzformate können in einem Zellenformat hinterlegt und so einfach angewendet werden.",{"type":124,"children":547},[548],{"text":549,"type":128},"Bei der Variante mittels Absatzschattierung ist der Konfigurationsaufwand höher. Sind die Optionen jedoch einmal definiert, können Sie einfach über Tabellen- bzw. Zellenformate angewendet werden.","2021-06-08T22:00:00.000Z","ein-workaround-fuer-runde-ecken","2026-05-21T15:08:26.987Z","2026-05-30T15:14:35.174Z","2026-05-30T15:14:35.214Z",{"id":556,"documentId":557,"name":558,"alternativeText":558,"caption":558,"focalPoint":56,"width":559,"height":560,"formats":561,"hash":611,"ext":187,"mime":190,"size":208,"url":612,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":613,"updatedAt":613,"publishedAt":613},147,"t0o2kc4gr9c09qgonwu90282","rounded-frames.png",3000,1659,{"lg":562,"md":569,"sm":576,"xl":583,"2xl":590,"3xl":597,"thumbnail":604},{"ext":187,"url":563,"hash":564,"mime":190,"name":565,"path":56,"size":566,"width":193,"height":567,"sizeInBytes":568},"\u002Fuploads\u002Flg_rounded_frames_4dfe06dabd.png","lg_rounded_frames_4dfe06dabd","lg_rounded-frames.png",9.71,566,9707,{"ext":187,"url":570,"hash":571,"mime":190,"name":572,"path":56,"size":573,"width":201,"height":574,"sizeInBytes":575},"\u002Fuploads\u002Fmd_rounded_frames_4dfe06dabd.png","md_rounded_frames_4dfe06dabd","md_rounded-frames.png",6.93,425,6930,{"ext":187,"url":577,"hash":578,"mime":190,"name":579,"path":56,"size":580,"width":209,"height":581,"sizeInBytes":582},"\u002Fuploads\u002Fsm_rounded_frames_4dfe06dabd.png","sm_rounded_frames_4dfe06dabd","sm_rounded-frames.png",5.61,354,5614,{"ext":187,"url":584,"hash":585,"mime":190,"name":586,"path":56,"size":587,"width":217,"height":588,"sizeInBytes":589},"\u002Fuploads\u002Fxl_rounded_frames_4dfe06dabd.png","xl_rounded_frames_4dfe06dabd","xl_rounded-frames.png",12.83,708,12826,{"ext":187,"url":591,"hash":592,"mime":190,"name":593,"path":56,"size":594,"width":225,"height":595,"sizeInBytes":596},"\u002Fuploads\u002F2xl_rounded_frames_4dfe06dabd.png","2xl_rounded_frames_4dfe06dabd","2xl_rounded-frames.png",16.11,849,16115,{"ext":187,"url":598,"hash":599,"mime":190,"name":600,"path":56,"size":601,"width":233,"height":602,"sizeInBytes":603},"\u002Fuploads\u002F3xl_rounded_frames_4dfe06dabd.png","3xl_rounded_frames_4dfe06dabd","3xl_rounded-frames.png",21.78,1062,21779,{"ext":187,"url":605,"hash":606,"mime":190,"name":607,"path":56,"size":608,"width":241,"height":609,"sizeInBytes":610},"\u002Fuploads\u002Fthumbnail_rounded_frames_4dfe06dabd.png","thumbnail_rounded_frames_4dfe06dabd","thumbnail_rounded-frames.png",1.78,135,1784,"rounded_frames_4dfe06dabd","\u002Fuploads\u002Frounded_frames_4dfe06dabd.png","2026-05-21T15:08:26.960Z",{"id":38,"documentId":39,"name":40,"slug":41,"createdAt":42,"updatedAt":43,"publishedAt":44},{"id":519,"documentId":520,"firstname":521,"lastname":522,"email":523,"createdAt":524,"updatedAt":525,"publishedAt":526},{"id":617,"documentId":618,"title":619,"alternativeTitle":620,"description":621,"content":622,"publish_at":550,"slug":817,"highlight":451,"curated":451,"createdAt":818,"updatedAt":819,"publishedAt":820,"locale":60,"image":821,"category":831,"author":832,"source":56},85,"j5wap19yzusk2aj0452e2leh","Miro – oder wie man Post-its digitalisiert …","Digitales Whiteboard für Online-Meetings","In den letzten Wochen sind viele von uns zu Profis im Umgang mit Online-Meetings geworden. Diejenigen, die es noch nicht sind, haben nun die Chance, mit dem Online-Whiteboard Miro Abhilfe zu schaffen und ihre kreativen Gedanken endlich wieder in Form von Post-its und Co. zu ordnen.",[623,627,631,635,639,643,698,707,711,715,719,723,784,793,797,801,805,809,813],{"type":124,"children":624},[625],{"text":626,"type":128},"Auf den ersten Blick erscheint Miro so vielfältig, dass es schwierig ist, die Möglichkeiten in wenigen Worten zu beschreiben. Am ehesten trifft dafür wohl die Bezeichnung «Google Docs für Meetings und Workshops» zu. Mit dem Online-Whiteboard können Ideen festgehalten, Konzepte entwickelt und Informationen im Team ausgetauscht werden. Dabei reichen die Anwendungsoptionen von einfachen Meetings bis hin zu umfangreichen Workshops – und das alles mit Echtzeit-Bearbeitung durch das gesamte Team. ",{"type":130,"level":131,"children":628},[629],{"text":630,"type":128},"Boards als Spielwiese für Teams",{"type":124,"children":632},[633],{"text":634,"type":128},"Das Grundgerüst von Miro sind die sogenannten Boards, auf denen die eigentliche Kollaboration stattfindet und die in einem übersichtlichen Dashboard verwaltet werden können. Ein Board – in anderen Worten eine riesige digitale Fläche – kann mit wenigen Klicks erstellt und danach nach eigenen Wünschen gestaltet oder auch verunstaltet werden. Damit letzteres nicht passiert, stellt Miro eine Vielzahl an Templates zur Verfügung, die bekannte Frameworks wie Kanban oder Kreativitätsmethoden wie Brainwriting abbilden. Wem das alles nicht genügt, kann auch eigene Templates definieren und diese mit dem Team teilen. ",{"type":130,"level":131,"children":636},[637],{"text":638,"type":128},"Ordnung durch Frames",{"type":124,"children":640},[641],{"text":642,"type":128},"Wer auf dem Board Ordnung schaffen möchte, kann die Fläche mit Frames unterteilen und so einzelne Themen oder Schwerpunkte voneinander abgrenzen. Frames bieten zudem den Vorteil, dass man sie in verschiedene Dateiformate wie JPG oder PDF exportieren kann.",{"type":140,"image":644,"children":696},{"name":645,"alternativeText":645,"url":646,"caption":56,"width":647,"height":648,"formats":649,"hash":693,"ext":651,"mime":466,"size":694,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":695,"updatedAt":695},"miro_frames.jpeg","https:\u002F\u002Fcontent.punktzwei.ch\u002Fuploads\u002Fmiro_frames_6edd380cb5.jpeg",1680,1047,{"lg":650,"md":658,"sm":665,"xl":672,"2xl":679,"thumbnail":686},{"ext":651,"url":652,"hash":653,"mime":466,"name":654,"path":56,"size":655,"width":193,"height":656,"sizeInBytes":657},".jpeg","\u002Fuploads\u002Flg_miro_frames_6edd380cb5.jpeg","lg_miro_frames_6edd380cb5","lg_miro_frames.jpeg",32.67,638,32667,{"ext":651,"url":659,"hash":660,"mime":466,"name":661,"path":56,"size":662,"width":201,"height":663,"sizeInBytes":664},"\u002Fuploads\u002Fmd_miro_frames_6edd380cb5.jpeg","md_miro_frames_6edd380cb5","md_miro_frames.jpeg",20.96,479,20961,{"ext":651,"url":666,"hash":667,"mime":466,"name":668,"path":56,"size":669,"width":209,"height":670,"sizeInBytes":671},"\u002Fuploads\u002Fsm_miro_frames_6edd380cb5.jpeg","sm_miro_frames_6edd380cb5","sm_miro_frames.jpeg",15.22,399,15217,{"ext":651,"url":673,"hash":674,"mime":466,"name":675,"path":56,"size":676,"width":217,"height":677,"sizeInBytes":678},"\u002Fuploads\u002Fxl_miro_frames_6edd380cb5.jpeg","xl_miro_frames_6edd380cb5","xl_miro_frames.jpeg",46.65,798,46647,{"ext":651,"url":680,"hash":681,"mime":466,"name":682,"path":56,"size":683,"width":225,"height":684,"sizeInBytes":685},"\u002Fuploads\u002F2xl_miro_frames_6edd380cb5.jpeg","2xl_miro_frames_6edd380cb5","2xl_miro_frames.jpeg",61.57,957,61569,{"ext":651,"url":687,"hash":688,"mime":466,"name":689,"path":56,"size":690,"width":241,"height":691,"sizeInBytes":692},"\u002Fuploads\u002Fthumbnail_miro_frames_6edd380cb5.jpeg","thumbnail_miro_frames_6edd380cb5","thumbnail_miro_frames.jpeg",2.77,152,2773,"miro_frames_6edd380cb5",66.52,"2026-05-27T23:49:18.272Z",[697],{"type":128,"text":156},{"type":124,"children":699},[700,701,705],{"type":128,"text":156},{"url":702,"type":162,"children":703},"\u002Fuploads\u002Fmiro_frames_6edd380cb5.jpeg",[704],{"text":156,"type":128},{"text":706,"type":128},"Mit Frames kann man einzelne Themen abgrenzen und strukturieren. Auf einem Board können dabei beliebig viele Frames und Templates platziert werden.",{"type":130,"level":131,"children":708},[709],{"text":710,"type":128},"Vollgepackte Werkzeugkiste",{"type":124,"children":712},[713],{"text":714,"type":128},"Die Benutzeroberfläche von Miro wirkt gut strukturiert und aufgeräumt. Trotzdem stehen zahlreiche Werkzeuge zur Verfügung, die intuitiv zu bedienen sind. Mit dem Textwerkzeug können Texte verfasst oder eingefügt werden. Ein Freihandwerkzeug schreit förmlich nach den kreativen Inputs von Teamkameraden. Ein Klassiker findet sich mit den sogenannten Sticky notes, die den Namen in diesem Fall auch verdient haben. Die Zettel lassen sich wie ihr analoges Pendant mit Informationen anreichern und anheften – mit dem Unterschied, dass die digitalen Post-its immer haften. Wer noch einen Schritt weitergehen möchte, kann komplexe Charts erstellen und mittels Tags weitere Strukturen schaffen. Auch Videos, Webseiten und PDFs lassen sich ohne Mühe einbetten.",{"type":130,"level":131,"children":716},[717],{"text":718,"type":128},"Tasks immer im Griff",{"type":124,"children":720},[721],{"text":722,"type":128},"Mit Cards können Aufgaben auf dem Board hinzugefügt, mit einem Datum versehen und dem entsprechenden Teammitglied zugewiesen werden. Das Arbeiten mit Cards bietet den Vorteil, dass diese wie Frames in einer detaillierten Navigation betrachtet und und vom jeweiligen Benutzer gefiltert werden können.",{"type":140,"image":724,"children":782},{"name":725,"alternativeText":725,"url":726,"caption":56,"width":727,"height":728,"formats":729,"hash":779,"ext":651,"mime":466,"size":780,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":781,"updatedAt":781},"miro_sticky_notes.jpeg","https:\u002F\u002Fcontent.punktzwei.ch\u002Fuploads\u002Fmiro_sticky_notes_90207ef47c.jpeg",2048,1103,{"lg":730,"md":737,"sm":744,"xl":751,"2xl":758,"3xl":765,"thumbnail":772},{"ext":651,"url":731,"hash":732,"mime":466,"name":733,"path":56,"size":734,"width":193,"height":735,"sizeInBytes":736},"\u002Fuploads\u002Flg_miro_sticky_notes_90207ef47c.jpeg","lg_miro_sticky_notes_90207ef47c","lg_miro_sticky_notes.jpeg",31.44,552,31437,{"ext":651,"url":738,"hash":739,"mime":466,"name":740,"path":56,"size":741,"width":201,"height":742,"sizeInBytes":743},"\u002Fuploads\u002Fmd_miro_sticky_notes_90207ef47c.jpeg","md_miro_sticky_notes_90207ef47c","md_miro_sticky_notes.jpeg",20.33,414,20332,{"ext":651,"url":745,"hash":746,"mime":466,"name":747,"path":56,"size":748,"width":209,"height":749,"sizeInBytes":750},"\u002Fuploads\u002Fsm_miro_sticky_notes_90207ef47c.jpeg","sm_miro_sticky_notes_90207ef47c","sm_miro_sticky_notes.jpeg",16.4,344,16396,{"ext":651,"url":752,"hash":753,"mime":466,"name":754,"path":56,"size":755,"width":217,"height":756,"sizeInBytes":757},"\u002Fuploads\u002Fxl_miro_sticky_notes_90207ef47c.jpeg","xl_miro_sticky_notes_90207ef47c","xl_miro_sticky_notes.jpeg",44.06,689,44057,{"ext":651,"url":759,"hash":760,"mime":466,"name":761,"path":56,"size":762,"width":225,"height":763,"sizeInBytes":764},"\u002Fuploads\u002F2xl_miro_sticky_notes_90207ef47c.jpeg","2xl_miro_sticky_notes_90207ef47c","2xl_miro_sticky_notes.jpeg",56.29,827,56292,{"ext":651,"url":766,"hash":767,"mime":466,"name":768,"path":56,"size":769,"width":233,"height":770,"sizeInBytes":771},"\u002Fuploads\u002F3xl_miro_sticky_notes_90207ef47c.jpeg","3xl_miro_sticky_notes_90207ef47c","3xl_miro_sticky_notes.jpeg",76.39,1034,76390,{"ext":651,"url":773,"hash":774,"mime":466,"name":775,"path":56,"size":776,"width":241,"height":777,"sizeInBytes":778},"\u002Fuploads\u002Fthumbnail_miro_sticky_notes_90207ef47c.jpeg","thumbnail_miro_sticky_notes_90207ef47c","thumbnail_miro_sticky_notes.jpeg",3.79,132,3785,"miro_sticky_notes_90207ef47c",79.54,"2026-05-27T23:50:00.013Z",[783],{"type":128,"text":156},{"type":124,"children":785},[786,787,791],{"type":128,"text":156},{"url":788,"type":162,"children":789},"\u002Fuploads\u002Fmiro_sticky_notes_90207ef47c.jpeg",[790],{"text":156,"type":128},{"text":792,"type":128},"Mit Sticky Notes kann man Informationen innerhalb von Frames und Elementen erfassen, gruppieren und bei Bedarf mit lustigen Emojis kommentieren.",{"type":130,"level":131,"children":794},[795],{"text":796,"type":128},"Kollaboration und Kooperation auf einem neuen Level ",{"type":124,"children":798},[799],{"text":800,"type":128},"Schon alleine die Ansicht des Boards ist faszinierend, wenn die verschiedenen Teammitglieder auf der Arbeitsfläche wie fleissige Bienen umherschwirren und das Board neue Formen annimmt. Neben dieser Echtzeit-Bearbeitung stehen einfache Kommentare, ein Text- sowie Video-Chat, Sreensharing und nicht zuletzt die Möglichkeit für Votings zur Verfügung. Damit sich die Teammitglieder nicht im Board verlieren und die Zeit vergessen, kann zudem ein Timer gesetzt werden. Natürlich kann ein Board auch über einen Link mit externen Kreisen geteilt werden.",{"type":130,"level":131,"children":802},[803],{"text":804,"type":128},"Tuning durch Integrationen und Apps ",{"type":124,"children":806},[807],{"text":808,"type":128},"Wer Tools wie Slack, Microsoft Teams oder ­Google Drive nutzt, kann im Marketplace von Miro eine Vielzahl an Apps aktivieren, um die verschiedenen Tools miteinander zu verbinden. Neben der Browserversion bietet Miro auch Desktop-Apps für MacOS und Windows sowie Apps für iOS und Android. ",{"type":130,"level":131,"children":810},[811],{"text":812,"type":128},"Kostenloser Einstieg ",{"type":124,"children":814},[815],{"text":816,"type":128},"In der kostenlosen Version bietet Miro insgesamt drei Boards für eine unlimitierte Userzahl und einen unbegrenzten Zeitraum. Für grössere Teams steht eine Team- sowie Business-Version für 8 bzw. 16 Dollar im Monat zur Verfügung. Das Tool und weitere Informationen finden sich auf ­miro.com.","miro-oder-wie-man-post-its-digitalisiert","2026-05-21T15:08:28.768Z","2026-05-30T15:32:33.385Z","2026-05-30T15:32:33.429Z",{"id":145,"documentId":822,"name":725,"alternativeText":56,"caption":56,"focalPoint":56,"width":727,"height":728,"formats":823,"hash":779,"ext":651,"mime":466,"size":780,"url":788,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":781,"updatedAt":781,"publishedAt":781},"vr7xlm95chlqcpbpe5htxs0f",{"lg":824,"md":825,"sm":826,"xl":827,"2xl":828,"3xl":829,"thumbnail":830},{"ext":651,"url":731,"hash":732,"mime":466,"name":733,"path":56,"size":734,"width":193,"height":735,"sizeInBytes":736},{"ext":651,"url":738,"hash":739,"mime":466,"name":740,"path":56,"size":741,"width":201,"height":742,"sizeInBytes":743},{"ext":651,"url":745,"hash":746,"mime":466,"name":747,"path":56,"size":748,"width":209,"height":749,"sizeInBytes":750},{"ext":651,"url":752,"hash":753,"mime":466,"name":754,"path":56,"size":755,"width":217,"height":756,"sizeInBytes":757},{"ext":651,"url":759,"hash":760,"mime":466,"name":761,"path":56,"size":762,"width":225,"height":763,"sizeInBytes":764},{"ext":651,"url":766,"hash":767,"mime":466,"name":768,"path":56,"size":769,"width":233,"height":770,"sizeInBytes":771},{"ext":651,"url":773,"hash":774,"mime":466,"name":775,"path":56,"size":776,"width":241,"height":777,"sizeInBytes":778},{"id":38,"documentId":39,"name":40,"slug":41,"createdAt":42,"updatedAt":43,"publishedAt":44},{"id":519,"documentId":520,"firstname":521,"lastname":522,"email":523,"createdAt":524,"updatedAt":525,"publishedAt":526},{"id":834,"documentId":835,"title":836,"alternativeTitle":837,"description":838,"content":839,"publish_at":981,"slug":982,"highlight":451,"curated":451,"createdAt":983,"updatedAt":984,"publishedAt":985,"locale":60,"image":986,"category":1046,"author":1047,"source":56},102,"ua76dkljr3lwhgox1sysiv2v","Ein Einstieg ins Prototyping mit Figma","Designs im Browser erstellen","Wer Google Docs nutzt, weiss die Vorteile der Kollaboration in Echtzeit und das Verwalten von Dateiversionen zu schätzen. Figma hat diese Features neben vielen anderen in ein Design-Tool verpackt.",[840,844,848,852,912,921,925,929,933,937,941,945,949,953,957,961,965,969,973,977],{"type":124,"children":841},[842],{"text":843,"type":128},"Wer kann sich noch an das Erstellen von Maquetten erinnern? Mit Wachs wurden Papierstreifen mit Text- und Grafikelementen auf den Satzspiegel geklebt bzw. montiert, um das künftige Layout vereinfacht darstellen zu können. Prototyping-Tools im Bereich des Designs verfolgen eine ähnliche Idee, natürlich ohne Wachs, dafür mit vielen interaktiven Features, welche die Arbeit effizienter machen.",{"type":130,"level":131,"children":845},[846],{"text":847,"type":128},"Figma – eine Browserlösung zur Kollaboration",{"type":124,"children":849},[850],{"text":851,"type":128},"Lange galt Sketch als das Tool für User Interface Design. Mittlerweile gibt es in diesem Bereich auch andere grosse Namen wie Adobe XD, Invision oder natürlich Figma, welches ich in diesem Artikel näher vorstellen möchte. Die erste Version von Figma wurde 2015 veröffentlicht. Das Tool besticht durch ein modernes cloudbasiertes User Interface und ermöglicht das ­parallele Bearbeiten im Team. Arbeiten mehrere Personen aktiv am Projekt, sehen alle Teammitglieder die Änderungen in Echtzeit. Durch zahlreiche Werkzeuge wie den Pen oder das Textwerkzeug lässt sich das Tool auch für komplexes Grafikdesign «entfremden».",{"type":140,"image":853,"children":910},{"name":854,"alternativeText":854,"url":855,"caption":56,"width":856,"height":857,"formats":858,"hash":907,"ext":187,"mime":190,"size":908,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":909,"updatedAt":909},"figma-startscreen.png","https:\u002F\u002Fcontent.punktzwei.ch\u002Fuploads\u002Ffigma_startscreen_470fa064d9.png",2500,1407,{"lg":859,"md":865,"sm":872,"xl":879,"2xl":886,"3xl":893,"thumbnail":900},{"ext":187,"url":860,"hash":861,"mime":190,"name":862,"path":56,"size":863,"width":193,"height":475,"sizeInBytes":864},"\u002Fuploads\u002Flg_figma_startscreen_470fa064d9.png","lg_figma_startscreen_470fa064d9","lg_figma-startscreen.png",270.62,270624,{"ext":187,"url":866,"hash":867,"mime":190,"name":868,"path":56,"size":869,"width":201,"height":870,"sizeInBytes":871},"\u002Fuploads\u002Fmd_figma_startscreen_470fa064d9.png","md_figma_startscreen_470fa064d9","md_figma-startscreen.png",160.25,432,160246,{"ext":187,"url":873,"hash":874,"mime":190,"name":875,"path":56,"size":876,"width":209,"height":877,"sizeInBytes":878},"\u002Fuploads\u002Fsm_figma_startscreen_470fa064d9.png","sm_figma_startscreen_470fa064d9","sm_figma-startscreen.png",115.87,360,115866,{"ext":187,"url":880,"hash":881,"mime":190,"name":882,"path":56,"size":883,"width":217,"height":884,"sizeInBytes":885},"\u002Fuploads\u002Fxl_figma_startscreen_470fa064d9.png","xl_figma_startscreen_470fa064d9","xl_figma-startscreen.png",388.12,720,388122,{"ext":187,"url":887,"hash":888,"mime":190,"name":889,"path":56,"size":890,"width":225,"height":891,"sizeInBytes":892},"\u002Fuploads\u002F2xl_figma_startscreen_470fa064d9.png","2xl_figma_startscreen_470fa064d9","2xl_figma-startscreen.png",577.64,864,577643,{"ext":187,"url":894,"hash":895,"mime":190,"name":896,"path":56,"size":897,"width":233,"height":898,"sizeInBytes":899},"\u002Fuploads\u002F3xl_figma_startscreen_470fa064d9.png","3xl_figma_startscreen_470fa064d9","3xl_figma-startscreen.png",839.12,1081,839119,{"ext":187,"url":901,"hash":902,"mime":190,"name":903,"path":56,"size":904,"width":241,"height":905,"sizeInBytes":906},"\u002Fuploads\u002Fthumbnail_figma_startscreen_470fa064d9.png","thumbnail_figma_startscreen_470fa064d9","thumbnail_figma-startscreen.png",25.09,138,25086,"figma_startscreen_470fa064d9",238.43,"2026-05-27T23:14:43.238Z",[911],{"type":128,"text":156},{"type":130,"children":913,"level":131},[914,915,919],{"type":128,"text":156},{"url":916,"type":162,"children":917},"\u002Fuploads\u002Ffigma_startscreen_470fa064d9.png",[918],{"text":156,"type":128},{"text":920,"type":128},"Aller Anfang ist leicht!",{"type":124,"children":922},[923],{"text":924,"type":128},"Wer bereits Erfahrungen mit Grafiktools gemacht hat, wird sich mit dem Einstieg in Figma nicht schwer tun. Auf der Seite figma.com kann man als Einzelanwender einen kostenlosen Account erstellen oder sich beispielsweise mit seinem Google-Account verifizieren. Die Oberfläche von Figma ist schlicht gehalten und bietet eine Übersicht über aktuelle Projekte und Teams. Eine wichtige Funktion von Figma ist das Erstellen von Teams, um Projekte kollaborativ bearbeiten zu können. Die kostenlose Version ist auf Teamgrössen bis maximal zwei Personen (Editors) und drei Projekte beschränkt. Teamkollegen können ganz einfach via E-Mail ins Team eingeladen werden. Innerhalb eines Teams können Projekte und Files erstellt werden.",{"type":130,"level":131,"children":926},[927],{"text":928,"type":128},"Frames, Ebenen und Komponenten",{"type":124,"children":930},[931],{"text":932,"type":128},"Wie jedes Grafikprogramm bietet auch Figma eine weisse, reine «Zeichenfläche», sobald man ein neues File erstellt hat. Figma unterscheidet zwischen Pages und Frames. Auf einer Seite können beliebig viele Frames erstellt werden. Für Frames gibt es vordefinierte Standardgrössen beispielsweise für Smartphones, Tablets oder verschiedene Desktops. Ein Frame definiert also quasi die Grenzen eines Screens und ist somit die Gestaltungsfläche für das Design.",{"type":124,"children":934},[935],{"text":936,"type":128},"Auf einem Frame können nun beliebig viele Elemente platziert bzw. erstellt werden. Es stehen Werkzeuge für vordefinierte geometrische Formen sowie Freihandwerkzeuge zur Verfügung. Wer Bézierkurven von Illustrator schätzen gelernt hat, findet dieses Werkzeug auch in Figma als Pen wieder. Alle Werkzeuge befinden sich im linken Bereich der Navigationsleiste.",{"type":124,"children":938},[939],{"text":940,"type":128},"Um Elemente zu ordnen, kann man diese gruppieren und individuell benennen. Zudem stellt Figma die Funktion der sogenannten Komponenten zur Verfügung. Komponenten dienen dazu, sich wiederholende Elemente wie zum Beispiel das Menu einer App zusammenzufassen, um sie im Dokument mehrfach verwenden zu können. Platziert man nun eine Komponente mehrmals und ändert die Hauptkomponente, werden alle abhängigen Elemente ebenfalls angepasst. Alle Komponenten sind im Panel Assets ersichtlich.",{"type":130,"level":131,"children":942},[943],{"text":944,"type":128},"Die Menu-Palette",{"type":124,"children":946},[947],{"text":948,"type":128},"Im rechten Bereich befindet sich ein Bedienfeld, welches alle wichtigen Optionen enthält. Das intelligente Menu passt sich anhand der selektierten Objekte an, so werden bei Texten beispielsweise zusätzlich Formatierungsoptionen eingeblendet. Neben Ausrichtungsoptionen, Effekten und Fülloptionen, welche für die jeweiligen Elemente definiert werden können, beinhaltet das Menu auch eine Export-Funktion, um Screens als Bilddateien zu exportieren.",{"type":130,"level":131,"children":950},[951],{"text":952,"type":128},"Ein Grid für Ordnung",{"type":124,"children":954},[955],{"text":956,"type":128},"Selektiert man einen Frame, kann im Menu-­Bedienfeld das sogenannte Layout Grid ­definiert werden. Es kann sowohl der Rasterabstand wie auch die Farbe individuell angepasst werden. Zusätzlich stehen Hilfslinien zur Verfügung, welche über das aufklappbare Menu im rechten oberen Bereich eingeblendet werden können. Das Prinzip der Hilfslinien sollte für alle selbsterklärend sein, welche bereits mit anderen bekannten Grafik- oder Layoutprogrammen gearbeitet haben.",{"type":130,"level":131,"children":958},[959],{"text":960,"type":128},"Dem Design Leben einhauchen",{"type":124,"children":962},[963],{"text":964,"type":128},"Ein Prototyp soll einer vereinfachten Darstellung des künftigen Designs entsprechen. Apps oder Webseiten sind nicht statisch und verfügen über scrollbare Fenster sowie Links zu anderen Seiten. Wie auch andere Tools bietet Figma diverse Funktionen, um einem Prototypen Interaktivität zu verleihen. Diese stehen in der Menu-Palette unter Prototype zur Verfügung.",{"type":124,"children":966},[967],{"text":968,"type":128},"Um beispielsweise zwei Frames miteinander zu verbinden, selektiert man das entsprechende Element, welches über den Link verfügen soll, klickt auf den sichtbaren Kreis und zieht mit gedrückter Maustaste die Verbindung zum gewünschten Ziel-Frame auf. Über den Play-Button im rechten Bereich der Menuleiste aktiviert man den Präsentationsmodus. Der Prototyp kann nun wie eine gewöhnliche Webseite oder eine App bedient und erkundet werden.",{"type":130,"level":131,"children":970},[971],{"text":972,"type":128},"Fazit",{"type":124,"children":974},[975],{"text":976,"type":128},"Figma bietet vor allem im Bereich der Kollaboration ein starkes Werkzeug. Durch die Browserlösung müssen Files nicht mehr heruntergeladen und später wieder geteilt werden. Die integrierte Funktion des interaktiven Prototypings macht den Export von Screens hinfällig und ermöglicht so das Arbeiten in einem einzigen Tool. Wer nicht im Browser arbeiten möchte, kann sich alterna­tiv die zur Verfügung stehenden Clients für Mac oder Windows herunterladen.",{"type":124,"children":978},[979],{"text":980,"type":128},"Für den Einstieg ins Prototyping bietet Figma die nötigen Werkzeuge und hält auch für versierte Benutzer einige tolle Funktionen bereit. Durch fortlaufende Updates wächst die Anzahl der Features zudem ­stetig weiter.","2020-05-26T22:00:00.000Z","ein-einstieg-ins-prototyping-mit-figma","2026-05-30T17:08:37.050Z","2026-05-30T17:09:24.004Z","2026-05-30T17:09:24.041Z",{"id":987,"documentId":988,"name":989,"alternativeText":56,"caption":56,"focalPoint":56,"width":990,"height":991,"formats":992,"hash":1042,"ext":187,"mime":190,"size":1043,"url":1044,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":1045,"updatedAt":1045,"publishedAt":1045},18,"s62skw897qj9txxrjcll170f","figma-prototyping.png",2110,1252,{"lg":993,"md":1000,"sm":1007,"xl":1014,"2xl":1021,"3xl":1028,"thumbnail":1035},{"ext":187,"url":994,"hash":995,"mime":190,"name":996,"path":56,"size":997,"width":193,"height":998,"sizeInBytes":999},"\u002Fuploads\u002Flg_figma_prototyping_31f8473aeb.png","lg_figma_prototyping_31f8473aeb","lg_figma-prototyping.png",20.56,608,20562,{"ext":187,"url":1001,"hash":1002,"mime":190,"name":1003,"path":56,"size":1004,"width":201,"height":1005,"sizeInBytes":1006},"\u002Fuploads\u002Fmd_figma_prototyping_31f8473aeb.png","md_figma_prototyping_31f8473aeb","md_figma-prototyping.png",14.63,456,14633,{"ext":187,"url":1008,"hash":1009,"mime":190,"name":1010,"path":56,"size":1011,"width":209,"height":1012,"sizeInBytes":1013},"\u002Fuploads\u002Fsm_figma_prototyping_31f8473aeb.png","sm_figma_prototyping_31f8473aeb","sm_figma-prototyping.png",12,380,11995,{"ext":187,"url":1015,"hash":1016,"mime":190,"name":1017,"path":56,"size":1018,"width":217,"height":1019,"sizeInBytes":1020},"\u002Fuploads\u002Fxl_figma_prototyping_31f8473aeb.png","xl_figma_prototyping_31f8473aeb","xl_figma-prototyping.png",26.39,760,26394,{"ext":187,"url":1022,"hash":1023,"mime":190,"name":1024,"path":56,"size":1025,"width":225,"height":1026,"sizeInBytes":1027},"\u002Fuploads\u002F2xl_figma_prototyping_31f8473aeb.png","2xl_figma_prototyping_31f8473aeb","2xl_figma-prototyping.png",33.72,911,33724,{"ext":187,"url":1029,"hash":1030,"mime":190,"name":1031,"path":56,"size":1032,"width":233,"height":1033,"sizeInBytes":1034},"\u002Fuploads\u002F3xl_figma_prototyping_31f8473aeb.png","3xl_figma_prototyping_31f8473aeb","3xl_figma-prototyping.png",45.95,1139,45945,{"ext":187,"url":1036,"hash":1037,"mime":190,"name":1038,"path":56,"size":1039,"width":241,"height":1040,"sizeInBytes":1041},"\u002Fuploads\u002Fthumbnail_figma_prototyping_31f8473aeb.png","thumbnail_figma_prototyping_31f8473aeb","thumbnail_figma-prototyping.png",3.99,145,3993,"figma_prototyping_31f8473aeb",8.99,"\u002Fuploads\u002Ffigma_prototyping_31f8473aeb.png","2026-05-21T14:50:16.817Z",{"id":6,"documentId":7,"name":8,"slug":9,"createdAt":10,"updatedAt":11,"publishedAt":12},{"id":519,"documentId":520,"firstname":521,"lastname":522,"email":523,"createdAt":524,"updatedAt":525,"publishedAt":526},{"id":210,"documentId":1049,"title":1050,"alternativeTitle":1051,"description":1052,"content":1053,"publish_at":1057,"slug":1058,"highlight":451,"curated":1059,"createdAt":1060,"updatedAt":1061,"publishedAt":1062,"locale":60,"image":1063,"category":1116,"author":1117,"source":1126},"yhu42nobglp9ku2d4p0nhmyu","Design-Systeme im Web","Die Grenzen im Webdesign ausloten","Das Web kennt im Gegensatz zum Papier keine starren Grenzen. Die unzähligen Endgeräte und Screen-Dimensionen sind für Gestalter eine Herausforderung, bieten aber im Vergleich zum Print-Design auch völlig neue Möglichkeiten. Stefan Huber beschreibt in seinem Artikel für den Publisher wie aus Komponenten gehaltvolle Layouts werden.",[1054],{"type":124,"children":1055},[1056],{"text":156,"type":128},"2019-09-15T22:00:00.000Z","die-grenzen-im-webdesign-ausloten",true,"2026-05-21T15:08:25.776Z","2026-05-30T16:35:09.812Z","2026-05-30T16:35:09.857Z",{"id":1064,"documentId":1065,"name":1066,"alternativeText":1066,"caption":1066,"focalPoint":56,"width":1067,"height":1067,"formats":1068,"hash":1111,"ext":187,"mime":190,"size":1112,"url":1113,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":1114,"updatedAt":1114,"publishedAt":1115},17,"fcri4bl5f0906f8ypsemza2z","design-systems-web.png",4388,{"lg":1069,"md":1075,"sm":1081,"xl":1087,"2xl":1093,"3xl":1099,"thumbnail":1105},{"ext":187,"url":1070,"hash":1071,"mime":190,"name":1072,"path":56,"size":1073,"width":193,"height":193,"sizeInBytes":1074},"\u002Fuploads\u002Flg_design_systems_web_aba854b44f.png","lg_design_systems_web_aba854b44f","lg_design-systems-web.png",40.77,40768,{"ext":187,"url":1076,"hash":1077,"mime":190,"name":1078,"path":56,"size":1079,"width":201,"height":201,"sizeInBytes":1080},"\u002Fuploads\u002Fmd_design_systems_web_aba854b44f.png","md_design_systems_web_aba854b44f","md_design-systems-web.png",28.49,28489,{"ext":187,"url":1082,"hash":1083,"mime":190,"name":1084,"path":56,"size":1085,"width":209,"height":209,"sizeInBytes":1086},"\u002Fuploads\u002Fsm_design_systems_web_aba854b44f.png","sm_design_systems_web_aba854b44f","sm_design-systems-web.png",22.71,22708,{"ext":187,"url":1088,"hash":1089,"mime":190,"name":1090,"path":56,"size":1091,"width":217,"height":217,"sizeInBytes":1092},"\u002Fuploads\u002Fxl_design_systems_web_aba854b44f.png","xl_design_systems_web_aba854b44f","xl_design-systems-web.png",50.81,50807,{"ext":187,"url":1094,"hash":1095,"mime":190,"name":1096,"path":56,"size":1097,"width":225,"height":225,"sizeInBytes":1098},"\u002Fuploads\u002F2xl_design_systems_web_aba854b44f.png","2xl_design_systems_web_aba854b44f","2xl_design-systems-web.png",65.04,65043,{"ext":187,"url":1100,"hash":1101,"mime":190,"name":1102,"path":56,"size":1103,"width":233,"height":233,"sizeInBytes":1104},"\u002Fuploads\u002F3xl_design_systems_web_aba854b44f.png","3xl_design_systems_web_aba854b44f","3xl_design-systems-web.png",86.38,86378,{"ext":187,"url":1106,"hash":1107,"mime":190,"name":1108,"path":56,"size":1109,"width":511,"height":511,"sizeInBytes":1110},"\u002Fuploads\u002Fthumbnail_design_systems_web_aba854b44f.png","thumbnail_design_systems_web_aba854b44f","thumbnail_design-systems-web.png",4.67,4665,"design_systems_web_aba854b44f",65.25,"\u002Fuploads\u002Fdesign_systems_web_aba854b44f.png","2026-05-21T14:50:16.547Z","2026-05-21T14:50:16.548Z",{"id":30,"documentId":31,"name":32,"slug":33,"createdAt":34,"updatedAt":35,"publishedAt":36},{"id":1118,"documentId":1119,"firstname":1120,"lastname":1121,"email":1122,"createdAt":1123,"updatedAt":1124,"publishedAt":1125},3,"asjgslbsmuys80l8fyk1a306","Benjamin","Schenk","benjamin.schenk@punktzwei.ch","2026-05-21T15:08:22.494Z","2026-05-21T15:08:32.078Z","2026-05-21T15:08:32.084Z",{"id":1127,"text":1128,"link":1129,"authorName":1130},21,"publisher.ch","https:\u002F\u002Fpublisher.ch\u002F2019\u002F09\u002F16\u002Fdesign-systeme-im-web\u002F","Stefan Huber",{"pagination":1132},{"page":131,"pageSize":6,"pageCount":131,"total":1133},11,{"data":1135},[1136],{"id":1137,"documentId":1138,"title":1139,"alternativeTitle":1140,"description":1141,"content":1142,"publish_at":1214,"slug":1215,"highlight":1059,"curated":451,"createdAt":1216,"updatedAt":1217,"publishedAt":1218,"locale":60,"image":1219,"category":1278,"author":1279,"source":56},68,"goqnz1ggmtk73kzyhd3w4hp9","Das Web mit bekannten Konzepten neu gedacht","Mit Jamstack zurück in die Zukunft der Webentwicklung","Moderne CMS bieten heute eine Vielzahl an Features, die den Nutzern das Verwalten von Inhalten erleichtert. Doch auch diese Systeme haben ihre Schattenseite: lange Ladezeiten, aufwändige Updates und nicht zuletzt das Risiko von Sicherheitslücken sorgen dafür, dass Jamstack-Anwendungen an Beliebtheit gewinnen. Doch was verbirgt sich hinter diesem Trend?",[1143,1147,1151,1155,1159,1170,1174,1178,1182,1186,1190,1194,1198,1202,1206,1210],{"type":130,"level":131,"children":1144},[1145],{"text":1146,"type":128},"Zurück zu den Wurzeln?",{"type":124,"children":1148},[1149],{"text":1150,"type":128},"Der Begriff Jamstack ist abgeleitet von den verschiedenen Technologien, die bei diesem Architekturstil zum Einsatz kommen. Dabei stehen die drei Anfangsbuchstaben für Javascript, API und Markup. Javascript sorgt dafür, dass Jamstack-Seiten nicht nur statische Gebilde sind, sondern mit individuellen Funktionen zu dynamischen Web Apps werden. Mittels API’s – also Schnittstellen, die vielfach als Restful API’s implementiert sind – werden verschiedene Services wie zum Beispiel eine Benutzerauthentifizierung integriert. Markup steht für Auszeichnung und sorgt dafür, dass die Inhalte auf Webseiten strukturiert sind und entsprechend dargestellt werden können. HTML ist die Sprache des Webs, auch in Jamstack findet diese Auszeichnungssprache natürlich ihre Verwendung. Der eigentliche Clou von Jamstack-Webseiten ist aber nicht die verwendete Technologie, sondern das Prinzip, dass im Grunde die gesamte Webseite im Vorfeld in einem Build-Prozess zusammengefügt wird. Die Webseite muss also beim Aufruf durch einen Benutzer nicht mehr vollständig gerendert werden, sondern kann unkompliziert als statische Webseite über Content Delivery Networks ausgeliefert werden. Jamstack nutzt also die Vorteile, die statische Webseiten bereits seit vielen Jahren aufweisen. Doch natürlich ist dieses Prinzip nicht einfach nur alter Wein in neuen Schläuchen. Es gibt weitere Eigenschaften, die Jamstack ausmachen. So zum Beispiel die Entkopplung von Frontend und Backend, die dazu führt, dass flexible Umgebungen entstehen, die dem Best-of-Breed-Ansatz folgen. Wichtig zu erwähnen ist, dass Jamstack keine spezifische Technologie ist, sondern eine Bewegung mit Best-Practices, die zum Schluss zu schnelleren Webseiten führen soll.",{"type":130,"level":131,"children":1152},[1153],{"text":1154,"type":128},"Was unterscheidet Jamstack von gängigen Seiten?",{"type":124,"children":1156},[1157],{"text":1158,"type":128},"Um diesen neuen Architekturstil besser zu verstehen, schauen wir uns das Prinzip an, wie moderne Websites bis anhin funktionieren. Diese sind im Gegensatz zu den Anfängen des Webs nicht mehr statisch, sondern dynamisch. Sobald ein Nutzer eine Webseite aufruft, wird zur Laufzeit eine Anfrage an einen Server gesendet. Inhalte werden in der Datenbank abgerufen, übermittelt und in eine HTML-Struktur gerendert, um diese zum Schluss im Browser darzustellen. Mittels Javascript lassen sich Inhalte auf einer Webseite beliebig abrufen und austauschen. Dieser Architekturstil – auch bekannt und dem Namen Lampstack – setzt auf Technologien wie Linux, Apache, MYSQL und PHP.",{"type":140,"image":1160,"children":1168},{"name":1161,"alternativeText":1161,"url":1162,"caption":56,"width":1163,"height":1164,"formats":56,"hash":1165,"ext":148,"mime":149,"size":1166,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":1167,"updatedAt":1167},"jamstack-vs-traditional-web.svg","https:\u002F\u002Fcontent.punktzwei.ch\u002Fuploads\u002Fjamstack_vs_traditional_web_0c0853b9eb.svg",731,584,"jamstack_vs_traditional_web_0c0853b9eb",28.62,"2026-05-27T22:58:08.048Z",[1169],{"type":128,"text":156},{"type":124,"children":1171},[1172],{"text":1173,"type":128},"Traditionelle Umgebungen sind in der Regel monolithisch aufgebaut und direkt mit der Datenbank verbunden, damit zur Laufzeit Inhalte abgefragt werden können. Im Gegensatz dazu stellt Jamstack die bereits gerenderten Inhalte über ein CDN zur Verfügung und dockt verschiedene Microservices an. (Quelle: jamstack.org)",{"type":124,"children":1175},[1176],{"text":1177,"type":128},"Doch worin liegt nun der Vorteil von Jamstack-Websites? Oder anders gesagt, was sind die Nachteile von Lampstack? Wenn Inhalte bei jedem Seitenaufruf oder auch bei bestimmten Benutzerinteraktionen abgefragt und gerendert werden müssen, können daraus lange Reaktionszeiten resultieren. Mittlerweile gibt es zahlreiche Caching-Ebenen, die als Zwischenspeicher fungieren und so Inhalte schneller zur Verfügung stellen. Allerdings erhöhen diese Caching-Ebenen auch die Komplexität und somit den Wartungsaufwand. Im Gegensatz dazu werden beim Jamstack-Prinzip die Inhalte im Vorfeld zusammengestellt (Build), so dass zum Schluss lediglich statische Seiten über spezielle Content-Delivery-Netzwerke ausgeliefert werden. Dieses Prinzip ermöglicht sehr performante Seiten, die aufgrund der reinen Lesezugriffe einfach skalierbar sind. Dies zeigen auch zahlreiche Beispiele auf der offiziellen Jamstack-Webseite jamstack.org.",{"type":130,"level":131,"children":1179},[1180],{"text":1181,"type":128},"Einfachheit und Sicherheit",{"type":124,"children":1183},[1184],{"text":1185,"type":128},"Klassische CMS wie WordPress bieten mittlerweile ein ganzes Ökosystem mit unzähligen Erweiterungen, mit welchen die eigene Webseite im Funktionsumfang erweitert werden kann. Bei diesen monolithischen Systemen sind Komponenten wie Datenbanken, das Frontend oder die bereits erwähnten Plug-ins eng miteinander verbunden und bilden eine Einheit. Für die Anwender ist diese Gegebenheit praktisch. Inhalte können einfach im Backend erfasst und freigeschalten werden. In Bezug auf Wartbarkeit und Sicherheit birgt diese Architektur aber ein mehr oder weniger grosses Risiko. Durch jedes installierte Plug-in kann Schadsoftware eingeschleust werden. Die zahlreichen Updates und Patches zeigen, dass dieses Risiko nicht gerade klein ist. Zugleich wird durch diese regelmässigen Updates der Wartungsaufwand weiter erhöht.",{"type":124,"children":1187},[1188],{"text":1189,"type":128},"Bei Jamstack gibt es keine Serverumgebung im eigentlichen Sinne, die zur Laufzeit Datenbankabfragen regelt und Inhalte rendert. Wie bereits erwähnt erfolgt grundsätzlich ein reiner Lesezugriff auf spezielle Content Delivery Networks, die Inhalte über verteilte Server zur Verfügung stellen. Doch was ist mit Plug-ins? Der Buchstabe A im Begriff Jamstack steht wie bereits beschrieben für API. Mittels Schnittstellen können Inhalte während dem Build-Prozess abgerufen oder Microservices angebunden werden. Diese Microservices können verschiedene Funktionen wie Benutzerauthentifizierung, Bezahlprozesse in einem Onlineshop oder erweiterte Suchfunktionen abdecken. Durch API’s wird das Web also quasi zu einem riesigen Ökosystem für Dienste, die einfach abgerufen bzw. genutzt werden können.",{"type":130,"level":131,"children":1191},[1192],{"text":1193,"type":128},"Die Vorteile von beiden Welten nutzen",{"type":124,"children":1195},[1196],{"text":1197,"type":128},"Jamstack-Webseiten können die Performance einer Webseite verbessern. Im Gegenzug kann sich aber auch der Aufwand für den vorgelagerten Build-Prozess bei umfangreichen Seiten stark erhöhen, was wiederum zu langen Build-Zeiten führt. Bei Webseiten wie zum Beispiel sozialen Netzwerken oder Foren, bei denen sich Inhalte rasch ändern, sind viele einzelne Builds notwendig, um die Inhalte aktuell zu halten. Um die Anzahl der Build-Vorgänge zu reduzieren, bietet sich ein Mittelweg an, bei welchem nur ein Teil der Seite vorgebaut und der Rest dynamisch beim Aufruf der Seite mittels API’s abgefragt wird. Natürlich gehen diese dynamischen Abfragen wieder zu Lasten der Performance. Auch lässt sich die klassische Jamstack-Architektur durch Headless-CMS ergänzen, welche Inhalte während des Build-Prozesses zur Verfügung stellen. Klassische CMS wie WordPress oder Drupal lassen sich mittlerweile nach dem Headless-Prinzip betreiben.",{"type":130,"level":131,"children":1199},[1200],{"text":1201,"type":128},"Lohnt sich der Umstieg?",{"type":124,"children":1203},[1204],{"text":1205,"type":128},"Selbstverständlich gibt es auch bei der Erstellung von Websites oder Content-First-Workflows kein Patentrezept. Schliesslich hängt die Wahl des entsprechenden Ansatzes oder der Technologie von verschiedenen Faktoren ab. Die schnelle Performance, Sicherheitsaspekte, niedrige Kosten und die mittlerweile hohe Zahl an Microservices im Netz sind aber Aspekte, die im Publishing-Bereich klar für Jamstack sprechen. Ein Umstieg muss auch nicht immer zwingend bedeuten, dass alle Elemente einer bestehenden Umgebung auf einen Schlag ersetzt werden müssen. CMS wie WordPress lassen sich wie bereits erwähnt zu einem Headless CMS umbauen. So kann zum Beispiel die bestehende Datenbank genutzt und an ein neu entwickeltes Frontend angedockt werden. Bestehende Funktionalitäten können schrittweise durch eigene oder fremde Microservices ersetzt und bei Bedarf erweitert werden.",{"type":130,"level":131,"children":1207},[1208],{"text":1209,"type":128},"Das Buch zur Bewegung",{"type":124,"children":1211},[1212],{"text":1213,"type":128},"Wer mehr über Jamstack erfahren möchte, kann sich das Jamstack-Buch auf netlify herunterladen. Das Buch, welches auch als Audio-Datei erhältlich ist, erklärt die Grundsätze von Jamstack und die zugrundeliegenden Technologien.","2023-05-29T22:00:00.000Z","mit-jamstack-zurueck-in-die-zukunft-der-webentwicklung","2026-05-21T15:08:24.799Z","2026-05-30T15:03:29.337Z","2026-05-30T15:03:29.371Z",{"id":194,"documentId":1220,"name":1221,"alternativeText":1221,"caption":1221,"focalPoint":56,"width":1222,"height":1223,"formats":1224,"hash":1274,"ext":463,"mime":466,"size":1275,"url":1276,"previewUrl":56,"provider":151,"provider_metadata":56,"createdAt":1277,"updatedAt":1277,"publishedAt":1277},"j6h7a7708g43vhf8lehej9ho","holly-stratton-Acn1Y0sb4QU-unsplash.jpg",2736,1826,{"lg":1225,"md":1232,"sm":1239,"xl":1246,"2xl":1253,"3xl":1260,"thumbnail":1267},{"ext":463,"url":1226,"hash":1227,"mime":466,"name":1228,"path":56,"size":1229,"width":193,"height":1230,"sizeInBytes":1231},"\u002Fuploads\u002Flg_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d.jpg","lg_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d","lg_holly-stratton-Acn1Y0sb4QU-unsplash.jpg",26.12,683,26115,{"ext":463,"url":1233,"hash":1234,"mime":466,"name":1235,"path":56,"size":1236,"width":201,"height":1237,"sizeInBytes":1238},"\u002Fuploads\u002Fmd_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d.jpg","md_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d","md_holly-stratton-Acn1Y0sb4QU-unsplash.jpg",15.18,513,15175,{"ext":463,"url":1240,"hash":1241,"mime":466,"name":1242,"path":56,"size":1243,"width":209,"height":1244,"sizeInBytes":1245},"\u002Fuploads\u002Fsm_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d.jpg","sm_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d","sm_holly-stratton-Acn1Y0sb4QU-unsplash.jpg",11.17,427,11169,{"ext":463,"url":1247,"hash":1248,"mime":466,"name":1249,"path":56,"size":1250,"width":217,"height":1251,"sizeInBytes":1252},"\u002Fuploads\u002Fxl_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d.jpg","xl_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d","xl_holly-stratton-Acn1Y0sb4QU-unsplash.jpg",43.32,854,43318,{"ext":463,"url":1254,"hash":1255,"mime":466,"name":1256,"path":56,"size":1257,"width":225,"height":1258,"sizeInBytes":1259},"\u002Fuploads\u002F2xl_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d.jpg","2xl_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d","2xl_holly-stratton-Acn1Y0sb4QU-unsplash.jpg",68.88,1025,68881,{"ext":463,"url":1261,"hash":1262,"mime":466,"name":1263,"path":56,"size":1264,"width":233,"height":1265,"sizeInBytes":1266},"\u002Fuploads\u002F3xl_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d.jpg","3xl_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d","3xl_holly-stratton-Acn1Y0sb4QU-unsplash.jpg",121.53,1281,121528,{"ext":463,"url":1268,"hash":1269,"mime":466,"name":1270,"path":56,"size":1271,"width":1272,"height":511,"sizeInBytes":1273},"\u002Fuploads\u002Fthumbnail_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d.jpg","thumbnail_holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d","thumbnail_holly-stratton-Acn1Y0sb4QU-unsplash.jpg",2.58,234,2581,"holly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d",281.45,"\u002Fuploads\u002Fholly_stratton_Acn1_Y0sb4_QU_unsplash_dcc31f251d.jpg","2026-05-21T15:08:24.773Z",{"id":30,"documentId":31,"name":32,"slug":33,"createdAt":34,"updatedAt":35,"publishedAt":36},{"id":519,"documentId":520,"firstname":521,"lastname":522,"email":523,"createdAt":524,"updatedAt":525,"publishedAt":526}]