Komponenten

Beliebt von Jung bis Alt: der Adventskalender. Hier in einer digitalen Version mit Tageskärtchen nach Zufallsprinzip und spannenden Überraschungen hinter den Türchen.

Vertikal aufklappbare Akkordeons können viel Inhalt übersichtlicher gestalten. Das sog. "Chevron-Down" zeigt dabei den Aggregatszustand des Akkordeons an. Oft wird auch das erste Akkordeon bereits aufgeklappt, um dem Surfer den Mechanismus optisch zu erklären.

Hier finden Sie eine Übersicht über unsere Dienstleistungen, inklusive Zeitaufwand und Preisberechnung. Klicken Sie einfach auf "Angebot generieren", um die detaillierten Positionen inklusive Beschreibungstext, Summe und Mehrwertsteuer zu sehen.

In längeren Artikeln kann man eine zusätzliche Navigation am Seitenrand einbauen. Diese ermöglicht es, direkt zu bestimmten Abschnitten im Text zu springen. Die Navigation ist nur neben dem Hauptinhalt zu sehen und verhält sich beim Scrollen besonders: Sie bewegt sich zunächst mit dem Text mit und bleibt dann ab einem bestimmten Punkt oben am Bildschirm fixiert.

Das World Wide Web Consortium (W3C) hat die Web Accessibility Initiative (WAI) ins Leben gerufen, um die Barrierefreiheit von Websites und Software zu erhöhen. Die WAI erarbeitet Richtlinien und Standards, um sicherzustellen, dass alle Menschen, unabhängig von ihren Fähigkeiten, Zugang zu Informationen und Funktionen im Web haben.

Bento Design erinnert an Japans Jausenboxen, ist aber ein innovativer Ansatz für das Strukturieren von Designs. Es basiert auf visueller Hierarchie und Organisation und ist besonders für rechteckige Layouts geeignet, wie sie auf schlanken Mobiltelefonen zu finden sind. Jeder Abschnitt in einem Bento-Design ist ein dedizierter Raum, um bestimmte Funktionen oder Highlights hervorzuheben. Apple ist hier Weltmeister unter den Bento-Designern!

Mit ein wenig CSS-Voodoo lassen sich gar lustige Konturen realisieren

Ab und an will man den Link auf ein Bild unterstreichen, indem man aus dem Cursor ein kontextnahes Bild erzeugt. z.B.: ein Telefon, einen Marker, eine Kette usw.

Mit unserem neuen Bildverarbeitungstool ist das Arbeiten mit Verhältnissen und Pixelgrößen ein Kinderspiel! Also Bild auf den vorgesehenen Bereich ziehen, gewünschte Maße auswählen, Bild zurechtschneiden und als .jpg exportieren. So leicht kanns sein!

Nicht nur unsere Augen können uns täuschen. Auch unsere Erinnerungen verblassen, Entscheidungen geraten ins Wanken und unbemerkte Vorurteile prägen unser Urteil. Entdecken Sie die Parallelen zwischen der physischen Unschärfe, der Dynamik der Bewegung, dem blinden Fleck im Sehen und den subtilen Unzulänglichkeiten unserer inneren Wahrnehmung.

Die Bakers percentage, zu Deutsch Teigausbeute (TA), beschreibt eine Berechnungsmethode, um das Mengenverhältnis einer Zutat in Teigwaren in Relation zur verwendeten Mehlmenge kalkulieren zu können. Mit dieser Methode kannst Du einfach Rezepte den richtigen Mengenverhältnissen anpassen, ohne das Rezept oder andere Zutaten negativ zu beeinflussen. Nach der Methode beträgt die Menge an Mehl immer 100%. Abhängig von der verwendeten Mehlmenge werden anschließend die weiteren Zutaten berechnet. Die Gesamtprozentanzahl aller weiteren Zutaten liegt dabei stets über 100%. Diese Berechnungsmethode unterscheidet sich in dem Sinne von herkömmlichen Methoden zur Prozentrechnung, bei dem alle Teile zusammen immer 100% ergeben.

Österreichische Mehlsorten unterscheiden sich von denen aus Deutschland oder der Schweiz.

Dieses Brot ist ein wohltuender Aromenmix, der sich in den kälteren Monaten des Jahres genau richtig anfühlt. Mit einem kleinen Anteil an frischem Salbei gelingt ein unverkennbar erdiger Twist. Salbei passt herrlich zu Cranberrys - beides unterstreicht die winterliche Note - und die buttrigen, warmen Pekannusskerne hüllen alles harmonisch ein. Bei diesem Brot werden Sie gleich Ihren Lieblingsstrickpulli anziehen und die Flauschsocken rausholen, zu einem dicken Buch mit Ledereinband greifen und eine geröstete, gebutterte Scheibe Brot am Kamin genießen.

Dokumentation für meine Sauerteig-Experimente…

Wie berechne ich die perfekte Mischung für meinen Sauerteig-Starter?

Wie berechne ich die optimale Wassertemperatur für meinen Teig?

Zutaten, Sauerteig, Teigführung, Gare und mehr – kompakt zusammengefasst für bessere Backergebnisse.

Hier lässt sich gut nachschauen, welches Betriebssystem und welchen Browser man gerade benutzt!

Als erstes wird das Betriebssystem per JavaScript erkannt. Basierend auf dem erkannten Betriebssystem werden Links zu den neuesten Browsern angeboten.

