Seiten-Element gestaltet

[MrMurphy1]

Hallo

ich habe mal einen HTML-Beispieltext erstellt.

Gewerbliche Seiten sollten sich soweit möglich an die Norm "DIN 5008" halten. Normale Endkunden bemerken das nicht und stören sich auch nicht daran. Geschäftskunden, Banken und anderen Institutionen gegenüber wirkt die Seite aber seriöser.

Dazu gehört zum Beispiel:

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.

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

Außerdem habe ich die Angaben benutzerfreundlich erstellt.

Dazu gehört zum Beispiel:

Keine Abkürzungen verwenden.

Entweder alle oder keine Blöcke mit Überschriften versehen.

Nach DIN 5008 sollen die Telefonnummern zwar außer nach der Vorwahl keine Leerstellen enthalten. Es werden aber trotzdem häufig zusätzliche Leerzeichen eingefügt, damit sie lesbarer werden. Und zwar nicht unbedingt nach der alten DIN-Norm, sondern so, dass die Nummer gut erkennbar und / oder merkbar ist.

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.

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.

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

Für deinen Wunsch die Öffnungszeiten tabellenartig darzustellen habe ich die notwendigen span-Elemente eingefügt.

Bei den beiden Adressen habe ich jeweils den Namen stehen. So können sie jeweils in einem Rutsch markiert und zum Beispiel in eine Textverarbeitung übernommen werden. Es ist immer nervig, wenn Daten über die Zwischenablage übernommen werden sollen und dazu mehrmals hin- und hergeklickt werden muss.

   <section>
      <h2>Kontakt</h2>
      <ul>
         <li>
            <h3>Telefon</h3>
            <a href="tel:[phone]">089 0000 0000</a>
         </li>
         <li>
            <h3>Fax</h3>
            <p>089 0000 0001</p>
         </li>
         <li>
            <h3>Öffnungszeiten</h3>
            <p><span>Montag–Freitag:</span> <span>7:00–21:00 Uhr</span></p>
            <p><span>Samstag:</span> <span>9:00–15:00 Uhr</span></p>
         </li>
         <li>
            <h3>E-Mail Adresse</h3>
            <a href="mailto:[e-mail]">[e-mail]</a>
         </li>
         <li>
            <h3>Geschäftsadresse</h3>
            <p>Fiktives Unternehmen</p>
            <p>Musterstraße 93</p>
            <p>80331 München</p>
         </li>
         <li>
            <h3>Rücksendungen an</h3>
            <p>Fiktives Unternehmen</p>
            <p>Musterstraße 193</p>
            <p>80331 München</p>
         </li>
      </ul>
   </section>

Die Gestaltung dann per CSS.

Da es sich um ein Beispiel handelt können Einzelheiten natürlich auch anders gelöst werden.

Gruss

MrMurphy