Generate a video to showcase your responsive design.
JavaScript Shell
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
play
play.js
sample-video.mp4

README.md

Create an awesome video to showcase your amazing responsive design working in various resolutions.

Usage

play http://www.google.com 320 480 8

Parameters:

  • URL
  • Initial viewport width (optional, default value 320)
  • Final viewport width (optional, default value 768)
  • Video length in seconds (optional, default value 10)

Requirements

  • PhantomJS
  • ffmpeg

responsive-play browser edition

It's nice to create a responsive video but maybe you just want to on play on your browser. Try it:

http://sergiolopes.github.com/responsive-play/

Articles

There's a nice Smashing Magazine article by Thierry Koblentz about true responsive designs and inifite resolutions support. You shouldn't target specific device sizes but make your design work at all possible sizes:

http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

responsive-play can help you nicely visualize your page at hundreds of different viewport sizes.

License

Public domain, do whatever you want with the code. If you want to credit me, I'm Sérgio Lopes.