Unzählige Möglichkeiten bietet Cards, ein sog. Inhaltscontainer. Hier sind Kopf- und Fußzeilen möglich. Werden Bilder an erster Stelle angezeigt, werden die Eckenrundungen entspr. angepasst. Innerhalb der "Cards" lassen sich Bilder, Headlines, Texte, Button-Gruppen, Auflistungen und vieles mehr unterbringen. Auch Bilder mit zusätzl. Overlays sind hier möglich. Cards können gruppiert, in Grid-Form oder als Reihe mit gleichen Höhen dargestellt werden.

Moderne Card-Komponente mit schwebendem Bildelement und dunklem UI-Design. Das Bild wird bewusst versetzt über dem Card-Container positioniert, um visueller Tiefe und modernen Look zu erzeugen. Visueller Impact: Das schwebende Bild zieht sofort Aufmerksamkeit. Moderne Ästhetik: Dunkles Theme mit klaren Linien und minimalistischem Ansatz.

Mit Werten aus der Datenbank, HTML 5 Elementen und JavaScript lassen sich grafisch tolle Sachen realisieren. Unter anderem können mathematische Werte aussagekräftig visualisiert werden. Auch garniert mit einfachen Animationen. Das Ganze ist natürlich responsive und skaliert sehr gut.

Counter auf Websites sind mehr als nur Zahlen – sie erzählen Geschichten und schaffen Vertrauen. Sie visualisieren Erfolge, wie z. B. die Anzahl zufriedener Kunden, verkaufter Produkte oder abgeschlossener Projekte. Durch das dynamische Hochzählen ziehen sie die Aufmerksamkeit der Besucher auf sich und vermitteln Wachstum und Erfolg. Das schafft Glaubwürdigkeit und stärkt das Markenimage. Zudem sorgen animierte Counter für Bewegung auf der Seite und steigern so das Nutzererlebnis.

Mit einem JavaScript-Code lässt sich bei einer Tabelle relativ einfach ein CSV-Export implementieren. Dabei muss man weder Kopfzeile noch die Anzahl der Spalten berücksichtigen.

Ein CTA (Call-to-Action) ist im Webdesign und Marketing die direkte Aufforderung an den Nutzer, eine bestimmte Handlung auszuführen. Er fungiert als Wegweiser, der dem Besucher sagt, was er als Nächstes tun soll. Optik: Meist als auffälliger Button gestaltet, der sich farblich vom Rest der Seite abhebt. Sprache: Kurze, prägnante Verben im Imperativ (z. B. „Jetzt Angebot anfordern“, „Kostenlos testen“, „Hier anmelden“). Platzierung: Er sollte strategisch dort platziert sein, wo der Nutzer bereit für die Entscheidung ist (z. B. nach deiner Leistungsübersicht).

Der Dark Mode lässt sich über den Toggle-Button in der rechten oberen Ecke umschalten. Die Einstellung wird im Local Storage des Browsers gespeichert, sodass die Präferenz beim nächsten Besuch beibehalten wird. Hier sind die wichtigsten Vorteile auf einen Blick: Schont die Augen: Gerade in dunkleren Umgebungen oder bei langen Sessions am Bildschirm reduziert die geringere Helligkeit die Augenermüdung (Stichwort: Digital Eye Strain). Energieersparnis (OLED): Bei modernen Displays (wie beim iPhone oder MacBook Pro mit Liquid Retina XDR) verbrauchen schwarze Pixel kaum bis gar keinen Strom, was die Akkulaufzeit verlängert. Fokus & Ästhetik: Dunkle Hintergründe lassen Farben und Inhalte (deine Grafiken!) oft kräftiger strahlen und wirken modern sowie edel. Besserer Schlaf: Durch den reduzierten Blaulichtanteil am Abend wird die Melatonin-Produktion weniger gestört.

Hier werden "doppelseitigen" Cards als Bootstrap Carousel vor- und rückwärts blätterbar gemacht.

Professionelle E-Mail-Signaturen leicht gemacht: Nutze unseren Generator, um deine Kontaktdaten sauber und markengerecht zu formatieren. Schnell ausgefüllt, direkt einsatzbereit.

In einer zunehmend digitalisierten Welt erwarten Kunden schnelle, einfache und bequeme Möglichkeiten, Termine zu buchen. Ein Online-Terminbuchungssystem bringt nicht nur Komfort für Kunden, sondern erleichtert auch Unternehmen die Verwaltung von Terminen und spart Zeit.

Die simplere Version versteckt alle Inhalte bei inaktiven Cards. Bietet nur einfache Fade-in-Animationen ohne Bewegung. Hat eine aufeinanderfolgende zeitversetzte Animation der Elemente. Die Advanced Version zeigt vertikale Überschriften bei inaktiven Cards. Enthält Transform-Effekte für eine dynamischere Animation. Hat komplexere Animationen mit Bewegung und Fade-Effekten. Die Anzahl der Expanding Cards pro Reihe kann ich einstellen. Den Abstand zwischen den Cards genauso.

Ein vollumfängliches Fahrtenbuch für rasante Fahrer und kleine Teams

