Schöner mailen

HTML-Newsletter sind und bleiben ein beliebtes Kommunikationsmittel, um Informationen zu transportieren. Das Marketing liebt sie, weil sich Produktbilder oder visuelle Grafiken in die Werbebotschaft einbinden lassen. Standardkonforme Newsletter-Vorlagen für alle Mailprogramme zu generieren, ist allerdings nicht die einfachste Aufgabe. Wir haben einige Tipps und Tricks zusammengefasst und zeigen Lösungswege auf.

Emotionen und Handlungsaktionen lassen sich mit grafischen HTML-Newslettern gezielt wecken. Im Gegensatz zu Nur-Text-Newslettern können Sie in HTML die Bedeutung mit Überschriftenhierarchien oder die Bedeutung mit unterschiedlichen Schriftfarben hervorheben. Ein Firmenlogo können Sie einbinden, um Wiedererkennbarkeit (Branding) und demzufolge Vertrauen zu schaffen. Und das Beste: Alle Mail-Clients unterstützen inzwischen HTML.

Großes Angebot: Zahlreiche Mail-Clients wetteifern um die Gunst der Kunden.

Zu schön, um wahr zu sein …

Wenn Sie sich bereits mit dem Thema beschäftigt haben, wissen Sie, dass besagte Mail-Clients zwar HTML verstehen, jedoch leider weitab von modernen Webstandards. Eine Vielzahl der Programme unterstützt nur rudimentäre CSS-Eigenschaften und auch nur dann, wenn diese als Inline-Styles definiert wurden. Das Testen eines HTML-Newsletters auf Kompatibilität in unterschiedlichen Clients gestaltet sich erheblich störrischer als der Cross-Browser-Test von Webseiten. Hinzu kommt eine weitere Schwierigkeit, denn HTML-Newsletter landen allzu gerne im Spamfilter. Diese Probleme gilt es zu bewältigen. Das E-Mail Standards Project hat es sich zur Aufgabe gemacht, zusammen mit Entwicklern von Mailprogrammen und Designern einen Standard für HTML-Newsletter zu finden. Die zugehörige Webseite http://www.email-standards.org/ stellt eine Dokumentation bekannter Bugs und Missstände in den jeweiligen Clients zur Verfügung. Bekannt wurde das Projekt vor allem durch die Twitter-Kampagne „Fix Outlook“, bei der Nutzer mit einem Tweet ihre Unterstützung signalisieren konnten. Abgesehen vom Medienecho sollten vor allem die Twitter-Avatare aller Unterstützer auf der Webseite des Projektes Microsoft auf die Problematik und die Dringlichkeit einer Lösung hinweisen.

HTML-Mails entwickeln: Coding à la 1999

Um eine übereinstimmende Darstellung in den verschiedenen Clients zu gewährleisten, muss gegenwärtig noch auf veraltete Techniken zurückgegriffen werden. Als Tenor gilt dabei „Code like 1999“ – verschachtelte Tabellen, Font-Tags und Inline-CSS, zudem keine CSS-Positioning über floats. Die jüngeren Webworker allerdings wissen (zum Glück) nicht mehr, wie unsereins früher Designs auf Basis von Layouttabellen erstellt hat.

<table border="0" cellpadding="0" cellspacing="0" width="98%">
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" width="500">
        <tr>
          <td>
            ... das ist der HTML-Inhalt ...
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Medieninhalte können ebenfalls nicht wiedergegeben werden, also kein Video, kein Audio und ebenfalls kein Flash. Leider können Desktop-Mail-Clients keine Formulare und aus Sicherheitsgründen auch kein <script> verarbeiten. Zudem wurde mit der Einführung von Outlook 2007 die Rendering-Engine von Internetexplorer auf Word umgestellt, was letztlich die Ausgangssituation für die zuvor genannte „Fix Outlook“-Kampagne darstellte. Eine weitere Hürde, mit der Sie rechnen müssen, sind nutzerspezifische Einstellungen. Durch die verschiedenen möglichen Fensteransichten werden jeweils unterschiedliche Teile eines Newsletters im Vorschaufenster angezeigt. Grundlegend können Sie von einem Fensterausschnitt mit einer Größe von 250x250px ausgehen. Wichtig ist, dass der Newsletter eine Gesamtbreite von 550-600px nicht übersteigen sollte. Eine gute Übersicht der unterstützen CSS-Eigenschaften hat Campaignmonitor zusammengestellt.

Designfalle – deaktivierte Bilder und Fotos

Die bei Weitem größte Hürde stellen Bilder dar. Mit der Einführung von Outlook 2007 wurde die Anzeige von eingebundenen Bildern sowie Hintergrundbildern unterdrückt und muss in Outlook explizit pro Absender aktiviert werden. Grund hierfür war das Übermaß an Spam-Mails. Google erlaubte in Gmail bis vor Kurzem ebenfalls keine Hintergrundbilder, doch auch hier können Sie die Darstellung inzwischen explizit aktivieren. Für Bilder, die via <img> eingebunden werden, ist es wichtig, das “alt”-Attribut sinnvoll auszufüllen. Bei barrierefreien Internetseiten ist dies ohnehin bereits Pflicht, da bei abgeschalteten Bildern der Alternativtext angezeigt wird – für blinde Menschen wird eben jener Text vorgelesen. Achten Sie auf dieses wichtige Detail, denn viele Menschen sind schlichtweg zu faul, die Anzeige der Bilder in ihrem Mail-Client zu aktivieren. Schüren Sie das Interesse also verstärkt durch den (Alt-)Text! Bitte beachten Sie, dass viele Mail-Programme die Schriftauszeichnung aus den umschließenden Tabellenzellen auch auf den Alt(ernativ)-Text anwenden. Wichtig zudem: Verlinken Sie Bilder ausschließlich mit absoluten Pfaden von einem offenen und schnellen Webserver. Vermeiden Sie PNG als Bildformat. Wenn Sie Ihr Newsletter-Design mit deaktivierten Bildern testen möchten, können Sie das am besten mit der Webdeveloper Toolbar tun, indem Sie dort einfach unter Bilder > Grafiken durch Alt-Attribute ersetzen auswählen. Auf gar keinen Fall sollten Sie Spacer-Gifs einsetzen, da diese als Spam angesehen werden. Um nicht in die Spam-Falle zu tappen, sollten Sie sich einfach ein paar Mails aus dem Spam-Ordner ansehen und schauen, was dort im Quelltext steht – und diese Fehler nicht im eigenen Newsletter begehen.

Webmailer – der neue Client-Standard

Webmailer wie Gmail, Yahoo Mail oder web.de sind zweifelsohne sehr beliebt bei den Usern, da sie nirgendwo installiert werden müssen und Nutzer ihre E-Mails auch bequem an anderen Rechnern abrufen können. Kompliziert hingegen gestaltet es sich, standardkonforme HTML-Newsletter auszuliefern, da nahezu jeder Dienst E-Mails anders interpretiert. Grundsätzlich werden der <head>-Bereich und der öffnende <body>-Tag herausgeschnitten sowie der Doctype ersetzt. Das bedeutet, dass CSS-Styles, die im <head> verlinkt wurden, natürlich nicht mehr vorhanden sind. Gleiches gilt für Hintergrundgrafiken, die dem <body> zugewiesen sind – sie fallen schlicht und ergreifend einfach weg (Gmail verschiebt die Anweisungen mittlerweile in einen zusätzlichen DIV-Wrapper). Deshalb sollten Sie Hintergrundbilder in eine Wrapper-Tabelle einbinden (Stichwort: Verschachtelung). Weiterhin sollten Sie darauf achten, dass in der HTML-Mail keine CSS-Klassen zugewiesen sind, die mit dem Webmail-Service kollidieren könnten, bedeutet also: kein, sondern eher kundenbezogene Klassennamen wie. Gmail mag zudem keine Hochkommata in der Zuweisung einer bestimmten Schrift, also font-family: “Lucida Grade” wird zu font-family: Lucida Grande. Vermeiden Sie ebenfalls relative Größenangaben und geben Sie dafür alle Angaben in Pixeln an.

Hier noch weitere wichtige Hinweise für die Erstellung:

