Weswegen
Tippen, um zu suchen
    Esc zum Schließen · Sofortsuche auf der ganzen Website

    Website mit Keynote erstellen: HTML-Export & Grenzen

    · Weswegen-Redaktion
    Website erstellen

    Apple Keynote kann Folien als HTML exportieren. Das Ergebnis lässt sich im Browser öffnen und sieht auf den ersten Blick aus wie eine Website, ist aber technisch eine im Browser abgespielte Präsentation. Wer diesen Unterschied kennt, kann Keynote gezielt nutzen: für einen schnellen visuellen Einseiter, einen klickbaren Prototyp oder eine Design-Vorlage. Unten folgt der Export Schritt für Schritt, dazu die Grenzen bei Mobil, SEO und Barrierefreiheit — und der Punkt, ab dem sich ein echtes Web-Werkzeug lohnt.

    Was Keynote beim HTML-Export wirklich erzeugt

    Beim Export über Ablage → Exportieren zu → HTML schreibt Keynote einen Ordner auf die Festplatte. Darin liegen eine index.html und ein Unterordner assets mit den Bildern und Skripten. Öffnen Sie die index.html, startet kein scrollbares Web-Layout, sondern ein Folienplayer: Es wird immer eine Folie bildschirmfüllend angezeigt, mit Navigationspfeilen zum Vor- und Zurückblättern. Übergänge und Aufbau-Effekte (Builds) werden nachgebildet.

    Wichtig für die Erwartung: Es entsteht keine Website mit mehreren verlinkten Unterseiten und keine durchgehend scrollbare Seite. Jede Folie hat eine feste Pixelgröße (etwa 1920 × 1080 im Breitbildformat), und genau diese Größe wird auch im Browser fix dargestellt. Das prägt alle weiteren Vor- und Nachteile.

    Schritt für Schritt: Von der Folie zum HTML-Export

    1. Foliengröße festlegen

    Weil der Export die Foliengröße unverändert übernimmt, entscheiden Sie hier bereits über das Endformat. Öffnen Sie in der Seitenleiste rechts den Reiter Dokument und wählen Sie unter Foliengröße ein Seitenverhältnis (Standard ist 16:9). Über Eigene Foliengröße legen Sie ein anderes Format fest, etwa ein höheres für einen kompakteren Einseiter. Beachten Sie aber: Der HTML-Player passt jede Folie an die Fenstergröße an und scrollt nicht — ein extrem hohes Format wird also verkleinert dargestellt, nicht durchscrollbar.

    2. Inhalte gestalten

    Nutzen Sie Textfelder, Formen und Bilder. Für wiederkehrende Elemente wie Kopf- und Fußzeile arbeiten Sie mit Masterfolien: Über Ansicht → Masterfolien bearbeiten ändern Sie ein Layout einmal, die Änderung gilt danach automatisch für alle Folien, die dieses Layout nutzen. Um einer einzelnen Folie ein anderes Layout zuzuweisen, nutzen Sie den Button Folienlayout in der Format-Seitenleiste rechts. Die Ausrichtungslinien beim Verschieben helfen zusätzlich, Abstände sauber zu halten.

    3. Verlinkungen setzen

    Markieren Sie ein Textstück oder ein Objekt, halten Sie Ctrl gedrückt, klicken Sie darauf und wählen Sie Link hinzufügen aus dem Kontextmenü. Als Ziel stehen zur Verfügung: eine Webseite, eine E-Mail-Adresse, eine Telefonnummer, eine bestimmte Folie oder „Präsentation verlassen”. Genau diese Links bleiben im HTML-Export erhalten und machen aus dem Player eine bedienbare Oberfläche.

    Damit die Seite sich wie eine anklickbare Website und nicht wie eine durchblätterbare Präsentation verhält, öffnen Sie in der Seitenleiste rechts den Reiter Dokument und stellen Sie im Einblendmenü Präsentationstyp die Option Nur Links ein. In diesem Modus wechselt die Ansicht ausschließlich über die von Ihnen gesetzten Links, nicht mehr per Klick ins Leere oder Pfeiltaste. So bauen Sie einen echten Klick-Prototyp.

    5. Exportieren

    Öffnen Sie Ablage → Exportieren zu → HTML…, bestätigen Sie den Dialog und wählen Sie einen Zielordner. Keynote legt dort den kompletten Ordner mit index.html und assets an.

    6. Testen und hochladen

    Doppelklicken Sie lokal die index.html, um alles im Browser zu prüfen: Stimmen die Links, laden alle Bilder? Für die Veröffentlichung laden Sie den gesamten Ordner (nicht nur die index.html) per FTP oder über die Dateiverwaltung Ihres Hosters hoch. Fehlt der assets-Ordner, bleibt die Seite leer. Wie Sie ganz ohne eigene Domain testen können, lesen Sie unter Website erstellen ohne Domain.

    Grenzen dieser Methode

    Die feste Foliengröße und der Präsentations-Ursprung führen zu drei handfesten Einschränkungen, die Sie vor dem Projektstart kennen sollten.

    • Nicht responsiv: Die Seite hat eine fixe Pixelbreite. Auf dem Smartphone wird sie herunterskaliert oder mit Rändern angezeigt, Texte werden winzig. Echtes responsives Verhalten mit umbrechenden Spalten kennt der Export nicht.
    • Schwache SEO: Der Export ist bild- und skriptlastig und liefert kaum semantisches HTML (Überschriften-Tags, sauberer Textfluss, Meta-Struktur). Es gibt nur eine index.html ohne eigene URLs pro Abschnitt. Suchmaschinen können Inhalte dadurch schlecht erfassen und einordnen.
    • Barrierefreiheit und Wartung: Screenreader und Tastaturnavigation stoßen schnell an Grenzen, Alt-Texte werden nicht als echte HTML-Attribute übernommen. Und: Für jede Textänderung müssen Sie in Keynote korrigieren und den kompletten Ordner neu exportieren und hochladen.

    Für eine Seite, die bei Google ranken, auf allen Geräten gut aussehen und leicht pflegbar sein soll, ist der Keynote-Export damit das falsche Werkzeug.

    Wofür sich Keynote wirklich lohnt

    Spielt man die Stärken aus, statt gegen die Schwächen zu arbeiten, ist Keynote überraschend nützlich:

    • Klickbarer Prototyp: Für die Abstimmung mit Kunden oder Team bauen Sie im „Nur Links”-Modus einen Klick-Dummy, ähnlich wie man Figma für Website-Entwürfe einsetzt. Ideen lassen sich so ohne eine Zeile Code testen.
    • Design-Vorlage zur Übergabe: Das Layout dient als visuelle Vorgabe, die ein Entwickler anschließend sauber in HTML/CSS oder ein CMS umsetzt.
    • Einfacher visueller Einseiter: Für ein kurzlebiges Event, eine interne Ankündigung oder eine Seite, bei der Auffindbarkeit über Google keine Rolle spielt, reicht der Export aus.

    Der bessere Weg zu einer echten Website

    Sobald die Seite dauerhaft online, mobilfreundlich und auffindbar sein soll, greifen Sie zu einem echten Web-Werkzeug:

    • Homepage-Baukästen (Wix, Squarespace, Jimdo) mit Drag-and-drop sind für Einsteiger am schnellsten und liefern responsive Vorlagen und Hosting aus einer Hand.
    • WordPress bietet mit Themes und Plugins maximale Flexibilität und ist auf Suchmaschinen ausgelegt.
    • Von Hand in HTML/CSS lernen Sie am meisten. Ein Einstieg mit einfachem Editor ist unter HTML-Website mit Notepad erstellen beschrieben.
    • Design-first mit späterem Web-Export: Wer visuell aus einem Grafikprogramm heraus arbeitet, findet unter Website erstellen mit Affinity Designer einen praxisnahen Weg.

    FAQ

    Kann Google eine mit Keynote erstellte Seite finden? Nur schlecht. Der HTML-Export liefert kaum semantisches Markup und nur eine einzige Datei ohne eigene URLs pro Thema. Für Suchmaschinen ist das schwer verwertbar. Wenn Sichtbarkeit wichtig ist, nutzen Sie ein CMS oder handgeschriebenes HTML.

    Ist die exportierte Seite auf dem Smartphone bedienbar? Sie wird angezeigt, aber nicht responsiv angepasst. Die feste Foliengröße wird nur skaliert, wodurch Texte klein und Bedienelemente eng werden. Für mobile Nutzung ist die Methode ungeeignet.

    Was kostet Keynote? Keynote ist Teil von Apples iWork-Paket und auf Mac, iPad und iPhone kostenlos. Auch über iCloud.com lässt es sich im Browser nutzen. Für den HTML-Export entstehen keine zusätzlichen Softwarekosten.