Hightway to Hell - Responsive Webdesign Testen

48
Hightway to Hell Responsive Webdesign testen

Transcript of Hightway to Hell - Responsive Webdesign Testen

Hightway to HellResponsive Webdesign

testen

SpeakerPeter Rozek, ecx.io

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

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 ConditionerPerformance testing:

Voraussetzung für die Nutzung des Network Link Conditioners ist die Installation von Xcode und eine kostenlose Mitgliedschaft im Apple-

Developers-Programm.

Netlimit für MacPerformance testing:

Bandbreite am Mac per Klick beliebig ändern.

Network Link ConditionerPerformance testing:

Voraussetzung für die Nutzung des Network Link Conditioners ist die Installation von Xcode und eine kostenlose Mitgliedschaft im Apple-

Developers-Programm.

Speed Limiter für WindowsPerformance 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.

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äte gekauft werden.

Open Device LabKostenloser Gerätepark für Entwickler.

ODLs ist eine neue, weltweite Bewegung um Software-Entwicklern Zugriff auf möglichst viele Testgeräte zu ermöglichen.

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

TestIterativ Testen

„Idealer“ Responsive Workflow

Klassische Workflow:

Konzept

Design

EntwicklungTesting

Roll-out

Hotfix

Wer testet ?

Haben Sie ein QM * - Team ?* Quality-Management

Werkzeuge

Online Tools

http://responsivepx.com/

responsivepx

Online ToolsScreenfly

https://quirktools.com/screenfly/

Online ToolsViewport Resizer

http://lab.maltewassermann.com/viewport-resizer/

Online ToolsViewport Resizer

http://www.browserstack.com/responsive

Browserplugins

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.

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 veraltete Browser nicht zu unterstützen.

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, ThanksPeter Rozek, ecx.io