Testing
Responsive Webdesign
Sven Wolfermann | maddesigns
Responsive Workflow!
Testing in design phase
Testing in design phase
Mirroring Photoshop/Fireworks
Skala Preview
xScope Mirror
FwPlay
Webfonts testing – typecast.com
Choose font and compare side by side
Wireframes testing
FluidUI
Wireframes functional
Wirefy
Adobe Edge Reflow CC (public preview)
Adobe's new Tool for Responsive Design
Edge Reflow is a design tool, not a development tool
Testing during development
Responsive Design Testing
- Matt Kersley Responsive Design Testing
- Viewport Resizer / Breakpoint Tester
- Firefox Responsive View
- Chrome Device Emulation*
Viewport Resizer/Breakpoint Tester
„Der Viewport — das unbekannte Wesen“ (german)
Blogpost about the problem of "Responsive Testing Tools" and screen sizes
Browser Resizers
Problems:
- Device specific
- DPR: 1
- wrong viewports
- no meta viewport
- font-family from desktop
- Feature-Testing false positives
Browser Resizers
New Chrome Device Debugging
Device Emulation / Network Throtlling / reads Media Querys from CSS source
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
Problems
- CPU from Development
- no Touch
Services
Problems
Real Device Testing
Real Device Testing
Problem: expensive
Advantage:
Real Device Testing - Open Device Lab
my mobile ODL
Testing during development
Tools
- Codekit (2)
- Edge Inspect
- Ghost
- BrowserSync (Grunt/Gulp)
Edge Inspect
Ghostlab
Synchronized Cross-Device Mobile Testing
Debugging
Real Device Debugging Tools
- Safari Mobile Debugger
- Webkit Remote Debugger
- iWebInspector
- Opera Dragonfly
- Chrome for Android Web Inspector
- Firefox for Android Remote Debugging
- Socketbug
- weinre
- jsconsole.com, jsbin.com
- MIH Tool
- Adobe Edge Inspect
MIH Tool
debug and optimize on iPad and iPhone
View Source
iOS 8 Safari extension with syntax highlighting
Chrome Debugging (for Android)
Safari/iOS Debugging
Firefox Debugging (Android)
IE11 device emulation
Valence (Firefox Dev Tools)
debugging Chrome on Android and Safari on iOS
RemoteDebug
RemoteDebug is an initiative to bring a common remote debugging protocol to today's browsers.
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
Real World Debugging - Simulating slow speed
Network Link Conditioner (Mac OSX / iOS)
Real World Debugging - Simulating slow speed
Performance Testing
Performance Testing
mobile Performance Testing
Testing Budget
Testing Budget
yte.st
Please test your work!