Hypercode Blog, #Development

Testgeräte, Simulatoren und Browser-DevTools haben wir bei Hypercode reichlich. Doch unterwegs oder beim schnellen Blick aufs iPhone sehen wir meist nur die eine Ansicht, die zum eigenen Display passt. Unsere neue App Views genau schließt diese Lücke: URL öffnen, mehrere Viewports vergleichen und direkt in die Device-spezifischen Details einsteigen.

Ein Gerät. Viele Perspektiven.

Views zeigt eine Website dazu in mehreren Gerätgrößen neben­einander. Mit dabei: Alle iPhones und iPads, aktuelle Macs, ausgewählte Android-Devices, Boostrap-Breakpoints und die Möglichkeit eigene Viewports zu definieren. So seht ihr auf einen Blick, wie sich euer Responsive Webdesign schlägt, wo Texte ungünstig umbrechen oder eine Navigation zu voll wird.

• Viewports nach Wahl: Smartphone-, Tablet-, Foldable- und Desktop-Größen aus einem umfassenden Geräte­katalog, als Bootstrap-Breakpoints oder mit eigenen Abmessungen.
• Interaktive Vorschauen: Scrollen, Klicken, Links folgen, Menüs öffnen – mit synchronisierter Scroll-Position und direkt in den Device-Viewports.
• Live Reload und Auto Reload: Vorschauen aktualisieren sich bei Datei­änderungen über die kostenlose Views CLI für Mac und PC oder in einem festen Intervall.
• Im eigenen Workflow: Safari-Erweiterung, Apple Shortcuts, URL-Scheme, CLI und Markdown-Guides für euren KI-Coding-Agenten sind direkt mit dabei.
• Device-Screenshots: Einzelne Viewports in den Device-spezifischen Größen festhalten, teilen im Team besprechen und fixen waren nie einfacher.

Alle Funktionen und weitere Einblicke findet ihr auf unserer Projekt­seite zu Views.

Kostenlos plus Pro-Features

Views ist für iPhone und iPad kostenlos und zeigt bis zu drei Viewports gleichzeitig. Views Pro schaltet per einmaligem In-App-Kauf für 9,99 EUR unbegrenzt viele Viewports, unbegrenztes Live Reload und Auto Reload sowie Device-spezifische Screenshots ohne Views-Badge frei.

Wir würden uns freuen, wenn ihr Views ausprobiert. Und meldet euch gerne mit Feedback, Ideen oder Fragen!

Viel Spaß beim Perspektiv­wechsel!

Mit der Raycast-Integration hatten wir zunächst das schnelle Suchen und Buchen in awork für uns vereinfacht – und, wie sich heraus­stellte, auch für einige andere. Nun wollten wir die wichtigsten Infos jederzeit sichtbar machen, um Zeit­buchungen und neue Aufgaben stets im Blick zu behalten.

Da wir im Team große Fans des Elgato Stream Decks sind, bot es sich an, beides mit­ein­ander zu ver­binden: Das frei konfigurier­bare Bedien­pult mit kleinen Display-Tasten bringt die awork-Infos direkt auf den Schreib­tisch.

Erfasste Zeit direkt auf der Taste

Mit Tracked Time Today seht ihr, wie viel Arbeitszeit ihr heute bereits in awork erfasst habt. Das Plugin setzt diese Zeit ins Verhältnis zu eurer eingestellten täglichen Arbeits­dauer und zeigt euch den Fortschritt direkt auf der Taste an.

Das ist vor allem dann praktisch, wenn zwischen Meetings und Projekt­arbeit die Frage aufkommt: Habe ich für heute schon alles gebucht? Ein Blick aufs Stream Deck hilft bei der Orientierung; per Tastendruck geht es direkt zur passenden Ansicht in awork.

Die eigenen Aufgaben auf einen Blick

Wie viele Aufgaben sind noch offen? Sind neue dazu­gekommen? Die Aktion Task Count zeigt die Anzahl der Aufgaben direkt auf einer Stream-Deck-Taste. Dafür könnt ihr zwischen den drei persönlichen Ansichten New Tasks, My Tasks und Private Tasks wählen – oder gleich jeder Ansicht eine eigene Taste geben.

awork AI per Tastendruck

Mit der Aktion Open awork AI öffnet ihr awork AI in eurem verbundenen Workspace direkt vom Stream Deck aus. Für jede AI-Taste könnt ihr einen eigenen Prompt speichern. Beim Tastendruck öffnet sich awork AI im Browser mit eurem Text als voraus­gefülltem Prompt für einen neuen Chat. Ohne gespeicherten Prompt gelangt ihr direkt zu awork AI.

