Die fünf besten Tools, um responsive Websites und Newsletter zu entwickeln

HTML-Entwicklung mit Fokus auf mobile Optimierung

Ob E-Mail oder Website: die Ansprüche an Design und Funktionalität werden durch die zunehmend mobile Internetnutzung immer höher. Umso wichtiger ist es, möglichst früh das Verhalten auf unterschiedlichen Browsern bzw. E-Mail-Clients mit verschiedenen Displaygrößen zu testen. Dafür stehen den Webdesignern und Frontend-Entwicklern eine Reihe von (teils kostenlosen, teils kostenpflichtigen) Tools zur Verfügung. Um die Wahl des richtigen Instruments zu vereinfachen, wollen wir Ihnen fünf Tools vorstellen, die sich in der täglichen Arbeit unserer Designer bewährt haben.

Websites auf Responsive Design testen

Im Bereich der HTML-Entwicklung für Websites haben es drei Test-Instrumente in die engere Auswahl geschafft, die allesamt gewisse Vor- und Nachteile mit sich bringen. In der Regel muss die Entscheidung getroffen werden, ob ein schneller, aber nicht alle Eventualitäten abdeckender Test durchgeführt werden soll oder eine umfassende Prüfung aller Eigenschaften erfolgen muss.

Responsive Design Simulator für Displaygrößen

Ein schneller und kompakter Blick auf unterschiedliche Bildschirmgrößen ist über den Responsive Design Simulator möglich. Kurz die URL eingeben und schon kann die Website auf zahlreichen Geräten vom Smartphone über das Tablet (Hoch- und Querformat) bis hin zur klassischen Desktopansicht geprüft werden. So kann nicht nur die Optik getestet werden, sondern in gewissem Umfang auch die Funktionalitäten.

Größter Nachteil des Simulators ist der reine Fokus auf unterschiedliche Displaygrößen. Dadurch können die Differenzen zwischen Geräten und Browsern nicht zuverlässig ausprobiert und optimiert werden.

Fazit:
Super geeignet für einen schnellen Blick auf die Mobile-Tauglichkeit, für professionelle Optimierungen allerdings nicht ausreichend.

Chrome: Die interne Variante der Emulation

Mit nur einem Knopfdruck (F12) ist im Google-Browser Chrome der interne Test verfügbar. Dort lassen sich die verschiedenen Displaygrößen aller gängigen Smartphones und Tablets auswählen oder eigene Größen frei definieren. Zudem lässt sich auch mit der Maus die Touchbedienung in gewissem Maße simulieren, um erste Hinweise auf Probleme bei der mobilen Usability zu erhalten. Sehr praktisch ist außerdem die Möglichkeit, den Code "on-the-fly" zu optimieren, da Chrome alle Änderungen sofort anzeigt. So können Probekorrekturen schnell und effizient durchgeführt werden.

Der größte Nachteil dieser Variante ergibt sich aus der Tatsache, dass es sich um eine interne Emulation von Chrome handelt. Entsprechend kann lediglich das Verhalten in diesem spezifischen Browser getestet werden, über andere Anbieter wie Firefox, Safari oder den Internet Explorer lassen sich keine zuverlässigen Aussagen treffen. Auch zu Unterschieden zwischen den Geräten kann kein hundertprozentig verbindliches Ergebnis erreicht werden. Denn auch hier liegt der Fokus vor allem auf der reinen Größe des Browserfensters, weniger auf gerätespezifischen Besonderheiten.

Fazit:
Optimal geeignet für Schnelltests und Probekorrekturen, allerdings begrenzt auf einen speziellen Browser.

Interne Emulation in Google Chrome
In Chrome lassen sich nicht nur Displaygrößen, sondern auch die Netzqualität emulieren.

Browserstack: Ein Test auf Herz und Nieren

Für umfangreiche und zuverlässige Website-Tests auf Responsive Design steht bei uns Browserstack auf Platz 1 der meistgenutzten Tools. Mit dem kostenpflichtigen Programm lassen sich nahezu alle Kombinationen aus Displaygröße, Plattform und Browser unkompliziert abbilden.

Da für die Tests echte VMs (Virtuelle Maschinen) genutzt werden, kann eine Website, die diese Prüfung besteht, wirklich als mobile-tauglich eingestuft werden. Diese Zuverlässigkeit macht Browserstack (oder ein vergleichbares Tool) zum unverzichtbaren Werkzeug für Webdesigner und Frontend-Entwickler.

Leider bringt auch Browserstack ein paar kleine Nachteile mit sich. Neben den bereits angesprochenen Kosten, die für die Nutzung fällig werden, fällt vor allem die schwankende Performance auf. Die teils stark variierenden Ladezeiten behindern die Arbeit immer mal wieder, sodass ein kompletter Test zwangsläufig mit einigem zeitlichen Aufwand verbunden ist. Darüber hinaus ermöglicht Browserstack leider keine Emulation der Touchbedienung auf Smartphones und Tablets, was für die mobile Optimierung besonders wichtig sein kann.

Fazit:
Umfassend und zuverlässig, wenngleich mit kleinen Schwächen.

Emulation mit Browserstack
Große Auswahl in Browserstack. Auch Betriebssysteme und Displaygrößen werden emuliert.

