XRespond for responsive development testing needs

[abdus]

While I was reading Smashing Magazine, I discovered this handy tool called XRespond that lets you load webpages in iframes that are designed to simulate different devices, (similar to how browsers' mobile simulators work).

I think it's quite useful for local development. In fact it works for any website as long as it doesnt have `X-Frame-Options` headers set to `sameorigin`. I highly recommend using it with browser-sync with live loading as well. I use this settings when using it with PHPStorm to live reload my dev site on pw.dev.

// remember set cwd to /site/templates/ or call it from templates directory
path/to/browser-sync.cmd start --proxy pw.dev --port 8080 --files "**/*.php" --files "assets/**/*.css" --files "assets/**/*.css"

What other tools/utilities do you use for testing your responsive designs?

[PWaddict]

14 hours ago, abdus said:

What other tools/utilities do you use for testing your responsive designs?

I'm currently using the Window Resizer Chrome extension.

[dragan]

Luckily, we have more than a dozen real devices. We don't rely on just desktop browser resizing and emulation. Only exception being responsive HTML emails, where we use Litmus - but thank God we only do such stuff like once a year.

[pwired]

Quote

Luckily, we have more than a dozen real devices . . .

Even that was not good enough for me, I needed different desktop screens as well. Over time I noticed that some websites I made looked different on different desktop screens. I dont know if it was the configured resolution on the screen or the width of the screen it self but the sites looked different. Most of the time I had problems with the nav bar spreading out over the total width of any screen, or the complete body of the site shifting to the right on 1920x1080 resolutions. Before I used the karpolan online service to check my websites which I have good experience with:

http://karpolan.com/services/site-viewer/