• Alle paddings und margins auf 0 setzen.
• Für Abstände lieber padding anstatt margin verwenden (margin wird selten richtig interpretiert).
• Keine Kurzschreibweisen für font verwenden, also font-size, font-weight, font-family einzeln aufzählen.
• Vermeiden Sie RGB als Farbwerte, geben Sie diese besser als Hexadezimalwerte an.
• Kein Whitespace in Tabellenzellen.
• Überschriften H1, H2 und H3 verwenden sowie sämtliche CSS-Eigenschaften hierfür neu vergeben, damit kein Default-Style greift.
• Text-Stile in Tabellenzellen jeweils neu vergeben, nicht darauf vertrauen, dass die Stile vererbt werden.

Test-Tools

Haben Sie Ihren HTML-Newsletter fertig erstellt, geht es ans Testen. Wichtig beim Testen ist es, dass Textinhalte schon die echten Inhalte sind, Dummy-Texte werden meist als Spam angesehen. Zudem kommt somit auch nicht erst nach dem Versenden das böse Erwachen, wenn es heißt, dass ein Teil der Newsletter als Spam erkannt worden ist. Optimal geeignet für einen Spamtest ist ein kleines Programm namens Mailingcheck. Das Programm erkennt zudem, ob die E-Mail als Phishing gekennzeichnet wurde und weist Sie darauf hin. Einen Test auf Cross-Client-Kompatibilität können Sie wunderbar mit dem kostenpflichtigen Onlineservice von litmus.com durchführen. Für die Programme Outlook 2003 und Gmail bietet litmus.com die kostenlose Möglichkeit, eine Test-Mail an den Service zu senden, die dann in Form von Screenshots wenige Minuten später online abrufbar sind. Insgesamt können Sie über litmus Previews von mehr als 30 Mail-Clients erzeugen – dann allerdings kostenpflichtig.

Auf der sicheren Seite – Mailvorlagen von MailChimp

Sicherlich, Webdesigner erstellen am liebsten alles selbst, allerings ist es bei der Fülle an Stolpersteinen, die auf dem Weg zum Cross-Client-HTML-Newsletter liegen, müßig bis schier unmöglich, alles richtig zu machen. Der Anbieter MailChimp stellt auf seiner Webseite eine große Sammlung an Template-Vorlagen zur Verfügung, die in diversen Mail-Clients getestet wurden. Zudem hat MailChimp diese Sammlung auf GitHub veröffentlicht . Wenn Sie MailChimp als Newsletter-Versandservice nutzen möchten, haben Sie zudem den Vorteil, dass die Mails über einen sicheren Absender verfügen und ein Tracking der Kampagnen bereits mit zum Service gehört. Neu ist, dass in die Mails auch Social-Buttons für Facebook oder Twitter integriert werden können. Des Weiteren können A/B-Tests bei den Kampagnen auf einfache Art und Weise durchgeführt werden.

Tools

CSS Inline-Style-Konverter

Die Firma Torchbox stellt einen Onlineservice zur Verfügung, der extern eingebundenes CSS zu Inline-Styles wandelt. Auch eine rudimentäre API zum Service können Sie aus einer eigenen Anwendung heraus ansprechen T. Einen ähnlichen Service bietet Dialect aus Kanada, wobei Premailer sogar noch mit zusätzlichen Hinweisen glänzt.

E-Mail-Tracking mit Google-Analytics

In seinem Artikel beschreibt Justin Cutroni sehr ausführlich, wie Sie mit Google Analytics eine E-Mail-Kampagne tracken können. Obwohl der Artikel bereits aus dem Jahr 2008 stammt, ist er nach wie vor sehr aufschlussreich und nützlich.
http://cutroni.com/blog/2008/11/04/email-tracking-with-google-analytics/

————————————————————–
Das war mein Artikel aus dem Webstandards-Magazin Nr. 9

neue Link-Tipps

http://spamcheck.postmarkapp.com/ – Spam Check Service incl. API

http://htmlemailboilerplate.com/ – HTML E-Mail Boilerplate Starter Kit

http://litmus.com/blog/anatomy-mobile-email/anatomy-mobile-email-24-1000px – Anatomy of a Perfect Mobile Email

http://www.1stwebdesigner.com/wp-content/uploads/2011/08/email_marketing_infographic_upd.jpg – E-Mail Marketing Infografik

Die HTML-Slideshow findet ihr hier: CSS3 im praktischen Einsatz

Die letzte Zeit war sehr hektisch für mich, viele Konferenzen und BarCamp habe ich besucht. Zuerst aber die Gewinner der Buchverlosung vom letzten Blogbeitrag:

