Click here to Skip to main content
15,867,686 members
Articles / Web Development / HTML5

Mobile Website Expansion Offers Businesses Unlimited Potential

Rate me:
Please Sign up or sign in to vote.
4.87/5 (14 votes)
18 Feb 2011CPOL5 min read 52K   30   14
Mobile website expansion offers business unlimited potential

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:

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

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

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

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

HTML
<a href="http://maps.google.com/maps?q={Latitude},{Longitude}&amp;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:

HTML
<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]:

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

HTML
<a href="foursquare://user/krisszupa">Foursquare add me</a>

To link to a venue:

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

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

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

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

HTML
<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


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead Domus Inc.
United States United States
Won Dong is a technology director of Domus Digital, division of Domus Inc. He majored in mathematics(undergrad) and computer graphics and gaming technology(master) in University of Pennsylvania. As CTO(Cheif Technology Officer) in E-motion Inc, the biggest web integration company in South Korea, he coordinated several massive web projects in Samsung, Hyundai, etc. His specialties are web development, cloud computing, social media development, computer graphics, and game development.

Development Tools : VS 2010, Xcode, Eclipse, Delphi
Design Tools : Photoshop, Maya, Illustrator, 3D MAX, Expression Blend, Flash
Technologies : C++, C#, Java, Objective-Pascal, Objective-C, .NET, WPF, WCF, SOAP, CUDA, Cg, FLEX, Mel, XAML, FBML, oAuth, oData

Comments and Discussions

 
GeneralMy vote of 5 Pin
JH6427-Feb-11 8:30
JH6427-Feb-11 8:30 
GeneralMy vote of 5 Pin
Rod Cullison26-Feb-11 4:19
Rod Cullison26-Feb-11 4:19 
GeneralAnother I recently discovered by chance is Skype:// Pin
Trent Wyatt25-Feb-11 13:04
Trent Wyatt25-Feb-11 13:04 
GeneralRe: Another I recently discovered by chance is Skype:// Pin
Hein Bloed25-Feb-11 21:30
Hein Bloed25-Feb-11 21:30 
GeneralRe: Another I recently discovered by chance is Skype:// Pin
Won Dong28-Feb-11 5:55
Won Dong28-Feb-11 5:55 
GeneralMy vote of 5 Pin
Member 432084419-Feb-11 13:32
Member 432084419-Feb-11 13:32 
GeneralGood one Pin
Shahriar Iqbal Chowdhury/Galib19-Feb-11 10:00
professionalShahriar Iqbal Chowdhury/Galib19-Feb-11 10:00 
GeneralMy vote of 5 Pin
joelcarroll18-Feb-11 8:13
joelcarroll18-Feb-11 8:13 
GeneralMy vote of 5 Pin
Randy Friend18-Feb-11 3:41
Randy Friend18-Feb-11 3:41 
GeneralRe: My vote of 5 Pin
Won Dong18-Feb-11 8:11
Won Dong18-Feb-11 8:11 
GeneralMy vote of 5 Pin
Red Feet18-Feb-11 2:01
Red Feet18-Feb-11 2:01 
GeneralRe: My vote of 5 Pin
Won Dong18-Feb-11 3:18
Won Dong18-Feb-11 3:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.