Eine FAQ-Seite (Frequently Asked Questions) ist weit mehr als nur eine einfache Liste von Fragen. Für dich als Webdesigner und Grafiker ist sie ein strategisches Werkzeug, um die User Experience (UX) zu verbessern und gleichzeitig deinen eigenen Arbeitsaufwand zu reduzieren. Hier sind die wichtigsten Vorteile für deine Projekte: Zeitersparnis (Support-Entlastung): Da Standardfragen (Preise, Ablauf, Technik) direkt beantwortet werden, landen weniger "unnötige" E-Mails in deinem Posteingang. Vertrauensaufbau: Du zeigst Kompetenz und nimmst potenzielle Bedenken vorweg, noch bevor der Kunde Kontakt aufnimmt. Das wirkt professionell und transparent. SEO-Boost: FAQ-Seiten sind Gold wert für Suchmaschinen. Sie enthalten oft natürliche Long-Tail-Keywords, nach denen Nutzer direkt suchen (z.B. "Wie lange dauert ein Logo-Design?"). Kaufentscheidung beschleunigen: Wenn ein Nutzer schnell die Antwort auf eine kritische Frage findet (z.B. "Läuft die Software auf meinem Mac?"), klickt er eher auf den CTA-Button. Struktur & Ordnung: Anstatt Erklärungen mühsam in Fließtexte zu pressen, bietet die FAQ-Seite einen zentralen Anlaufpunkt für alles "Kleingedruckte".

Erstellen Sie harmonische Farbkombinationen mit modernem Design. Das tetradische Farbschema verwendet vier gleichmäßig verteilte Farben im Farbkreis, die ein Rechteck formen. Es bietet viele gestalterische Möglichkeiten und benötigt eine dominante Hauptfarbe.

Ob Produkte oder Leistungen - hier werden die Features ins rechte Licht gerückt.

Ob Schloss mit Parkanlage, Loft über der Garage oder neues Firmenzentrum – mit unserem Finanzierungsrechner siehst du sofort, was monatlich auf dich zukommt. Ganz ohne Abakus, Taschenrechner oder Schlussrechnung.

Flip ist das fortschrittlichste Flip-Counter-Plugin, das im Internet verfügbar ist. Es ist relativ einfach einzurichten, erstaunlich flexibel und wunderschön animiert. Egal, ob wir bis zu einem Ereignis herunterzählen, eine Spendenaktion visualisieren, eine Uhr oder einen Verkaufszähler zeigen möchten, mit Flip ist das alles möglich!

PDF.js ist eine in JavaScript geschriebene Bibliothek, die es ermöglicht, PDF-Dateien direkt im Webbrowser anzuzeigen, ohne dass ein externes Plugin wie Adobe Acrobat Reader benötigt wird. Wenn ein PDF mittels PDF.js als Flipbook auf einer Website dargestellt wird, ergeben sich einige Vorteile.

Ein überladenes Formular mit unzähligen Feldern wirkt oft abschreckend und führt zu hohen Abbruchraten. Eine elegante Lösung für dieses Problem ist der Einsatz von konditionaler Logik über einfache Ja/Nein-Abfragen. Anstatt dem Nutzer sofort alle Optionen anzuzeigen, präsentiert sich das Formular zunächst minimalistisch. Erst durch die Auswahl einer Antwort werden dynamisch weitere, spezifisch relevante Felder eingeblendet.

Bei Formularen kann man dem Ausfüller ein optisches und inhaltliches Feedback geben, wo beim Ausfüllen noch was fehlt und was bereits richtig gemacht wurde.

Responsive Formulare passen sich an verschiedene Bildschirmgrößen an und bieten so eine optimale Nutzererfahrung auf allen Geräten. Verschiedene Eingabemöglichkeiten wie Textfelder, Auswahllisten und Checkboxen ermöglichen die Erfassung unterschiedlicher Daten. Mit etwas Aufwand lässt sich auch eine Validierung der Eingaben realisieren.

Mittels der Fullcalendar-JavaScript-Library und der Termine-Datenbank im webEdition lassen sich mächtige und benutzerfreundliche Kalender realisieren. Auch wiedderkehrende Termine sind möglich. Ein Schwindelzettel für den Redakteur. Listenansichten aller Art runden das Ganze ab!

Mittels der Fullpage-Funktionalität können OnePager und Landingpages mit vollflächigen Hintergrundbildern und -videos gebaut werden

Mittels jQuery und der JavaScript Library slick.js können intelligente und hübsche Galerien realisiert werden. Diese sind auch mit Touch und Sliding am Smartphone gut gerüstet!

Ein Online-Gästebuch bietet Hotels viele Vorteile: direkte Gästekommunikation und Feedback in Echtzeit, höhere Reichweite durch digitale Sichtbarkeit, einfache Verwaltung der Einträge, und Kostenersparnis gegenüber physischen Büchern. Authentische Gästestimmen stärken das Vertrauen potenzieller Kunden und dienen als wertvolles Marketing-Instrument. Zusätzlich können Hotels schnell auf Kritik reagieren und den Service verbessern. Die digitale Form ermöglicht auch eine übersichtliche Archivierung und statistische Auswertung der Bewertungen.

Die Website ist gebaut, der Kunde ist eingeschult. Das webEdition raucht bereits. Alles ist bezahlt. Jetzt folgt das 'daily business'! Hier ein Tool zum überprüfen und kalkulieren des digitalen Business.

Die Einbettung eines Google Kalenders auf der Website per iframe hat sowohl Vorteile als auch Nachteile.

Google Kalender bietet eine benutzerfreundliche Oberfläche, die es ermöglicht, Termine schnell und einfach einzugeben und zu verwalten. Wir haben eine Lösung entwickelt, wie wir diesen Kalender anzapfen und auf der Website als Termin-Auflistung wiedergeben können.

Das Umfrage-Tool in Google Docs ist ein echtes Schweizer Taschenmesser. Es ist oft die schnellere Alternative zu einem selbst programmierten PHP-Formular, besonders wenn es um interne Abläufe oder schnelles Kundenfeedback geht.

