testing responsive webdesign
DESCRIPTION
Brief overview about the testing tools in responsive webdesign projects. Original Slideshow: http://maddesigns.de/responsive-testing/TRANSCRIPT
Testing Responsive WebdesignSven Wolfermann | maddesigns
Design Process in the Responsive Age
Testing in design phase
Skala Preview
xScope Mirror
Testing in design phase
Mirroring PSD
Wireframes testing
FluidUIWirefy
··
Adobe Edge Reflow CC (public preview)
Adobe's new Tool for Responsive Design
Edge Reflow is a design tool, not a development toolhttp://html.adobe.com/edge/reflow/
Webfonts testing – typecast.com
Choose font and compare side by side
http://typecast.com/
Protip: Design with real content!
Testing during development
Responsive Design Testing
Matt Kersley Responsive Design TestingViewport Resizer / Breakpoint TesterFirefox Responsive ViewChrome Device Emulation*
····
Viewport Resizer/Breakpoint Tester
Viewport resizer / BreakpointTester
„Der Viewport — das unbekannte Wesen“ (german)
Blogpost about the problem of "Responsive Testing Tools" andscreen sizes
http://maddesigns.de/meta-viewport-1817.html
Browser Resizers
Problems:
Device specificDPR: 1wrong viewportsno meta viewportfont-family from desktopFeature-Testing false positives
······
Browser Resizers
Brad Frost's “Ish”
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)
Emulators
Emulators
iOS SimulatorAndroid EmulatorGENYMOTION – The faster Android emulatorWindows Phone EmulatorOpera Mini SimulatorFirefox OS Simulator
Problems
CPU from Developmentno Touch
······
··
Services
BrowserStack – Live, Web-Based Browser Testingmodern.ie – Testing Internet Explorer
Problems
no Touch
··
·
Real Device Testing
Real Device Testing
Problem: expensive
Advantage:
Display, CPU/GPU from DeviceReal Device-/Browserbugs ;)Scott Jehl's Devicebug-List
···
Real Device Testing - Open Device Lab
my mobile ODL
opendevicelab.com
Testing during development
Codekit (2)Edge InspectGhostBrowserSync
····
Synchronized Cross-Device Mobile Testing
http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
Debugging
Real Device Debugging Tools
1. Safari Mobile Debugger2. Webkit Remote Debugger3. iWebInspector4. Opera Dragonfly5. Chrome for Android Web Inspector6. Firefox for Android Remote Debugging7. Socketbug8. weinre9. jsconsole.com, jsbin.com
10. MIH Tool11. Adobe Edge Inspect
···········
Mobile Web Testing & Debugging Best Practices by Andre JAY Meissner
Chrome Debugging (Android)
Remote Debugging Chrome on Android
Firefox Debugging (Android)
Remotely debugging Firefox for Android
Safari/iOS Debugging
IE11 device emulation
Emulate browsers, screen sizes, and GPS locations
RemoteDebug
RemoteDebug is an initiative to bring a common remotedebugging protocol to today's browsers.
remotedebug.org
JS Debugging
jsconsole.com, jsbin.com
Introduction to JavaScript Source Maps
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
Real World Debugging - Simulating slow speed
Network Link Conditioner (Mac OSX / iOS)
Enabling Network Link Conditioner on iOS Devices
Real World Debugging - Simulating slow speed
Mobile Debugging by Remy Sharp
Performance Testing
Testing Budget
Your customers WANT to pay your testing budget!
Please test your work!