How to use LiveReload for responsive web design

By Mattias Kihlström

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.)

Prerequisites (Mac OS X)

Step by step (Mac OS X)

  1. Open the MAMP configuration file at /Applications/MAMP/conf/apache/httpd.conf in a text editor.

  2. Find out the full path to your current web project on your computer.

  3. 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
  1. Save the configuration file and start MAMP.

  2. Make sure that http://localhost:8888/name_of_your_project works in a web browser (index.html or index.php must be present).

  3. Find out the ip address of your computer (run ifconfig in the terminal).

  4. 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:

  5. Start LiveReload.

  6. Add your current web project directory to the watch list.
    LiveReload screenshot

  7. Copy the JavaScript snippet from LiveReload into your html file(s) and save.

document.write('<script src="http://' + ( || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
  1. Refresh your browsers once in order to trigger the JavaScript.

  2. Done! in Desktop Chrome and Mobile Safari

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.