Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Mobile Website Expansion Offers Businesses Unlimited Potential

, 18 Feb 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Do you know how to create a mobile website? Or more importantly, do you know what a mobile website is? 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 Job

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 on 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 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. Ex:

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

<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}&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:

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

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

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

<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]. Ex:

<a href="data:text/html;charset=utf-8;base64,PGh0bWw+CjxoZWFkPgo8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGggPSAyNDAiIC8+Cjx0aXRsZT5UaXAgQ2FsY3VsYXRvcjwvdGl0bGU+Cgo8c2NyaXB0PgoKZnVuY3Rpb24gdGlwKGFtb3VudCkgewogICAgcmV0dXJuIHRpcDsKfQoKdmFyIG91dHB1dCA9IG51bGw7CnZhciBwZXJjZW50ID0gMTguNSAvIDEwMDsKdmFyIHJ0aXBfZmFjdG9yID0gMC4yNTsKdmFyIHJ0b3RhbF9mYWN0b3IgPSAxLjAwOwoKZnVuY3Rpb24gd3JpdGVPdXQobGluZSkgewogICBpZiAob3V0cHV0KSB7CiAgICAgIG91dHB1dC5hcHBlbmRDaGlsZChkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJiciIpKTsKICAgfSBlbHNlIHsKICAgICAgb3V0cHV0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoIm91dHB1dEFyZWEiKTsKICAgfQogICBvdXRwdXQuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUobGluZSkpOwp9CgpmdW5jdGlvbiB1cGRhdGUoKQp7CiAgICB2YXIgYW1vdW50ID0gTnVtYmVyKGV2YWwoaW5Gb3JtLm51bS52YWx1ZSkpOwogICAgaWYgKGFtb3VudCA9PSBOYU4pIHsKICAgICAgICB3cml0ZU91dCgnSHVoPycpOwogICAgfQogICAgdmFyIHRpcCAgPSBhbW91bnQgKiBwZXJjZW50OwogICAgdmFyIHJ0aXAgPSBNYXRoLnJvdW5kKHRpcCAvIHJ0aXBfZmFjdG9yKSAqIHJ0aXBfZmFjdG9yOwogICAgd3JpdGVPdXQoJyQnICsgYW1vdW50LnRvRml4ZWQoMikgKyAnICsgJCcgKyBydGlwLnRvRml4ZWQoMikgKyAnID0gJCcgKyAoYW1vdW50K3J0aXApLnRvRml4ZWQoMikpOwogICAgdmFyIHJ0b3RhbCA9IE1hdGgucm91bmQoKGFtb3VudCArIHRpcCkgLyBydG90YWxfZmFjdG9yICsgMC4yNSkgKiBydG90YWxfZmFjdG9yOwogICAgd3JpdGVPdXQoJyQnICsgYW1vdW50LnRvRml4ZWQoMikgKyAnICsgJCcgKyAocnRvdGFsLWFtb3VudCkudG9GaXhlZCgyKSArICcgPSAkJyArIHJ0b3RhbC50b0ZpeGVkKDIpKTsKICAgIAp9CgpmdW5jdGlvbiB6YXAoZmllbGQpIHsKICAgIGlmICghIGZpZWxkLnphcHBlZCApIHsKICAgICAgICBmaWVsZC56YXBwZWQgPSB0cnVlOwogICAgICAgIGZpZWxkLnZhbHVlICA9ICIiOwogICAgfQp9Cgo8L3NjcmlwdD4KCjwvaGVhZD4KPGJvZHk+Cgo8aDE+VGlwIENhbGN1bGF0b3I8L2gxPgoKPHA+CkVudGVyIGFmdGVyLXRheCB0b3RhbDoKPC9wPgo8Zm9ybSBuYW1lPSJpbkZvcm0iIG9uU3VibWl0PSJ1cGRhdGUoKTsgcmV0dXJuIGZhbHNlOyI+CjxpbnB1dCB0eXBlPSJ0ZXh0IiBuYW1lPSJudW0iIG9uRm9jdXM9InphcCh0aGlzKSIgdmFsdWU9IjI0LjM3IiAvPgo8aW5wdXQgbmFtZT0ic3VibWl0IiB0eXBlPSJidXR0b24iIG9uQ2xpY2s9InVwZGF0ZSgpOyIgdmFsdWU9IlRpcCIgLz4KPC9mb3JtPgoKPHAgaWQ9Im91dHB1dEFyZWEiPgo8L3A+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


[1] http://www.domusinc.com/blog/2010/09/they-have-cell-phones-you-need-a-mobile-website/

[2] http://mobileorchard.com/opening-the-facebook-app-to-your-facebook-fan-page/

[3] http://handleopenurl.com/scheme/twitter

[4] http://stackoverflow.com/questions/2594321/how-to-launch-ibooks-e-reader-programmatically-on-ipad/2596002

[5] http://essentialworks.co.uk/blog/2010/06/how-to-link-to-books-on-the-ibooks-store/

[6] http://handleopenurl.com/scheme/apple-safari-data

License

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

Share

About the Author

Won Dong
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
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberJH6427-Feb-11 8:30 
GeneralMy vote of 5 PinmemberRod Cullison26-Feb-11 4:19 
GeneralAnother I recently discovered by chance is Skype:// PinmemberTrent Wyatt25-Feb-11 13:04 
GeneralRe: Another I recently discovered by chance is Skype:// PinmemberHein Bloed25-Feb-11 21:30 
GeneralRe: Another I recently discovered by chance is Skype:// PinmemberWon Dong28-Feb-11 5:55 
GeneralMy vote of 5 PinmemberMember 432084419-Feb-11 13:32 
GeneralGood one PinmemberShahriar Iqbal Chowdhury19-Feb-11 10:00 
GeneralMy vote of 5 Pinmemberjoelcarroll18-Feb-11 8:13 
GeneralMy vote of 5 PinmemberRandy Friend18-Feb-11 3:41 
GeneralRe: My vote of 5 PinmemberWon Dong18-Feb-11 8:11 
GeneralMy vote of 5 PinmemberRed Feet18-Feb-11 2:01 
GeneralRe: My vote of 5 PinmemberWon Dong18-Feb-11 3:18 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 18 Feb 2011
Article Copyright 2011 by Won Dong
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid