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.
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.
<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:
Add your current web project directory to the watch list.
<script> document.write('<script src="http://' + (location.host || 'localhost').split(':') + ':35729/livereload.js?snipver=1"></' + 'script>') </script>
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.