So bekommen auch wieder­kehrende Prompts einen festen Platz auf dem Schreib­tisch: Legt mehrere AI-Tasten an, hinterlegt die jeweiligen Texte und gebt den Tasten passende Namen. Eure häufig genutzten Prompts sind damit jederzeit griffbereit.

Setup & Download

Das Plugin läuft unter macOS und Windows. Für die Einrichtung legt ihr zunächst einen API-Client in awork an; dafür können Adminrechte nötig sein. Die einzelnen Schritte findet ihr in unserer Setup-Anleitung. Anschließend legt ihr fest, welche Infos und Aktionen auf welchen Tasten erscheinen. Wie häufig die Aufgaben- und Zeitwerte aktualisiert werden, lässt sich für jede dieser Tasten einzeln einstellen. Für Open awork AI tragt ihr euren optionalen Prompt in den Ein­stellungen der jeweiligen Taste ein.

Ihr findet das Plugin im offiziellen Elgato Marketplace, über den ihr es kostenlos auf eurem Stream Deck installieren könnt. Viel Spaß damit und möget ihr immer alle Buchungen und Tasks im Blick haben!

Dies ist das erste einer Reihe von Stream-Deck-Plugins, die wir für Professionals (und uns) entwickelt und veröffentlicht haben. Bereits online sind außerdem:

• Web Analytics for Stream Deck, das diverse Website-Metriken von den beliebten, DSGVO-konformen Analytics-Diensten Matomo, Plausible und Fathom darstellt.
• Feed Key for Stream Deck, unser Take eines Feedreaders für Elgatos Hardware-Steuerung, der per Badge über neue Inhalte in RSS-/Atom-Feeds, YouTube-Kanälen, GitHub-Releases und Podcasts informiert und die Quelle bei Tastendruck öffnet.

Auch diese stellen wir später hier im Blog nochmal genauer vor.

Seit wir unsere awork-Extension für Raycast vorgestellt haben, begleitet sie uns und viele andere Teams jeden Tag bei der Arbeit. Projekte finden, Aufgaben öffnen und Zeiten erfassen – direkt im Launcher und am Keyboard, mit wenigen Tasten­drücken. Jetzt legen wir nach: Das neue Update bringt einige Neuerungen, die awork und Raycast noch enger verbinden.

Für Raycast 2 und Windows

Mit dem Release der großen, neuen zweiten Version von Raycast sowie Raycasts Windows-Support haben wir das ebenfalls nachgezogen und die Extension für v2 und Windows fit gemacht (und sicher­gestellt, dass sie auch noch in v1 reibungslos weiterläuft).

Project & Task Keys

Vor Kurzem hat awork mit den Project und Task Keys ein auch von uns oft gewünschtes Feature geliefert: eindeutige IDs für Projekte und Aufgaben. Selbst­redend haben wir diese gleich in unsere Extension aufgenommen, voraus­gesetzt, ihr habt sie bereits in awork aktiviert. Ansonsten bleibt alles beim Alten.

Create Task / Edit Task

Der meist­gewünschte Feature-Request an uns war, dass wir bitte die Möglichkeit zum Erstellen und Editieren von awork-Aufgaben in die Extension integrieren sollen. Das haben wir nun getan: Create Task lässt sich neben Search Projects, Search Tasks und Log Time nun als gleich­wertiges Command aufrufen. Ist ein Projekt markiert, lässt sich per Submenü oder ^C bzw. – Grüße an die neuen Windows-Nutzer­*innen! – CTRL+C die Create-Maske voraus­gefüllt öffnen. Gleiches gilt für Tasks, die sich nun per Edit Task im Submenü oder per ^E bzw. CTRL+E direkt editieren lassen. Auch Unter­aufgaben lassen sich genauso erstellen – sofern es selbst noch keine Unter­aufgaben sind.

awork trifft Raycast AI

All diese Features lassen sich jetzt auch in sämtlichen AI-Funktionen von Raycast verwenden. Über @awork können Projekte und Aufgaben in natürlicher Sprache gesucht, Zeiten erfasst und Aufgaben angelegt oder bearbeitet werden. Bevor die AI eine Aufgabe erstellt oder ändert, werden die gewünschten Details Raycast-typisch nochmal zur Bestätigung angezeigt.

Ihr findet die aktualisierte Extension ab sofort im offiziellen Raycast Store.

