Hightway to Hell - Responsive Webdesign Testen

441 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
441
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
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

×