Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 15 von 37
Like Tree4Likes

Thema: Responsive E-Mail

  1. #1
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    Responsive E-Mail

    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?
    Geändert von mikdoe (14-08-2015 um 09:22 Uhr) Grund: Gelöst gesetzt
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.702

    AW: Responsive E-Mail

    Also ich hatte damit bis jetzt noch keine Probleme. Wie sieht denn dein HTML aus?

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Responsive E-Mail

    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.702

    AW: Responsive E-Mail

    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).

  5. #5
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Responsive E-Mail

    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?
    HTML-Code:
    <!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
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  6. #6
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: 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

  7. #7
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Responsive E-Mail

    aber mein problem ist nicht, das etwas irgendwo drüber geht
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  8. #8
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Responsive E-Mail

    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

  9. #9
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Responsive E-Mail

    Habs jetzt mit einer Tabelle hinbekommen.
    Wenn jemand genau das selbe Layout ohne Tabelle hinbekommt, nehm ich gern

    HTML-Code:
    <!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>
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  10. #10
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Responsive E-Mail

    Ehhhhhhmmmmm, wo ist das jetzt bitte responsive?
    Es ist immer 500 breit, da tut sich nix. iphone 3 oä. display width 320px = Arschkarte

  11. #11
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Responsive E-Mail

    In meinen E-Mail Clients schrumpft es, wenn ich das Fenster kleiner als 500px mache. Und so wollte ich es auch haben.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  12. #12
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Responsive E-Mail

    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 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 gönnst du mir ein Screenshot :P

  13. #13
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Responsive E-Mail

    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.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  14. #14
    Avatar von TecEye
    TecEye ist offline König
    registriert
    28-01-2012
    Beiträge
    795

    AW: Responsive E-Mail

    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

  15. #15
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.725

    AW: Responsive E-Mail

    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

Seite 1 von 3 123 LetzteLetzte

Ähnliche Themen

  1. Responsive iFrame
    Von th_wolfgang im Forum JavaScript
    Antworten: 41
    Letzter Beitrag: 12-08-2015, 21:07
  2. Testmöglichkeiten für responsive Webdesign
    Von mikdoe im Forum Links & Tutorials mit Tipps & Tricks zu JavaScript, CSS, PHP, MySQL
    Antworten: 2
    Letzter Beitrag: 19-08-2014, 21:11
  3. [FRAGE] Responsive IMG in DIV
    Von gruenstich64 im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 12-06-2014, 21:27
  4. Lightbox responsive
    Von jfd im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 12-03-2014, 17:42
  5. Banner mit Bildershow, responsive
    Von jfd im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 08-03-2014, 12:57

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •