n@work - Blog http://www.work.de/ de n@work - Blog http://www.work.de/fileadmin/resources/img/logo.gif http://www.work.de/ 137 62 TYPO3 http://blogs.law.harvard.edu/tech/rss Fri, 02 Mar 2012 13:12:00 +0100 Tipps und Tricks zu Design und Umsetzung eines HTML Newsletters http://www.work.de/ueberuns/blog/tipps-und-tricks-zu-design-und-umsetzung-eines-html-newsletters.html Wie viele schon festgestellt haben, ist es nicht so einfach einen HTML Newsletter umzusetzen. Auch wenn man sich noch so sehr bemüht - man wird es wohl nie schaffen, dass alle Clients den Newsletter komplett gleich darstellen. Doch nicht die einheitliche Darstellung des Layouts ist das Wichtigste, sondern die für den Leser zur Verfügung gestellten Informationen - diese sollen unter allen... Wie viele schon festgestellt haben, ist es nicht so einfach einen HTML Newsletter umzusetzen. Auch wenn man sich noch so sehr bemüht - man wird es wohl nie schaffen, dass alle Clients den Newsletter komplett gleich darstellen. Doch nicht die einheitliche Darstellung des Layouts ist das Wichtigste, sondern die für den Leser zur Verfügung gestellten Informationen - diese sollen unter allen...

1. Der Designvorgang - schon jetzt an die Umsetzung denken

Bevor man anfängt sollte man sich in Erinnerung rufen, dass in vielen Clients die Bilder standardmäßig ausgeblendet sind und erst manuell von dem Betrachter eingeschaltet werden müssen. 
Es ist also höchst empfehlenswert alle wichtigen Details und Informationen in Text zu fassen und sich nicht auf Bilder zu stützen! Hinzu kommt, dass nicht alle Clients Hintergrundbilder darstellen können. Möchte man sie trotzdem verwenden, so sollten diese in ein <img />-Tag eingefügt und fest ins HTML geschrieben werden. Die Breite des Newsletters spielt eine wichtige Rolle - in vielen Clients darf sie maximal 600px betragen. Hört sich zwar nicht viel an, aber man kann schon etliche Informationen unterbringen. Außerdem ist diese Breite auf mobilen Geräten gut darstellbar und auch der Erstdarstellung im Browser kommt sie zugute.
Der Link zur Ansicht im Browser darf auf keinen Fall in einem Newsletter fehlen.

2. Worauf bei der Umsetzung achten?

Die einzigen Angaben, die wirklich von allen Clients unterstützt werden, sind verschachtelte Tabellen und inline Styles. Selbst der <body>- und <html>-Tag wird bei manchen Clienten entfernt (Gmail), was zum entfernen der im Kopf geschriebenen CSS-Angaben führen kann.
Um also einen Hintergrund über das gesamte Fenster zu erhalten sollte man nicht nur einen <html> und <body> Tag setzen, sondern noch eine alles umschließende Tabelle mit width="100%". Ansonsten wichtig:
  • Absolute URLs verwenden 
  • alt-Text der Bildern nicht vergessen
  • padding und margin in TDs reinschreiben (da z.B Outlook diese Angaben sonst ignoriert)
  • Breite in die TDs reinschreiben (ggf. zusätzlich zur umgebenden Tabelle)
  • Tables mit cellpadding, cellspacing und border versehen
  • Ps zusätzlich mit Inline CSS Margin nach oben und unten geben (um unterschiedliches Rendering zu verhindern)
  • Keine CSS Shorthand Properties schreiben, sondern einzeln (z.B. font-family: Arial; font-size: 14px; anstatt font: 14px Arial;)
  • <a>-Tag müssen inline gestyled werden
  • <img> müssen eine feste Höhe und Breite haben. Das Format sollte entweder gif oder jpg sein.
Ein paar Tricks: Sie mögen vielleicht doppelt und umstämdlich wirken, aber alles in allem sichern sie ein gleichmäßigeres Erscheinungsbild. Outlook:
  • die font-family wird nicht von Tabelle zu Tabelle vererbt. Man sollte also einmal ein <style>Tag in den <body> setzen und dort die Schriftart setzen. Zusätzlich sollte jedoch auch die umschließende Tabelle die Font-Familie erhalten.