Google Groups bietet einen zentralen Ort für Diskussionen, das Teilen von Informationen und die Zusammenarbeit innerhalb von Gruppen zu verschiedenen Themen.

Hier wird in Google Sheets (Tabellenkalkulation) eine Datei als Datenquelle veröffentlicht. Auf dieser Website wird diese Datei als CSV abgerufen und in Bootstrap und DataTables.js eingebunden.

Hier wird ein Karussell dargestellt, dessen Steuerelemente außerhalb liegen. Als Karussell-Inhalt werden Karten in einem bestimmten Grid darstellt.

Ausgangspunkt sind von uns gewählte Namen und die HEX(adezimal)-Farben in unserer CSS-Datei, eine sechsstellige Kombination aus Bauchstaben und Zahlen mit einem # davor. Diese wandeln wir per Javascript und viel Rechnen in RGB, HSL und CMYK um und schreiben die Werte in Bootstrap-Cards. Diese Karten werden mit dem Farbnamen und der Hintergrundfarbe versehen. Je nach Helligkeit der Hintergrundfarbe wird dabei autom. zwischen schwarzer und inversem Textfarbe gewählt. Und es werden Farbpaletten für Adobe und Affinity-Software zum Download generiert.

Darstellung von Headline und Absatzschriften.

Hashtags sind leistungsstarke Werkzeuge für digitales Marketing und soziale Medien. Sie helfen dabei Inhalte leichter aufzufinden und Markenidentität zu fördern!

Alles ist ein bisschen größer und prominenter dargestellt bei der sog. Hero-Darstellung von Bootstrap. Das responsive Grid und die JavaScript-Libraries denken gut mit, das zeigt sich insb. in der Smartphone-Optik.

Schluss mit langweiligen Textzeilen am Ende Ihrer E-Mails! HTML-E-Mail-Signaturen verwandeln jeden geschäftlichen E-Mail-Kontakt in eine professionelle Visitenkarte. Von einheitlichem Corporate Design bis hin zu messbaren Marketing-Erfolgen – erfahren Sie, warum moderne Unternehmen auf HTML-Signaturen setzen und wie auch Sie in wenigen Schritten Ihre Geschäftskommunikation auf das nächste Level bringen.

Ein SSL-Zertifikat und HTTPS auf deiner Hauptseite sind nur so stark wie das schwächste Glied in der Kette. Wenn ein Teil des Inhalts über eine ungesicherte Verbindung kommt, kann dies die gesamte Sicherheit der Seite kompromittieren und Benutzer sowohl verunsichern als auch echten Gefahren aussetzen. Deshalb ist es entscheidend, alle Ressourcen auf einer HTTPS-Seite ebenfalls über HTTPS zu laden. Dein Tool ist also sehr nützlich, um diese Schwachstellen aufzudecken!

Hier kann man geschwind überprüfen, ob die Favicons, Touch-Icons, Tiles etc. korrekt gesetzt sind.

Webdesigners Friend! Einfach Logo hochladen und alle benötigten Icons automatisch generieren. Anschließend generierten HTML-Code im platzieren, staunen und sich freuen!

Lade dein Original SVG hoch (quadratisch empfohlen). Wir machen den Rest! Mit eigener Dropzone. Anschließend werden Favicons, Apple-Touch-Icons, Android-Chrome-Icons und Microsoft-Tiles in unterschiedlichen Größen generiert.

Unsere neuen Image Hotspots zeigen interaktive Symbole auf einem leicht abgedunkeltem Bild an. Fährt man mit der Maus über diese Hotspots, werden Cards mit Textdetails und Links sichtbar. Die Hotspots werden im CMS per Angabe der X- bzw. Y-Achse in Prozentwerten definiert. Das Ganze ist responsive und bulletproof.

Panoramabilder, Bilder mit freigestellten Objekten und einem einfärbigen Hintergrund oder großflächige Wortbotschaften eignen sich perfekt für diese Infiniscroller!

Früher waren Infografiken meist „tote“ Bilddateien aus dem Zeichenprogramm. Heute bauen wir sie direkt mit HTML, CSS und modernen Icons auf. Das bietet dir entscheidende Vorteile: Responsive Design: Deine Grafik ist kein starrer Klotz mehr. Sie passt sich flüssig an jede Bildschirmgröße an – vom Smartphone bis zum 27-Zoll-Monitor sieht alles perfekt aus. SEO-Power: Da die Inhalte aus echtem Text bestehen (und nicht in einem Bild „gefangen“ sind), kann Google jedes Wort lesen. Das verbessert dein Ranking spürbar. Interaktivität: Wir können Animationen oder Hover-Effekte einbauen, die den Nutzer zum Mitmachen einladen. Schnelle Pflege: Texte oder Zahlen lassen sich in Sekunden ändern, ohne dass du ein Grafikprogramm wie Affinity öffnen und das Bild neu exportieren musst.

Den Instagram-Feed über einen Embed-Code einbinden - das ist am einfachsten. Notwendig ist nur der Accountname.

Einfach und ohne Login: Mit Kalender.digital teilen Sie Termine und Ereignisse mit anderen Personen – per Link und ohne Anmeldung. Ideal für Teams, Vereine und private Gruppen: Verwalten Sie gemeinsame Termine und Ressourcen effizient und transparent.

