Treehouse
writes on March 31, 2011
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.
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!
I always use Google’s “Chrome to Phone” extension, so fast, (only for Android), but works great !
https://chrome.google.com/extensions/detail/oadboiipflhobonjjffjbfekfjcgkhco?utm_campaign=en&utm_source=en-ha-na-us-sk-ext-ctp&utm_medium=ha
srry for the doublepost, hit it again by accident..
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
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)})();
Why not just save a bookmark on the device?
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.
A really Great idea! I never tough about this
This is a great and useful info.
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.
Thanks for the tips. I will try using bit.ly and see if this will work for me.
Got a better Idea for you Nick. Create a QR code for the URL and scan it. No fiddly typing at all!
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.
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.
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.
Maybe I’m wrong, but that sounds painful to me. 🙂
Usually I just use a hosts file to map domain.dev, but in your case I’d use a local DNS server.
That sounds like a more permanent solution, which might be better in some cases.
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.
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.
I use the same method. Except that I use a PHP script that reads Apache config and generates links from vHost entries.
That’s a cool idea! I used to do this at my last job.
That’s a great idea… will use this!