Hotmail + Gmail:
  • Beide Clients geben Bildern extra Platz. Um dies zu verhindern gibt es drei Möglichkeiten:  
    • Man hat ein Bild ohne Container, dann gibt man dem Bild, je nachdem wo der Text stehen soll ein align: absbottom, absmiddle oder top. = Der Text ist an der unteren Kante des Bildes ausgerichtet, an der Mitte des Bildes ausgerichtet oder an der oberen Kante.
    • Das Bild bekommt ein display: block. In dem Fall ist der Text aber nur vor oder nach dem Bild.
    • Das Bild hat einen Container, welchem man entweder eine line-height kleiner/gleich 10px gibt oder eine Schriftgröße von kleiner/gleich 2px = Der Container ist so klein, dass er nicht auffällt und der Platz um das Bild verwschwindet.
Hover:
  • Muss im <style>-Tag im <body> gesetzt werden. Dies wiederum heißt, dass man den Links keine inline Styles geben kann. Folge:
    • Outlook nimmt keinen Hover-Effekt, aber die Link-Styles im <body> 
    • Gmail hat keine gestylten Links mehr.
Hotmail:
  • Die <Hx>-Tags werden grün dargestellt. Hier muss die Schriftfarbe mit einem !important unterstützt werden. Die Anweisung !important unterstützt Outlook jedoch nicht. 
    Lösung: 
    (Eine Anweisung mit important und eine ohne direkt nacheinander!)
  • Die erste Tabelle mit width=100% wird ignoriert. Um also doch noch den farbigen Hintergrund, der dort gesetzt wird, zu erhalten hier ein kleiner Hack:
    <head>
        <style>
             ReadMsgBody { width:100% }
             ExternalClass { width: 100% }
        </style>
Höhen- und Breitenangaben im Tag:
  • Auch wenn man es nicht gewohnt ist, hinter width= und height= kommen keine Anführungszeichen und keine px! 
    Also: width=600 und height=50 statt width="600px". 
    Die meisten Clients würden die Anführungsstriche zwar ignorieren, Outlook nimmt jedoch die Breitenangabe gar nicht.
Diese Newsletter landen im Spamfilter:
  • Newsletter, die aus einem einzigen großen Bild bestehen
  • Newsletter mit JavaScript
  • Versteckter Text in den E-Mails
Alles in allem ist dies nur eine kleine Ansammlung an Tricks bei der HTML-Newsletter-Entwicklung und für jedes Problem gibt es sicherlich noch andere Lösungsmöglichkeiten. Ich hoffe der Beitrag konnte euch weiterhelfen und ihr findet nun etwas leichter durch den Dschungel der Newsletter im Netz.
Zum Abschluss noch ein paar nützliche Links und Quellen. Designinspirationen:
  • http://www.campaignmonitor.com/gallery/
  • http://www.htmlemailgallery.com/
Hilfen bei der Entwicklung:
  • http://www.campaignmonitor.com/design-guidelines/
  • http://www.campaignmonitor.com/css/
  • http://24ways.org/2009/rock-solid-html-emails
]]> Webdesign Fri, 02 Mar 2012 13:12:00 +0100 Facebook gibt dem Druck der Datenschützer nach http://www.work.de/ueberuns/blog/facebook-gibt-dem-druck-der-datenschuetzer-nach.html Das weltweit größte Soziale Netzwerk muss seinen Usern die Änderungen an den Privatsphäre-Einstellungen zukünftiger transparenter machen und explizit um Einwilligung bitten. Das weltweit größte Soziale Netzwerk muss seinen Usern die Änderungen an den Privatsphäre-Einstellungen zukünftiger transparenter machen und explizit um Einwilligung bitten. Laut Wall Street Journal stehen Facebook und die US-Regulierungsbehörde kurz vor einer Einigung.

In der Vergangenheit hatte Facebook Änderungen innerhalb der Privatsphäre-Politik umgesetzt, den User darüber zum Teil in Kenntnis gesetzt und dieser musste dann selbst aktiv werden, wenn er evtl. Änderungen nicht annehmen wollte. Der aktuellste Fall ist die automatische Gesichtserkennung: Diese wurde unter dem harmlosen Begriff "Fotos: Markierungen vorschlagen" eingeführt.