Hast du dich jemals gefragt, wie viel Geld du jedes Jahr eigentlich für Kaffee, Hafermilch und Strom verbrauchst – nur um dein Gehirn morgens auf Betriebstemperatur zu bringen? Zeit für eine knallharte Wahrheit: Stell dir vor, du kippst täglich zehn Tassen sardischen Espresso mit einem ordentlichen Schuss Hafermilch (natürlich die teure Barista-Edition) in dich rein – das sind locker 3.650 Tassen im Jahr...

Präzise Flächen-Berechnung für alle gängigen Dachformen, inkl. Neigung und Überstand. Und die Anzahl der Dachziegel gibts obendrauf!

Du planst ein Event und fragst dich: Wie viel Wein brauchen wir eigentlich? Keine Panik – unser Getränkekalkulator hilft Dir, den süffigen Mittelweg zu finden. Einfach Gästeanzahl eingeben, Trinkverhalten wählen (Wenig-, Normal-, Vieltrinker) und Rot-/Weiß-/Rosé-/Schaumwein-Anteile anpassen – schon weißt Du, wie viele Flaschen auf den Tisch gehören. So wird keiner durstig – und Du musst auch kein Weindepot eröffnen.

Wählen Sie einfach für jede Bauteilschicht das passende Material aus, tragen Sie die Dicke ein – den Rest macht unser Rechner! Lambda- und R-Werte werden automatisch vorgeschlagen, können aber natürlich angepasst werden, wenn Sie aktuelle Prüfzeugnisse oder Herstellerdaten haben. Das Beste daran: Unser Tool ist bewusst simpel gehalten – keine komplizierte Fachsprache, keine Vorkenntnisse nötig. Schnell, unkompliziert und erstaunlich genau. Probieren Sie’s aus!

Ob Schloss mit Parkanlage, Loft über der Garage oder neues Firmenzentrum – mit unserem Finanzierungsrechner siehst du sofort, was monatlich auf dich zukommt. Ganz ohne Abakus, Taschenrechner oder Schlussrechnung.

Wir haben hier einen Kreditrechner entwickelt. Der Kreditrechner sieht professionell aus und entspricht dem in Österreich üblichen Zahlenformat.

Der Pizza-Kalkulator berechnet dir auf Knopfdruck die exakten Zutatenmengen für deinen perfekten Pizzateig – egal ob neapolitanisch, römisch oder vom Blech. Du wählst einfach Pizzastil, Teiggröße, Anzahl und Gehzeit, und der Kalkulator liefert dir grammgenaue Angaben für Mehl, Wasser, Salz und Hefe. Besonders praktisch: Die Hefemenge wird dynamisch an die Gehzeit und Gärmethode angepasst – ob schnelle Raumtemperatur-Gärung oder langsame Cold Fermentation im Kühlschrank. Auch ein Vollkornanteil lässt sich stufenlos einstellen, wobei die Hydration automatisch mitkorriert wird. Dazu gibt's hilfreiche Tipps zur Teigführung und eine kompakte Erklärung der Gär-Zusammenhänge – alles auf einen Blick, ohne Kopfrechnen.

Rechnen. Staunen. Durchatmen. Ein Eis hier, ein Ausflug da – und schwupps ist die Reisekasse leer. Unser Urlaubsrechner zeigt dir, was der Spaß wirklich kostet – pro Tag, pro Nase.

Nachdem ich selber gerade ein Schlafzimmer grundiert und mit "eleganter Gelassenheit" von Adler gestrichen habe, weiß ich, dass man immer eine Dose zu wenig Farbe hat. Das soll nun nicht mehr passieren! Hier ein übersichtlicher Wandfarben-Kalkulator.

Kanban ist eine agile Methode zur Visualisierung von Arbeitsabläufen, um Prozesse zu optimieren und den "Work in Progress" zu begrenzen. Ursprünglich von Toyota in den 1940ern entwickelt, nutzt es Karten auf einem Board, um Aufgaben transparent zu machen, Engpässe zu identifizieren und einen kontinuierlichen Fluss ("Flow") nach dem Pull-Prinzip zu erzeugen.

Interaktive Karten lassen sich mit überschaubarem Aufwand erstellen. Zunächst wird die Karte in einem Vektorzeichenprogramm entworfen – mit möglichst wenigen Vektorpunkten und einer klaren Gruppierung, um die Übersicht zu behalten. Anschließend kann sie mit HTML und CSS ansprechend gestaltet werden. Durch den Einsatz von JavaScript und Popover-Funktionalität verwandelt sich die Karte in eine interaktive Informationsquelle mit echtem Mehrwert. Farben, Verläufe, Linien und co. können an das Corporate Design angepasst werden.

Mit Information in hübsche Karten verpackt lässt sich Lernen und Verarbeiten gleich viel interessanter gestalten.

Mail-Server Diagnose Test-Tool

Fehlermeldungen aus dem Plesk-Log-File kopieren und hier im Tool einsetzen. So Gott will, wird anschl. der Fehler diagnostiziert!

Unser tägliches Mailproblem gib uns heute! Hier gibts das systematische Fehlerdiagnose-Tool für PowerNetz/Plesk Mail-Server.

Markdown ist eine Auszeichnungssprache, die in den letzten Jahren immer beliebter geworden ist. Sie wird von vielen verschiedenen Arten von Autoren und Redakteuren verwendet, von Bloggern über technische Autoren bis hin zu Romanautoren. Markdown ist eine einfache und leicht zu erlernende Sprache, mit der Sie Text formatieren können, ohne dass Sie HTML-Kenntnisse benötigen.

Mit dem sog. Masonry-Layout können Inhalte wie Bilder oder Card-Elemente ansprechend und platzsparend auf einer Website angezeigt werden. Im Gegensatz zu »klassischen Rastern« zeichnet es sich durch eine versetzte Kachel-Optik aus – daher auch der Name (Masonry = Mauerwerk).

