Learn the URL schemes of iPhone App, how it works, types of schemes, how to utilize them.
Do you know how to create a mobile website? Or more importantly, do you know what a mobile website is? Domus Dish has covered this topic quite a bit, but in case you’ve missed it, a mobile website is what smart phone users see when looking at your webpage from their phones. There are many differences between mobile and traditional websites, which is why your website may not work for many smart phone users. For one, Apple doesn’t support Flash (perhaps because Steve Jobs hates Adobe, but we’ll save that for another time), so we need to focus on HTML5, which is the next major revision of the HTML standard and is still in development. It can be frustrating that there’s such a disconnect, but learn it and move on – you don’t want to miss out on the mobile website movement.
I encourage you to look at the bright side – once you have mobile web mastered, you’re opening your business to millions – some analysts even say BILLIONS – of mobile web users. Mobile websites are a new way of digital marketing, and a completely different approach compared to the development of traditional websites. Therefore, you can’t just treat it like a regular website with a smaller layout – there are distinct differences in the website’s development that will drastically affect the final result if they’re ignored. Read on as I list the top ways of making your website mobile friendly.
URL Schemes for Mobile
Although we can argue about the various differences between regular HTML and HTML5, they don’t mean anything in terms of marketing efficiency. Most of the uniqueness comes from different functionalities of the hardware; 3G, WIFI, GPS, and more from the Operating System (OS) or software, such as app connectivity. App connectivity is when a smart phone runs another application when you click on a link on a mobile web browser – it’s what makes mobile web so convenient. To integrate new functions, we use a custom URL, scheme whose format looks like the following:
custom://function/pathorid
Mobile Sites Can Make Calls
One of the most important URL schemes to learn is how to set up your site to make a phone call. For example:
<a href="tel:+1 215 772 2800">Call me</a>
You need to put the full phone number including the country code with plus(+) symbol (see above). Once a visitor clicks a “Call me” link, the user’s phone will automatically call the number that you input.
Mobile Sites Can Send Text Messages
In a similar way, you can also create a link to let users text your number.
<a href="sms:+ 1 215 772 2800">Text me</a>
How About “FaceTime” Me?
If you’re intent on contacting your customers even more intimately, you can include an innovative FaceTime link, demonstrated below:
<a href="facetime:+1 215 772 2800">Facetime me</a>
If you are using a Mac or iPod touch 4th generation, input your Apple ID instead of your phone number. Example:
<a href="facetime:betty@domusinc.com">Facetime me</a>
App Connectivity
Some cell phones’ mobile functions are developed to operate in other applications such as Google Maps, YouTube, iTunes, the iPhone’s App Store, iBooks Store, and third-party social applications, such as Facebook, Twitter, Foursquare, etc. For example, many websites will direct users to Google Maps when they search for a business’s location. Very helpful, but once users click on these links, they will be directed away from your website. With this in mind, you might consider a different approach to track the outbound traffic[1].
Google Maps
If you want to show a map and pinpoint a certain place, you can include a Google Maps link, demonstrated below:
<a href="http://maps.google.com/maps?q={Latitude},{Longitude}&z={Zoom}">Place me</a>
{ } values need to be replaced with numbers that indicate the selected location. It’s still a HTTP URL scheme, but Apple devices recognize it and automatically switch to a map application on the iPhone, not the actual Google Maps website.
YouTube
Like Google Maps, regular YouTube links will link to a YouTube application. See below:
<a href="http://www.youtube.com/watch?v=oHxe8B3OUDc">Youtube Video</a>
Facebook
Facebook has its own URL scheme, which could link to a user’s newsfeed, friends, etc. However, at the moment linking to a certain fan page[2] has been blocked in the most recent version of the Facebook application. We’re continuing to investigate if there is a way around this. Stay tuned.
Twitter
Twitter also has its own URL scheme as follows[3]:
<a href="twitter://user?screen_name=domusinc">Follow me</a>
Foursquare
Foursquare is a location-based service where users can check-in when they arrive at a store, restaurant or other business. Businesses can include a link to their user profile or venue page.
To link to a user profile:
<a href="foursquare://user/krisszupa">Foursquare add me</a>
To link to a venue:
<a href="foursquare://venue/4ab7e57cf964a5205f7b20e3">Foursquare check-in me</a>
Notice that the venue ID should be 24 bytes, or letters/numbers, long which is used in Foursquare API v2.
iTunes
If you have an album or podcast in the iTunes Store, you can create a link for that on your website. Example:
<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i={id1}&id={id2}&s={id3}">
Check out in iTunes</a>
App Store
Similar to the URL for the iTunes Store, you can create a link to the iPhone App Store. Example:
<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id={id1}&mt={id2}">
Check out in App Store</a>
iBooks Store
Some sources say that we can link using the “itms-books:” URL scheme[4], but what I figured out is that “http://itunes.apple.com/{Country Code}/book/{ISBN}”[5] will also work. Example:
<a href="http://itunes.apple.com/us/book/isbn9781906615048">Buy it in iBooks Store</a>
Other Tricks
This looks like a tricky one, but with a little guidance it’s not too difficult. Including mobile Safari running in iOS has unique protocol named “data:” which can link to an offline page whose source is located in the link itself[6]. Example:
<a href="data:text/html;charset=utf-8;base64,
PGh0bWw+CjxoZWFkPgo8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGggPSAyNDAiIC8+Cjx0aXRsZT5UaXAgQ2FsY
3VsYXRvcjwvdGl0bGU+Cgo8c2NyaXB0PgoKZnVuY3Rpb24gdGlwKGFtb3VudCkgewogICAgcmV0dXJuIHRpcDsKfQoKdmFyIG91dH
B1dCA9IG51bGw7CnZhciBwZXJjZW50ID0gMTguNSAvIDEwMDsKdmFyIHJ0aXBfZmFjdG9yID0gMC4yNTsKdmFyIHJ0b3RhbF9mYWN
0b3IgPSAxLjAwOwoKZnVuY3Rpb24gd3JpdGVPdXQobGluZSkgewogICBpZiAob3V0cHV0KSB7CiAgICAgIG91dHB1dC5hcHBlbmRD
aGlsZChkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJiciIpKTsKICAgfSBlbHNlIHsKICAgICAgb3V0cHV0ID0gZG9jdW1lbnQuZ2V0R
WxlbWVudEJ5SWQoIm91dHB1dEFyZWEiKTsKICAgfQogICBvdXRwdXQuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuY3JlYXRlVGV4dE5vZG
UobGluZSkpOwp9CgpmdW5jdGlvbiB1cGRhdGUoKQp7CiAgICB2YXIgYW1vdW50ID0gTnVtYmVyKGV2YWwoaW5Gb3JtLm51bS52YWx
1ZSkpOwogICAgaWYgKGFtb3VudCA9PSBOYU4pIHsKICAgICAgICB3cml0ZU91dCgnSHVoPycpOwogICAgfQogICAgdmFyIHRpcCAg
PSBhbW91bnQgKiBwZXJjZW50OwogICAgdmFyIHJ0aXAgPSBNYXRoLnJvdW5kKHRpcCAvIHJ0aXBfZmFjdG9yKSAqIHJ0aXBfZmFjd
G9yOwogICAgd3JpdGVPdXQoJyQnICsgYW1vdW50LnRvRml4ZWQoMikgKyAnICsgJCcgKyBydGlwLnRvRml4ZWQoMikgKyAnID0gJC
cgKyAoYW1vdW50K3J0aXApLnRvRml4ZWQoMikpOwogICAgdmFyIHJ0b3RhbCA9IE1hdGgucm91bmQoKGFtb3VudCArIHRpcCkgLyB
ydG90YWxfZmFjdG9yICsgMC4yNSkgKiBydG90YWxfZmFjdG9yOwogICAgd3JpdGVPdXQoJyQnICsgYW1vdW50LnRvRml4ZWQoMikg
KyAnICsgJCcgKyAocnRvdGFsLWFtb3VudCkudG9GaXhlZCgyKSArICcgPSAkJyArIHJ0b3RhbC50b0ZpeGVkKDIpKTsKICAgIAp9C
gpmdW5jdGlvbiB6YXAoZmllbGQpIHsKICAgIGlmICghIGZpZWxkLnphcHBlZCApIHsKICAgICAgICBmaWVsZC56YXBwZWQgPSB0cn
VlOwogICAgICAgIGZpZWxkLnZhbHVlICA9ICIiOwogICAgfQp9Cgo8L3NjcmlwdD4KCjwvaGVhZD4KPGJvZHk+Cgo8aDE+VGlwIEN
hbGN1bGF0b3I8L2gxPgoKPHA+CkVudGVyIGFmdGVyLXRheCB0b3RhbDoKPC9wPgo8Zm9ybSBuYW1lPSJpbkZvcm0iIG9uU3VibWl0
PSJ1cGRhdGUoKTsgcmV0dXJuIGZhbHNlOyI+CjxpbnB1dCB0eXBlPSJ0ZXh0IiBuYW1lPSJudW0iIG9uRm9jdXM9InphcCh0aGlzK
SIgdmFsdWU9IjI0LjM3IiAvPgo8aW5wdXQgbmFtZT0ic3VibWl0IiB0eXBlPSJidXR0b24iIG9uQ2xpY2s9InVwZGF0ZSgpOyIgdm
FsdWU9IlRpcCIgLz4KPC9mb3JtPgoKPHAgaWQ9Im91dHB1dEFyZWEiPgo8L3A+Cgo8L2JvZHk+CjwvaHRtbD4=">
Tip Calculator</a>
Summing Up the Elements
No matter what features you choose to include in your mobile website, you still need to check the site’s compatibility for each device. For example, a link to Twitter will not work on smart phones that are not an iOS device or on phones that do not have a Twitter application already installed. As you get your site mobile ready, it’s helpful to engage an expert in the beginning stages. Once you have a handle on writing the URL code and deciding how and where to include it on your website, you’ll be ready to introduce your business to the rapidly growing world of mobile web users.
For more information about making your website mobile-ready, watch our video presentation here: www.domusdigital.com/getmobileready
CodeProject