Praxiswissen TYPO3 4.5: Andy
Einstieg in TYPO3 4.5: Lukas
TYPO3 4.5: Markus
TYPO3 Extensions mit Extbase & Fluid: Marc

Herzlichen Glückwunsch an alle Gewinner und Danke an alle, die mitgemacht haben!

Unterwegs

Wie schon eingangs erwähnt, war ich in den letzten Wochen ziemlich viel unterwegs, 1,5 Tage (jaja, eigentlich 2) auf der fantastischen Fronteers Konferenz in Amsterdam, bei der ich endlich auch derSchepp, Häääns und Maik in RL kennen lernen durfte. Von da aus ging es fast direkt zum mobilecamp Hamburg. Hier habe ich nochmal meine Präzi zum Thema “Mit CSS3 das mobile Web beschleunigen – Mobile Performance Optimierung” gehalten und eine kleine Einführung in jQuery Mobile gegeben (Slides folgen).

Zwischenstop auf der SAE Alumni Convention in Berlin und von der Web DevCon direkt nach München zum B2B-Marketing – Social Media (PDF Link). Als wäre das nicht genug für dieses Jahr, freue ich mich noch auf den Google Developer Day am 19.11. in Berlin, die Beyond Tellerrand am 21.-22.11. in Düsseldorf und letztlich auf dem Multimediatreff 28 am 03.12. in Köln. Dort erzähle ich dann wieder etwas über CSS3.

Ohne zuviel zu verraten, es gibt im Dezember wieder mehr CSS3

Related posts:

1. maddesigns wechselt zu Marit AG

In meiner Session „page.speed = 1“ ging es um Web Performance Optimierung 2011, also um die Möglichkeiten die Ladezeit der Website im Browser zu verbessern und die Unterschiede zwischen Desktop- und Mobil-Browser Optimierung.

Hier der Link zur Slideshow: „page.speed = 1“ Web Performance Optimierung 2011

Mit der nächsten Version TYPO3 4.6 ist es dann möglich per Konfigurationsparameter

config.compressJs = 1
config.compressCss = 1

sowie

config.concatenateJs = 1
config.concatenateCss = 1

im TYPOscript Setup eingebunden Dateien zu komprimieren und zusammenzufassen. Das ist erstmals in TYPO3 4.6 ohne die Verwendung zusätzlicher externer Scripte möglich.

Viele Buchverlage haben das TYPO3camp mit Exemplaren aus dem Verlagsprogramm unterstützt. So konnten sich die Vortragsreferenten jeweils ein Buch ihrer Wahl aussuchen.
Mittlerweile haben sich bei mir einige Büchern angesammelt die ich jetzt an Interessierte verlosen möchte.

Ich freue mich über Kommentare zu den Slides, gern auch andere Meinungen oder Anregungen.
Wenn ihr an der Verlosung teilnehmen wollt fügt am Ende einfach an, welches Buch ihr haben wollt. Ihr könnt natürlich auch einfach nur kommentieren “Buch TYPO3 4.5″ und ihr seid dabei.

Related posts:

1. “CSS & Performance” Artikel Teil 2
2. “CSS & Performance” Vortrag auf dem TYPO3camp München

Teil 2: Performance

Seit einiger Zeit bezieht Google die Ladezeit der Website in die Berechnung der Suchergebnisposition mit ein. Auch wenn es nur ein kleiner Teil der vielen Faktoren ist, sieht Google den Grund dafür, dass schnelle Webseiten dem User nützlich sind.

Um die Ladezeit zu verbessern kann man nicht nur serverseitig Optimierung, wie Optimierung der Datenbank-Abfragen, verbesserte Funktionsaufrufe der jeweiligen Programmiersprache oder die Serverleistung durch Hardware-Optimierung durchführen, sondern man kann viel mehr beim Laden von Bilder, CSS und Javascript optimieren.

Bilder optimieren

Für Grafiken sollte man das Bildformat PNG vor GIF bevorzugen, da man PNG besser komprimieren kann und zudem das vielseitigere Format ist. Für Logo-Grafiken oder andere grafische Elemente ist das Format PNG8 mit bis zu 256 Farben (ähnlich GIF) zu verwenden. Möchte man Transparenzen (z.B. weiche Schatten) in Bildern verwenden, ist PNG24 das übliche Format für weboptimierte Bilder. Diese Grafiken werden problemlos in allen modernen Browsern

