Testing Responsive Webdesign

1,245
-1

Published on

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

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,245
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Testing Responsive Webdesign

  1. 1. Testing Responsive Webdesign Sven Wolfermann | maddesigns
  2. 2. Responsive Workflow! Responsive Workflow
  3. 3. Design Process in the Responsive Age
  4. 4. Testing in design phase
  5. 5. Skala Preview xScope Mirror Testing in design phase Mirroring PSD Wireframes testing FluidUI Wirefy · ·
  6. 6. FluidUI https://www.fluidui.com/
  7. 7. Wireframes functional Wirefy http://getwirefy.com/
  8. 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. 9. Webfonts testing – typecast.com Choose font and compare side by side http://typecast.com/
  10. 10. Webfont Testing http://www.impallari.com/testing/
  11. 11. Protip: Design with real content!
  12. 12. Testing during development
  13. 13. Responsive Design Testing Matt Kersley Responsive Design Testing Viewport Resizer / Breakpoint Tester Firefox Responsive View Chrome Device Emulation* · · · ·
  14. 14. Viewport Resizer/Breakpoint Tester Viewport resizer / BreakpointTester
  15. 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. 16. Browser Resizers Problems: Device specific DPR: 1 wrong viewports no meta viewport font-family from desktop Feature-Testing false positives · · · · · ·
  17. 17. Browser Resizers Brad Frost's “Ish”
  18. 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. 19. Emulators
  20. 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. 21. Services BrowserStack – Live, Web-Based Browser Testing modern.ie – Testing Internet Explorer Problems no Touch · · ·
  22. 22. Real Device Testing
  23. 23. Real Device Testing Problem: expensive Advantage: Display, CPU/GPU from Device Real Device-/Browserbugs ;) Scott Jehl's Devicebug-List · · ·
  24. 24. Real Device Testing - Open Device Lab my mobile ODL opendevicelab.com
  25. 25. Testing during development Codekit (2) Edge Inspect Ghost BrowserSync · · · ·
  26. 26. Edge Inspect http://html.adobe.com/edge/inspect/
  27. 27. Ghostlab Ghostlab
  28. 28. Synchronized Cross-Device Mobile Testing http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
  29. 29. Debugging
  30. 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. 31. MIH Tool debug and optimize on iPad and iPhone MIHTool
  32. 32. Chrome Debugging (Android) Remote Debugging Chrome on Android
  33. 33. Firefox Debugging (Android) Remotely debugging Firefox for Android
  34. 34. Safari/iOS Debugging
  35. 35. IE11 device emulation Emulate browsers, screen sizes, and GPS locations
  36. 36. RemoteDebug RemoteDebug is an initiative to bring a common remote debugging protocol to today's browsers. remotedebug.org
  37. 37. JS Debugging jsconsole.com, jsbin.com Introduction to JavaScript Source Maps
  38. 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. 39. Real World Debugging - Simulating slow speed Network Link Conditioner (Mac OSX / iOS) Enabling Network Link Conditioner on iOS Devices
  40. 40. Real World Debugging - Simulating slow speed Mobile Debugging by Remy Sharp
  41. 41. Performance Testing
  42. 42. Performance Testing Webpagetest
  43. 43. mobile Performance Testing mobitest
  44. 44. Testing Budget Your customers WANT to pay your testing budget!
  45. 45. Testing Budget yte.st
  46. 46. Please test your work!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×