Hierbei werden biometrische Profile vom Nutzer angelegt – sobald also „Freunde“ Fotos hochladen, wird dieser hierauf automatisch erkannt und markiert.

Dies ist ein grundlegender Verstoß gegen die Nutzerrechte und rief schlagartig Datenschützer auf den Plan.

Die meisten Nutzer bekommen Änderungen an den Privatsphäre-Einstellungen erst einmal gar nicht mit oder verlieren sich im "Einstellungssumpf" verwirrender Bezeichnungen.

Die Einführung eines Opt-in-Verfahrens, also einer expliziten Einwilligung des Nutzers, bevor die Neuerung aktiv wird, würde für Facebook eine grundlegende Veränderung ihrer Firmen-Politik darstellen. Der User wäre dem Unternehmen nicht mehr ausgeliefert und könnte nicht mehr dazu gezwungen werden mehr Daten als gewollt Preis zu geben.

Aufgrund der in Aussicht stehenden Einigung in den USA kann darauf spekuliert werden, dass auch die Beschwerden in Europa erhört werden.

Hamburgs Landesdatenschützer Johannes Caspar ist ebenfalls im Begriff rechtliche Schritte gegen Facebook einzuleiten. "Ein rechtmäßiger Einsatz der Gesichtserkennungssoftware bei Facebook erfordert die freiwillige Einwilligung der informierten Nutzer"

Des Weiteren liegen Facebook im für Europa zuständigen Sitz 22 Beschwerden der östereichischen Studenteninitiative Europe vs. Facebook(http://europe-v-facebook.org/DE/de.html) vor. Unter anderem werfen Sie Facebook vor, dass Nutzerdaten nach dem Löschen weiterhin gespeichert werden, sie nicht alle Daten auf Anfragen des Nutzers herausgeben und ein exzessives Überwachen des Surfverhaltens auf hunderttausenden Seiten via Like-Button durchgeführt wird.

Fazit: Was heißt das alles für uns?

Betreiber einer Firmenseite auf Facebook sollten das ganze im Auge behalten und sich selbst auf dem Laufenden halten. Werbung und Informationen auf einer Firmenseite sind für die Öffentlichkeit gedacht, daher können diese ohne Probleme weiter betrieben werden.

Für den Privat User jedoch ist das ganze ein Thema dem er mehr Beachtung schenken sollte.

Unser Tipp: Überprüfen Sie die Privatsphäre-Einstellungen Ihres Profils, gestatten Sie Drittanbietern nur dann Zugang zu Ihrem Profil, wenn Sie diesen vertrauen und achten Sie in eigenem Interesse darauf, was sie mit wem teilen.

]]> Social Media Fri, 02 Dec 2011 14:37:00 +0100 Neuigkeiten per E-Mail veröffentlichen mit mail2news http://www.work.de/ueberuns/blog/neuigkeiten-per-e-mail-veroeffentlichen-mit-mail2news.html Schnell und unkompliziert: Wie mail2news die Veröffentlichung von tt_news-Einträge vereinfacht. Schnell und unkompliziert: Wie mail2news die Veröffentlichung von tt_news-Einträge vereinfacht. Redakteure, die regelmäßig Neuigkeiten auf einem TYPO3-System veröffentlichen, kennen das Problem: Man will "mal eben schnell", vielleicht sogar von unterwegs, eine Nachricht auf die Seite bringen und wünscht sich einen schlankeren Weg, um dies zu tun.
Eine Lösung hierfür bietet die sehr hilfreiche TYPO3-Erweiterung mail2news. Die Veröffentlichung von tt_news-Beiträgen erfolgt nach der Installation und Konfiguration auf dem einfachsten und unkompliziertesten Weg: per E-Mai.

Im TYPO3-Backend stehen nun einige Einrichtungsoptionen zur Verfügung: man kann
  • die Signaturen herausfiltern.
  • die zugelassenen Absender angeben - sowohl mit kompletter Mail, als auch nur die zuzulassende Endung ab dem @.
um einige der nützlichen Features zu nennen.

Am besten richtet man eine neue E-Mail-Adresse ein, welche die Nachrichten empfängt. Per Cronjob werden diese empfangenen E-Mails abgerufen und zu tt_news-Artikeln verarbeitet.

