• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Responsive E-Mail

mikdoe

mikdoe

Moderator
Hi!
Ich möchte eine responsive HTML E-Mail gestalten. Zunächst soll erstmal immer die ganze verfügbare Breite verwendet werden, ein diesbezüglicher Versuch mit width:100% ist allerdings schon mal mit 0 Effekt gescheitert. Hat jemand Erfahrung mit responsive E-Mails und kann mir die wesentlichen Regeln zeigen?
 
Zuletzt bearbeitet:
Im Moment kommt es so im Mailclient an:
Code: 
------=_NextPart_14391383311838514440SUB
Content-Type: text/html;
  charset="ISO-8859-15"
Content-Transfer-Encoding: quoted-printable

<!DOCTYPE html>
<html>
<head>
	<meta charset=3D"ISO-8859-15">
	<title>Test responsive E-Mail</title>
	<style type=3D"text/css">
		body {
			margin:				0px;
			padding:			0px;
			color:				black;
			font-family:		'Arial';
			font-size:			12px;
			background-color:	white;
		}

		@media screen and (max-width:499px) {
			table[class=3D"container"] {
				width:				100% !important;
			}
			td[class=3D"ueberschrift"] {
				font-size:			30px;
				color:				black;
				background-image:	url('http://mikdoe.lima-city.de/images/logotest_recht=
s.png');
				background-repeat:	repeat-x;
			}
		}
	</style>
</head>
<body>
	<table cellpadding=3D"0" cellspacing=3D"0" width=3D"100%" border=3D"0">
		<tr>
			<td>
				<table class=3D"container" width=3D"500" border=3D"0" cellspacing=3D"0"=
 cellpadding=3D"0">
					<tr>
						<td><img src=3D"http://mikdoe.lima-city.de/images/logotest.png" borde=
r=3D"0" width=3D"275" height=3D"142"></td>
						<td class=3D"ueberschrift">=DCberschrift</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td>
				<table class=3D"container" width=3D"500" border=3D"0" cellspacing=3D"0"=
 cellpadding=3D"0">
					<tr>
						<td>Kleiner Test mit responsive E-Mails und Umlauten: =F6=E4=FC=DF=D6=
=C4=DC=80</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

Problem Nr. 1: das Hintergrundbild logotest_rechts.png in der rechten Zelle wird nicht angezeigt. Das würde ich gern erstmal lösen bevor ich weiter mache.
ergebnis_resp_mail.png

Das Ganze als große Tabelle zu bauen hab ich hier gesehen: Responsive Email Design | t3n
Aber ist das korrekt? Wie sieht ein Standard Gerüst für eine responsive E-Mail für aktuelle Mailclients (alte Clients interessieren mich hier mal nicht) derzeit aus?
 
Ich würde mal sagen, dass auch bei Emails Tabellen nicht für Layout verwendet werden sollten.

Aber zu deinem Problem: ich denke dein Device ist einfach zu breit (mid 700px), so dass die media-Query einfach nicht greife (max-width: 499px).
 
Danke Korbinian. Bin schon ein Stück weiter. :)

Aber im Grunde möchte ich garkeine Breiten-Weiche machen sondern:
Es gibt einen Block der besteht links und rechts oben aus Logo, wobei rechts oben zus. eine Überschrift steht, darunter Text. Dieser Block soll mittig mit einem feinen schwarzen Rand angezeigt werden. Er soll 100 % Breite nehmen, maximal aber 500 Pixel.
Mir gelingen Mittigkeit und Rand nicht. Weder im Brower noch im E-Mail Client ist es wie ich es möchte. Was mache ich falsch? :confused:
HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="ISO-8859-15">
	<title>Test responsive E-Mail</title>
	<style type="text/css">
		body {
			margin:				0px;
			padding:			0px;
			color:				black;
			font-family:		'Arial';
			font-size:			12px;
			width:				500px;
		}
		#gesamt {
			position:			absolute;
			border:				1px solid black;
			text-align:			center;
			width:				100%;
			max-width:			500px;
		}
		#kopf1 {
			position:			absolute;
			top:				0px;
			left:				0px;
			width:				275px;
			height:				142px;
			z-index:			1;
		}
		#kopf2 {
			background-image:	url('http://mikdoe.lima-city.de/images/logotest_rechts.png');
			background-repeat:	repeat-x;
			position:			absolute;
			top:				0px;
			left:				265px;
			font-size:			30px;
			z-index:			2;
			color:				black;
			line-height:		142px;
			width:				100%;
			max-width:			500px;
		}
		#inhalt {
			position:			absolute;
			top:				145px;
			left:				0px;
		}
	</style>
</head>
<body>
	<div id="gesamt">
		<div id="kopf1"><img src="http://mikdoe.lima-city.de/images/logotest.png" border="0" width="275" height="142"></div>
		<div id="kopf2">Überschrift</div>
		<div id="inhalt">
		Kleiner Test mit responsive E-Mails und Umlauten: öäüßÖÄÜ€@<br>
		zweite Zeile
		</div>
	</div>
</body>
</html>

Oder hier online: Test responsive E-Mail
 
ist doch klar dass wenn du kopf2 erst bei 265px positionierst und da noich 500 drauf rechnest dass es drüber geht
nimm statt left einfach right:0px
 
responsiv_email_mikdoe.PNG
also so wie ich das sehe, ist oben die schwarze line nur 500px und kopf2 bricht darüber hinaus

- - - Aktualisiert - - -

des weiteren fehlt #gesamt eine höhe

- - - Aktualisiert - - -

zentrieren könntest du es dann mit padding-left:275px aber nur pseudo, indem du width 275px abziehst mit calc() zb
 
Habs jetzt mit einer Tabelle hinbekommen.
Wenn jemand genau das selbe Layout ohne Tabelle hinbekommt, nehm ich gern :)

HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="ISO-8859-15">
	<title>Test responsive E-Mail</title>
	<style type="text/css">
		body {
			margin:				0px;
			padding:			0px;
			color:				black;
			font-family:		'Arial';
			font-size:			12px;
		}
		#container {
			width:				100%;
			text-align:			center;
		}
		table {
			text-align:			left;
			width:				100%;
			max-width:			500px;
			border:				1px solid red;
		}
		#kopfrechts {
			background-image:	url('http://mikdoe.lima-city.de/images/logotest_rechts.png');
			background-repeat:	repeat-x;
			font-size:			30px;
			color:				black;
			line-height:		142px;
			width:				100%;
			max-width:			225px;
		}
		#inhalt {
			width:				100%;
			max-width:			500px;
		}
	</style>
</head>
<body>
	<div id="container">
		<table cellpadding="0" cellspacing="0" align="center">
			<tr>
				<td><img src="http://mikdoe.lima-city.de/images/logotest.png" border="0" width="275" height="142"></td>
				<td id="kopfrechts">Überschrift</td>
			</tr>
			<tr>
				<td colspan="2" id="inhalt">Kleiner Test mit responsive E-Mails und Umlauten: öäüßÖÄÜ€@<br>
				zweite Zeile
				</td>
			</tr>
		</table>
	<div>
</body>
</html>
 
Ehhhhhhmmmmm, wo ist das jetzt bitte responsive? :confused:
Es ist immer 500 breit, da tut sich nix. iphone 3 oä. display width 320px = Arschkarte :D
 
In meinen E-Mail Clients schrumpft es, wenn ich das Fenster kleiner als 500px mache. Und so wollte ich es auch haben.
 
Das kann ich kaum glauben, wo geht denn die Überschrift hin wenn das Fenster 275 breit wird? laut deinem tabellen-layout passiert da nämlich nichts, würde mich bei dem code auch schwer wunden, weil wo sollte das td mit der überschrift hin? kein media-query nix :confused: raff ich nicht.
JSFiddle bestätigt mein Verdacht (Edit fiddle - JSFiddle), würd gern mal sehen wie es in deinem E-Mail Clienten auf zauberhafte weise schrumpft :D gönnst du mir ein Screenshot :p
 
