Respons-O-Matic is a super-low-overhead way to preview your responsive designs, as you build them. All it really is is a single HTML page that loads a specified local resource inside some iframes. You don't even need to be running a webserver to use it!
I added some new features:
- Simply type in a URL or filename to load; no more config
- Last ten history items
- Rotate the iDevices by clicking on the home button
Respons-O-Matic uses devices.css from the clever folks at Marvel to display your HTML within the context of a few different devices. Each device layout simply surrounds an iframe which loads the content you specify.
Because each iframe has a different height/width, basic mediaquery rules like @media only screen and (min-width: 400px) will be triggered, allowing you to simultaneously preview your deisgn in a few different scenarios.
There's obviously no magic going on here, I just thought I'd share something that helps me work faster, with less overhead. (See FAQ below)
I've reworked the file structure, and tweaked the python script, so now things will hopefully work for a broader audience.
First, just download or clone this repository to your hard drive someplace.
After you've got the repository, I recommend checking out the included sample real quick.
- Head to your browser
- Choose "File > Open"
- Point it at
/path/to/responsomatic/index.html.
The root index.html file should redirect to the application, if not, try opening /path/to/responsomatic/responsomatic/index.html instead.
Once you see how the files just load in the iframes, you get a pretty good idea what's going on here. There's a couple of ways to make Respons-O-Matic work with your content.
To avoid confusion in this section and the next, YOUR_PROJECT_DIRECTORY will refer to where you put the serveit.py file and the responsomatic subdirectory (the one with all the css and js in it). We'll call that subdirectory the "responsomatic code" directory.
If you have a webserver that is already serving your mockups simply skip ahead to "Serving It Up"
Drop your content into /path/to/responsomatic and edit it there. When you enter a filename into the app, use ../your_entry_file.html as the path.
In this scenario, YOUR_PROJECT_DIRECTORY will be /path/to/responsomatic.
Continue to edit in your existing location and copy the /path/to/responsomatic/responsomatic subdirectory (the one with all the css and js in it) to your project's root directory.
If you'd like to use the server script, you should also copy serveit.py to the same location. You don't need to do this, and can use Option 1 or Option 3 below. If you do, make sure this file and the code directory both live at the root of your project.
In this scenario, YOUR_PROJECT_DIRECTORY will be /path/to/your/project.
By default, once configured above, you don't need to serve anything. As before,
- Head to your browser
- Choose "File > Open"
- Point it at
YOUR_PROJECT_DIRECTORY/responsomatic/index.html
(The app index lives one level in from the root or your project.)
Again, if you have python (2.7.x) installed, and you don't want to mess with the script, or copy it to your project
cd YOUR_PROJECT_DIRECTORY
python -m SimpleHTTPServer PORT_NUMBER
In your browser, you can now navigate to http://localhost:PORT_NUMBER/responsomatic/index.html
If you have python (2.7.x) installed, open up Terminal.app, then:
cd YOUR_PROJECT_DIRECTORY
python ./serveit.py
In your browser, you can now navigate to http://localhost:8080/responsomatic/index.html
Debugging the server script
- If you see an error that the script can't run, most likely you just need to
chmod 755 ./serveit.py - If you see an error about 8080 (the default) already being in use then you can change the port by using the
-poption like thispython serveit.py -p PORT_NUMBER - If you copied the script and responsomatic to your own content directory, make sure they both live at the root of your project.
I'm working on the following right now:
- ability to switch devices
- DONE:
ability to switch between landscape and portrait - DONE:
a better serve script that will serve content form you project directory as a configuration parameter
What else? Feel free to add an enhancement request with your thoughts, or fork it and send a Pull Request my way.
(Not really, I just made them up so I could answer some things in advance.)
While there are loads of wonderful pieces of software out there that let you preview RWD layouts in realtime. But if you're like me, the last thing you need / want is more tools in your toolchain. (Only Adam West had more tools in his belt than the modern web designer.)
Besides, I got tired of always having to gulp my gulpfiles, pack my webpacks and vulcanize my … vulcans(?) before I could see results in the browser. Not to mention needing a whole boatload of devices around
So, one day I figuresd I'd make something that …
- needs no special configuration
- needs no extra tools or libraries (npm, bower, gulp, etc)
- didn't (necessarily) need a webserver
- could be modified without compiling/recompiling
- was easily understood by anyone who wanted to see a demo
- allowed in-place use/reuse of work I was already doing
- could easily be used on several projects without even more configuration, etc
- can be used even when offline
I can hear the collective chorus as I write this …
- "There's no live reload!"
- "Those displays aren't actually at 1×, 2×, 3.1415×, 2Σ1..n×, etc!"
- "What about Samsung?"
Again, there's loads of products out there. Here's a handy chart of some of those tools made by kdimatteo for example.
Respons-O-Matic is not intended to replace any of them, or to even approximate anything like actual on-device testing.
Alas, I don't know enough about any RWD preview tool or testing framework to speak intelligently about the subject, or to recommend one.
Sure. Here's one and a search will show you loads more. I encourage you to shop around for the one that fits your needs and workflow the best.
I wanted an assets directory that was likely to not be overwritten when someone drops their content into root folder. One less thing to worry about troubleshooting.