Auch das Strukturieren der E-Mail ist nicht schwer:
Die Betreffzeile wird als Überschrift genommen. Einen Untertitel kann man angeben, indem man am Anfang der Zeile die Zeichenfolge ## eingibt. Ähnlich einfach funktioniert die Auswahl der Kategorie: man kennzeichnet die Zeile mit der Zeichenfolge $$. Der übrige in der E-Mail enthaltene Text wird als Bodytext genommen.

Für weitere Informationen empfehlen wir die Dokumentation auf TYPO3.org an.]]> TYPO3 Mon, 17 Oct 2011 10:36:00 +0200 Zwischenstand der SEO-Challange 2011 http://www.work.de/ueberuns/blog/zwischenstand-der-seo-challange-2011.html Beeindruckende Zwischenergebnisse eine Woche vor Ende der n@work SEO-Challenge. Gleich drei Mitarbeiter haben es auf die erste Seite der Google Suchergebnisse geschafft. Suchmaschinenoptimierung Fri, 14 Oct 2011 09:41:00 +0200 n@work auf der Mediale Hamburg http://www.work.de/ueberuns/blog/n-work-auf-der-mediale-hamburg.html Auch in diesem Jahr öffnete der Medienkongress "Mediale Hamburg" zum dritten Mal seine Pforten für junge Mediengestalter - und wer gespannt unsere Neuigkeiten verfolgt hat weiß, dass wir Mitsponsor sind. Auch in diesem Jahr öffnete der Medienkongress "Mediale Hamburg" zum dritten Mal seine Pforten für junge Mediengestalter - und wer gespannt unsere Neuigkeiten verfolgt hat weiß, dass wir Mitsponsor sind. Wer sich für die Zukunft und den Wandel der Medien interessiert ist hier genau richtig aufgehoben. Das ließ ich mir nicht zweimal sagen und machte mich mit meinem Mitazubi Kevin auf den Weg zur Universität Hamburg - hier findet der Medienkongress jährlich im September statt.
Als wir ankamen war es schon erfreulich voll - man mag es kaum glauben, aber an die 500 Mediengestalter tummelten sich rund um die Anmeldestelle und warteten hungrig auf den Auftakt der Veranstaltung.
Nach erfolgreicher Anmeldung und einer kurzen Einführungsveranstaltung wurden dann stündlich jeweils fünf verschiedene Vorträge rund um das Thema "Neue Medien" parallel gehalten - von Suchmaschinenoptimierung bis Social Media war für jeden etwas Interessantes dabei.

Einer der von mir ausgewählten Vorträge fiel leider unangekündigt aus. So saß ich um 14:00h im Hörsaal und wartete auf einen Vortrag über mobiles Design, der mich persönlich sehr interessierte. Nach weiteren zehn Minuten Wartezeit wurde leider mitgeteilt, dass der Referent nicht mehr erscheinen wird - MOBILE DESIGN: FAILED. Schade, aber letzendlich besuchte ich einige interessante Vorträge, die zum Weiterdenken anregten.

