Eine Seite als Safari Web Archive für den UnHTML Import speichern

Ja. Ein Safari Web Archive ist einer von drei Dateitypen, die UnHTML direkt annimmt: die .webarchive Datei genauso in das Plugin ziehen wie eine eigenständige .html Datei, ohne CLI Einrichtung, ohne vorher ein Bookmarklet zu installieren. Entscheidend ist alles, was vor diesem Ziehen passiert: was ein .webarchive wirklich erfasst, worin es sich von einem einfachen HTML Export unterscheidet, und wann es genug von einer Seite erfasst, damit sich der Import lohnt.

Was eine .webarchive Datei wirklich ist

Ein .webarchive bündelt das HTML einer Seite zusammen mit ihrem verlinkten CSS, JavaScript und den Bildern in einer einzigen Datei. Das ist der ganze Unterschied zu einem einfachen .html Export, der nur das Markup behält und jede verlinkte Ressource zurücklässt, wo sie beim nächsten Öffnen an anderer Stelle prompt einen 404 Fehler wirft. Ein Web Archive speichert diese aneinandergereihten Quelldateien im binären Plist Format, serialisiert mit NSKeyedArchiver, und die Windows Unterstützung wurde bereits 2012 eingestellt. Heute wird es ausschliesslich auf Apple Plattformen erstellt und gelesen: macOS und iOS oder iPadOS. Wer eine Datei an eine Kollegin oder einen Kollegen mit Windows weitergibt, sollte das wissen: dortiges Safari, falls überhaupt noch vorhanden, kann die Datei nicht öffnen, ein Mac oder ein iOS Gerät bleibt daher der naheliegende Ort, um die Datei vor dem Import zu prüfen.

Der Grund, warum verschachtelte Inhalte die Reise überstehen, ist strukturell bedingt, kein Zufall. Das WebArchive Objekt in WebKit enthält eine Hauptressource zusammen mit ihren Teilressourcen und den Archiven ihrer Subframes, und jeder verschachtelte Frame bringt seine eigenen gebündelten Ressourcen mit, statt für sie auf die Live Seite zurückzuverweisen. Kopiert man stattdessen eine einfache HTML Datei, verschwinden ein eingebettetes Iframe, ein Inline Videoplayer oder ein Drittanbieter Widget meist, sobald die Datei ausserhalb des ursprünglichen Tabs geöffnet wird.

Das ist für einen Import relevant. Eine Seite, die in Figma nachgebaut werden soll, ist selten ein einziges flaches Dokument. Marketing Seiten betten häufig einen Videoplayer, ein Buchungs Widget oder eine Vergleichstabelle ein, die von einem anderen Ursprung ausgeliefert wird, jeweils als Iframe. Ein .webarchive hält diesen Inhalt an der Datei fest. Ein einfacher HTML Export nicht.

Ein Web Archive auf dem Mac speichern

Voraussetzung: Safari auf macOS, geöffnet auf der Seite, die erfasst werden soll.

1. Die Seite in Safari öffnen und vollständig laden lassen, einschliesslich allem, was erst beim Scrollen nachlädt.
2. Datei (File) und dann Sichern unter (Save As) wählen.
3. Unter Format Web Archive auswählen. Seitenquelltext behält nur das rohe Markup, und Webseite, nur HTML wirft die meisten verlinkten Ressourcen weg, keine der beiden Optionen bündelt eine Seite so wie Web Archive.
4. Speichern, und sich den Zielordner merken, um die Datei für den Importschritt wiederzufinden.

Apple beschreibt die gespeicherte Kopie so, dass ihre Links nur solange funktionieren, wie die Zielseiten online bleiben: sie ist eine Momentaufnahme der Seite zum Zeitpunkt des Speicherns, kein eigenständiger Spiegel jeder Seite, auf die verlinkt wird. Für einen Import spielt dieser Unterschied kaum eine Rolle. UnHTML braucht nur die gespeicherte Seite, nicht alles, worauf diese Seite verlinkt.

Ein Web Archive auf iPhone oder iPad speichern

Voraussetzung: Safari auf iOS oder iPadOS 13 oder neuer.

1. Die Seite in Safari öffnen und vollständig laden lassen.
2. Auf das Teilen Symbol tippen.
3. In Dateien sichern wählen und einen Ort auswählen, der später vom Mac aus erreichbar ist, etwa iCloud Drive oder ein synchronisierter Ordner.
4. Das Speichern bestätigen und die Datei danach auf den Mac verschieben, sobald der Import ansteht.

Der mobile Weg lohnt sich vor allem für Seiten, die ausschliesslich auf einem Telefon oder Tablet begegnen: die Landingpage eines Wettbewerbers, geöffnet über einen App Link, eine Werbe E-Mail, die nur in mobilem Safari öffnet, oder ein Layout, das an seinem mobilen Breakpoint tatsächlich ein anderes Design zeigt. Sobald die Datei auf einem Mac liegt, funktioniert der Import genauso wie bei jedem anderen .webarchive, unabhängig davon, welches Gerät es erstellt hat.

Das .webarchive in UnHTML importieren

UnHTML akzeptiert genau drei Eingabetypen, direkt in das Plugin gezogen: eine eigenständige .html Datei, ein Safari .webarchive, oder ein scene.json, erfasst mit der eigenen quelloffenen CLI oder dem Bookmarklet. Eine Live URL ruft es nicht selbst ab. Etwas muss die Seite zuerst erfassen, und ein .webarchive ist die schnellste Erfassung ohne jede Einrichtung: keine CLI zu installieren, kein Bookmarklet in eine Lesezeichenleiste zu ziehen.

Ein .webarchive reicht aus, wenn der Seiteninhalt zum Zeitpunkt des Speicherns bereits im DOM vorhanden ist: Marketing Seiten, Dokumentation, die meisten Blogeinträge und Langtextartikel, serverseitig gerenderte Preistabellen. Wo es an Grenzen stösst, ist alles, was nach dem ersten Laden weiter rendert. Eine Single Page Anwendung auf Basis von React oder Vue, oder eine Seite, die Ressourcen von einem anderen Ursprung nachlädt, kann in einer gespeicherten Momentaufnahme mitten im Rendern einfrieren oder Cross Origin (CORS) Inhalte komplett verlieren. Genau diese Lücke soll die eigene CLI oder das Bookmarklet von UnHTML schliessen, indem stattdessen eine JavaScript gerenderte Seite erfasst wird als scene.json Datei mit bereits vollständig gerendertem Zustand und bereits aufgelösten externen Ressourcen.

Eine schnelle Prüfung vor dem Import: das gespeicherte .webarchive offline erneut öffnen. Sieht es identisch zur Live Seite aus? Der Import sollte sauber gelingen. Sind Abschnitte leer oder fehlen Bilder? Dann lieber zur CLI Erfassung statt zum Dateispeichern greifen.

Sobald der Import läuft, wandelt UnHTML CSS Layouts in natives Figma auto layout für flex, grid und block um, wo immer möglich. Die kostenlose Stufe begrenzt einen Import auf 500 Ebenen und fällt darüber hinaus auf absolute Positionierung zurück. Dieses Limit aufzuheben und volle auto layout Konvertierung auf grösseren Seiten zu erhalten, ist das, was die kostenpflichtigen Stufen hinzufügen.

Ein häufiger Anwendungsfall für diesen ganzen Ablauf: die Preisseite eines Wettbewerbers zerlegen, um zu sehen, wie sie aufgebaut ist. Diese Seite ist meist serverseitig genug gerendert, dass ein .webarchive sie vollständig erfasst, Tabellen, Icons und alles, sodass hier kaum ein Grund besteht, zur CLI zu greifen. Man vergleiche das mit einer Marketing Seite auf Basis eines JavaScript Frameworks, bei der die Preistabelle erst nach einer clientseitigen Abfrage erscheint. Diese Seite mit Datei, Sichern unter zu speichern, friert die Erfassung oft ein, bevor die Tabelle rendert, sodass beim erneuten Öffnen ein leerer Abschnitt zurückbleibt. Das ist das Signal, zur CLI oder Bookmarklet Erfassung zu wechseln.

Was die Reise weiterhin nicht übersteht

Selbst ein sauberer .webarchive Import hat Grenzen, und UnHTML listet sie im Importbericht auf, statt sie später entdecken zu lassen.

Jede Schriftart, die nicht lokal installiert ist, wird ersetzt, standardmässig durch Inter, und jede Ersetzung wird in diesem Bericht aufgeführt, sodass nichts unbemerkt getauscht wird. Verlässt sich eine Seite auf eine lizenzierte Display Schriftart, die nicht installiert ist, erscheint sie dort markiert, statt wie beabsichtigt gerendert zu werden. Wie fehlende Schriftarten ersetzt und protokolliert werden erklärt die vollständige Mechanik.

Layout ist der andere Punkt, an dem sich etwas verschieben kann. Komplexe CSS Grid Layouts, die sich nicht sauber auf Figmas auto layout abbilden lassen, fallen stattdessen auf absolute Positionierung zurück. Das Ergebnis ist ein originalgetreuer, editierbarer Satz an Ebenen, keine exakte Kopie der Ausgangsseite, und diese Ehrlichkeit ist beabsichtigt: der Importbericht ist der Ort, an dem jede Schriftersetzung und jeder Layout Rücksprung aufgelistet wird, damit vorher genau klar ist, was zu prüfen ist, nicht erst hinterher.

Fazit

Ein Safari Web Archive ist der schnellste Weg, UnHTML eine echte Momentaufnahme einer Seite zu übergeben: auf dem Mac über das Menü Datei speichern oder auf iOS über die Teilen Übersicht, und die Datei danach direkt in das Plugin ziehen. Es funktioniert gut für alles, was zum Speicherzeitpunkt bereits gerendert war. Für Seiten, die nach dem Laden clientseitig weiterrendern, bleibt die CLI oder Bookmarklet Erfassung der zuverlässigere Weg. So oder so zeigt der Importbericht genau, was unversehrt ankam und was unterwegs ersetzt wurde.