The document discusses various tools and techniques for testing responsive web design, highlighting the importance of testing during the design and development phases. It covers services like BrowserStack and emulators for real device testing, as well as debugging tools for different browsers and platforms. Additionally, it emphasizes the need for effective performance testing and considerations for budget in testing workflows.

1. Testing
Responsive Webdesign
Sven Wolfermann | maddesigns

4. Responsive Workflow!
Responsive Workflow

5. Design Process in the Responsive Age

6. Testing in design phase

7. Skala Preview xScope Mirror
Testing in design phase
Mirroring PSD
Wireframes testing
FluidUI
Wirefy
·
·

8. FluidUI
https://www.fluidui.com/

9. Wireframes functional
Wirefy
http://getwirefy.com/

10. Adobe Edge Reflow CC (public preview)
Adobe's new Tool for Responsive Design
Edge Reflow is a design tool, not a development tool
http://html.adobe.com/edge/reflow/

11. Webfonts testing – typecast.com
Choose font and compare side by side
http://typecast.com/

12. Webfont Testing
http://www.impallari.com/testing/

13. Protip:
Design with real content!

14. Testing during development

16. Responsive Design Testing
Matt Kersley Responsive Design Testing
Viewport Resizer / Breakpoint Tester
Firefox Responsive View
Chrome Device Emulation*
·
·
·
·

17. Viewport Resizer/Breakpoint Tester
Viewport resizer / BreakpointTester

18. „Der Viewport — das unbekannte Wesen“ (german)
Blogpost about the problem of "Responsive Testing Tools" and
screen sizes
http://maddesigns.de/meta-viewport-1817.html

19. Browser Resizers
Problems:
Device specific
DPR: 1
wrong viewports
no meta viewport
font-family from desktop
Feature-Testing false positives
·
·
·
·
·
·

20. Browser Resizers
Brad Frost's “Ish”

21. Duo
Duo Browser – develop mobile and desktop simultaneously (incl.
Devtools) – Mac from OSX 10.8
there is also a Firefox Extension:
Responsive Side Panel (Firefox Addon)

22. Emulators

23. Emulators
iOS Simulator
Android Emulator
GENYMOTION – The faster Android emulator
Windows Phone Emulator
Opera Mini Simulator
Firefox OS Simulator
Problems
CPU from Development
no Touch
·
·
·
·
·
·
·
·

24. Services
BrowserStack – Live, Web-Based Browser Testing
modern.ie – Testing Internet Explorer
Problems
no Touch
·
·
·

25. Real Device Testing

26. Real Device Testing
Problem: expensive
Advantage:
Display, CPU/GPU from Device
Real Device-/Browserbugs ;)
Scott Jehl's Devicebug-List
·
·
·

27. Real Device Testing - Open Device Lab
my mobile ODL
opendevicelab.com

28. Testing during development
Codekit (2)
Edge Inspect
Ghost
BrowserSync
·
·
·
·

29. Edge Inspect
http://html.adobe.com/edge/inspect/

30. Ghostlab
Ghostlab

31. Synchronized Cross-Device Mobile Testing
http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

32. Debugging

33. Real Device Debugging Tools
1. Safari Mobile Debugger
2. Webkit Remote Debugger
3. iWebInspector
4. Opera Dragonfly
5. Chrome for Android Web Inspector
6. Firefox for Android Remote Debugging
7. Socketbug
8. weinre
9. jsconsole.com, jsbin.com
10. MIH Tool
11. Adobe Edge Inspect
·
·
·
·
·
·
·
·
·
·
·
Mobile Web Testing & Debugging Best Practices by Andre JAY Meissner

34. MIH Tool
debug and optimize on iPad and iPhone
MIHTool

35. Chrome Debugging (Android)
Remote Debugging Chrome on Android

36. Firefox Debugging (Android)
Remotely debugging Firefox for Android

37. Safari/iOS Debugging

38. IE11 device emulation
Emulate browsers, screen sizes, and GPS locations

39. RemoteDebug
RemoteDebug is an initiative to bring a common remote
debugging protocol to today's browsers.
remotedebug.org

40. JS Debugging
jsconsole.com, jsbin.com
Introduction to JavaScript Source Maps

41. Sass 3.3 Debugging
Sass Source Maps helps debugging
Source Maps connects the devtools with the original files
Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt

42. Real World Debugging - Simulating slow speed
Network Link Conditioner (Mac OSX / iOS)
Enabling Network Link Conditioner on iOS Devices

43. Real World Debugging - Simulating slow speed
Mobile Debugging by Remy Sharp

44. Performance Testing

45. Performance Testing
Webpagetest

46. mobile Performance Testing
mobitest

47. Testing Budget
Your customers WANT to pay your testing budget!

48. Testing Budget
yte.st

49. Please test your work!