Die neuen Medien befinden sich im ständigen Wandel. Als beteiligter Mitgestalter dieses Mediums darf man nie vergessen, dass man auch selbst nicht aufhören darf voranzuschreiten, um nicht von der Zukunft überholt zu werden.
Gerade hier kann man die Vielfalt der Mediale nutzen, um auch in andere Berufszweige der Branche zu blicken oder um neue Technologien kennenzulernen. ]]> Konferenzen & Events Wed, 21 Sep 2011 15:01:00 +0200 Datenschützer legen Einwände gegen Google Analytics nieder http://www.work.de/ueberuns/blog/datenschuetzer-legen-einwaende-gegen-google-analytics-nieder.html Google Analytics, den meisten bekannt und vielen ein nützlicher Helfer. Lange stand dieses Tool auf Grund von angeblichen Verstößen gegen deutsches und europäisches Recht unter Beschuss von Datenschützern. Das soll jetzt ein Ende haben. Wie im Google Conversion Room Blog zu lesen, hat der Hamburger Beauftragte für Datenschutz und Informationsfreiheit eine deutliche Erklärung in Bezug auf... Google Analytics, den meisten bekannt und vielen ein nützlicher Helfer. Lange stand dieses Tool auf Grund von angeblichen Verstößen gegen deutsches und europäisches Recht unter Beschuss von Datenschützern. Das soll jetzt ein Ende haben. Wie im Google Conversion Room Blog zu lesen, hat der Hamburger Beauftragte für Datenschutz und Informationsfreiheit eine deutliche Erklärung in Bezug auf... Google Analytics, den meisten bekannt und vielen ein nützlicher Helfer. Lange stand dieses Tool auf Grund von angeblichen Verstößen gegen deutsches und europäisches Recht unter Beschuss von Datenschützern. Das soll jetzt ein Ende haben. Wie im Google Conversion Room Blog zu lesen, hat der Hamburger Beauftragte für Datenschutz und Informationsfreiheit eine deutliche Erklärung in Bezug auf Einhaltung des deutschen Datenschutzgesetzes durch Google Analytics veröffentlicht. „Google Analytics kann danach ab sofort ohne Beanstandung der deutschen Datenschutzbehörden eingesetzt werden.“ Einige Punkte müssen von Webseitenbetreibern eingehalten werden um die Anforderungen der deutschen Datenschutzbehörden einzuhalten und die Privatsphäre der User schützen.
Ein Auszug aus dem Google Blog:
  • Bitte erwähnen Sie in Ihrer Datenschutzerklärung, dass Google Analytics auf Ihrer Website eingesetzt wird.
  • Implementieren Sie die IP-Masken Funktion, die Google Analytics anweist, nicht die vollständige IP-Adresse Ihrer Nutzer zu speichern oder zu verarbeiten.
  • Weisen Sie in Ihren Datenschutzbestimmungen auf die Möglichkeit der Deaktivierung der Google Analytics-Funktion mittels eines Browser Add-on hin. Endnutzer können, falls gewünscht, sehr einfach durch Installation dieses Browser Add-on verhindern, dass Analyse-Informationen an Google gesendet werden. Diese Möglichkeit besteht seit über einem Jahr für Google Chrome, Firefox und Internet Explorer, ist jetzt auch für Safari und Opera verfügbar und hat sich als erfolgreiche und effiziente Lösung für die Nutzer erwiesen.
  • Wir haben aktualisierte Nutzungsbedingungen eingeführt, die mit den Datenschutzbehörden abgestimmte Regelungen zur Auftragsdatenverarbeitung beinhalten.
