Unzählige Browser und Versionen, eine unübersehbare Anzahl an Bildschirmauflösungen und unterschiedliche Geräte machen die Entwicklung und das Testen von responsiven Webseiten nicht einfach. Wie kann man welche Browser verlässlich testen? Das sind Fragen, die sich jeder am Projekt Beteiligte stellen muss. Grundlagen und Strategien für das Testing kann man bereits in der Konzeptions- und Designphase legen. Frühe Tests können an HTML-Mockups oder Prototypen erfolgen. Der Vorteil liegt klar auf der Hand, Funktionen und Verhalten können in unterschiedlichen Browsern und Geräten getestet werden. HTML-Mockups und Prototypen können im Laufe der Entwicklung als Basis für die Finalisierung der Webseite dienen. Regelmäßige Testintervalle steigern die Qualität und helfen Designern, die Machbarkeit von Interaktionskonzepten in HTML und CSS besser zu verstehen.

1. Hightway to Hell
Responsive Webdesign
testen

2. Speaker
Peter Rozek, ecx.io

3. Arbeite bei ecx.io
(Digital Agentur)
Wer bin ich
Beschäftige mich mit
Themen wie Frontend,
Usability und Accessibility
Und twitter hin und wieder
@webinterface

4. Was testen wir ?

5. Wie testen wir ?

6. Wann testen wir ?

7. Wer testet ?

8. Mit welchen Tools testen wir ?

9. Testing Strategie ?

10. Was testen wir ?
Design
Usability
Performance

11. Design testen

12. Usability mit echten Nutzern* testen.
* Zielgruppe

13. Performance unter
realen Bedienungen testen.

14. Network Link Conditioner
Performance testing:
Voraussetzung für die Nutzung des Network Link Conditioners ist die
Installation von Xcode und eine kostenlose Mitgliedschaft im Apple-
Developers-Programm.

15. Netlimit für Mac
Performance testing:
Bandbreite am Mac per Klick beliebig ändern.

16. Network Link Conditioner
Performance testing:
Voraussetzung für die Nutzung des Network Link Conditioners ist die
Installation von Xcode und eine kostenlose Mitgliedschaft im Apple-
Developers-Programm.

17. Speed Limiter für Windows
Performance testing:
Lokalen Webserver, der als gedrosselter Proxy fungiert.
Bandbreiten sind als Profile auswählbar.
Kostenlos für die Privatnutzung .
Kommerzielle Nutzung gebühr von 15 Euro.

18. Wie testen wir ?
Rezise my Browser
Mit Endgeräten

19. Rezise my Browser

20. http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/

21. Endgeräte testing
Pro
• Zuverlässig
• Geräteabhängige Einstellungen können getestet werden.
Kontra
• Teuer, es müssen Geräte gekauft werden.

22. Open Device Lab
Kostenloser Gerätepark für Entwickler.
ODLs ist eine neue, weltweite Bewegung um Software-Entwicklern
Zugriff auf möglichst viele Testgeräte zu ermöglichen.

23. http://opendevicelab.com/

24. Wann testen wir ?
Iterativ ?
Am Ende der Entwicklung ?
Keine gute Idee !
vgl. Wasserfall Modell
Ende

25. erstellen-messen-lernen
Sketch
Wireframe
Design Prototype
Test
Iterativ Testen
„Idealer“ Responsive Workflow

26. Klassische Workflow:
Konzept
Design
Entwicklung
Testing
Roll-out
Hotfix

27. Wer testet ?
Haben Sie ein QM * - Team ?
* Quality-Management

28. Werkzeuge

30. Online Tools
http://responsivepx.com/
responsivepx

31. Online Tools
Screenfly
https://quirktools.com/screenfly/

32. Online Tools
Viewport Resizer
http://lab.maltewassermann.com/viewport-resizer/

33. Online Tools
Viewport Resizer
http://www.browserstack.com/responsive

34. Browserplugins

35. Werkzeuge für komfortables testen der
Viewport Ausgabe
Pro
• Unterschiedliche Auflösungen können schnell getestet werden
• Schnelle Designanpassungen
• Vereinfachte Vorschau bei oder Entwicklung
Kontra
• Keine Pixelgenau Darstellung aufgrund der iFrame Einbindung und
Scrollbareinblendung
• Geräteabhängige Einstellungen können nicht getestet werden.

36. Die Auswahl der Werkzeuge ist wahllos erfolgt.
Die gezeigten Werkzeuge können alle mehr oder weniger das gleiche.

37. Werkzeuge für Hipster und
Apple Fan-Boys unter uns…
http://helloduo.com/
http://helloduo.com/

38. Testing Strategie
Vorhanden ?

39. Welche Browser testen ?
Welche Version ?

40. https://play.google.com/store/search?q=browsers+for+android&c=apps

41. Festlegen welche Browser getestet
werden und welche nicht.
Begründen Sie ihre
Einschränkung !
Es gibt gute Gründe alte veraltete Browser nicht zu unterstützen.

42. Legen Sie fest auf welchen
Endgeräten Sie ihr Produkt testen.

43. Legen Sie fest wann getestet wird.
(Zeitpunkt)

44. Leitfaden damit Sie nicht in die
Hölle kommen:
Was testen wir ?
Wie testen wir ?
Wann testen wir ?
Wer testet ?

45. Wichtig:
Testing Strategie
ausarbeiten !
Team und Stakeholder auf die vereinbarte Strategie commiten.

46. Für meine Ellen

47. Danke, Merci, Thanks
Peter Rozek, ecx.io

48. Fragen ?
Twitter: @webinterface
E-Mail: peter.rozek@ecx.io
E-Mail: hello@peter-rozek.de