,

Browser Tab Titel-Änderung (bei keinem Fokus)

Wenn man wuk.ch offen hat und ein anderen Tab öffnet, dann ändert der Tab den Titel automatisch hin und her und generiert wo Aufmerksamkeit zum Zurückommen. So können USPs oder Botschaften eindrücklich übermittelt werden.

Dazu ist nur ein Javascript nötig. Dieses Script nutzt jQuery.

var oldtitle;
var oldtitleindex;
$(window).on("blur focus load", function(e) {
	if (!oldtitle) { oldtitle = document.title; }
	var prevType = $(this).data("prevType");
	if (prevType != e.type) {
		switch (e.type) {
			case "blur":
				titleTimerId = setInterval(changetitle, 2500);
			break;

			case "focus":
				if (typeof(titleTimerId) !== 'undefined') { clearInterval(titleTimerId); }
				document.title = oldtitle;
			break;
		}
	}

	$(this).data("prevType", e.type);
});

function changetitle() {
	if (oldtitleindex != 1) {
		document.title = "✔WordPress ✔Design ✔SEO";
		oldtitleindex = 1;
	}
	else {
		document.title = oldtitle;
		oldtitleindex = 0;
	}
}

Bilder in Mails einbetten per HTML

Bilder werden normalerweise in Mails als externe Links eingebettet. Dies hat einige Vorteile, dass dies zum Beispiel auf vielen Endgeräten angezeigt werden können. Der Nachteil ist, dass diese Bilder zuerst geladen werden müssen, wozu eine Warnung z.B. im Outlook bestätigt werden muss.

Bilder kann man auch einbetten. Dies hat auch Nachtteile:

  • Mail wird viel grösser und übertragung dauert länger
  • Bilder werden nicht in jedem Mailclient angezeigt

Um Bilder einzubetten, wird das Bild am besten auf die benötigte Grösse zugeschnitten, da die Dateigrösse entscheident ist, ob das Mail am Ende übertragen werden kann.

Anschliessend Uploaded man das Bild bei: https://www.base64-image.de/ und drückt auf “copy image”.

Im Newsletter kann nun ein Text / HTML Element eingefügt werden. Bei dem Text Element muss auf HTML gewechselt werden.

Danach fügt man foldenden Code ein:

<img src="" />

Innerhalb des src=”” fügt man nun den Inhalt ein, damit es danach etwa so aussieht:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..." />

Danach ist das Bild Inline eingebunden und kann verschickt werden.

,

Vertical Scrollbare Table (responsive)

<div class="tableresponsiv">
	<table width="100%">...</table>
</div>

Und nehmen folgenden CSS Code im Stylesheet auf:

.tableresponsiv {
	width: 100%;
	padding: 0px;
	margin-bottom: 0px;
	overflow-y: hidden;
	border: 1px solid #DDD;
	overflow-x: auto;
	min-height: 0.01%;
}

Email Links mit Betreff und Body

<a href="mailto:web@demo.ch?subject=Betreff%20mit%20Leerzeichen&body=Nachricht">
...
</a>

**Aufbau:**
subject= Hier steht der Betreff der Nachricht.
body= Hier steht die Nachricht.

Leerzeichen sollten immer gegen %20 ersetzt werden, was einem Leerzeichen entspricht. Sonst kann es zu Fehlern kommen.

Bindestriche und Umbrüche

Wort Umbrüche wenn zuwenig Platz vorhanden ist:

  • macht Umbruch ohne Bindestrich: &lt;wbr&gt;
  • macht Umbruch mit Bindestrich, in Titel einsetzbar: &amp;shy;