testing responsive webdesign

Download Testing Responsive Webdesign

Post on 27-Jan-2015

116 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

Brief overview about the testing tools in responsive webdesign projects. Original Slideshow: http://maddesigns.de/responsive-testing/

TRANSCRIPT

  • 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 https://www.fluidui.com/ 7. Wireframes functional Wirefy http://getwirefy.com/ 8. 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/ 9. Webfonts testing typecast.com Choose font and compare side by side http://typecast.com/ 10. Webfont Testing http://www.impallari.com/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 http://maddesigns.de/meta-viewport-1817.html 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 modern.ie 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 opendevicelab.com 25. Testing during development Codekit (2) Edge Inspect Ghost BrowserSync 26. Edge Inspect http://html.adobe.com/edge/inspect/ 27. Ghostlab Ghostlab 28. Synchronized Cross-Device Mobile Testing http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-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. jsconsole.com, jsbin.com 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. remotedebug.org 37. JS Debugging jsconsole.com, jsbin.com 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 yte.st 46. Please test your work!