Ein Mega-Menü bringt Ordnung in umfangreiche Websites und zeigt Ihre Inhalte auf einen Blick. Statt langer Listen bietet es eine strukturierte Navigation mit Kategorien, Icons oder Bildern – ideal für Nutzerfreundlichkeit und modernes Design. Perfekt für Shops, Portale und alle, die viel zu zeigen haben!

Das System ersetzt Zettel, Telefonlisten und manuelle Auswertungen durch eine schlanke, elegante Lösung, die vollständig in die bestehende webEdition-Umgebung integriert ist. Studierende bestellen unkompliziert über ihr Smartphone oder den Laptop. Der Koch bekommt eine klare, tagesaktuelle Übersicht. Die Verwaltung hat alle Bestellungen zentral und strukturiert gespeichert — ohne Zusatzaufwand, ohne Mehrkosten.

Finden Sie die passende Messe in unserer Pfarre. Mit Filtermöglichkeit und Einbinden einer csv-Datei

Hier kann man geschwind und umfassend die meta-Informationen, wie title, description einsehen, kontrollieren und in weiterer Folge verbessern. Auch die Social-Media-Meta-Daten werden erfasst und ausgewertet!

Für die Darstellung des Responsive-Frameworks Bootstrap gibt es Anforderungen an Maschine, Betrioebssystem und Bowser!

Ein Mission Statement ist ein kurzer, prägnanter Satz oder Absatz, der beschreibt, wofür ein Unternehmen steht, welchen Zweck es verfolgt und welchen Nutzen es für seine Kunden oder die Gesellschaft stiftet. Auf einer Website ist es wichtig, weil Besucher so sofort verstehen, was den Betrieb ausmacht und warum sie hier richtig sind. Gerade bei Dienstleistern wie Rechtsanwälten, Ärzten oder Kreativagenturen stärkt ein Mission Statement das Vertrauen: Es zeigt Haltung, Werte und Kompetenz – und grenzt subtil von Mitbewerbern ab. Es muss nicht groß als „Mission Statement“ überschrieben sein, oft reicht es, wenn auf der Startseite in 2–3 klaren Sätzen die Kernbotschaft transportiert wird.

Sieht man immer wieder. Mann befindet sich auf einer Seite, und plötzlich wie von Geisterhand öffnet sich eine Modalbox. Die Zeit kann definiert werden. Der Inhalt der Modalbox natürlich auch.

Farbkonzepte, Typografie und Designsprache auf einen Blick.

Die "Navbar" wird meistens oben fixiert, ist responsive und reagiert gut auf die verschiendenen Bildschirmgrößen. Dropdown-Menüs sind möglich, genauso wie z.B. ein Bereich für ein Suchfeld, Sprachen, Login u.ä.. Man kann einstellen, ob Navigationsordner und -befehle überhaupt oder ab wann angezeigt werden sollen, außerdem lässt sich die Ausrichtung definieren. Hier ein paar Beispiele

Hier wird die Hauptnavigation beim Hinunterscrollen versteckt und beim Hinaufscrollen gezeigt. Praktisch bei notorischem Platzmangel.

Oft reichen Naviagtionsordner und -befehle nicht aus, Produkte oder Leistungen entsprechend darzustellen. Hier sind sog. Mega-Navbars gefragt. Der Inhalt dieser Navigationen wird dann wie eine eigene Website gestaltet und auf "Knopfdruck" angezeigt.

Das ist ein Beispiel für eine responsive Haupt-Navigation mit mehreren Ebenen. Dabei wird die erste Dropdownebene mit einem Klick geöffnet, die Ebenen darunter per Mouse-Hover! Auf Mobilgeräten funktionieren Menüs und Untermenüs wie bei einem Akkordeon!

Wir können die Links im Newsletter-Modul im webEdition so umbauen, dass die Newsletter-Tracking-Daten mit UTM-Parametern in Google Analytics 4 gefunden werden können.

Counter auf Websites sind mehr als nur Zahlen – sie erzählen Geschichten und schaffen Vertrauen. Sie visualisieren Erfolge, wie z. B. die Anzahl zufriedener Kunden, verkaufter Produkte oder abgeschlossener Projekte. Durch das dynamische Hochzählen ziehen sie die Aufmerksamkeit der Besucher auf sich und vermitteln Wachstum und Erfolg. Das schafft Glaubwürdigkeit und stärkt das Markenimage. Zudem sorgen animierte Counter für Bewegung auf der Seite und steigern so das Nutzererlebnis.

Sollte man ein Angebotsformular gleich neben den Angeboten positionieren wollen, gibt es dafür einen Weg. Breite und Höhe des "Offcanvas" kann dabei eingestellt werden.

Auch bei einer Übersichtsseite lassen sich Details, in diesem Fall zum Team, ruhig und übersichtlich und gut lesbar darstellen

Das Widget zeigt alle Wochentage mit den entsprechenden Öffnungszeiten an, und es prüft, ob das Geschäft gerade geöffnet oder geschlossen ist und zeigt den Status entsprechend an.

Hier kann man seine wichtigsten Geschäfte und ihre Öffnungszeiten überblicken. Nie mehr vergebens zum Recyclinghof fahren!

Via Datenbank lässt sich die Belegung und Benennung von Grundstücks-Parzellen steuern.

object- und iframe sind nicht nur Behälter für SVG oder für Video – sie können auch ein PDF-Dokument beinhalten und bieten dem Benutzer inmitten der Webseite einen Einblick in das PDF-Dokument. Ich passe hier die Breite auf 100% an und stelle ein Seitenverhältnis von 21:29 ein. Für ältere Browser gibt es eine Fallbacklösung per iFrame.

Der Einsatz von eingebetteten PDFs über den PDF.js Viewer bietet zahlreiche Vorteile: Er ermöglicht eine nahtlose und barrierearme Darstellung von PDF-Dokumenten direkt im Browser, ganz ohne zusätzliche Plugins oder den Download externer Dateien. Nutzer können bequem scrollen, zoomen – alles innerhalb der bestehenden Website-Oberfläche. Für Website-Betreiber bedeutet dies eine bessere Benutzererfahrung, konsistentes Design sowie volle Kontrolle über die Integration und Darstellung der Inhalte. Zudem ist PDF.js als Open-Source-Lösung flexibel anpassbar und unterstützt alle gängigen modernen Browser.

Projekte planen war noch nie so schön! Hier kann man Kategorien mit Einzelschritten definieren, interne und externe Zeiten oder Aufwände fixieren. Diese Aufwände werden dann teil- und gesamtsummiert. Besonderheiten farblich herausheben. Aufgaben oder ganze Kategoriegruppen verschieben. Und als ob das nicht schon genug wäre, lässt sich die komplette Planung auch noch als Tabelle exportieren.

Mittels Bootstrap 5 und webEdition lassen sich auch Bilder mit zusätzlichen Informationen garnieren. Die Position links, rechts, oben, unten lässt sich dabei voreinstellen. Das Bild ist responsive, die Marker werden in Prozenten von links bzw. oben angegeben. Weiters lässt sich einstellen, ob die Popovers permanent sichtbar bleiben sollen oder ob sie per Klick auf einen anderen Marker verschwinden sollen.

Mit Bootstrap 5 ist es jetzt ein Einfacheres, die Position eines Elements gegenüber einem anderen, evtl. darzunterliegenden, zu definieren.

Mal schauen, ob das klappt und langt: Martina und Stoffl putzen, und zwar wochentags je 15 Minuten und am Samstag und Sonntag je 1 Stunde

Erstelle bequem QR-Codes für URLs, Visitenkarten, Text und WIFI-Zugangsdaten. Die VCARDS haben dabei getrennte Adressbereiche für Privat und Büro und funktionieren mit iPhone Kontakte-App, Android Kontakte, Outlook, Apple Contacts und Google Contacts. Die QR-Codes können auch als vektorbasierte Datei für den professionellen Druck heruntergeladen werden! Weiters gibt auch die Möglichkeit, Events mit flexiblen Zeiträumen zu bewerben! In Standard-konformem Format: vCalendar/iCal Format (RFC 2445). Funktioniert mit allen Kalender-Apps: iPhone/iPad Kalender, Google Calendar, Outlook, Android Kalender

Das Quiz passt sich an verschiedene Bildschirmgrößen an Benutzerfreundlich: Vor/Zurück-Buttons und ein Fortschrittsbalken Interaktive Elemente: Klickbare Antwortoptionen mit visueller Rückmeldung Ergebnisanzeige: Detaillierte Auswertung mit Erklärungen zu jeder Frage Neustart-Funktion: Möglichkeit, das Quiz erneut zu starten

Range-Elemente in Bootstrap-Formularen, dienen dazu, dem Benutzer die Eingabe eines numerischen Wertes innerhalb eines bestimmten Bereichs zu ermöglichen. Sie werden oft als Schieberegler visualisiert, den der Benutzer mit der Maus oder per Touch verschieben kann.

Nicht jedes Video passt in jedes Format – und nicht jedes Seitenverhältnis wirkt auf jedem Endgerät gleich. Diese Übersicht zeigt dasselbe Video in den vier gängigsten Aspect Ratios: das klassische 4:3, das Standardformat 16:9, das quadratische 1:1 für Social Media und das ultrabreite Kinoformat 21:9. So lässt sich auf einen Blick vergleichen, wie Bildausschnitt, Wirkung und Platzbedarf je nach Seitenverhältnis variieren – eine praktische Entscheidungshilfe für die Einbindung von Video auf Websites und in Social-Media-Kanälen.

Durchsucht RSS/XML und JSON-Feeds nach Microsoft Word Formatierungscode anhand typischer Muster

Ab und zu will man am Wochenende vorarbeiten, und z.B.: um einen Rückruf bitten. Mit dieser kleinen Funktionalität wird ihnen gleich geholfen. Und wir bekommen ein Erinnerungsmail. Und das Mail vergisst nichts!

1 : 1 = Quadrat
1,618 : 1 = goldenes Rechteck
3 : 2 = Postkarte
4 : 3 = Röhrenmonitor
16 : 9 = Standard-TV
21 : 9 = Ultrawide
32 : 9 = Super-Ultrawide

Formular lassen sich auch per sendmail versenden. Anstelle von phpMail. In dieser Testumgebung werden 2 Mails versandt, 1x die Formulardaten und 1x ein Bestätigungsmail inkl. Bild und HTML.

Umfangreiche SEO, spr. Suchmaschinenoptimierung mit onepage-, offpage-Optimierung und technischem SEO

Sidebars bieten vertikale Navigation und können komplex sein. Responsive Design berücksichtigt verschiedene Geräte und Modi (Portrait/Landschaft). Fragen zu mehreren Ebenen, Ein-/Ausschaltknöpfen, Positionierung und Verhalten (verschieben oder schweben) müssen beim Design geklärt werden.

