LearnQuick Tip: Use bit.ly for Local Development URLs

Recently I’ve been working on a new Master Class for Think Vitamin Membership on the topic of responsive design. One of the major goals of responsive design is cross-browser compatibility, so as you might expect, I’m teaching a project that works across a broad spectrum of browsers and devices, including 5 different mobile browsers.

Five different mobile phones, all rendering the same webpage.

When testing for mobile devices, I will usually connect the device to the local Wi-Fi network, then enter in the IP address of my local computer with the path to the project. So for example, my local development URL looked like this when I started:

We recently purchased several unlocked handsets for all of our testing needs, because it’s always best to test directly on the target hardware whenever possible. However, typing this long URL into 5 different phones on a bunch of tiny keyboards is a pain. Instead, I decided to use bit.ly to shorten my local development path. Using this trick, I was able to create manageable URLs, like this:


I’m betting someone has already thought to do this, but I’ve never heard of it before, so hopefully the next time you have to develop mobile websites this will come in handy. If you have any mobile development tips of your own, please share!

21 Responses to “Quick Tip: Use bit.ly for Local Development URLs”

  1. Ian MacDowell on April 5, 2011 at 12:53 pm said:

    I always use Google’s “Chrome to Phone” extension, so fast, (only for Android), but works great !

    srry for the doublepost, hit it again by accident..

  2. Ian MacDowell on April 5, 2011 at 12:51 pm said:

    another great tool(at least for android ) is Googles chrome to Phone extension: https://chrome.google.com/extensions/detail/oadboiipflhobonjjffjbfekfjcgkhco?utm_campaign=en&utm_source=en-ha-na-us-sk-ext-ctp&utm_medium=ha

  3. I would probably use one of the following, depending on the scenario:

    1. The Chrome to Phone extension, works well if I only need to do testing on Android devices
    2. QR Codes, I made a simple bookmarklet that outputs a QR code from the current URL
    3. Have a page bookmarked or set as home page that just lists various links

    The bookmarklet if anyone is interested:


  4. Why not just save a bookmark on the device?

    • Nick Pettit on April 1, 2011 at 5:17 pm said:

      If you’re only testing 1 URL, that works. We’re constantly testing different projects on different machines though, so there would still be lots of typing for us to initially save bookmarks.

  5. Catherine on April 1, 2011 at 1:04 pm said:

    A really Great idea! I never tough about this

  6. kate welsh on April 1, 2011 at 9:37 am said:

    This is a great and useful info.

  7. planetoftheweb on April 1, 2011 at 5:00 am said:

    I found a simple Snow Leopard DNS server software (http://cutedgesystems.com/software/DNSEnablerSnow). Run it on my Mini and then point the router to it as a DNS server. Now all mobile devices on the local network can see my development machine as a short URL. I’m geekely overjoyed. Thanks Ivan and Nick.

  8. best eye cream on April 1, 2011 at 3:27 am said:

    Thanks for the tips. I will try using bit.ly and see if this will work for me.

  9. Craig Russell on March 31, 2011 at 9:58 pm said:

    Got a better Idea for you Nick. Create a QR code for the URL and scan it. No fiddly typing at all!

    • planetoftheweb on March 31, 2011 at 10:38 pm said:

      If he’s going to go with QR codes…he should make it CueCat compatible. (http://en.wikipedia.org/wiki/CueCat). That’s what the QR codes remind me of.

    • planetoftheweb on April 1, 2011 at 9:52 pm said:

      Dang it…I made fun of QR codes and I had to use one today to look up specs on a camera…it was actually useful.

  10. planetoftheweb on March 31, 2011 at 2:37 pm said:

    I wonder if anyone knows a way to edit the local router’s hosts file so that all the devices on the network can see the local dev workstation via a short URL? Been trying to figure this out for a while.

  11. Usually I just use a hosts file to map domain.dev, but in your case I’d use a local DNS server.

  12. planetoftheweb on March 31, 2011 at 12:52 pm said:

    Locally, if you use MAMP or MAMP pro (http://mamp.info/), you can use whatever you want as the url so it can be a lot shorter…as long as your mobile device is in the same network. You can map also map multiple URLs with the Pro version to different projects. Ultimately you can just edit your hosts file…/private/etc/hosts, but it’s much easier to manage with MAMP, there’s a lot more features and there’s a free version.

    If you want external access to your mobile projects, you can use DYN DNS. to map a domain to your local project…that way you can allow external clients or yourself not on your network to access your WebApp…even if you have a dynamic IP address.

  13. Create a html file on your development server.

    Bookmark it on all the devices. Update this page with links to stuff you want to test.

    This means you only need to type in an address a few times and then you just click the bookmark and then the link to test.

  14. That’s a great idea… will use this!

Leave a Reply

Learn to code with Treehouse

Start your 7 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more