Florian Künstler - Kleiner Finger Schwur
Für meine beste Freundin Tanja😘
Thomas Seider
Mattis Brodersen - Letst Glees
Wir würden gerne mehr Mattis Brodersen also regionale Musik von der Insel hören bei euch. Lets Glees oder Junge auf Friesisch wären doch total gut geeignet für euer Programm
Die neue Webseite des Inselradio Föhr entsteht Schritt für Schritt. Hier zeigen wir, welche Phasen bereits abgeschlossen sind, woran wir aktuell arbeiten und welche Aufgaben noch vor uns liegen.
Ziele, Anforderungen und erste Überlegungen für die neue Webseite werden zusammengetragen.
Die Entscheidung für einen vollständigen Neuaufbau ist gefallen.
Farben, Schriften, Abstände und wiederverwendbare Bausteine erhalten eine gemeinsame gestalterische Grundlage.
Die ersten Farben, Karten, Hero-Bereiche und Schaltflächen stehen bereits.
Aus dem Designsystem entstehen wiederverwendbare Elemente für Nachrichten, Podcasts, Angebote und Landingpages.
Neue Komponenten werden direkt für den Einsatz in Elementor vorbereitet.
Die neue Struktur wird auf Leistung, Suchmaschinen, Mobilgeräte und eine möglichst einfache Bedienung optimiert.
Die technische Optimierung wächst parallel mit jeder neuen Seite.
Die neue Webseite ist bereits veröffentlicht. Im laufenden Betrieb überprüfen wir Funktionen, Darstellung und Ladezeiten und nehmen kontinuierlich weitere Verbesserungen vor.
Die Webseite ist live. Weitere Tests und Optimierungen erfolgen direkt im laufenden Betrieb.
Die bisherige Webseite des Inselradio Föhr hat uns viele Jahre zuverlässig begleitet. Mit ihr konnten wir Nachrichten veröffentlichen, Veranstaltungen ankündigen und unser Radioprogramm präsentieren. Doch das Inselradio hat sich in den vergangenen Jahren stetig weiterentwickelt – und mit ihm auch die Anforderungen an unsere Internetseite.
Heute gehören weit mehr dazu als klassische Nachrichten. Unsere eigene App, Podcasts, Liveübertragungen von Veranstaltungen, der KüstenMonitor, digitale Werbemöglichkeiten, Coupons, Bildergalerien und viele weitere Angebote sind nach und nach entstanden. Dadurch wurde die bestehende Webseite immer umfangreicher und stieß sowohl technisch als auch gestalterisch zunehmend an ihre Grenzen.
Anstatt einzelne Bereiche immer wieder anzupassen, haben wir uns bewusst für einen kompletten Neuanfang entschieden. Unser Ziel ist eine moderne, schnelle und übersichtliche Plattform, die sowohl auf dem Smartphone als auch am Computer überzeugt. Gleichzeitig entwickeln wir im Hintergrund ein eigenes Designsystem, mit dem zukünftige Inhalte und Funktionen einfacher erweitert werden können.
Uns war von Anfang an wichtig, diesen Weg nicht hinter verschlossenen Türen zu gehen. Deshalb möchten wir euch an der Entwicklung teilhaben lassen, Einblicke in unsere Ideen geben und zeigen, wie aus einer ersten Skizze Schritt für Schritt eine neue Webseite entsteht.
Dieses Projekttagebuch begleitet uns von der ersten Idee bis zum fertigen Start der neuen Webseite. Wir freuen uns, wenn ihr uns auf diesem Weg begleite
Mit der neuen Webseite möchten wir mehr schaffen als nur ein frisches Erscheinungsbild. Unser Ziel ist eine moderne Plattform, die Informationen schneller zugänglich macht, Inhalte übersichtlich präsentiert und das Inselradio Föhr für die kommenden Jahre technisch zukunftssicher aufstellt.
Im Mittelpunkt stehen dabei unsere Hörerinnen und Hörer, Leserinnen und Leser, Urlaubsgäste, Insulaner sowie unsere Werbepartner. Jeder soll die gesuchten Informationen schnell und unkompliziert finden – egal ob auf dem Smartphone, Tablet oder am Computer.
Dabei verfolgen wir mehrere wichtige Ziele:
Die neue Webseite soll nicht nur moderner aussehen – sie soll sich auch moderner anfühlen. Sie soll schneller, übersichtlicher und intuitiver sein und gleichzeitig genügend Freiraum bieten, um gemeinsam mit dem Inselradio Föhr weiterzuwachsen.
Unser Anspruch ist eine Webseite, die Informationen, Unterhaltung und Service auf der Insel auf einer zentralen Plattform vereint – heute und in Zukunft.
Nicht jedes Projekt beginnt mit gezeichneten Skizzen oder fertigen Layouts. Auch bei der neuen Webseite des Inselradio Föhr entstanden viele Ideen zunächst in Gesprächen, Notizen und direkt während der Entwicklung am Computer.
Schon früh war klar, welche Richtung die neue Webseite einschlagen sollte: moderner, übersichtlicher und konsequent auf die Bedürfnisse unserer Hörerinnen und Hörer, Leserinnen und Leser sowie unserer Werbepartner ausgerichtet. Viele Entscheidungen wurden dabei Schritt für Schritt getroffen und immer wieder hinterfragt, verbessert und weiterentwickelt.
Mit jeder neuen Komponente, jeder Landingpage und jeder Idee nahm das Gesamtbild mehr Form an. Aus einzelnen Gedanken entstand nach und nach ein durchgängiges Designsystem, das heute die Grundlage für die gesamte neue Webseite bildet.
Eine moderne Webseite besteht längst nicht mehr aus einzelnen Seiten, die unabhängig voneinander gestaltet werden. Stattdessen entsteht im Hintergrund ein sogenanntes Designsystem – eine Sammlung von wiederverwendbaren Bausteinen, die das Erscheinungsbild der gesamten Webseite festlegen.
Doch was bedeutet das eigentlich?
Man kann sich ein Designsystem wie einen großen Baukasten vorstellen. Darin befinden sich alle wichtigen Elemente, die auf der Webseite immer wieder verwendet werden: Überschriften, Schaltflächen, Informationsboxen, Bildergalerien, Karten, Farben, Abstände und viele weitere Komponenten. Jeder dieser Bausteine wird nur einmal entwickelt und kann anschließend beliebig oft eingesetzt werden.
Der große Vorteil: Alle Bereiche der neuen Inselradio-Föhr-Webseite sehen dadurch einheitlich aus und lassen sich wesentlich einfacher erweitern. Neue Seiten, Funktionen oder Angebote können künftig schneller umgesetzt werden, ohne dass jedes Mal alles neu gestaltet werden muss.
Auch für unsere Besucher bringt das viele Vorteile. Inhalte werden übersichtlicher dargestellt, die Navigation wirkt vertrauter und die gesamte Webseite fühlt sich an wie aus einem Guss – unabhängig davon, ob ihr Nachrichten lest, einen Podcast hört, Veranstaltungen entdeckt oder unsere Serviceangebote nutzt.
Mit dem eigenen Designsystem schaffen wir die technische und gestalterische Grundlage für die Zukunft des Inselradio Föhr. Es sorgt dafür, dass sich unsere Webseite kontinuierlich weiterentwickeln kann, ohne ihre klare Struktur und ihren Wiedererkennungswert zu verlieren.
Kurz gesagt: Wir bauen nicht nur eine neue Webseite – wir entwickeln ein Fundament, auf dem das Inselradio Föhr auch in den kommenden Jahren weiter wachsen kann.
Jede Reise beginnt mit einem ersten Schritt. Bei der Entwicklung unserer neuen Webseite war dieser Schritt der Hero Horizon – die erste Komponente unseres eigenen Designsystems.
Doch was verbirgt sich eigentlich hinter diesem Namen?
In der Webentwicklung bezeichnet man den großen Bereich ganz oben auf einer Webseite als Hero-Bereich. Er ist das Erste, was Besucher sehen, wenn sie eine Seite öffnen. Innerhalb weniger Sekunden entscheidet sich hier, ob man neugierig wird und weiterscrollt.
Deshalb ist dieser Bereich besonders wichtig. Er soll Aufmerksamkeit wecken, Orientierung geben und gleichzeitig das Gefühl vermitteln, auf der richtigen Seite angekommen zu sein.
Der Horizont gehört zu den eindrucksvollsten Bildern, die unsere Insel prägen. Dort, wo Himmel und Meer scheinbar miteinander verschmelzen, beginnt für viele das typische Föhr-Gefühl: Weite, Ruhe und Freiheit.
Genau dieses Gefühl wollten wir in die Gestaltung unserer neuen Webseite übertragen. Der Hero Horizon soll Besucherinnen und Besucher willkommen heißen – so offen und einladend wie der Blick über die Nordsee.
Wellen stehen für Bewegung. Sie verändern sich ständig und bleiben doch unverwechselbar. Genau wie das Inselradio Föhr entwickelt sich auch die Webseite kontinuierlich weiter.
Die sanften Wellen im Hintergrund sind deshalb mehr als nur ein Gestaltungselement. Sie verbinden das Design mit der Insel, dem Meer und unserem täglichen Programm. Gleichzeitig verleihen sie der Seite Lebendigkeit, ohne von den eigentlichen Inhalten abzulenken.
Mit dem neuen Design wollten wir bewusst einen modernen Weg einschlagen. Klare Formen, weiche Farben und halbtransparente Flächen sorgen für eine ruhige und hochwertige Optik. Inspiriert wurde dieses Erscheinungsbild vom sogenannten Glassmorphism, einem modernen Designstil mit transparenten Flächen und weichen Lichtreflexen.
Da unsere Webseite eng mit Föhr, der Nordsee und dem maritimen Lebensgefühl verbunden ist, entstand daraus unser eigener Stil: Glass Ocean.
Er verbindet die Klarheit moderner Benutzeroberflächen mit den Farben und der Atmosphäre des Meeres. Das Ergebnis ist ein Design, das zeitgemäß wirkt und gleichzeitig den Charakter unserer Insel widerserspiegelt.
Der Hero Horizon ist nicht einfach nur der obere Bereich einer Webseite. Er bildet den gestalterischen Ausgangspunkt unseres gesamten Designsystems. Farben, Abstände, Animationen und viele weitere Komponenten orientieren sich an den Ideen, die hier entstanden sind.
So wurde aus einer einzelnen Komponente Schritt für Schritt die Grundlage für die gesamte neue Inselradio-Föhr-Webseite.
Und genau deshalb hat der Hero Horizon für uns einen besonderen Stellenwert: Er markiert den Beginn einer Reise, die noch lange nicht zu Ende ist.
14.07.26
Zu einer Insel wie Föhr gehören die Gezeiten einfach dazu. Ob Spaziergang im Watt, Schiffsverkehr oder der perfekte Tag am Strand – Ebbe und Flut bestimmen den Rhythmus des Insellebens.
Deshalb war für uns früh klar, dass der Gezeitenkalender auf der neuen Webseite einen besonderen Platz bekommen soll.
Doch anstatt lediglich eine einfache Tabelle mit den Zeiten anzuzeigen, entwickeln wir den Gezeitenbereich komplett neu. Unser Ziel ist eine moderne, übersichtliche und mobil optimierte Darstellung, die Besucherinnen und Besucher schnell und intuitiv nutzen können.
Dabei legen wir besonderen Wert auf eine ansprechende Gestaltung. Farben, Symbole und Animationen orientieren sich am maritimen Charakter unserer neuen Webseite und fügen sich nahtlos in das Glass Ocean Designsystem ein.
Auch technisch hat sich einiges verändert. Der neue Gezeitenkalender basiert auf einer eigenen Datenanbindung und wurde speziell für die Anforderungen des Inselradio Föhr entwickelt. Dadurch lassen sich die Informationen flexibel darstellen und künftig um weitere Funktionen erweitern.
Geplant sind unter anderem:
Der Gezeitenkalender zeigt beispielhaft, welchen Weg wir mit der neuen Webseite einschlagen möchten: bewährte Inhalte erhalten – und sie gleichzeitig technisch und gestalterisch auf ein neues Niveau bringen.
Auch dieses Modul wird kontinuierlich weiterentwickelt und ist ein wichtiger Baustein unseres eigenen Designsystems.
Aktuelle Hoch- und Niedrigwasserzeiten für Wyk auf Föhr.
20.07.26
Heute stand die Weiterentwicklung unseres HTML5-Audio-Players für das Inselradio Föhr im Mittelpunkt. Ziel war es, den Player nicht nur technisch zu verbessern, sondern ihm ein eigenständiges Erscheinungsbild zu verleihen, das perfekt zur maritimen Identität des Senders passt.
Im Fokus stand dabei die komplette Neugestaltung des Playbuttons. Die bisherige gelbe Trägerfläche wurde verworfen und durch einen modernen Glas-Button im „Glass Ocean“-Stil ersetzt. Gemeinsam haben wir verschiedene Varianten getestet, die Größe des Buttons optimiert und das SVG-Play-Symbol neu positioniert, damit es optisch exakt im Zentrum sitzt.
Ein weiterer Entwicklungsschritt war die Gestaltung der Wasseranimation. Anstelle eines klassischen Pulsierens entstehen künftig feine Wellen, die sich vom Playbutton aus über die gesamte Playerfläche ausbreiten – wie ein Wassertropfen auf einer ruhigen Meeresoberfläche. Dadurch wirkt der Player lebendiger, ohne von den eigentlichen Inhalten abzulenken.
Auch die Glasoptik wurde weiter verfeinert. Lichtreflexe, Schatten und Transparenzen sorgen für einen hochwertigen, modernen Eindruck, während gleichzeitig auf eine gute Darstellung auf Smartphones und Tablets geachtet wurde. Gerade die mobile Ansicht spielte heute eine wichtige Rolle, sodass der Button und seine Animationen auch auf kleineren Displays harmonisch wirken.
Im Laufe des Tages entstand die Idee, den Audio-Player nicht mehr nur als Bedienelement zu betrachten, sondern als festen Bestandteil des künftigen Inselradio-Föhr-Designsystems. Unter dem Arbeitstitel „IRF Glass Ocean Player“ soll daraus ein unverwechselbares Gestaltungselement entstehen, das sich später auch für Podcasts, Livestreams und weitere Audioangebote wiederverwenden lässt.
Mit jedem Entwicklungsschritt wird deutlicher, dass hier nicht einfach ein weiterer Audio-Player entsteht, sondern ein individuelles Design, das den Charakter des Inselradio Föhr widerspiegelt und sich deutlich von herkömmlichen Standardlösungen abhebt.
24.07.26
Die letzten Tage stand die optische Weiterentwicklung der Website des Inselradio Föhr im Mittelpunkt. Nach einigen Anpassungen an den neuen IRF-Komponenten trat zunächst ein Fehler in der zentralen CSS-Datei auf. Ursache war ein fehlerhaft aufgebauter @media-Block, der dazu führte, dass ein großer Teil der Styles nicht mehr geladen wurde. Nach der Korrektur der Syntax und einer Regeneration der Elementor-CSS konnte die Website wieder vollständig hergestellt werden.
Im Anschluss wurde die Gestaltung des Footer-Players in Angriff genommen. Ziel war es, den bisherigen Pro.Radio-Player farblich an das bereits entwickelte IRF Glass Ocean Design System anzupassen. Anstatt Änderungen direkt im Plugin vorzunehmen, wurde eine updatefähige Lösung entwickelt, bei der sämtliche Anpassungen ausschließlich über die eigene irf-components.css erfolgen.
Der Player verwendet bereits CSS-Variablen für seine Farbdefinitionen. Diese wurden durch die Farben des IRF-Designsystems ersetzt. Dunkle Meeresblautöne bilden nun den Hintergrund, während Türkis und Helltürkis für Akzente, Fortschrittsleisten und interaktive Elemente eingesetzt werden. Gelb bleibt als gezielte Highlightfarbe erhalten. Dadurch fügt sich die Playbar nun deutlich harmonischer in das Gesamtbild der Website ein.
Außerdem wurde beschlossen, den Footer-Player in den kommenden Arbeitsschritten vollständig zu einem eigenen IRF Player 1.0 weiterzuentwickeln. Geplant sind unter anderem eine moderne Glasoptik, überarbeitete Bedienelemente, eine hochwertigere Fortschrittsanzeige sowie eine durchgängige Designsprache, die sich an Hero-Bereich, QuickNav und den übrigen IRF-Komponenten orientiert.
Mit den heutigen Arbeiten wurde ein weiterer wichtiger Schritt auf dem Weg zu einem eigenständigen und professionellen Erscheinungsbild des Inselradio Föhr erreicht. Das ursprüngliche Theme dient inzwischen hauptsächlich als technische Grundlage, während das sichtbare Design zunehmend durch eigene, wiederverwendbare IRF-Komponenten geprägt wird. Dadurch entsteht Schritt für Schritt ein konsistentes und unverwechselbares Designsystem für die gesamte Plattform.
25. Juli 2026
Bei der Entwicklung unserer neuen Internetseite findet ein großer Teil der Arbeit im Hintergrund statt. Viele dieser Veränderungen sind für Besucher zunächst kaum sichtbar – bilden aber das technische Fundament dafür, dass die neue Seite später zuverlässig, übersichtlich und einheitlich funktioniert.
Am 25. Juli haben wir deshalb weniger an einzelnen sichtbaren Seiten gearbeitet, sondern vor allem die Struktur unseres IRF Glass Ocean Design Systems weiterentwickelt und aufgeräumt.
Unser Designsystem besteht inzwischen aus zahlreichen wiederverwendbaren Bausteinen. Dazu gehören unter anderem verschiedene Hero-Bereiche, Karten, Buttons, Navigationselemente, Audioplayer und Informationsmodule.
Damit daraus keine unübersichtliche Sammlung einzelner Dateien entsteht, haben wir die Verzeichnisstruktur neu geordnet. Die Komponenten sind nun nach ihren jeweiligen Aufgaben aufgeteilt – beispielsweise in:
Diese Struktur erleichtert uns die weitere Entwicklung und sorgt dafür, dass neue Komponenten später schneller gefunden, erweitert und auf unterschiedlichen Seiten eingesetzt werden können.
Bisher befanden sich viele Gestaltungsregeln gemeinsam in einer zentralen Datei. Das funktioniert zu Beginn eines Projekts gut, wird mit zunehmendem Umfang jedoch schnell unübersichtlich.
Deshalb wurde das Stylesheet in einzelne Module aufgeteilt. Der Hero-Bereich besitzt nun beispielsweise eigene Dateien, ebenso die Buttons, Karten, Animationen und die Schnellnavigation.
Die zentrale Datei übernimmt künftig vor allem die Aufgabe, diese einzelnen Module zusammenzuführen. Dadurch können Änderungen gezielter vorgenommen werden, ohne versehentlich andere Bereiche der Internetseite zu beeinflussen.
Farben, Abstände, Rundungen, Schatten und weitere grundlegende Designwerte werden nun zentral verwaltet. So müssen beispielsweise das typische Inselradio-Blau, Türkis oder Gelb nicht in jeder Komponente erneut definiert werden.
Das sorgt nicht nur für ein einheitliches Erscheinungsbild. Es erleichtert auch spätere Anpassungen: Wird eine zentrale Vorgabe geändert, können sämtliche darauf aufbauenden Komponenten automatisch davon profitieren.
Auch die Verbindung zwischen dem Designsystem und unserer WordPress-Installation wurde angepasst.
Die zentralen CSS-Dateien werden nun über das Child Theme eingebunden. Zusätzlich wird bei Änderungen automatisch eine neue Dateiversion verwendet. Dadurch sollen Browser und Zwischenspeicher schneller erkennen, dass aktualisierte Stylesheets geladen werden müssen.
Gerade während der Entwicklung ist das wichtig, weil ältere zwischengespeicherte Dateien sonst den Eindruck erwecken können, eine Änderung sei nicht übernommen worden.
Damit wir bei der zunehmenden Zahl an Dateien und Komponenten nicht den Überblick verlieren, ist außerdem ein eigenes Developer Dashboard entstanden.
Dort werden künftig unter anderem dokumentiert:
Das Dashboard ergänzt unser Designbook. Während das Designbook die Gestaltung und Verwendung der einzelnen Komponenten erklärt, zeigt das Projektstatus-Dashboard den aktuellen Entwicklungsstand des gesamten Systems.
Parallel dazu wurde die grundsätzliche Menüstruktur der kommenden Internetseite festgelegt.
Zu den geplanten Hauptbereichen gehören unter anderem:
Zusätzlich sollen der Radioplayer, ein Pop-up-Player und ein Off-Canvas-Menü in den neuen Header integriert werden.
Damit ist die Grundlage für den nächsten größeren Entwicklungsschritt geschaffen.
Als Nächstes entsteht der zentrale Header der neuen Internetseite. Er soll nicht nur die Navigation enthalten, sondern auch die verschiedenen Radiofunktionen sinnvoll zusammenführen.
Geplant sind eine klare Desktop-Navigation, eine responsive Darstellung für Tablets und Smartphones, ein Hamburger-Menü sowie die Einbindung des Players und weiterer Bedienelemente.
Damit wird erstmals ein grundlegender Layout-Baustein entstehen, der später auf nahezu allen Seiten der neuen Inselradio-Webseite eingesetzt werden kann.
Auch wenn viele der heutigen Veränderungen im Hintergrund stattgefunden haben, war dieser Arbeitsschritt besonders wichtig: Aus einzelnen Gestaltungselementen wird zunehmend ein strukturiertes, dokumentiertes und langfristig erweiterbares System.
Inselradio Föhr
Aktuelle Inselnews, Podcasts, Veranstaltungen und der passende Musikmix für deinen Tag – direkt von Föhr.
Heute auf Föhr
Entdecke aktuelle Nachrichten, Geschichten und Stimmen von der Insel.
Jetzt entdeckenFlorian Künstler - Kleiner Finger Schwur
Für meine beste Freundin Tanja😘
Thomas Seider
Mattis Brodersen - Letst Glees
Wir würden gerne mehr Mattis Brodersen also regionale Musik von der Insel hören bei euch. Lets Glees oder Junge auf Friesisch wären doch total gut geeignet für euer Programm
