Habe die Zeilenhöhe in Posts verringert. Besonders für kleine Anzeigegeräte fand ich, dass mit der Voreinstellung die Zeilen zu weit auseinander standen. Ich habe in Posts viel zu sagen. Dazu passt viel Leerraum zwischen den Zeilen nicht.
Wenn man viele Links im Fließtext einbindet, ist es für Nutzer kleiner Anzeigegeräte allerdings besser, wenn Zeilen weiter auseinander stehen; denn dann kann man die richtigen Links besser treffen. Ich persönlich bringe aber bestenfalls mal einen einzelnen Link im Fließtext unter. Den kann man bei egal welcher Zeilenhöhe treffen. Ansonsten biete ich Links lieber unter den Posts an und zwar in Linklisten. Also musste ich mir eher über die Treffbarkeit von Links in Linklisten Gedanken machen. Sollte ich aber doch mal mehrere Links auf kleinem Raum in Fließtext unterbringen wollen, wollte ich wissen, wie ich das machen könnte.
Für Linklisten habe ich im Post namens Linklisten in Posts eine Lösung trotz niedriger Zeilenhöhe gefunden.
Für Fließtext, in dem mehrere Links kurz nacheinander vorkommen, gibt es allerdings keine Möglichkeit, zu niedrige Zeilenhöhe zu kompensieren, wie das in Listen möglich ist. Daher habe ich getestet, ob es Sinn macht, einen Abschnitt mit ausnahmsweise vielen Links einfach in eine div zu setzen, für die ich eine größere Zeilenhöhe kommandiere.
Dabei war mir klar, dass ein unkommentierter Zeilenhöhewechsel irritiert. Ihn anzukündigen oder womöglich noch auffällig vom Rest abzusetzen, fand ich aber widersinnig; denn dann wären die Links doch besser in der Linkliste aufgehoben. Daher habe ich mich für ganz schmale, hell gestrichelte border-Linien oben und unten entschieden, die den Zeilenhöhewechsel wortlos und unaufdringlich als gewollt kenntlich machen und somit die Irritation entspannen.
(Die Links in den folgenden Beispielen führen wieder zum hiesigen Post.)
Hier steht der Fließtext mit den Links
</div>
.zeilenhoehe36px {
line-height: 36px;
border-top: 1px dashed #999;
border-bottom: 1px dashed #999;
}
border: 1px solid #0036c9;
padding: 2px;
}
.post-body a:hover {
border: 1px solid #668fff;
padding: 2px;
color: #668fff;
}
Das sieht man in der Vorschau nur, wenn man die Links mit Rahmen versehen hat.
Ausschließlich ein horizontales padding zu nutzen, würde nur Sinn machen, um etwas zu verlinken, das sehr schmal ist, wie etwa einen einzelnen Buchstaben. Ansonsten verbessert man durch mehr Breite allein die Antippbarkeit eines Links nicht.
Bei 26px Zeienhöhe und 16px Schrifthöhe hat man schon ohne padding vertikal zu wenig Zwischenraum zwischen den Links, wenn mehrere nah beieinander stehen. Stattet man die Links auch noch mit padding und evtl. border aus, wird es noch schlimmer. Ab 6px padding oder 5px padding plus 1px border überschneiden sich die Linkauren vertikal sogar deutlich erkennbar um 2px, wenn Links untereinander stehen, wie man im folgenden Beispiel sehen kann.
5px padding und 5px padding
5px padding sowie 5px padding aber kein Link 5px padding kein Link 5px padding kein Link kein Link 5px padding kein Link 5px padding
Noch deutlicher wird der Überschneidungseffekt bei noch stärkerer Aufblähung der Link-Auren:
10px padding und 10px padding
10px padding sowie 10px padding aber kein Link 10px padding kein Link 10px padding kein Link kein Link 10px padding kein Link 10px padding
Hätte ich hier verschiedene Linkziele eingetragen, könnte man sich, bei den sich überschneidenden Linkflächen, überraschen lassen, wo man nach dem Antippen landet.
Wenn man viele Links im Fließtext einbindet, ist es für Nutzer kleiner Anzeigegeräte allerdings besser, wenn Zeilen weiter auseinander stehen; denn dann kann man die richtigen Links besser treffen. Ich persönlich bringe aber bestenfalls mal einen einzelnen Link im Fließtext unter. Den kann man bei egal welcher Zeilenhöhe treffen. Ansonsten biete ich Links lieber unter den Posts an und zwar in Linklisten. Also musste ich mir eher über die Treffbarkeit von Links in Linklisten Gedanken machen. Sollte ich aber doch mal mehrere Links auf kleinem Raum in Fließtext unterbringen wollen, wollte ich wissen, wie ich das machen könnte.
Für Linklisten habe ich im Post namens Linklisten in Posts eine Lösung trotz niedriger Zeilenhöhe gefunden.
Für Fließtext, in dem mehrere Links kurz nacheinander vorkommen, gibt es allerdings keine Möglichkeit, zu niedrige Zeilenhöhe zu kompensieren, wie das in Listen möglich ist. Daher habe ich getestet, ob es Sinn macht, einen Abschnitt mit ausnahmsweise vielen Links einfach in eine div zu setzen, für die ich eine größere Zeilenhöhe kommandiere.
Dabei war mir klar, dass ein unkommentierter Zeilenhöhewechsel irritiert. Ihn anzukündigen oder womöglich noch auffällig vom Rest abzusetzen, fand ich aber widersinnig; denn dann wären die Links doch besser in der Linkliste aufgehoben. Daher habe ich mich für ganz schmale, hell gestrichelte border-Linien oben und unten entschieden, die den Zeilenhöhewechsel wortlos und unaufdringlich als gewollt kenntlich machen und somit die Irritation entspannen.
Vergleich
Zunächst habe ich einen Abschnitt mit mehreren sich nahe stehenden Links erstellt. Den habe ich dann in mehrere div's, für die ich verschiedene Zeilenhöhen kommandierte, eingefügt. Schnell kam ich zu dem Schluss, dass erst ab 36px Zeilenhöhe die Links so deutlich voneinander getrennt stehen, dass man auch mit dicken Fingern den richtigen Link treffen kann. Deshalb habe ich mich dafür entschieden, diese Zeilenhöhe für die div, in die ich bei Bedarf Abschnitte mit mehreren Links setzen würde, zu wählen. Folgend ist zu sehen, wie die Links bei 26px Zeilenhöhe stehen und wie bei 36px.(Die Links in den folgenden Beispielen führen wieder zum hiesigen Post.)
26px Zeilenhöhe und normale Links (ohne padding)
So dicht stünden viele normale Links auf kleinem Raum im Fließtext bei 26px Zeilenhöhe:
0px padding und 0px padding
0px padding sowie 0px padding aber kein Link 0px padding kein Link 0px padding kein Link kein Link 0px padding kein Link 0px padding
Eine hoffnungslose Herausforderung für Nutzer kleiner Anzeigegeräte mit dicken Fingern.
0px padding und 0px padding
0px padding sowie 0px padding aber kein Link 0px padding kein Link 0px padding kein Link kein Link 0px padding kein Link 0px padding
Eine hoffnungslose Herausforderung für Nutzer kleiner Anzeigegeräte mit dicken Fingern.
36px Zeilenhöhe und Links mit 2px padding
Viele kurz hintereinander folgende Links erscheinen mir erst ab einer Zeilenhöhe von 36px gut antippbar. Dabei kann man sie sogar gefahrlos mit 2px padding aufplustern:
2px padding und 2px padding
2px padding sowie 2px padding aber kein Link 2px padding kein Link 2px padding kein Link kein Link 2px padding kein Link 2px padding
Das trifft man auch mit dicken Fingern, wie ich meine.
2px padding sowie 2px padding aber kein Link 2px padding kein Link 2px padding kein Link kein Link 2px padding kein Link 2px padding
Code
Mein HTML und CSS für den Fließtext-Abschnitt mit 36px Zeilenhöhe - nötig bei mehreren Links darin
HTML
<div class="zeilenhoehe36px">Hier steht der Fließtext mit den Links
</div>
CSS
/* Abschnitt für mehrere Links in Fließtext */.zeilenhoehe36px {
line-height: 36px;
border-top: 1px dashed #999;
border-bottom: 1px dashed #999;
}
Mein CSS für die Gestaltung von Links im Post-Fließtext (egal welcher Zeilenhöhe)
Ich mache einen Rahmen um die Links, um sie als solche deutlcher erkennbar zu machen. Zudem setze ich 2px padding ein, damit man den Text innerhalb des Rahmens angenehmer lesen und besser als Teil des Fließtextes wahrnehmen kann.
CSS
.post-body a { border: 1px solid #0036c9;
padding: 2px;
}
.post-body a:hover {
border: 1px solid #668fff;
padding: 2px;
color: #668fff;
}
Begleitinfo
Wenn man sich hauptsächlich an Touchscreen-Nutzer richtet, kann man sich das :hover-Kommando sparen; denn da schwebt man nicht über Links und sieht den Farbeffekt nicht.
Vorsicht mit dem Link-padding-Wert
Mit padding kann man Links aufplustern. Theoretisch um so viel, wie man mag. Dadurch wird die antippbare Fläche größer. Wenn mehrere Links nah beieinander stehen, muss man aber bedenken, dass das padding von Links zwar horizontal unproblematisch ist, weil nebenstehende Leerzeichen, Zeichen und Worte verschoben werden, aber vertikal verschiebt sich durch Link-padding nichts. Die Zeilenhöhe bleibt gleich. Deshalb wirkt Link-padding vertikal eher als Link-Aura, die in externen Raum eindringt, sich über Zwischenräume oder gar benachbarte Zeilen legt. Man kann damit also die Zeilen-Zwischenräume vernichten, die man als deutliche Trennung der Links voneinander benötigt oder Linkflächen vertikal sogar übereinander legen, wenn man einen viel zu hohen padding-Wert wählt.Das sieht man in der Vorschau nur, wenn man die Links mit Rahmen versehen hat.
Ausschließlich ein horizontales padding zu nutzen, würde nur Sinn machen, um etwas zu verlinken, das sehr schmal ist, wie etwa einen einzelnen Buchstaben. Ansonsten verbessert man durch mehr Breite allein die Antippbarkeit eines Links nicht.
Beispiele für eine Überschneidung von Links
(Die Links in den folgenden Beispielen führen wieder zum hiesigen Post.)Bei 26px Zeienhöhe und 16px Schrifthöhe hat man schon ohne padding vertikal zu wenig Zwischenraum zwischen den Links, wenn mehrere nah beieinander stehen. Stattet man die Links auch noch mit padding und evtl. border aus, wird es noch schlimmer. Ab 6px padding oder 5px padding plus 1px border überschneiden sich die Linkauren vertikal sogar deutlich erkennbar um 2px, wenn Links untereinander stehen, wie man im folgenden Beispiel sehen kann.
5px padding und 5px padding
5px padding sowie 5px padding aber kein Link 5px padding kein Link 5px padding kein Link kein Link 5px padding kein Link 5px padding
Noch deutlicher wird der Überschneidungseffekt bei noch stärkerer Aufblähung der Link-Auren:
10px padding und 10px padding
10px padding sowie 10px padding aber kein Link 10px padding kein Link 10px padding kein Link kein Link 10px padding kein Link 10px padding
Hätte ich hier verschiedene Linkziele eingetragen, könnte man sich, bei den sich überschneidenden Linkflächen, überraschen lassen, wo man nach dem Antippen landet.
Ute Ziemes, 13021961.blogspot.de
,
Kommentare
Kommentar veröffentlichen