Bootstrap ist das Framework hinter unzähligen Websites und Web-Apps, und früher oder später muss jede davon E-Mails versenden: eine Willkommensnachricht nach der Registrierung, einen Link zum Zurücksetzen des Passworts, eine Bestellbestätigung. Unsere kostenlosen E-Mail-Vorlagen für Bootstrap-Projekte liefern Ihnen Designs, die zum Look Ihrer Website passen und zugleich Markup verwenden, das Postfächer tatsächlich verstehen.
Warum Bootstrap-E-Mail-Vorlagen anderes HTML brauchen
Eine Bootstrap-Seite setzt auf Flexbox, Media Queries und ein Stylesheet, das aus einer Datei oder über ein CDN geladen wird. E-Mail-Clients behandeln alle drei ganz anders als Browser:
- Keine verlinkten Stylesheets. Gmail, Outlook.com und Yahoo Mail ignorieren eine aus der E-Mail verlinkte CSS-Datei, sodass Bootstrap-Klassen ohne zugehörige Styles im Postfach ankommen.
- Kein Flexbox im klassischen Outlook. Outlook für Windows stellt E-Mails mit der Rendering-Engine von Word dar, die weder Flexbox noch Floats noch Positionierung unterstützt – ein Bootstrap-Raster zerfällt dort.
- Wenig Platz für CSS. Gmail begrenzt die Größe eines Style-Blocks in einer E-Mail, und das vollständige Bootstrap-Stylesheet ist um ein Vielfaches größer als dieses Limit.
Deshalb bauen E-Mail-Entwickler Layouts mit Tabellen und Inline-Styles. Blocks erledigt diese Arbeit für Sie: Die Vorlagen bestehen aus tabellenbasierten Strukturen mit Styles direkt in den Elementen, enthalten Korrekturen für Outlook und passen sich in E-Mail-Clients, die das unterstützen, an Smartphone-Bildschirme an.
Eine Blocks-Vorlage in einem Bootstrap-Projekt verwenden
- Wählen Sie eine Vorlage und passen Sie Farben, Schriften und Logo an, damit sich die E-Mail wie ein Teil Ihrer Website anfühlt.
- Exportieren Sie das Ergebnis als HTML-Datei oder als ZIP-Archiv mit Bildern oder kopieren Sie den Code direkt aus dem Editor.
- Speichern Sie das HTML als E-Mail-Vorlage in Ihrem Projekt und ersetzen Sie Namen, Links und Bestelldaten durch die Variablen Ihrer Template-Engine.
- Versenden Sie die E-Mail über Ihren SMTP-Server oder eine E-Mail-API wie Amazon SES oder SendGrid und ergänzen Sie eine Nur-Text-Version für Leser, deren E-Mail-Apps kein HTML anzeigen.
Wenn Sie E-Mails lieber von Hand mit Bootstrap-ähnlichen Klassen schreiben, gibt es ein separates Open-Source-Projekt namens Bootstrap Email, das solches Markup in Tabellen und Inline-Styles kompiliert. Es wird unabhängig vom Bootstrap-Team entwickelt und erfordert einen Build-Schritt auf Ihrem Rechner. Blocks geht stattdessen den visuellen Weg: Sie gestalten im Browser und erhalten sofort fertiges HTML.
E-Mails, die jede Bootstrap-Website versendet
- Willkommens-E-Mails, die neue Nutzer begrüßen und sie zum ersten Schritt in Ihrem Produkt führen.
- E-Mails zum Zurücksetzen des Passworts mit einem klaren Button und einem kurzen Hinweis, wann der Link abläuft.
- Bestellbestätigungen für Shops und Buchungsseiten, die eine vertrauenswürdige Zusammenfassung des Kaufs brauchen.
- Onboarding-E-Mails für Web-Apps, die Funktionen Nachricht für Nachricht vorstellen.
Tipps für E-Mail-Vorlagen in Webprojekten
- Bilder öffentlich hosten. Absolute Bild-URLs laden in jedem Postfach, während aus Ihrer App kopierte relative Pfade nicht funktionieren.
- In mehr als einem Client testen. Prüfen Sie mindestens Gmail, Apple Mail und Outlook für Windows, bevor Sie eine neue Vorlage ausliefern.
- Variablen eindeutig benennen. Lesbare Platzhalter zeigen dem nächsten Entwickler genau, welcher Wert wohin gehört.
- Vorlagen im Repository ablegen. Speichern Sie das E-Mail-HTML neben dem Code, der es versendet, damit jede Änderung ein Review durchläuft.
Mehr zur Wahl des Markups erfahren Sie in unserem Vergleich von E-Mail-Frameworks und im Leitfaden zu HTML- versus reinen Text-E-Mails. Wenn Ihre App viele System-E-Mails versendet, hilft Ihnen die Übersicht über Transaktions-E-Mail-Dienste bei der Wahl eines Anbieters.
Holen Sie sich kostenlose E-Mail-Vorlagen für Bootstrap-Projekte
Wählen Sie oben eine Vorlage aus, gestalten Sie sie passend zu Ihrem Bootstrap-Theme und exportieren Sie sauberes HTML für Ihre App. Versendet Ihr Team auch Newsletter, lässt sich dasselbe Design direkt zu Mailchimp oder HubSpot exportieren.