JPG sollte man ausschließlich für Fotografien verwenden. Hier muss man abwägen, wie stark die Komprimierung sein soll, je stärker, desto kleiner die Bildgröße.

Nach Erstellung der weboptimieren Grafiken durch Photoshop’s Export oder Fireworks sollte man die PNG-Bilder mit einem zusätzlichen Programm optimieren. Crushing PNG heißt die Methode und entfernt unnötige Bilddaten, bzw. komprimiert diese. Das für die Kommandozeile von Linux entwickelte Tool, gibt es mittlerweile auch als Progrämmchen für Mac oder PC .

CSS Sprites

CSS Sprite bedeutet in der englischen Sprache Kobold oder Geistwesen und ist der Begriff für eine Grafik, die aus mehreren einzelnen Grafiken zu einer einzigen Grafik zusammengefügt wird. Diese Technik ist nicht neu, denn sie wurde bereits früher beim Erstellen von Computerspielen verwenden, da Grafikspeicher damals noch klein waren und das Nachladen lange dauerte. Auch im Webdesign sind CSS Sprites keine “brandneue” Technik, sondern wurde bereits im Jahr 2004 von Dave Shea bei A List Apart vorgestellt. Allerdings erst in den letzten Jahren fand man mehr und mehr Websites, die diese Technik nicht zuletzt auch aufgrund der daraus resultierenden verbesserten Ladezeit anwenden. Denn der größte Vorteil von CSS Sprites liegt in der Einsparung von HTTP-Requests, der Reduzierung der Gesamtgröße der Bilder und somit in der Verkürzung der Ladezeit von Webseiten.

Einen umfassenden Artikel von mir gibt es dazu im Webstandard-Blog „CSS Sprite – Ladegeschwindigkeit optimieren und HTTP-Requests verringern“.

Webseiten die CSS-Sprites einsetzen:

Google, Amazon und selbst TYPO3 setzt seit der Version 4.4 auf Sprites für das Backend

Rendering optimieren