Zu Punkt 4 schreibt der Hamburgische Beauftragte für Datenschutz und Informationsfreiheit genauer:
"... Insbesondere hat Google das Verfahren dahingehend geändert, dass mit den Webseitenbetreibern ein Vertrag zur Auftragsdatenverarbeitung nach Vorschriften des Bundesdatenschutzgesetzes abgeschlossen werden soll." ]]> Suchmaschinenoptimierung Mon, 19 Sep 2011 16:24:00 +0200 n@work beim Stadtpark Staffellauf 2011 http://www.work.de/ueberuns/blog/n-work-beim-stadtpark-staffellauf-2011.html Wir waren wieder dabei! Mit zwei Teams sind wir zum diesjährigen MOPO Staffellauf im Hamburger Stadtpark am 17.08.2011 angetreten. Wir waren wieder dabei! Mit zwei Teams sind wir zum diesjährigen MOPO Staffellauf im Hamburger Stadtpark am 17.08.2011 angetreten. Bereits zum vierten Mal und in zweifacher Teamaufstellung von je fünf Läufern haben wir die 5km lange Strecke bezwungen. Dies gelang uns nicht zuletzt Dank der Anfeuerung durch Kollegen und Freunde an der Laufstrecke. Mit insgesamt 1.000 Teams und somit 5.000 Läufern hat die Veranstaltung in diesem Jahr einen neuen Rekord in ihrer fünften Saison aufgestellt. Das große und bunte Feld der Teilnehmer hat uns auch dieses Jahr viel Spaß gemacht. Zur gelungenen After-Run-Party trug auch die Gemeinschaft mit unseren traditionellen Zeltnachbarn von Hamburg Tourismus und unseren "Mitbewohnern" vom Schmidts Tivoli bei, denn erstmalig haben wir mit den "Schmidtläufern" eine Zelt-WG gegründet.  Den Nachbarn von Hamburg Tourismus mussten wir uns in Sachen Ausdauer beim Feiern zwar geschlagen geben, dafür waren wir jedoch im Bereich "Erfrischungsgetränke" deutlich überlegen. Wir freuen uns auf den Lauf 2012!]]> Konferenzen & Events Sport Kurzweil & Spaß Thu, 18 Aug 2011 08:30:00 +0200 Die IG City Süd zu Gast bei n@work http://www.work.de/ueberuns/blog/die-ig-city-sued-zu-gast-bei-n-work.html n@work empfing die ortsansässigen Unternehmen der Hamburger "City Süd" als Gastgeber für die Sitzung des 11.08.2011 der Interessensgemeinschaft n@work empfing die ortsansässigen Unternehmen der Hamburger "City Süd" als Gastgeber für die Sitzung des 11.08.2011 der Interessensgemeinschaft n@work ist fast seit Anbeginn ihres Bestehens Mitglied der IG City Süd. Inmitten dieser starken Gemeinschaft ist uns ein intensiver Insider-Blick gestattet auf die positive Entwicklung, die sich in den vergangenen Jahren in der Region vollzogen hat. Zu verdanken ist dies nicht zuletzt dem Engagement der IG und allen voran ihrem "Kopf" Sybill Petermann, die uns erneut mit Charme und Kompetenz durch das Treffen bei n@work führte.  Der Abend, der sich mit unseren zahlreich erschienenen Gästen bei interessanten Vorträgen und Neuigkeiten aus der Region sehr spannend gestaltete, klang bei Fingerfood und erfrischenden Getränken in angeregten Gesprächen aus. ]]> Konferenzen & Events Thu, 11 Aug 2011 08:08:00 +0200 Um die Wette optimieren: Die n@work SEO Challenge http://www.work.de/ueberuns/blog/um-die-wette-optimieren:-die-n-work-seo-challenge.html „Und los!“. Mit diesen Worten wurde bei n@work jetzt die „SEO* Challenge 2011“ gestartet. Teilnehmer dieses firmeninternen Suchmaschinenoptimierungs-Wettbewerbs sind die Mitarbeiter der Web-Entwicklungs Abteilung. * SEO = Search Engine Optimization

]]> Suchmaschinenoptimierung Fri, 05 Aug 2011 10:24:00 +0200 iOS: Kombination Mail und POP3 lässt iPhone und iPad abstürzen - Lösung mit DirectMail http://www.work.de/ueberuns/blog/ios:-kombination-mail-und-pop3-laesst-iphone-und-ipad-abstuerzen-loesung-mit-directmail.html Auch mit dem aktuellsten iOS 4.3.4 konnte ein äußerst ärgerlicher Fehler in der Mail-Anwendung nicht behoben werden. https://discussions.apple.com/message/12325101#12325101) führt dazu, dass vereinzelte, ganz normale E-Mails zwar geladen wurden, die App aber sofort abstürzte. Immer wieder, solange die E-Mail im Postfach war - da die E-Mail nun nicht gelöscht werden konnte. Aufgetreten ist der Fehler nur dann, wenn man seine Nachrichten per POP3 aufgerufen hat. Und viele verzweifelte Nutzter sahen nur einen Ausweg: das Mailkonto deinstallieren und neu konfigurieren. Was sehr lästig ist, wie man sich vorstellen kann: per POP3 werden die Nachrichten unter Umständen vom Server geholt und stehen dort nicht mehr zur Verfügung, sodass E-Mails, die mit dem Konto zusammen gelöscht wurden, nun nicht mehr existieren.
Um dies zu umgehen hat man die Möglichkeit unter Einstellungen --> Vorschau den Standardwert von "zwei" auf "keine" zu ändern. Damit kann man immerhin die E-Mail löschen und die App weiter benutzen.

Nun scheint das Problem tatsächlich daran zu liegen, dass die Mail-App in Kombination mit POP3 und bestimmten Mailanbietern Schwierigkeiten mit Anhängen hat. Wenn man Newsletter mit der Extension Direct Mail verschickt, kann man dies umgehen, indem man in der Page TS Config des Newsletterordners den Eintrag 
mod.web_modules.dmail.includeMedia=0
hinzufügt. Dadurch werden alle Bilder nicht direkt mit der Mail verschickt, sondern beim anzeigen vom Webserver nachgeladen - die E-Mail lässt sich so problemlos darstellen. ]]> iOS TypoScript Tricks Thu, 21 Jul 2011 13:00:00 +0200