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

• iOS Simulator
• Android Emulator
• GENYMOTION – The faster Android emulator
• Windows Phone Emulator
• Opera Mini Simulator
• Firefox OS Simulator

Problems

• CPU from Development
• no Touch

Services

• BrowserStack – Live, Web-Based Browser Testing
• crossbrowsertesting.com - Cross Browser Testing Service
• modern.ie – Testing Internet Explorer

Problems

• no Touch

Real Device Testing

Real Device Testing

Problem: expensive

Advantage:

• Display, CPU/GPU from Device
• Real Device-/Browserbugs ;)
• Scott Jehl's Devicebug-List
• Problems with the The Android Browser

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

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

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!