Quick 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:

http://10.0.1.35/~nick/RWD/Web/

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:

http://j.mp/nickrwd

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!

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

21 comments on “Quick Tip: Use bit.ly for Local Development URLs

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

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

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

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

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

    javascript:(function(){location.href=’http://api.qrserver.com/v1/create-qr-code/?size=240×240&data=’+encodeURI(location.href)})();