Hightway to Hell
Responsive Webdesign
testen
Speaker
Peter Rozek, ecx.io
Arbeite bei ecx.io
(Digital Agentur)
Wer bin ich
Beschäftige mich mit
Themen wie Frontend,
Usability und Accessibility
Und...
Was testen wir ?
Wie testen wir ?
Wann testen wir ?
Wer testet ?
Mit welchen Tools testen wir ?
Testing Strategie ?
Was testen wir ?
Design
Usability
Performance
Design testen
Usability mit echten Nutzern* testen.
* Zielgruppe
Performance unter
realen Bedienungen testen.
Network Link Conditioner
Performance testing:
Voraussetzung für die Nutzung des Network Link Conditioners ist die
Installa...
Netlimit für Mac
Performance testing:
Bandbreite am Mac per Klick beliebig ändern.
Network Link Conditioner
Performance testing:
Voraussetzung für die Nutzung des Network Link Conditioners ist die
Installa...
Speed Limiter für Windows
Performance testing:
Lokalen Webserver, der als gedrosselter Proxy fungiert.
Bandbreiten sind al...
Wie testen wir ?
Rezise my Browser
Mit Endgeräten
Rezise my Browser
http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/
Endgeräte testing
Pro
• Zuverlässig
• Geräteabhängige Einstellungen können getestet werden.
Kontra
• Teuer, es müssen Gerä...
Open Device Lab
Kostenloser Gerätepark für Entwickler.
ODLs ist eine neue, weltweite Bewegung um Software-Entwicklern
Zugr...
http://opendevicelab.com/
Wann testen wir ?
Iterativ ?
Am Ende der Entwicklung ?
Keine gute Idee !
vgl. Wasserfall Modell
Ende
erstellen-messen-lernen
Sketch
Wireframe
Design Prototype
Test
Iterativ Testen
„Idealer“ Responsive Workflow
Klassische Workflow:
Konzept
Design
Entwicklung
Testing
Roll-out
Hotfix
Wer testet ?
Haben Sie ein QM * - Team ?
* Quality-Management
Werkzeuge
Online Tools
http://responsivepx.com/
responsivepx
Online Tools
Screenfly
https://quirktools.com/screenfly/
Online Tools
Viewport Resizer
http://lab.maltewassermann.com/viewport-resizer/
Online Tools
Viewport Resizer
http://www.browserstack.com/responsive
Browserplugins
Werkzeuge für komfortables testen der
Viewport Ausgabe
Pro
• Unterschiedliche Auflösungen können schnell getestet werden
• ...
Die Auswahl der Werkzeuge ist wahllos erfolgt.
Die gezeigten Werkzeuge können alle mehr oder weniger das gleiche.
Werkzeuge für Hipster und
Apple Fan-Boys unter uns…
http://helloduo.com/
http://helloduo.com/
Testing Strategie
Vorhanden ?
Welche Browser testen ?
Welche Version ?
https://play.google.com/store/search?q=browsers+for+android&c=apps
Festlegen welche Browser getestet
werden und welche nicht.
Begründen Sie ihre
Einschränkung !
Es gibt gute Gründe alte ver...
Legen Sie fest auf welchen
Endgeräten Sie ihr Produkt testen.
Legen Sie fest wann getestet wird.
(Zeitpunkt)
Leitfaden damit Sie nicht in die
Hölle kommen:
Was testen wir ?
Wie testen wir ?
Wann testen wir ?
Wer testet ?
Wichtig:
Testing Strategie
ausarbeiten !
Team und Stakeholder auf die vereinbarte Strategie commiten.
Für meine Ellen
Danke, Merci, Thanks
Peter Rozek, ecx.io
Fragen ?
Twitter: @webinterface
E-Mail: peter.rozek@ecx.io
E-Mail: hello@peter-rozek.de
Hightway to Hell - Responsive Webdesign Testen
Nächste SlideShare
Wird geladen in …5
×

Hightway to Hell - Responsive Webdesign Testen

450 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
450
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Hightway to Hell - Responsive Webdesign Testen

  1. 1. Hightway to Hell Responsive Webdesign testen
  2. 2. Speaker Peter Rozek, ecx.io
  3. 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. 4. Was testen wir ?
  5. 5. Wie testen wir ?
  6. 6. Wann testen wir ?
  7. 7. Wer testet ?
  8. 8. Mit welchen Tools testen wir ?
  9. 9. Testing Strategie ?
  10. 10. Was testen wir ? Design Usability Performance
  11. 11. Design testen
  12. 12. Usability mit echten Nutzern* testen. * Zielgruppe
  13. 13. Performance unter realen Bedienungen testen.
  14. 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. 15. Netlimit für Mac Performance testing: Bandbreite am Mac per Klick beliebig ändern.
  16. 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. 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. 18. Wie testen wir ? Rezise my Browser Mit Endgeräten
  19. 19. Rezise my Browser
  20. 20. http://www.smashingmagazine.com/2014/07/14/testing-and-responsive-web-design/
  21. 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. 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. 23. http://opendevicelab.com/
  24. 24. Wann testen wir ? Iterativ ? Am Ende der Entwicklung ? Keine gute Idee ! vgl. Wasserfall Modell Ende
  25. 25. erstellen-messen-lernen Sketch Wireframe Design Prototype Test Iterativ Testen „Idealer“ Responsive Workflow
  26. 26. Klassische Workflow: Konzept Design Entwicklung Testing Roll-out Hotfix
  27. 27. Wer testet ? Haben Sie ein QM * - Team ? * Quality-Management
  28. 28. Werkzeuge
  29. 29. Online Tools http://responsivepx.com/ responsivepx
  30. 30. Online Tools Screenfly https://quirktools.com/screenfly/
  31. 31. Online Tools Viewport Resizer http://lab.maltewassermann.com/viewport-resizer/
  32. 32. Online Tools Viewport Resizer http://www.browserstack.com/responsive
  33. 33. Browserplugins
  34. 34. 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.
  35. 35. Die Auswahl der Werkzeuge ist wahllos erfolgt. Die gezeigten Werkzeuge können alle mehr oder weniger das gleiche.
  36. 36. Werkzeuge für Hipster und Apple Fan-Boys unter uns… http://helloduo.com/ http://helloduo.com/
  37. 37. Testing Strategie Vorhanden ?
  38. 38. Welche Browser testen ? Welche Version ?
  39. 39. https://play.google.com/store/search?q=browsers+for+android&c=apps
  40. 40. 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.
  41. 41. Legen Sie fest auf welchen Endgeräten Sie ihr Produkt testen.
  42. 42. Legen Sie fest wann getestet wird. (Zeitpunkt)
  43. 43. Leitfaden damit Sie nicht in die Hölle kommen: Was testen wir ? Wie testen wir ? Wann testen wir ? Wer testet ?
  44. 44. Wichtig: Testing Strategie ausarbeiten ! Team und Stakeholder auf die vereinbarte Strategie commiten.
  45. 45. Für meine Ellen
  46. 46. Danke, Merci, Thanks Peter Rozek, ecx.io
  47. 47. Fragen ? Twitter: @webinterface E-Mail: peter.rozek@ecx.io E-Mail: hello@peter-rozek.de

×