So importieren Sie eine Website per URL und erhalten ein E-Mail-Layout, das überall sauber rendert

Sie wollen HTML aus einer URL importieren (also eine veröffentlichte Website-Seite in einen Newsletter verwandeln)? Das ist ein super häufiger Workflow – und gleichzeitig eine der größten Quellen für „Warum ist mein Newsletter kaputt?!“.

Typische Situationen:

• Sie haben bereits eine Landingpage / Angebotsseite / Blogpost, und wollen sie schnell als Newsletter versenden.
• Ihr Designer veröffentlicht ein Template auf einer URL (z.B. Staging), und Marketing soll es nur noch importieren und senden.
• Sie haben es schon probiert – und in Outlook oder auf dem Handy bricht alles auseinander.

Die gute Nachricht: Mit Mailpro können Sie HTML direkt von einer URL importieren: HTML-Newsletter von einer URL importieren.

Die wichtige Wahrheit ist aber: Ein E-Mail-Client ist kein Browser. Was im Web perfekt aussieht, kann in Gmail, Outlook, Apple Mail oder mobilen Apps unterschiedlich gerendert werden. (Wenn Ihnen das bekannt vorkommt: Dieser Artikel erklärt genau warum) Warum E-Mails in jedem Posteingang anders aussehen.

Quick Answer: Warum „Website → Newsletter“ fast immer irgendwo bricht

Moderne Webseiten nutzen Dinge, die E-Mail-Programme (teilweise oder komplett) blockieren:

• JavaScript (in E-Mails praktisch immer deaktiviert)
• Modernes CSS (Flexbox/Grid/Positioning – besonders problematisch in Outlook)
• Externe CSS-Dateien (werden oft ignoriert oder gekürzt)
• Webfonts (nicht überall unterstützt)
• Relative Pfade (z.B. /img/banner.jpg funktioniert im E-Mail-Kontext nicht zuverlässig)
• Tracking/Redirects, die Links verändern (manchmal ok, manchmal überraschend)
• Bilder-Blocking (viele Postfächer zeigen Bilder erst nach Klick)

Wenn Sie intern Begriffe klären möchten: Mailpro hat ein Glossar für viele Grundlagen (HTML/CSS/Responsive etc.). Zum Beispiel: HTML und CSS für E-Mail-Design und die Definition: Was ist responsives E-Mail?.

So importieren Sie HTML aus einer URL in Mailpro (Schritt für Schritt)

1. Wählen Sie die richtige URL.
   Ideal ist eine Seite, die „email-friendly“ ist (kein JS für essentielle Inhalte, keine Layout-Abhängigkeit von Grid/Flex).
2. Import starten:
   Nutzen Sie die Funktion: HTML-Newsletter von einer URL importieren.
3. Nach dem Import sofort 3 Dinge prüfen:
   • Werden alle Bilder geladen?
   • Stimmen die Links (keine Staging-Domain, keine relativen Pfade)?
   • Ist das Layout „web-typisch“ (flex/grid) oder „email-typisch“ (Blöcke/Tabellen)?
4. Wenn der Import zu „webby“ ist:
   Nutzen Sie den Editor, um die kritischen Blöcke neu aufzubauen: Newsletter erstellen (Drag-and-drop).
5. Spam-Check vor dem Versand:
   Anti-Spam-Test
6. Tests an Gmail + Outlook + Mobile senden (mindestens 1 Gerät + 1 Desktop).

Alternative, wenn Sie bereits „sauberes“ E-Mail-HTML haben: Newsletter | HTML importieren.

Vorbereitung: So machen Sie eine URL „import-sicher“ (80/20-Regeln)

Wenn Sie die Seite selbst kontrollieren (oder ein Designer sie vorbereiten kann), sparen diese Regeln extrem viel Zeit:

• Kein JS für Kerninhalte (sonst wird der Import „leer“ oder unvollständig).
• Wichtige Styles inline (CSS direkt im Element – nicht nur in externen Dateien).
• Nur absolute URLs für Bilder und Links (immer https://...).
• Layout vereinfachen: lieber 1 Spalte oder email-sichere Blöcke/Tabellen.
• Bilder optimieren (kleinere Dateigröße, sinnvolle Abmessungen) + ALT-Texte.
• Breite e-mail-typisch (Container oft um ~600px – nicht zwingend, aber bewährt).

Wenn Sie mehr Struktur wollen, sind Frameworks ein guter Startpunkt: Newsletter-Frameworks (Strukturvorlagen).

Was nach dem URL-Import am häufigsten kaputtgeht (und wie Sie es fixen)

Unten ist ein Troubleshooting-Table, den Sie 1:1 als interne Checkliste nutzen können.

Troubleshooting: Problem → Ursache → Fix

1) CSS bricht weg (oder wird ignoriert)

Symptom: Farben, Spalten, Abstände oder Typografie verschwinden teilweise. Das passiert, weil E-Mail-Clients CSS stark einschränken – besonders externe Stylesheets und moderne Layout-Techniken.

Fixes:

• Wichtige Styles als Inline-CSS direkt in den Elementen.
• Hauptlayout „email-safe“ halten (Blöcke/Tabellen statt komplexer CSS-Layouts).
• Wenn nötig: Kernsektionen (Header/Hero/CTA/Footer) im Builder neu erstellen: Newsletter erstellen.

Hintergrundwissen (verständlich erklärt): HTML und CSS: Das dynamische Duo für E-Mail-Design.

2) Bilder laden nicht (meist wegen relativer URLs)

Auf Websites funktionieren relative Pfade – in E-Mails oft nicht. Stellen Sie sicher:

• Jedes Bild nutzt eine absolute URL: https://ihredomain.tld/pfad/bild.jpg
• Bilder sind öffentlich erreichbar (keine Auth, kein IP-Block)
• ALT-Texte sind gesetzt (weil Bilder häufig standardmäßig blockiert werden)

Praxistipps zum richtigen Umgang mit Bildern: Wie nutzt man Bilder im Email-Marketing richtig.

Sie verwenden Web-Inhalte wieder? Die Mailpro-Tarife importieren HTML von jeder URL in den Editor — aus einer Seite wird in Minuten ein Newsletter.

3) Outlook: der härteste Test

Wenn Ihr Newsletter in Outlook schlecht aussieht, sind Sie nicht allein. Outlook (Windows Desktop) rendert HTML anders als Gmail & Co. – und hat viele CSS-Limits.

Sehr konkrete Mailpro-FAQ dazu: Outlook-Probleme bei Ihrer E-Mail-Kampagne.

Fixes, die in der Praxis am zuverlässigsten sind:

• Hauptlayout vereinfachen (1 Spalte, klare Blöcke, ggf. Tabellen).
• Weniger „clevere“ CSS-Tricks – mehr robuste Basics.
• Wichtige CTA-Bereiche notfalls im Builder nachbauen: Newsletter erstellen.

4) Responsive auf Mobile: lesbar + klickbar

Viele Web-Layouts werden beim Import nicht automatisch „email-responsive“. Ziel ist nicht nur „passt irgendwie“, sondern: Text lesbar + Buttons leicht antippbar + kein horizontaler Scroll.

Definition/Grundlagen: Was ist responsives E-Mail?.

5) Links & Tracking: prüfen Sie jeden CTA

Nach dem Import passieren oft diese Fehler:

• Links zeigen auf Staging oder interne Umgebungen
• Relative Links funktionieren nicht
• Anchor-Links (Sprungmarken) sind im E-Mail-Client unzuverlässig
• Sehr lange Parameter/UTMs können unschön umbrochen werden

Best Practice: kurze, klare CTA-Links – und im Test jede Schaltfläche anklicken.

6) Spam-Risiko nach Import: unbedingt testen

Importiertes Web-HTML kann „spammy“ wirken, z.B. wenn: zu viele Bilder, zu wenig Text, zu schwere Dateien, defekte Links oder „trigger words“ enthalten sind.

Nutzen Sie vor dem Versand: Anti-Spam-Test. Wenn Sie verdächtige Wörter prüfen möchten: Liste der verbotenen Wörter.

7) Sonderzeichen / Umlaute werden als „komische Zeichen“ angezeigt

Manchmal ist das HTML korrekt, aber der Empfänger sieht Umlaute falsch. Dazu gibt es eine konkrete FAQ mit Lösungswegen: Warum werden in meiner Nachricht Sonderzeichen angezeigt?.

8) Abmeldelink & Compliance: nicht vergessen

Wenn Sie eine Website-Seite importieren, fehlen oft Pflicht-Elemente wie Abmeldung. Mailpro verwaltet Abmeldungen automatisch: Verwaltung von Abmeldungen.

Zwei Strategien, die URL-Importe „retten“, wenn es kompliziert wird

Option A: Statt Web-Seite ein echtes E-Mail-HTML importieren

Wenn Ihr Team ein „email-sicheres“ HTML bereitstellen kann (Inline-CSS, stabile Struktur), ist das oft sauberer als die komplette Website-Seite: Newsletter | HTML importieren.

Option B: Import nur als Content-Quelle – Layout im Builder neu bauen

Wenn die Seite stark auf flex/grid/JS basiert, ist das oft die schnellste Profi-Lösung: Importieren → Text/Bilder übernehmen → Layout in Blöcken neu erstellen. Tool: Newsletter erstellen.

Bonus: Personalisierung macht aus „kopiertem Content“ eine performante Kampagne

URL-Import spart Zeit – aber Performance kommt oft durch Personalisierung (Name, Ort, Angebot, Segment). In Mailpro können Sie dafür dynamische Felder nutzen (z.B. in Kampagnen): E-Mail-Kampagnen (inkl. Dynamische Felder).

Deliverability-Boost: SPF konfigurieren (kleiner Schritt, große Wirkung)

Wenn Sie Kampagnen senden, lohnt sich eine saubere Authentifizierung, um im Posteingang zu landen. Startpunkt: SPF konfigurieren.

Wenn „Import von URL“ zu mühsam ist: mit Vorlagen starten

Manchmal ist der schnellste Weg zum stabilen Ergebnis: eine responsive E-Mail-Vorlage wählen und den Website-Content dort einfügen. Galerie: Über 500 professionelle & responsive E-Mail-Vorlagen.

FAQ: HTML aus URL importieren

Kann ich wirklich jede Website-Seite importieren und einfach senden?

Nicht jede. Seiten, die stark auf JavaScript oder moderne Layouts (Grid/Flex) angewiesen sind, müssen fast immer vereinfacht werden. Eine „statische HTML-Version“ ohne JS ist oft die beste Basis für den Import.

Warum sieht es in Gmail gut aus, aber in Outlook schlecht?

Outlook rendert HTML/CSS anders und unterstützt vieles nicht sauber. Hier ist die passende FAQ: Meine Kampagne sieht in Outlook nicht gut aus. Der zuverlässigste Fix ist ein vereinfachtes, email-sicheres Layout.

Was ist besser: Import per URL oder HTML-Datei/Code importieren?

URL-Import ist ideal für den Workflow „Designer veröffentlicht → Marketing importiert“: Importieren von URL.
HTML-Import ist oft besser, wenn Sie bereits ein echtes E-Mail-Template haben: HTML importieren.

Wie prüfe ich schnell, ob mein importierter Newsletter spam-gefährdet ist?

Nutzen Sie vor dem Versand den Test: Anti-Spam-Test. Er hilft u.a. bei defekten Links, „Spamwörtern“ und schlechtem Bild-Text-Verhältnis.

Finale Copy-Paste-Checkliste

• Bilder: absolute HTTPS-URLs + öffentlich erreichbar + ALT-Texte
• Links/CTAs: alles klicken & prüfen, keine relativen Links
• CSS: wichtige Styles inline, Layout simpel (email-safe)
• Outlook: extra testen, ggf. kritische Blöcke im Builder neu bauen
• Mobile: 1 Spalte, lesbare Schrift, große Buttons
• Spam: Anti-Spam-Test + Bild/Text ausbalancieren
• Abmeldung: sauber integriert und sichtbar

Kurz-Workflow: URL importieren → Bilder/Links/CSS fixen → ggf. mit Newsletter erstellen stabilisieren → mit Anti-Spam testen → Testsendungen → Versand.