Newsletter für die mobile Nutzung optimieren

Neben den Websites zeigt sich auch für Newsletter ein deutlicher Trend zur mobilen Nutzung. Laut aktuellen Statistiken wird mittlerweile mehr als die Hälfte aller E-Mails auf einem Smartphone oder Tablet geöffnet.

Folglich sollte jedes Newsletter-HTML für die mobile Nutzung optimiert und umfangreich getestet werden. Mit professionellen Tools lassen sich problemlos unterschiedliche Displaygrößen und vor allem die zahlreichen E-Mail-Clients abbilden, um ein zufriedenstellendes Ergebnis für alle Nutzungssituationen zu gewährleisten.

Litmus: Alle Informationen aus einer Hand

Unser Favorit für den Test von E-Mails auf die Kompatibilität mit unterschiedlichen Displaygrößen, Geräten und E-Mail-Clients ist Litmus. Das umfangreiche Tool lässt sich nicht nur mit zahlreichen E-Mail-Versandsystemen (u.a. mit unserem Universal Messenger) verknüpfen, sondern bietet alle Funktionen, die für die professionelle E-Mail-Gestaltung notwendig sind. Angefangen bei einer Newsletter-Vorschau auf allen Geräten und Clients über die Möglichkeit, direkte Testkorrekturen vorzunehmen, bis hin zur HTML-Analyse und Betreffzeilenvorschau. Trotz der großen Funktionsvielfalt überzeugt Litmus dabei mit einer einfachen Bedienung, sodass Sie sich komplett auf fachliche Aspekte konzentrieren können.

Da die Prüfung der HTML-Newsletter so umfangreich ist, müssen Sie eine gewisse Wartezeit in Kauf nehmen. Nachdem Sie einen Testlauf gestartet haben, dauert es in der Regel einige Minuten, bis alle Ergebnisse fertig geladen und in der Vorschau verfügbar sind. Ein weiterer Nachteil, der sich aus dem großen Leistungsportfolio ergibt, sind die Kosten. Nach einer kurzen Testphase fallen monatliche Gebühren an, die sich allerdings in einem fairen Rahmen bewegen.

Fazit:
Umfangreich, professionell und empfehlenswert. Die Funktionen sind Ihren Preis definitiv wert.

Newsletter-Preview in Litmus
Ob mobil oder Desktop: Litmus bietet eine E-Mail-Vorschau für alle wichtigen Clients.

Campaign Monitor: Tests für einmalige Kampagnen

Wer monatliche Kosten vermeiden, aber trotzdem professionelle E-Mail-Tests durchführen möchte, sollte einen Blick auf das Angebot von Campaign Monitor werfen. Auch hier wird die Darstellung Ihrer Newsletter auf unterschiedlichen Clients und Geräten geprüft, zudem wird ein Spamfilter-Check durchgeführt. Der interessanteste Aspekt sind allerdings die Zahlungsmodalitäten: Die Dienste können für die einmalige Nutzung gebucht werden, die Preise variieren auf Basis der Empfängerzahl.

Fazit:
Interessantes Preismodell für den gelegentlichen Newsletter-Versand.

Das richtige Tool für die eigenen Ansprüche

Die Auswahl an Instrumenten für den Test von Websites und Newslettern auf mobile Optimierung ist riesig, daher kann unsere Auswahl nur einen Einblick in die zahlreichen Möglichkeiten geben. Welche Wahl am Ende getroffen wird, hängt stark von den individuellen Anforderungen, Ressourcen und Zielen ab. Bei den vorgestellten Tools können Sie allerdings sicher sein, dass sie sich in unserer täglichen Arbeit als zuverlässig und leistungsstark erwiesen haben.

Mobile Optimierung ist erst der Anfang

Teaser Checkliste Newsletter Optimierung

Der Einsatz von Responsive Designs ist nicht die einzige Hürde, die im E-Mail-Marketing überwunden werden muss. Glücklicherweise gibt es unsere Checkliste "In 10 Schritten zum perfekten Newsletter".

Darin beleuchten wir unter anderem

  • die Segmentierung Ihrer Empfängerliste.
  • den Feinschliff einer Betreffzeile.
  • den richtigen Einsatz von Bildern.

Perfektionieren Sie Ihre Newsletter

Newsletter abonnieren

Die besten Tricks und Expertentipps für rundum erfolgreiche Webprojekte.

Folgen Sie uns ...

... und verpassen Sie nie wieder einen neuen Beitrag in unserem Blog.

Sie haben noch Fragen?

Dann kontaktieren Sie uns einfach und wir stehen sofort zur Verfügung.

Nachricht senden

×

Eine Nachricht senden...

Formular wird geladen ...

Tipps der Redaktion

Um-logo-teaser

Professionelle Newsletter: zielgerichtet und persönlich

  • E-Mails direkt aus dem CMS
  • Individuelle Segmentierung
  • Effiziente Marketing Automation

Hier gibt's alle Details

×Schließen

Lösungsblatt: Responsive Design

Responsive Webdesign ist heutzutage unverzichtbar. Tipps zur Umsetzung gibt's in unserem Lösungsblatt.

Zum kostenlosen Download