standardowy HTML+CSS vs. reguły html-Email

0

Dzień dobry, szukam rozwiązania do następującego problemu:
Otrzymałem zlecenie by stworzyć wiadomość e-mail zakodowaną w html. Utworzyłem taką stronę wraz ze stylami css. Na końcu okazało się, że żadna przeglądarka lub klient poczty nie akceptuje najnowszego stylu tworzenia html, a więc nie akceptuje podziału na

ani części styli css. Taki html powinien więc składać się z tabli, w oldschoolowym stylu. Moje pytanie brzmi, czy muszę pisać od nowa cały kod(nie pisałem nigdy w starym stylu, musiałbym teraz się go nauczyć), czy istnieje jakiś sposób aby przekonwertować już istniejący html na taki, który 'przejdzie' przez klienta poczty. Poniżej znajduje się sposób,w jaki ja utworzyłem swój e-mail.
Z góry dziękuję za rozważenie tematu! Pozdrawiam
Mateusz</p> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>
</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=320, target-densitydpi=device-dpi">
</head>
<style type="text/css">
#content{
height:1080px; width:640px; border-style:solid; border-width:1px;
}

#top{
height:75px; border-bottom-style:solid; border-width:1px; background-color:#b0c4de; 
}

#top .top-left img{
margin-left:2px;
margin-top:2px;
float:left;
}

#top .top-right{
margin-right:15px; 
margin-top:15px;
float:right;
}

#logo{
width:640px;
height:263px; 
}

#up{
height:400px;
}

#up .bottom{
height:40px;background-color:black; padding-top:20px;
}
#up .bottom .bottom-content {
color: white; letter-spacing: 2px; font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; margin-left:15px;" 
}
#middle{
width: 640px; height:515px; 
}
#middle .left{
padding-left:15px;
padding-right:15px;
float: left; 
width: 170px; height:515px ; border-right-style:solid; border-width:1px; background-color:#E0E0E0;
}
#middle .left-content{
font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif; font-size: 12px; line-height: 16px; color: #7a7a7a; margin-top: 0px; margin-bottom: 16px;
}

#middle .right{
float: right; width: 420px; height:515px; text-align:left;
}
#middle .right-content{
font-family:Arial,sans-serif; font-size:10pt; line-height:17px;
}

#down{
width:640px;
height:165px;
background-color:black;
}

#footer-left
{
float:left; width: 220px; border-style:solid; border-width:1px;	background-color:black;
padding-left: 20px;	
padding-top: 30px;
}

#footer-right{
background-color:black;
float:left;
padding-top: 30px;
padding-left:180px;
}

#footer-right .right-content{
color:white;
font-family:Arial,sans-serif;
font-size:10pt;
line-height:14.44444465637207px;
}


</style>
<body>
<center>

<div id = "content">
	..............
</div>
</center>
</body>
</html>
0

Lol. Przyjmuje, przyjmuje. Jedyne co musisz zrobić to każdemu elementowi styl wpisać w atrybut style, tj. np. <div style="background: red; width: 300px;">.

Dowód: np. mailing z Kickstartera: http://i.imgur.com/FyAyimW.png (sorry, że zakodowane)

Większość dalej pcha to w tabelkach, ale nie ma takiej potrzeby (ja układ też robię na tabelkach - ale to dlatego, że klientowi jest łatwiej w edytorze WYSWIG zmieniać treść na tabelkach, niż na divach z floatami itd --- jeżeli wiadomości są zautomatyzowane (np. sklepy internetowe) to wrzucam divy)

Żeby automatycznie przekonwertować regułki css na style inline - poszukaj jakiejś biblioteki do tego. Albo mailchimp (serwis do obsługi newsletterów) udostępnia narzędzie takie: http://beaker.mailchimp.com/inline-css (jest ich więcej w Google)

Edit:

&nbsp&nbsp&nbsp&nbsp·

zapomniałeś o średnikach?

0

Dzięki za szybką odpowiedź. Niestety mimo zastosowania inline css, outlook nie reaguje i nie tworzy wiadomości w sposób jaki otwiera ją przeglądarka. Brak podziału na lewą i prawą kolumnę, wszystko jest pod sobą, brak niektórych teł div'ów. Czy istnieje szansa, że prześlę tego maila poprawnie? Jak wspominałem, nie tworzyłem nigdy w sposób tabelkowy i zdecydowanie wolałbym wprowadzić zmiany w wersji aktualnej..

