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

problematische Seite

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

  1. problematische Seite

    @@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 🖖

    -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. problematische Seite

      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?

      1. problematische Seite

        @@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 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. problematische Seite

    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

    1. problematische Seite

      @@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 🖖

      -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. problematische Seite

        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.

  3. problematische Seite

    Hallo

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

    Gruß
    Ingp

    1. problematische Seite

      @@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 🖖

      -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. problematische Seite

        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.