Testing Responsive WebdesignSven Wolfermann | maddesigns

Responsive Workflow!

Responsive Workflow

Design Process in the Responsive Age

Testing in design phase

Skala Preview

xScope Mirror

Testing in design phase

Mirroring PSD

Wireframes testing

FluidUIWirefy

··

FluidUI

https://www.fluidui.com/

Wireframes functional

Wirefy

http://getwirefy.com/

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/

Webfont Testing

http://www.impallari.com/testing/

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

····

Edge Inspect

http://html.adobe.com/edge/inspect/

Ghostlab

Ghostlab

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

MIH Tool

debug and optimize on iPad and iPhone

MIHTool

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

Performance Testing

Webpagetest

mobile Performance Testing

mobitest

Testing Budget

Your customers WANT to pay your testing budget!

Testing Budget

yte.st

Please test your work!