0 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="float: left; width: 50px; background: red;">test</div>
    <div style="float: left; width: 150px; background: blue;">test2</div>
    <br style="clear: both;" />
</body>
</html>

masz, wyślij sobie takie coś i zobacz czy Ci działa. pokaż screenshoty jeżeli nie działa. możesz też przesłać tę wiadomość DW do mnie: respamtest [malpka] dzek.mooo.com - sprawdzę u siebie

0

Polecam sprawdzić sobie tabelkę kompatybilności http://www.campaignmonitor.com/css/

0

Em. Ja od Ciebie dostałem wiadomość, gdzie zamiast <div> są <p>.

I generalnie tak wygląda kod:

<html xmlns:v=3D"urn:schemas-microsoft-com:vml" =
xmlns:o=3D"urn:schemas-microsoft-com:office:office" =
xmlns:w=3D"urn:schemas-microsoft-com:office:word" =
xmlns:m=3D"http://schemas.microsoft.com/office/2004/12/omml" =
xmlns=3D"http://www.w3.org/TR/REC-html40"><head><meta =
http-equiv=3DContent-Type content=3D"text/html; =
charset=3Diso-8859-2"><meta name=3DGenerator content=3D"Microsoft Word =
14 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
	{font-family:Calibri;
	panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
	{margin:0cm;
	margin-bottom:.0001pt;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";
	mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
	{mso-style-priority:99;
	color:blue;
	text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
	{mso-style-priority:99;
	color:purple;
	text-decoration:underline;}
span.Stylwiadomocie-mail17
	{mso-style-type:personal-compose;
	font-family:"Calibri","sans-serif";
	color:windowtext;}
.MsoChpDefault
	{mso-style-type:export-only;
	font-family:"Calibri","sans-serif";
	mso-fareast-language:EN-US;}
@page WordSection1
	{size:612.0pt 792.0pt;
	margin:70.85pt 70.85pt 70.85pt 70.85pt;}
div.WordSection1
	{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext=3D"edit" spidmax=3D"1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext=3D"edit">
<o:idmap v:ext=3D"edit" data=3D"1" />
</o:shapelayout></xml><![endif]--></head><body lang=3DPL link=3Dblue =
vlink=3Dpurple><div class=3DWordSection1><p class=3DMsoNormal =
style=3D'background:red'><span =
lang=3DEN>test<o:p></o:p></span></p><div><p class=3DMsoNormal =
style=3D'background:blue'><span =
lang=3DEN>test2<o:p></o:p></span></p></div><p class=3DMsoNormal><span =
lang=3DEN><br clear=3Dall><o:p></o:p></span></p><p =
class=3DMsoNormal><o:p>&nbsp;</o:p></p></div></body></html>

Moje pytanie - czy ty wysyłasz te maile z Outlooka? Czy czym je WYSYŁASZ?

0

Tak, wysyłam wiadomość z Outlooka w następujący sposób:
dodaj załącznik -> jako tekst -> ok. Html wczytuje się w miejscu tworzenia wiadomości i jak widać najprawdopodobniej przeformatowuje go na swój sposób.
W jaki inny sposób miałbym przesłać tego e-maila ??

1

Myślałem, że jakąś stronę piszesz i przez nią wysyłasz e-maila. Jak wysyłasz wiadomość przez outlooka, to on Ci są sobie sam przemieli wg własnego uznania zanim ją wyśle. Nie wiem czy jakimś KLIENTEM poczty jesteś w stanie wysłać wiadomość bez modyfikacji czegokolwiek, wprost z podanego źródła HTML.

Portale do wysyłania mass mailingu (typu mailchimp) też powinny przyjąć HTML i bez modyfikacji go - rozesłać do odbiorców.

0
dzek69 napisał(a):

Myślałem, że jakąś stronę piszesz i przez nią wysyłasz e-maila.

Strona funkcjonuje, również na serwerze mam konto e-mail. W panelu jednak nie ma możliwości wysyłania wiadomości. W jaki więc sposób miałbym to zrobić?

0

Dopisać sobie taką możliwość, albo skorzystać z mailchimpa/podobnych.

Pewne jest to, że Outlook psuje wiadomości przed ich wysyłką, więc pierwsze zadbaj o to, żeby wysłać ten kod, co napisałeś, a potem martw się o to czy/że on nie działa.

0

Dzieki serdeczne za pomoc!

0

Spróbuj sobie zrobić testy na Freshmailu,wrzuć kod,zastosuj testy i sprawdzisz,co jest do poprawki

1 użytkowników online, w tym zalogowanych: 0, gości: 1