Darstellung von Telefonnummer, E-mail, Skype, Messenger usw.

[oxo888oxo]

Hallo

Ich habe auf meiner Webseite so einen Block mit:

• Telefon
• WhatsApp
• E-Mail
• Facebook
• Skype

Und da bin ich mit der Gestaltung noch nicht so richtig zufrieden.

Nun überlege ich gerade, ob ich die Texte "Telefon, WhatsApp usw." vielleicht durch so kleine Symbole/Icons ersetzen sollte. Das hätte dann auch den Vorteil, dass es etwas ordentlicher aussehen würde.

Andererseits bin ich ja auch eher ein Fan von Text-Bezeichnungen, weil diese doch irgendwie "sprechender" sind.

Was meint Ihr.
Was ist da am besten, sinnvollsten und schönsten?
Was würdet Ihr mir da raten?

Gruß Ingo

[Gunnar Bittersmann]

@@oxo888oxo

Andererseits bin ich ja auch eher ein Fan von Text-Bezeichnungen, weil diese doch irgendwie "sprechender" sind.

Auf jeden Fall solltest du die Text-Bezeichnungen vorsehen für assistive Technologien wie Screenreader. Icons kannst du zusätzlich verwenden. Oder auch die Text-Bezeichnungen dann visuell verstecken – vorausgesetzt, die Icons sind für die Zielgruppe verständlich, wovon ich in diesem Fall aber ausgehen würde.

LLAP 🖖

[oxo888oxo]

Auf jeden Fall solltest du die Text-Bezeichnungen vorsehen für assistive Technologien wie Screenreader.

Kannst Du mir bitte sagen, wonach ich da gooogeln muss, um das korrekt umzusetzen?

[Gunnar Bittersmann]

@@oxo888oxo

Auf jeden Fall solltest du die Text-Bezeichnungen vorsehen für assistive Technologien wie Screenreader.

Kannst Du mir bitte sagen, wonach ich da gooogeln muss, um das korrekt umzusetzen?

Reicht dir der verlinkte A11Y-Project-Artikel nicht?

LLAP 🖖

[Fred]

Hallo,

• Telefon
• WhatsApp
• E-Mail
• Facebook
• Skype

Was ist da am besten, sinnvollsten und schönsten?

Schöner fände ich wenn die zugehörigen Angaben bündig untereinander stehen. Ich setze die linken Wörter in ein span Element, z.B. mit den Angaben:
width: 6em; display: inline-block;

Fred

[Gunnar Bittersmann]

@@Fred

Schöner fände ich wenn die zugehörigen Angaben bündig untereinander stehen. Ich setze die linken Wörter in ein span Element, z.B. mit den Angaben:
width: 6em; display: inline-block;

Magic number, meh! Wo kommen die 6em her? Das mag auf deinem System mit deiner Schriftart so passen, aber nicht bei jedem. (Und bei Übersetzungen in andere Sprachen passt es womöglich gar nicht mehr.)

Wenn du tabellarische Darstellung willst: display: table, table-row, table-cell. Oder Grid.

Und anstatt spans zu verwenden bietet sich hier die Auszeichnung als Beschreibungsliste dl/dt/dd an.

Bei display: table wären zusammengehörige dt/dd gruppierende Elemente nötig. Bei Grid nicht. Guckst du Pen.

LLAP 🖖

[oxo888oxo]

Wenn du tabellarische Darstellung willst: display: table, table-row, table-cell. Oder Grid.

Und anstatt spans zu verwenden bietet sich hier die Auszeichnung als Beschreibungsliste dl/dt/dd an.

Ah OK prima.
So werde ich das dann mal umsetzen.
Ich melde mich nochmal, wenn ichs fertig habe.

[oxo888oxo]

Hallo

Ich habe es nun so umgesetzt, wie Ihr mir geraten hattet.
https://spaceart.de/
Und? Schaut das gut aus?

Gruß
Ingp

[Gunnar Bittersmann]

@@oxo888oxo

Ich habe es nun so umgesetzt, wie Ihr mir geraten hattet.

Hast du?

Und? Schaut das gut aus?

Sieht weder nach Icons noch nach tabellarische Darstellung aus.

LLAP 🖖

[oxo888oxo]

Ja richtig. Ich hatte es umgesetzt aber doch erstmal wieder zurückgebaut, weil es auf meinem Handy merkwürdige Effekte gab mit ungewollten Umbrüchen. ich werde mich evtl. später nochmal dranmachen.