Slick.js gilt in der Webdesign-Szene als das „Schweizer Taschenmesser“ unter den Carousels. Da du mit webEdition arbeitest und oft individuelle Layouts umsetzt, ist Slick besonders wertvoll, weil es extrem flexibel ist. Hier sind die entscheidenden Vorteile für deine tägliche Arbeit: 1. "Fully Responsive" & Touch-Ready 2. Enorme Feature-Vielfalt 3. Adaptive Height

Snake ist ein klassisches Videospiel, bei dem der Spieler eine sich bewegende Schlange steuert. Das Ziel ist einfach: Die Schlange muss Objekte (meist dargestellt als Früchte oder Punkte) auf dem Spielfeld fressen. Mit jedem gefressenen Objekt wächst die Schlange und wird länger. Die Herausforderung liegt darin, Kollisionen zu vermeiden.

Wenn ich Webseiten auf Erscheinung, Funktionalitäte und Wirkmächtigkeit hin untersuche, fallen mir oft ähnliche Sachen auf! Damit die Kommunikation zum Kunden effizient gehalten werden kann, haben wir ein Tool realisiert, das einfaches Text-Einsetzen quasi per Knopfdruck ermöglicht

Speisekarten sollten schnell, übersichtlich und verständlich sein. Mit Datenbank-Funktionalität können insb. Wochenkarten gut im Vorhinein entwickelt und zeitgesteuert veröffentlicht werden. Ein goßer Nutzen für Hungrige ist inkludiert.

Hier wird das Anlegen einer hübschen Speisekarte zum Kinderspiel. Mittels ein paar Markdown-Sonderzeichen und dem entsprechenden technischen Unterbau wird aus Information brauchbare und verständliche Information.

Als Beispiel eine Locations-Liste unserer Kunden. Breitengrade und Längsgrade müssen dazu eingegeben werden. Per Klick auf einen Kunden in der linken Liste wird die Position des Kunden auf der Karte angezeigt.

Finden Sie den optimalen Termin für die Taufe Ihres Kindes. Online-Tool helfen dabei!

Per CSS und HTML kann man eine Telefonnummer um 90° drehen, verlinken und farblich, sowie typografisch anpassen. Weiters wird sie hier im relativ positionierten Headline-Bereich absolut links mittig fixiert.

Termine als CSV-Datei, mit Filter, ICS und Orten

Timelines visualisieren die Entwicklung der Moderne. Mit dem webEdition Block-System, basierend auf ausgereifter Bootstrap-Technologie und umfassendem Einsatz von CSS und JavaScript, haben wir eine optisch ansprechende und leicht verständliche Lösung geschaffen.

Manchmal möchte man einfach das Auge stören und legt Objekte ein bisschen versetzt übereinander. So das Bildmaterial dies zulässt, kann das hübsch aussehen!

Ermöglicht das Erstellen, Bearbeiten und Verwalten von Umfragen ohne Programmier-Kenntnisse. Einfacher gehts fast nicht!

Der große Vorteil von URL-Shortenern ist die Möglichkeit, alle Klicks wirklich zu messen - unabhängig davon, ob es sich beim Inhalt um die eigene Webseite oder externe Inhalte handelt. Ein weiterer Vorteil ist die Einbindung deiner Marke durch eine eigene Subdomain, was die Links einprägsamer und vertrauenswürdiger macht. Kurze Links sind weniger fehleranfällig, nehmen in Posts weniger Platz ein und erhöhen das Vertrauen der Nutzer, wenn sie deinen Markennamen enthalten. Die ideale URL-Länge für die Sichtbarkeit in Suchmaschinen beträgt etwa 75 Zeichen, während ein URL-Shortener diese auf ein Minimum reduzieren kann.

Wird ein Video von uns gehostet, lässt es sich einfach einbetten und abspielen.

Ohne viel Schnickschnack wird statt dem üblichen Kopfbild ein speicherschonendes Video gespielt.

Vertikale Videos werden fast doppelt so oft bis zum Ende angesehen wie horizontale Videos. Das Hochkantformat zieht die Aufmerksamkeit der Zuschauer auf sich und hält sie länger in der Story. Da wir unsere Handys zu 96 % der Nutzungszeit hochkant halten, passen vertikale Videos perfekt zu diesem Verhalten. Social Media Plattformen wie YouTube und Facebook unterstützen diesen Trend, indem sie das Ansehen von vertikalen Videos ohne Bildschirmdrehung ermöglichen.

In einem iFrame wird ein Vimeo-Video eingebettet.

In einem iFrame wird ein YouTube-Video eingebettet.

Wechselt automatisch zur nächsten Slide wenn Video endet. Nach dem letzten Video geht's wieder zum ersten Video. Benutzer können trotzdem manuell zum nächsten Video wechseln. Jedes Video startet von vorne wenn es aktiv wird und ein dezenter Übergang zwischen den Videos wurde entwickelt.

Checkliste

WeatherWidget.io bietet einen einfachen und kostenlosen Wetter-Widget-Generator, den wir direkt in der Website einbinden können.

WhatsApp blockiert oft automatisierte (Massenmail-)Nachrichten, Rechtliche Aspekte wie DSGVO und Spam-Schutz sind zu beachten. Hier nun eine einfachere Alternative: Eine Webapp, die WhatsApp-Links mit Inhalten generiert - dann öffnet sich WhatsApp mit vorgefüllter Nachricht, und du musst nur mehr manuell senden.