Was meinst du? Ich verstehe das nicht. Wenn der viewport >= 500px ist gibt es sowieso kein Problem. Wenn er < 500px ist schrumpft das gesamte Teil horizontal zusammen, natürlich entsteht ein Scrollbalken, sobald der Viewport < als die Breite der Überschrift + Logo links oben ist, wahrscheinlich sind das so um die 300-400px. Aber das ist kein Problem. Kleiner als klein geht halt nicht.
Ist alles so wie es sein soll.
 
ok ;) es gäb ja halt noch die möglichkeit echtes responsive zu machen, und ab einem bestimmten point die Überschrift unter das logo zu setzen und so feinheiten :) das meinte ich, was du da hast ist halb statisches liquid layout, aber nicht responsive, war halt etwas verwirrend für mein schmalspurgehirn wegen der thread-überschrift :p
 
Hmm, du hast natürlich Recht. So richtig resp ist es nicht.
Ich glaube es macht Sinn, dass ich die Überschrift verkleinere über die font-size. Umbrechen möchte ich sie nicht so gern.
Wie sähe dann so ein Kommando "verringere font-size so lange bis es rein passt, Minimum 5px" aus?
 
da hilft die vw und vh oder vmax das sind neue größen die sich der fenster breite bzw höhe anpassen.
Nutze ich für großflächige Symbole zB. Kann man aber auch für überschriften nutzen.
Die Unterstützung ist noch nicht sooooo verbreitet Can I use... Support tables for HTML5, CSS3, etc aber akzeptabel, kannst ja zur nocht n fallback auf die mindestgröße machen.

https://css-tricks.com/viewport-sized-typography/

ansonsten natürlich kannst du auch die media querys bemühen in stufen dann
Code: 
#deinDIV{ font-size:50px; }
@media (max-width: 800px){ #deinDIV{ font-size:30px; } }
@media (max-width: 600px){ #deinDIV{ font-size:25px; } }
@media (max-width: 400px){ #deinDIV{ font-size:20px; } }
@media (max-width: 300px){ #deinDIV{ font-size:15px; } }
[CODE]
Je kleiner du das Fenster schiebst desto kleiner die Schrift [url=http://jsfiddle.net/wyugzxd1/]Edit fiddle - JSFiddle[/url]
 
Zuletzt bearbeitet:
Das ist der absolute megaober Hammer. Danke Tec, du hast mich genau auf die richtige Spur gebracht. Und danke, dass du auch nachgebohrt hast und dran geblieben bist!! :encouragement:
Jetzt ist es perfekt responsive. Wusste garnicht dass es diese CSS Tags gibt :)
Echt Geil!!
:butterfly: :semi-twins: :very_drunk:

Online anschauen und Browsergröße verändern: Test responsive E-Mail
 
Die Ernüchterung folgt auf dem Fuße. K-9 Android Mail kann das rechts oben nicht mit dem Bild und gleichzeitig Schrift. Fange also jetzt an, wieder in Richtung Steinzeit zurück zu bauen :(

Fehler gefunden, kann ihn aber nicht beheben. K-9 rafft rechts oben das height in der Einheit vmin zusammen mit width: 100% nicht. Das führt dazu, dass die Grafik garnicht skaliert wird.
Oder weiß da jemand zufällig eine Lösung für?
Ich würde das ja gern als Hintergrundbild belassen aber wie kann ich Skalierungsangaben für ein Hintergrundbild definieren?
 
Immer gerne :D

Oh, dann kennt er die neuen Einheiten noch nicht :(
Nein bitte nur keine Steinzeit, man kann alles mit modernsten Mitteln lösen ;)
dann solltest du eine kombination mit media querys machen und die schrift stufenweise verkleinern.
Und das design ist jetzt nicht bahnbrechend kompliziert, mach es mit DIVs, Tabelle ist so schrecklich, da kommt auch n weißer strich in der mitte beim skalieren :/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben