Testing
Responsive Webdesign

Sven Wolfermann | maddesigns

Responsive Workflow!

Testing in design phase

Testing in design phase

Mirroring Photoshop/Fireworks


Skala Preview


xScope Mirror



FwPlay

Silly-fast Interactive & animated prototypes from static designs and mockups

Webfonts testing – typecast.com

Choose font and compare side by side

Wireframes testing

FluidUI

Wireframes functional

Wirefy

Adobe Edge Reflow Logo

Adobe Edge Reflow CC (public preview)

Adobe's new Tool for Responsive Design

Adobe Edge

Edge Reflow is a design tool, not a development tool

Testing during development

resizing browser

Responsive Design Testing

Viewport Resizer/Breakpoint Tester


„Der Viewport — das unbekannte Wesen“ (german)

Blogpost about the problem of "Responsive Testing Tools" and screen sizes

Browser Resizers

Problems:

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

Services

Problems

Real Device Testing

Real Device Testing

Problem: expensive

Advantage:

Real Device Testing - Open Device Lab

my mobile ODL

Testing during development

Tools

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!

Rendeer