Seiten-Element gestaltet

[Gunnar Bittersmann]

@@MrMurphy1

Auf deutschen Seiten wird die Telefonnummer und Faxnummer mit der deutschen Vorwahl angezeigt. Die meisten Leute können die zudem besser lesen.

Nur bei Schriftverkehr mit dem Ausland oder bei nicht-deutschsprachigen Seiten sollte die Ländervorwahl angegeben werden.

Nun ist das Web aber weltweit. Eine deutschsprachige Seite heißt nicht, dass sie nur in Deutschland gelesen wird. Schon für Seitenbesucher aus Österreich oder der Schweiz könnte die Ländervorwahl interessant sein.

In 'tel:[phone]' muss übrigens die 0 nach der Ländervorwahl weg, und Bindestriche als Trennzeichen sind auch durchaus erlaubt: 'tel:[phone]'

Bei den Öffnungszeiten gehört vor und hinter die Bindestriche kein Leerzeichen.

Keine Bindestriche, sondern Bis-Striche: Halbgeviertstriche U+2013. Hast du ja auch verwendet. Nur dass man das im Quellcode (wenn der in dicktengleicher Schrift dargestellt wird) nicht sieht. Dies wäre so ein Fall, wo man vielleicht doch lieber benannte Zeichenreferenzen einsetzt: '07:00–21:00 Uhr'

Verlangt nicht DIN 5008 eine führende 0 bei der Stunde?

Keine Abkürzungen verwenden.

Abkürzungen sind durchaus geeignet, schneller erfasst zu werden, weil das Auge nicht so viel lesen muss. Kommt halt drauf an, wieviel kognitiver Aufwand dahinter steckt, die Abkürzung zu entschlüsseln. Bei allgemein bekannten Abkürzungen wie „Tel.“, „-str.“, „usw.“ usw. dürfte dieser (nahezu) null sein, so dass diese Abkürzungen sogar schneller lesbar sind als die ausgeschriebenen Wörter (s.a. Fußnote 1).

TL;DR: Bei Kontaktdaten kann man „Tel.“, „-str.“ usw. durchaus abkürzen.

Telefonnummern werden anklickbar zur direkten Anwahl für Smartphones und Tablets mit direkter Anwahl erstellt. Dafür gibt es verschiedene Lösungen, da bei Desktops beim Anklicken eine Fehlermeldung erscheint. Ich bevorzuge die Telefonnummer optisch als ganz normalen Text darzustellen. Besucher, die die Funktionen kennen, werden die Funktion trotzdem aufrufen, wenn sie direkt anrufen möchten.

Davon würde ich nicht ausgehen.

Eine feature detection, die erkennt, ob das System des Nutzers Telefonnummern wählen kann, fällt mir aber auch nicht ein.

Möglich wäre sowas wie '089 0000 0000 (<a href="tel:[phone]">wählen</a>)'. Statt „wählen“ wäre auch ein Telefonsymbol denkbar, aber nicht in diesem Fall, da ja schon eins verwendet wird.

Gleiches gilt für die E-Mail Adresse. Im Gegensatz zur Telefonnummer kann die zwar eher farblich hervorgehoben werden um die anklickbarkeit anzuzeigen. Ich bevorzuge aber eher ein zusätzliches benutzerfreundliches Formular.

Ich nicht. (Aber zusätzliches Kontaktformular ist OK.)

Fax-Nummern werden im allgemeinen nur abgelesen oder kopiert, deshalb sind sie bei mir nur Text.

BTW, RFC 2806 sah ein fax URL scheme vor. Der Nachfolger RFC 3966 nicht mehr; dafür kann tel auch für Fax verwendet werden.

[Beispielquelltext]

„Telefon“, „Fax“, „Öffnungszeiten“, „E-Mail Adresse“, „Geschäftsadresse“ würde ich nicht den Status einer Überschrift zukommen lassen. Bei „Rücksendungen an“ wäre ich kompromissbereit.

Das sieht mir dann doch nach einer Beschreibungsliste dl aus. Und das es sich um Kontaktinformationen handelt, ist auch das address-Element angebracht:

<section>
  <h2>Kontakt</h2>
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:[phone]">089 0000 0000</a></dd>

      <dt>Fax</dt>
      <dd>089 0000 0001</dd>

      <dt>Öffnungszeiten</dt>
      <dd><span>Mo&ndash;Fr:</span> <span>7:00&ndash;21:00 Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00&ndash;15:00 Uhr</span></dd>

      <dt>E-Mail Adresse</dt>
      <dd><a href="mailto:[e-mail]">[e-mail]</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>

      <dt>Rücksendungen an</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>
    </dl>
  </address>
</section>

Dumm nur, dass es in HTML immer noch kein dt und dd gruppierendes Element di gibt …

Solche Kontaktangaben sind prädestiniert für semantische Auszeichnung mit Schema.org in RDFa oder microdata:

<section>
  <h2>Kontakt</h2>
  <address>
    <dl vocab="http://schema.org/" typeof="LocalBusiness">
      <dt>Tel.</dt>
      <dd property="telephone"><a href="tel:[phone]">089 0000 0000</a></dd>

      <dt>Fax</dt>
      <dd property="faxNumber">089 0000 0001</dd>

      <dt>Öffnungszeiten</dt>
      <dd>
        <meta property="openingHours" content="Mo-Fr 07:00-21:00"/>
        <span>Mo&ndash;Fr:</span> <span>07:00&ndash;21:00 Uhr</span>
      </dd>			
      <dd>
        <meta property="openingHours" content="Sa 09:00-15:00"/>
        <span>Sa:</span> <span>09:00&ndash;15:00 Uhr</span>
      </dd>

      <dt>E-Mail Adresse</dt>
      <dd property="email"><a href="mailto:[e-mail]">[e-mail]</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>
        <span property="name">Fiktives Unternehmen</span><br/>
        <span property="address" typeof="PostalAddress">
          <span property="streetAddress">Musterstraße 93</span><br/>
          <span property="postalCode">80331</span> <span property="addressLocality">München</span>
        </span>
      </dd>

      <dt>Rücksendungen an</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>
    </dl>
  </address>
</section>

LLAP 🖖