I have a question as I am relatively new to the HTML and CSS field. I have created a responsive email page and intended to send it via Outlook. However, when I insert it into Outlook, the email appears distorted and strange-looking, with only some elements having CSS styles applied.
Is the issue with my code or with Outlook itself? I have copied the HTML file as plain text, and it appears correctly with proper formatting in other email clients. I’m unsure why Outlook is causing this problem.
I would appreciate any insights or suggestions on how to resolve this issue. Should I make any specific adjustments to my code to ensure proper rendering in Outlook? Here’s the code I’ve been working with:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Klessig Immobilien</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ysabeau+SC:wght@100;200;300&display=swap');
* {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "Ysabeau SC";
background-color: #1D1A1D;
font-size: 19px;
max-width: 800px;
margin: 0 auto;
padding: 3%;
}
img {
max-width: 100%;
}
header {
width: 98%;
}
#logo {
max-width: 180px;
float: left;
}
#wrapper {
background-color: #1D1A1D;
}
#social {
float: right;
margin: 3% 2% 4% 3%;
list-style-type: none;
}
#social>li {
display: inline;
}
#social>li>a>img {
max-width: 55px;
}
h1 {
margin: 3%;
color: #BFA158;
}
p {
margin: 3%;
color: #ffffff;
font-family: "century schoolbook";
}
.btn {
display: block;
margin: 0 auto;
text-align: center;
font-family: "Arial";
background-color: #303840;
color: #f6faff;
text-decoration: none;
font-weight: 800;
padding: 8px 12px;
border-radius: 8px;
letter-spacing: 2px;
max-width: 210px;
}
hr {
height: 3px;
background-color: #BFA158;
clear: both;
width: 100%;
margin-top: 3%;
}
#contact {
font-family: "Arial";
text-align: center;
text-decoration: none;
padding-bottom: 3%;
line-height: 16px;
font-size: 12px;
color: #ffffff;
}
</style>
</head>
<body style="font-family:'Ysabeau SC';background-color:#1D1A1D;font-size:19px;max-width:800px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;padding-top:3%;padding-bottom:3%;padding-right:3%;padding-left:3%;">
<div id="wrapper" style="background-color:#1D1A1D;">
<header style="width:98%;">
<div id="logo" style="max-width:180px;float:left;">
<a href="https://www.klessig-immobilien.de/">
<img src="https://i.imgur.com/fp3w9qx.png" alt="" />
</a>
</div>
<div>
<ul id="social" style="float:right;margin-top:3%;margin-bottom:4%;margin-right:2%;margin-left:3%;list-style-type:none;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<a href="https://www.instagram.com/klessigimmobilien/" target="_blank">
<img src="https://i.imgur.com/iyMGthV.png" alt="" style="max-width: 70px;" />
</a>
</td>
</tr>
</table>
</ul>
</div>
</header>
<div id="banner">
<img src="https://i.imgur.com/kDgHJPr.png" alt="" style="max-width:100%;" />
</div>
<div class="one-col">
<h1 style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#BFA158;">Klessig Immobilien</h1>
<p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
Hallo,
</p>
<p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
wir möchten Ihnen gerne unseren neuesten Service vorstellen: virtuelle Besichtigungen mit einem beeindruckenden 3D-Rundgang sowie hochwertige Luftaufnahmen.
</p>
<p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
Stellen Sie sich vor, Ihre Kunden könnten Ihr Ambiente besichtigen, ohne vor Ort sein zu müssen. Klingt nach Sciencefiction? Mit unserer innovativen Technologie ermöglichen wir genau das!
</p>
<p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
Die Vorteile sind enorm: Ihre Kunden werden neugierig und interessiert, wenn sie Ihr Gewerbe vorab erleben können, was die Wahrscheinlichkeit erhöht, dass sie sich für einen Besuch/Kauf bei Ihnen entscheiden.
</p>
<p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
Noch besser: Wir bieten Ihnen eine kostenlose Beratung an, um Ihre individuellen Bedürfnisse zu besprechen und Ihnen zu zeigen, wie virtuelle Besichtigungen Ihres Gewerbes zum Erfolg verhelfen können. Sie können unser Produkt direkt erwerben oder eine
persönliche Vorstellung anfordern, bei der wir Ihnen gerne weitere Details präsentieren.
</p>
<p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
Mit freundlichen Grüßen,
</p>
<p style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;color:#ffffff;font-family:'century schoolbook';">
Ihr Klessig Immobilien Team
</p>
<a href="tel:+4917655498237" class="btn" style="display:block;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;text-align:center;font-family:'Arial';background-color:#303840;color:#f6faff;text-decoration:none;font-weight:800;padding-top:8px;padding-bottom:8px;padding-right:12px;padding-left:12px;border-radius:8px;letter-spacing:2px;max-width:210px;">Jetzt Anrufen<br />05541 / 7588288</a>
<hr style="height:3px;background-color:#BFA158;clear:both;width:100%;margin-top:3%;" />
<footer>
<p id="contact" style="margin-top:3%;margin-bottom:3%;margin-right:3%;margin-left:3%;font-family:'Arial';text-align:center;text-decoration:none;padding-bottom:3%;line-height:16px;font-size:12px;color:#ffffff;">
Klessig Immobilien <br /> Falderbaumstr. 16a <br /> 34123 Kassel <br /> 05541 / 7588288 <br /> [email protected]
</p>
</footer>
</div>
</div>
</body>
</html>I have already tried making the style inline, but it doesnt work
3
Answers
Outlook interprets differently from other emails, you can use specific conditions for this email
Here an example on stack overflow here.
This website list what you can use on outlook
I check your code with this website.
Error in CSS :
Error in HTML :
When it comes to rendering HTML as email templates in Outlook, it’s important to consider the various versions of Outlook (such as Outlook for Windows, Outlook for Mac, and Outlook on the web) and their differing levels of support for HTML and CSS features.
I recommend reading through the guide carefully and considering its suggestions for overcoming rendering challenges in Outlook. Additionally, testing your email templates in different versions of Outlook and using tools like Litmus or Email on Acid can help you identify and address any specific rendering issues.
For coding emails you have to follow table-based approach and write inline CSS. That’s the best way to do it.
First, you have to give the main structure with tables and then inside of the table cells you can use div, p, a etc. tags where necessary. And in some cases, you have to use nested tables to give the structure (For example: side by side contents). For that, you can’t use display flex, grid or float as it is email. A lot of things that work perfectly on webpages will not work on emails.
Even if you learn almost all the best practices of email coding still there will be Outlook issues which are really challenging to deal with.
And unfortunately, I don’t have a good specific suggestion to bring this html page into an email friendly html except reconstructing it with table-based approach.