One of the biggest issues with Responsive Web Design development workflow is having to check as you build a website on multiple devices. Keeping browsers in sync between your devices wether they be desktop, tablet and phone (or simply Chrome vs. Internet Explorer) can be a time wasting experience having to manually refresh a multitude of devices. That isn’t fun or productive.
A great way to speed up your workflow is to use a tool called BrowserSync. It’s platform independent, so will work on Windows, Mac and Linux. Requires Node JS and doesn’t require you to do anything special (install an app or setup a proxy) on your mobile devices (tablets & phones). Most importantly your site can be running as PHP, Rails or ASP.Net it doesn’t matter.
The process is very easy to get up and running. After installing Node JS it takes about 5 mins.
Step 1: Download and install NodeJS
Step 2: Install browsersync. Open a command line or terminal shell.
npm install -g browser-sync
This will install BrowserSync on your machine globally (allowing you to use it in any folder).
Step 3: We will assume your using a web server on your local machine like MAMP or IIS. Go to the root folder of where your website is running and open a terminal/command line.
Step 4: In the terminal window enter a similar command like this:
browser-sync --proxy “mysite.local” --files “content/css/.css, views/**/.cshtml”
This tells BrowserSync to run a proxy to the local domain of your website, and watch the CSS and HTML / Razor views of your website. For your own site replace the domain for the proxy with your own local address. Then change the paths to your files, in the case of running your site on PHP replace “cshtml” with “php”.
When you run BrowserSync will fire up and open a new tab/window with an IP address & port number that will proxy to your local address. Copy that IP address & port number to other browsers and other devices to start syncing. Click around your site, scroll and make changes to your CSS to have the changes reflected across them all.
Now you have a fast way to quickly check changes across a multitude of devices as you build responsive web sites.