Responsive web design is easier to get right if you can see the result in your browser straightaway. By removing unnecessary steps your ideas will be able to flow more freely and your designs will be better for it. Use LiveReload and a local web server in order to see the results of your changes, on multiple devices, as soon as you hit save.
LiveReload is a utility that watches local directories for changes and automatically refreshes affected pages in your browser via a plugin or injected JavaScript. Serve your files from a local web server and you have instant and automatic updates on any device or browser that is able to connect. In the following example I will take you through the steps of setting up LiveReload and MAMP on Mac OS X for this very purpose. (For Linux use Guard::LiveReload and for Windows you can try the alpha of LiveReload. And you can of course use any web server you like.)
Buy and install LiveReload 2 from the Mac App Store. (I am not affiliated with the author or publisher and I have paid for my copy with my own money.)
Download, unzip and install MAMP. (I am not affiliated with the author or publisher and I am using the free version.)
Open the MAMP configuration file at /Applications/MAMP/conf/apache/httpd.conf in a text editor.
Find out the full path to your current web project on your computer.
Somewhere inside <IfModule alias_module> add the following:
Alias /name_of_your_project "/full/path/to/the/project"
<Directory "/full/path/to/the/project">
AddCharset UTF-8 .html
AddCharset UTF-8 .php
AddCharset UTF-8 .css
AddCharset UTF-8 .js
Options Indexes FollowSymlinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>Save the configuration file and start MAMP.
Make sure that http://localhost:8888/name_of_your_project works in a web browser (index.html or index.php must be present).
Find out the ip address of your computer (run ifconfig in the terminal).
Test that you are able to connect to your computer from your mobile devices (must be on the same network, the url should look something like this: http://192.168.0.2:8888/name_of_your_project).
Start LiveReload.
Add your current web project directory to the watch list.
Copy the JavaScript snippet from LiveReload into your html file(s) and save.
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
</script>Refresh your browsers once in order to trigger the JavaScript.
Done!
If everything is working correctly all your browsers will now automatically refresh as soon as you save an html file or any asset it uses. Designing a responsive web site is now a much nicer experience. As long as you know your media queries. And how to design.
See further, by standing on the shoulders of giants.