Category: HTML5

Mobile users want to call you

I won’t start now and telling you again: Yes, the web is moving to mobile, layouts have to be responsive and so on. You know it already. What you might don’t know: Mobile users want to call you!

Still, a smartphone is a phone. One of its main purposes is to gather information by calling people. So, even if they go to your website, they might want to have a personal contact, or as webdesignledger points it out:

Many visitors head to your website just to find your phone number, so make it prominent on your homepage. The top right corner is usually best – or, I’ve also seen it down in the footer. Regardless, put it up there!

Call me

But, these days, we are mobile. So, there should be a better way than copy&paste to call you. And there it is! Usually you write something like

+123 123 123 someone@example.com

With one click, you can write an Email, you just click the mailto:-Link. Isn’t there something similar for phone numbers? There is:

0123 123 123 someone@example.com

So, how to use it? You see the difference between the number which is shown and the number in the “tel:”part of the URI. The URI scheme for “tel:” is well defined in RFC5341, RFC3966 and RFC280.

Don’t forget: The internet is a global institution. You’re visitors might want to call you from Malaysia, Japan or Russia. In order to do so, the number format needs to be represented in a global format. As RFC3699 states it:

All phone numbers MUST use the global form unless they cannot be represented as such.

Well, there are some exceptions, and you can also use local numbers, but I think, since the internet is a global one, we should stick to global numbers or again, as the RFC3699 says:

Local numbers SHOULD NOT be used for several reasons. Local numbers require that the originator and recipient are configured appropriately so that they can insert and recognize the correct context descriptors. Since there is no algorithm to pick the same descriptor independently, labelling numbers with their context increases the chances of misconfiguration so that valid identifiers are rejected by mistake. The algorithm to select descriptors was chosen so that accidental collisions would be rare, but they cannot be ruled out.

A global phone numer has to start with a ‘+’, as it shows in the Request for Comments.

Okay, but enought of the RFCs. Its pretty easy:

tel:+49123123123

will call the phone numer 0123123123 in Germany.

Write me

photo credit: Curtis Gregory Perry cc
photo credit: Curtis Gregory Perry cc

But, mobile devices are so much more. You can also write SMS. And maybe, you want to provide such an link too. And yes, you can:

Write me a SMS

Again, its a very simple and clear way, how to do it. While “tel:” opens your phone, “sms:” will open your SMS editor. And also for this URI Scheme, we have a well defined documentation: RFC5724.

You remember “body” you may have used in the “mailto:”-scheme? It also exists for “sms:”! So, you might want to create a Complain Message Service, where you’re client can instantly complain. You could use something like

Complain instantly!

When the editor opens, half of the message is already written and maybe your customer looses some of his anger even before getting in touch!

Conclusion

There are quite some possibilites, to integrate your website into the mobile device of your visitors and it would be a waste not to use them. Especially the “sms:” URI scheme can be used for a lot of purposes. With its “body”-field, you can easily create interactions with mobile payment platforms and other SMS services! I wonder, why you rarely see this opportunity spread, but I guess, since mobile grows, these functions will become more and more inevitable.


photo credit:

HTML5: The Description List

In this blogpost, I want to address the proper use of the <dl>-Tag in HTML5. <dl> indicates a description list. In the W3C documentation it says:

The dl element represents a description list, which consists of zero or more term-description (name-value) groupings; each grouping associates one or more terms/names (the contents of dt elements) with one or more descriptions/values (the contents of dd elements).

Still, a lot of webdesigners use the <table>-Tag in order to display a description-list. But remember, tables are meant to be used for data. So for example like this:

Country 2000 2001 2002 2003
USA 10 9 4 5
Germany 9 8 5 8
Country 2000 2001 2002 2003
USA 10 9 4 5
Germany 9 8 5 8

But a description list does not contain “data” but descriptions. As the definition explains, it is a term/description-list. So, if you are interested in semantic web, and as a webdesigner you should be, you should consider this difference. If a bot crawls your page, the dl-Element helps him to understand, this list gives me some explanations about term X, Y, Z…

Specification

The dl element represents a description list. It includes one or more description terms <dt> followed by one or more descriptions or values <dd>.

When to use

For example as a list of definitions, a glossary:

WordPress
WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL, which runs on a web hosting service.
Joomla
Joomla is a free and open-source content management framework (CMS) for publishing web content
WordPress
WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL, which runs on a web hosting service.
Joomla
Joomla is a free and open-source content management framework (CMS) for publishing web content

So, what we do here is:

  1. we start the definition
  2. We declare the term to be defined with <dt>.
  3. We tell explicitly, that we have a definition list here by using <dfn>
  4. We define the term within <dd>

There was some confusion about the description-list-Element. In HTML4 <dl> was defined as a definition list, but it was reframed in HTML 5. So, if you want to have a definition list out of the description list, you should say so by using DFN. This, of course is not a matter of validity, but of semantics.

Another prominent example is to use this list for metadata. For Example:

Name
Godfather
Year
1972
Director
Francis Ford Coppola
Cast
Marlon Brando
Al Pacino
James Caan
Richard S. Castellano
Robert Duvall
Name
Godfather
Year
1972
Director
Francis Ford Coppola
Cast
Marlon Brando
Al Pacino
James Caan
Richard S. Castellano
Robert Duvall

As you can see, a DT-Element can be followed by more than one DD-Element. And vice verca. As MDN points out, you can also use it in this way:

Firefox
Mozilla Firefox
Fx
A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.
Firefox
Mozilla Firefox
Fx
A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

Another example, given by the W3C is a list of contact information:

name:
John Doe
tel:
01-2345678
fax:
02-3456789
email:
johndoe@someemail.com
name:
John Doe
tel:
01-2345678
fax:
02-3456789
email:
johndoe@someemail.com

Some might say “:” is not part of the term, so, a CSS3 solution to this problem would be
dt:after {content: ": ";}

Validation issues

A definition list can’t be placed inbetween tags, when there is flow content expected. So it is not permitted to place a definition list inbetween <p></p> or <blockquote></blockquote> etc. As direct children of DL there are only DT and DD permitted.

Inspired by

This blogpost was inspired by @JonathanTorkes Tweet

and the following reading of How to Use The HTML List Elements