Click here to load reader

Testing Responsive Webdesign

  • View

  • Download

Embed Size (px)


Brief overview about the testing tools in responsive webdesign projects. Original Slideshow:

Text of Testing Responsive Webdesign

  • 1. Testing Responsive Webdesign Sven Wolfermann | maddesigns

2. Responsive Workflow! Responsive Workflow 3. Design Process in the Responsive Age 4. Testing in design phase 5. Skala Preview xScope Mirror Testing in design phase Mirroring PSD Wireframes testing FluidUI Wirefy 6. FluidUI 7. Wireframes functional Wirefy 8. Adobe Edge Reflow CC (public preview) Adobe's new Tool for Responsive Design Edge Reflow is a design tool, not a development tool 9. Webfonts testing Choose font and compare side by side 10. Webfont Testing 11. Protip: Design with real content! 12. Testing during development 13. Responsive Design Testing Matt Kersley Responsive Design Testing Viewport Resizer / Breakpoint Tester Firefox Responsive View Chrome Device Emulation* 14. Viewport Resizer/Breakpoint Tester Viewport resizer / BreakpointTester 15. Der Viewport das unbekannte Wesen (german) Blogpost about the problem of "Responsive Testing Tools" and screen sizes 16. Browser Resizers Problems: Device specific DPR: 1 wrong viewports no meta viewport font-family from desktop Feature-Testing false positives 17. Browser Resizers Brad Frost's Ish 18. 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) 19. Emulators 20. 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 21. Services BrowserStack Live, Web-Based Browser Testing Testing Internet Explorer Problems no Touch 22. Real Device Testing 23. Real Device Testing Problem: expensive Advantage: Display, CPU/GPU from Device Real Device-/Browserbugs ;) Scott Jehl's Devicebug-List 24. Real Device Testing - Open Device Lab my mobile ODL 25. Testing during development Codekit (2) Edge Inspect Ghost BrowserSync 26. Edge Inspect 27. Ghostlab Ghostlab 28. Synchronized Cross-Device Mobile Testing 29. Debugging 30. 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., 10. MIH Tool 11. Adobe Edge Inspect Mobile Web Testing & Debugging Best Practices by Andre JAY Meissner 31. MIH Tool debug and optimize on iPad and iPhone MIHTool 32. Chrome Debugging (Android) Remote Debugging Chrome on Android 33. Firefox Debugging (Android) Remotely debugging Firefox for Android 34. Safari/iOS Debugging 35. IE11 device emulation Emulate browsers, screen sizes, and GPS locations 36. RemoteDebug RemoteDebug is an initiative to bring a common remote debugging protocol to today's browsers. 37. JS Debugging, Introduction to JavaScript Source Maps 38. 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 39. Real World Debugging - Simulating slow speed Network Link Conditioner (Mac OSX / iOS) Enabling Network Link Conditioner on iOS Devices 40. Real World Debugging - Simulating slow speed Mobile Debugging by Remy Sharp 41. Performance Testing 42. Performance Testing Webpagetest 43. mobile Performance Testing mobitest 44. Testing Budget Your customers WANT to pay your testing budget! 45. Testing Budget 46. Please test your work!