Warum awork für uns so gut funktioniert und wie wir es gemeinsam mit unseren Kund­*innen einsetzen, zeigt unser awork-Videoporträt. Die Extension ist für uns die passende Ergänzung dazu: ein kleines Tool, das aus unserer täglichen Arbeit heraus entsteht und sich mit ihr und den wachsenden Funktionen von awork & Raycast weiter­entwickelt.

Wir erleben gerade in vielen Gesprächen, wie schnell sich Unternehmen rund um AI positionieren: In Workflows, auf Social Media und in neuen digitalen Produkten. Das ist richtig und wichtig. Gleichzeitig sollte die eigene Website diese Positionierung auch tragen können. Denn Inhalte werden längst nicht mehr nur als blaue Links in einer Treffer­liste gefunden, sondern von Such­maschinen, AI Overviews, Chatbots und LLM-basierten Assistenten eingeordnet, verdichtet und in neue Antwort­kontexte übertragen. Genau hier setzt GEO an: Generative Engine Optimization beschreibt die Optimierung von Inhalten und Strukturen für generative Antwort­systeme.

Für uns ist SEO/GEO deshalb kein neues Buzzword neben klassischer Such­maschinen­optimierung, sondern eine konsequente Weiter­entwicklung guter Corporate Websites. Eine Website muss fachlich stark, technisch sauber und semantisch eindeutig sein. Sie muss nicht nur erklären, was ein Unternehmen anbietet, sondern auch, für wen, in welchem Kontext, mit welcher Erfahrung und mit welchen Ergebnissen.

Genau darauf schauen Such­maschinen und AI-Systeme aus unterschiedlichen Perspektiven. Sie lesen Inhalte, erkennen Entitäten, bewerten Zusammen­hänge und ziehen daraus Kontext. Umso wichtiger wird, dass Leistungen, Personen, Projekte, Cases, Artikel und Kontakt­punkte nicht nur attraktiv dargestellt, sondern auch sauber strukturiert sind: mit klarer Informations­architektur, semantischem Markup, konsistenten Meta-Daten, einer gepflegten XML-Sitemap, strukturierten Daten mit JSON-LD und Schema.org sowie, wo sinnvoll, einer kuratierten llms.txt oder gar maschinen­lesbaren Endpunkten wie MCP-Servern.

Bei gewachsenen CMS-Websites ist das oft auch eine Frage der System­architektur. Individuelle SEO-Felder, historische Template-Logik und uneinheitliche Inhalts­modelle erschweren es, Inhalte sauber auszuspielen. Deshalb lohnt es sich, bestehende SEO-Daten, strukturierte Daten und redaktionelle Workflows gemeinsam zu betrachten. Entscheidend ist nicht ein einzelnes Plugin, sondern das Zusammen­spiel aus CMS, Frontend, Content-Modell und technischer Auszeichnung.

Hypercode unterstützt Unternehmen dabei, ihre Website zu einer belastbaren Wissens­basis für klassische Suche und AI-Systeme weiter­zuentwickeln. Wir betrachten dafür nicht nur einzelne SEO-Felder, sondern das Zusammen­spiel aus Positionierung, Content-Struktur, CMS, Frontend und semantischer Auszeichnung.

• SEO-/GEO-Audit bestehender Website- und Content-Strukturen
• Migration und Konfiguration von SEO-Systemen
• Informations­architektur für AI-lesbare Leistungs-, Projekt- und Wissens­seiten
• JSON-LD/Schema.org für Organisationen, Leistungen, Projekte, Artikel und Personen
• Semantisches HTML und technische Frontend-Optimierung
• XML-Sitemaps, Canonicals und konsistente Meta-Daten
• llms.txt und kuratierte AI-Übersichten
• Retrieval-freundliche Content-Strukturen für Chatbots und AI-Suchen

Damit liegt SEO/GEO genau an der Verbindung von Corporate Websites und AI Engineering. Eine moderne Unternehmens­website ist Marken­auftritt, Vertriebs­kanal und Wissens­quelle zugleich. Unser Anspruch ist, diese Ebenen nicht getrennt zu betrachten, sondern Websites so zu bauen und weiter­zuentwickeln, dass sie für Nutzer­*innen überzeugen und von Such­maschinen wie AI-Systemen zuverlässig verstanden und verlinkt werden.

Wenn Sie Ihre bestehende Website in diese Richtung weiter­entwickeln möchten, schauen wir gerne gemeinsam darauf: strategisch, redaktionell und technisch.