Grundsätzlich sind hier die „Performance Rules“ von Yahoo zu nennen. Regeln, die man leicht und ohne zusätzliche Serverstruktur umsetzen kann, sind:
- CSS mit <link> in den <head> einbinden
- @import vermeiden (http://www.stevesouders.com/blog/2009/04/09/dont-use-import/)
- Javascript vorm schließenden </body> wenn nicht onload-relevant
- Wenn JS im Head, dann nach CSS, weil Javascript das Rendering blockiert
- Javascript und CSS extern einbinden (sind dann vom Browser cachebar)
- Komprimieren und Zusammenfügen
- Max 4 Dateien mit < 10kb gleichzeitig, sind schneller als eine große Datei
- Mit GZIP komprimiert ausliefern

Tools

Standard-Tools für Firebug sind Yslow oder Pagespeed die ähnliche Punkte der aktuellen Webseite prüfen.
Webpagetest ist ein Online-Service mit dem man die Performance der Website an unterschiedlichen Server-Standorten der Welt und mit unterschiedlichen Verbindungsgeschwindigkeiten testen kann. Ein weiteres Highlight ist die visuelle Gegenüberstellung eines Aufrufs mehrerer Webseiten. Ein Beispiel wäre der Test für ein Relaunch-Projekt. Ist die aktuelle Entwicklungswebsite online erreichbar, kann man die mit der bestehenden in Puncto Ladegeschwindigkeit gleichzeitig testet. Dabei wird ein Video generiert, dass deutliche Unterschiede zeigt (sofern vorhanden).

Weitere Spielwiesen:

http://websiteoptimization.com/services/analyze/
http://tools.pingdom.com/
http://www.httpwatch.com/
http://stevesouders.com/cuzillion/

empfohlene Bücher

Related posts:

1. “CSS & Performance” Vortrag auf dem TYPO3camp München
2. Gastartikel im Webstandards-Blog: “CSS Sprite”
3. Blog-Artikel “CSS3 linear-gradient” Hintergrundverläufe mit CSS

ReTweet Button in WordPress einbinden

Das Einbinden des Twitter ReTweet Button ist recht einfach. Twitter stellt auf der Tweet-Button Website einen Konfigurator zur Verfügung.

Wenn man sich mit seinem Twitter-Account eingeloggt hat, werden schon die wichtigsten Felder vorkonfiguriert (Username). Dann kann man die Style des Button auswählen, also vertikal mit Retweet-Anzahl oberhalb, horizontal mit der Anzahl der Tweets rechts vom Button oder ohne Zählung als kleiner Button. So kann man je nach Website-Design den richtigen Button-Style auswählen.

Neben dem Button-Style kann man auch die URL und den Tweet-Text anpassen. Voreinstellung ist jeweils die URL und der Titel der Seite, die getwittert wird. Als vierte Reiter-Option kann man die Sprache des Tweets angeben, z.B. “German” für deutsch.

Quellcode-Vorschau

Im Schritt 2 wird der eigene Twitter-Username angegeben und zusätzlich kann ein weiterer (Partner-)Username und Beschreibung angegeben werden.

In der Vorschau wird die Auswahl direkt angezeigt (Button-Style) und ein Code-Fenster mit dem generiertem HTML-Quellcode.

Folgender Code wird in den Standardeinstellungen mit deutscher Textanzeige erzeugt:

<a href="http://twitter.com/share" class="twitter-share-button"
data-count="vertical" data-lang="de"
data-via="TWITTER USERNAME">Tweet</a>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>

Tweet-Button Code in WordPress einbinden

Um den Button in WordPress einzufügen, muss das Theme bearbeitet werden. Dazu geht man in seiner WordPress-Admin Oberfläche über Design -> Editor und wählt dann rechts aus der Dateiliste die “single.php”.
In der neuen Standard-Theme “Twenty Ten” von WordPress 3.0 wird der generierte HTML-Code vom Twitter-Button direkt vor dem DIV-Container <div class=”entry-content”> eingefügt.

In älteren Themes, die den DIV-Container nicht haben fügt man den Code vor dem PHP-Snippet <?php the_content( ” ); ?> ein.

Anpassung per CSS

Zusätzlich kann man den Twitter-Code noch in einem DIV-Block packen und rechts im Text floaten.

<div style="float: right; margin-left: 10px;">
... Twitter Code
</div>

Optimalerweise vergibt man eine CSS-Klasse und lagert die CSS-Anweisung in die style.css aus. Abschließend kann man aus Performance-Gründen noch die Script-Anweisung in den Header (oder in den Footer) schieben.

Wer hat den twitter-Button schon erfogreich eingebunden? Schreibt mir ein Kommentar oder ein Tweet an @maddesigns.

Plugin für WordPress

[Update] Für den neuen Twitter-Button gibt es jetzt auch ein erstes Plugin. Jasmina von Onlinelupe hat auch ein schönes Tutorial geschrieben. Thomas von hombertho.de nutzt bei sich den kleinen Twitter-Button.

Link zu “CSS Sprite – Ladegeschwindigkeit optimieren und HTTP-Requests verringern“

Hier der Link: http://blog.marit.ag/2010/05/04/teaserboxen-mit-verlauf-ohne-bilder-css3-linear-gradient/

Related posts:

1. Neues FE-Editing von TYPO3 4.3 im Marit AG Blog gezeigt

Related posts:

1. Velkommen til Solboliger – TYPO3 3-sprachig
2. maddesigns wechselt zu Marit AG
3. ofischer communication mit neuer TYPO3 Website

siehe: TYPO3 4.3 im Marit AG Blog

Related posts:

1. maddesigns wechselt zu Marit AG

maddesigns überarbeitete den Online-Auftritt zum Thema Scheidung.

Related posts:

1. Scheidung Deutschland – die einvernehmliche Scheidung online abwickeln

apartment-budapest.info

Solboliger.dk – hier kann man sich einen kleinen Einblick verschaffen und etwas Dänisch lernen…

Related posts:

1. DH Immobilien startet im Web
2. ofischer communication mit neuer TYPO3 Website
3. himalaya.de – Fair Trekking, die Nepal-Reise Spezialisten powered by TYPO3

Allerdings war es nicht nur wichtig technisch zu optimieren, auch grafisch sollte ein komplett neues “Look-and-Feel” für ofischer entwickelt werden.

Aber überzeugen Sie sich selbst vom neuen Internetauftritt der Firma ofischer communication.