Erst kürzlich habe ich eine kleine Seite über interne IT-Resourcen für eine Organisation erstellt. Diese enthält natürlich auch kurze Anleitungen und Tipps, wie sich diese von den Nutzern verwenden lassen. Kleinere Software-Installation oder Einrichtungen des Betriebssystems lassen sich auf verschiedensten Wegen darstellen.

567
tzu

<kbd>5</kbd><kbd>6</kbd><kbd>7</kbd>
<kbd>t</kbd><kbd>z</kbd><kbd>u</kbd>

Ein Video ist bequem anzuschauen, aber es ist leidlich einer Videoanleitung Schritt für Schritt zu folgen. Häufig haben die Nutzer in ihrer Umgebung aber auch keine Möglichkeit das Audio des Videos mitzuverfolgen. Da ist die Alternative mit Bildern deutlich praktischer.

Allerdings muss man dabei auch an sich selbst denken und anstatt sechs Screenshots für drei verschiedene Ausgangssituationen zu erstellen und mit Pfeilen o.ä. zu versehen, lässt sich der ein oder andere Schritt vielleicht in allen Situationen mit einer Tastenkombination bewältigen.

Natürlich kann ich eine solche mit Hilfe von kleinen Bildern darstellen, jedoch gefällt mir eine reine Textdarstellung, die ich problemlos inline verwenden kann und daher auch responsiv der Textgröße folgt, wesentlich besser.

Da es sogar speziell für Tastatur-Eingaben ein HTML-Tag gibt, brauchen wir die Diskussion doch gar nicht mehr führen 🙂

Hier etwas Beispiel-CSS um dem Text noch ein tastenähnliches Aussehen mitzugeben:

kbd {
    font-family: 'Ubuntu Mono', monospace;
    padding: 0 .25em;
    border-radius: 3px;
    padding: .1em .3em .2em .3em;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    bottom: .1em;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .5);
    margin: 0 .3em;
}

Strg + Shift + Esc oder Win + E lassen sich grundsätzlich ja bereits so darstellen. Jedoch können wir noch etwas mehr Benutzerfreundlichkeit hinzufügen, da der ein oder andere Begriff für eine Tastenbeschreibung wohl nicht jedem bekannt ist, vor allem nicht wenn dieser noch abgekürzt wird.

Ich verwende dazu unter anderem das Plugin Font Awesome Icons. So kann ich den kbd-Tag einfach wie folgt füttern:

<kbd><i class="icon-windows"></i></kbd> + <kbd>E</kbd>

Und das sieht dann so aus: + E

Für Shift verwende ich ein simples Ascii-Symbol:

<kbd>Strg</kbd> + <kbd>&#8679;</kbd> + <kbd>Esc</kbd>

Mit diesem Ergebnis: Strg + + Esc

So „einfach“ und „schön“ lassen sich Schritte, die nie jemand freiwillig gegangen wäre, aber eben für alle gleichermaßen funktionieren, in den Inhalt von WordPress-Artikeln und -Seiten schreiben.

„Legen Sie den Datenträger in das Laufwerk, drücken Sie die Tasten + R und geben Sie Folgendes in das sich öffnende Fenster ein: D:/setup.exe“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert