Samstag, 12. Februar 2011

Shy: Schüchtern aber wirkungsvoll

Es sind manchmal die Kleinigkeiten, die einem Webdesigner das Leben versüßen. Bei der Planung unserer neuen Firmenwebsite hatte ich mich entschieden, den neuen Internetauftritt via Media-Queries zusätzlich für Smartphones zu optimieren.

Gesagt - getan. Unser Designer hatte vor über einem Jahr bereits das Screendesign entworfen. Allerdings kamen wir aufgrund des hohen Auftragsvolumen nicht dazu, das Webdesign umzusetzen. Im nachhinein ein Glücksfall: Vor einem Jahr hätten wir nicht mit HTML5 und Media Queries gearbeitet, sondern über Auslesen des User-Agents unterschiedliche XHTML-Templates ausgegeben.

Das neue Design basiert auf einer angepassten Version des 1140px CSS Grid System. Das CSS-Framework funktioniert ähnlich wie blueprint oder 960, hat aber eine mobile Ausrichtung. Als Vertreter der Lean and Clean-Webfraktion habe ich das Framework leicht modfiziert und den Quellcode stark optimiert.

Als ich den Web-Prototypen fertiggestellt hatte, kam der inhaltliche Teil. Ich tauschte den Blindtext gegen den Originaltext aus. Alles sah auf dem ersten Blick gut aus und ich freute mich über das Ergebnis, ... bis mich unser Designer auf die unschönen Lücken des im Blocksatz gesetzten Anfangstexts aufmerksam machte. Was auf dem Desktoprechner noch akzeptabel aussah, mutierte auf Android und iPhone zur unleserlichen Sprachruine: Unser Text sah aus, als hätte man ihm die Zähne ausgeschlagen.

"Schade, dass man im Web keine Silbentrennung nutzen kann." dachte ich so bei mir und machte für einen Neandertal-HTMLer einen typischen Gedankenfehler. Mittlerweile unterstützen alle Browser das SHY-Symbol ­ (­ oder ­) .

<inerinnerungruf>
Soft Hyphen - abgekürzt shy - ist ein Zeichen, dass bildlich mit einem identischen oder vergleichbaren grafischen Symbol zum Hyphen (-) dargestellt wird. Das Zeichen wird nur sichtbar, wenn ein Zeilenumbruch innerhalb eines Wortes - z. B. durch das Ändern der Browsergröße - erzwungen wird. Ansonsten ist es unsichtbar.
</inerinnerungruf>

Nun stellte sich nur noch die Frage: "Wenn alle aktuellen Browser das Soft Hyphen verstehen, gilt dies auch für die Suchmaschinen?" Tatsächlich scheinen nach meinen Recherchen auf jeden Fall Google und Bing die schüchternen Trenntexte korrekt zu erkennen. Sehr wahrscheinlich gilt dies auch für eine Reihe weiterer Suchmaschinen.

Unsere neue Startseite ist nun online und wird in allen Browsergrößen korrekt dargestellt. Ich werde in nächster Zeit ein Auge auf die Suchmaschinen-Ergebnisse haben, ob ich uns nicht ungewollt ins SEO-Off geschossen habe.

Links zum Post


PS Leider missbrauchen viele Spammer das unschuldigen Zeichen zur Verschleierung ihrer prätentiösen Werbediarrhoe. Solltet ihr euch wundern, wieso trotz Badword-Liste Spam in Blogkommentaren auftreten, ist das &shy; vielleicht der Grund dafür.