I'm Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with HTML, CSS and SVG. To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

my books

Pro CSS3 Animation book coverPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head CanonMassive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

The New DefaultsThe New Defaults — A Sass color keyword system for designers.

CSSslidyCSSslidy — an auto-generated #RWD image slider. 3.8K of JS, no JQuery.

Send a SMS Text From A Link

Messaging from a web page with a click

While <a href> tags are most often used to link pages, most developers are aware that they can prompt an eMail by using the mailto: protocol*. Few developers are aware that it’s also possible to initiate a phone call from a web page using tel:, and almost no-one is aware that you can do the same thing with SMS messages.

The basic format of the link is very simple:

<a href="sms:">Send a SMS</a>

On most mobile phones, clicking this link will prompt an open message, without any destination number. On many systems, you can take this further:

<a href="sms://+14035550185">Send an SMS</a>

Some systems (Android, Symbian, webOS) don’t allow a number, to avoid potentially expensive overages on international messages.

Finally, a precomposed (and percent encoded) message can be included in the link, at least for some systems:

<a href="sms://+14035550185?body=I%27m%20interested%20in%20your%20product.%20Please%20contact%20me.">Send a SMS message</a>

If you’re on a supported mobile platform, you can try clicking this link: Send a SMS. The number is in a fictional Hollywood movie area code, so it won’t actually send a message to anyone.

Challenges

There are two major problems with creating such links on web pages: they’re only appropriate for mobile systems, and different platforms will accept some sms: formats and ignore others. (iOS, for instance, will take a phone number after the sms: protocol, but will ignore everything – including the number – if body text is included).

PlatformSupport
iOSPartial (sms:, phoneno)
Android**
webOSsms: only (no number, no body)
IE Mobile
Opera MobileFull (sms:/phone/body)

You can’t use connection type or screen size to determine if your site is communicating to a mobile phone with any kind of predictability. Currently, the only reliable method is device detection, via a system like WURFL or PHP mobile detect. With that in place, you could wrap the link in context-aware code:

if ($detect->isMobile()) { echo '<a href="sms:">Send a message</a>'; }

Further detection refinement would allow you to customize the SMS link feature for different phone systems.

* Although this practice is inadvisable: a form is usually a better option.

** Results may vary, based on Android SMS app.

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.