Größere Flaggen für die Sprachauswahl

[lck-git]

Ich schlage vor als Standard die größeren Flaggen mit XH_split auszuliefern, auch für CMSimple_XH wäre es sinnvoll. Die kleinen Flaggen sind für mobile Geräte einfach zu winzig.

[frase-git]

Vielleicht ein Vorschlag (GoSquared large 32x32):
https://www.flag-sprites.com/de/

Oder besser:
https://github.com/lipis/flag-icon-css
Demo:
http://flag-icon-css.lip.is/

[cmb69]

Oder besser:
https://github.com/lipis/flag-icon-css

SVG fände ich eigentlich ideal, aber da müsste für ältere Browser ein brauchbarer Fallback her – bei relativ kleinen Größen wird wohl der Alt-Text abgeschnitten.

[frase-git]

Ich denke, wir sollten langsam aufhören, auf die uralten Browser Rücksicht zu nehmen.
So richtig verstehe ich aber nicht: "... wird der Alt-Text abgeschnitten ..."
Wo? Wann? Wie?

Ich denke, die Flaggen durch die SVGs zu ersetzen, dürfte ziemlich easy sein - oder?

[frase-git]

https://github.com/cmsimple-xh/cmsimple-xh/blob/master/cmsimple/tplfuncs.php#L575-L606

Wenn die SVGs am richtigen Ort liegen, müsste man ja nur diese Funktion ändern?

[cmb69]

Ich denke, wir sollten langsam aufhören, auf die uralten Browser Rücksicht zu nehmen.

Ich finde, auf einem alten Browser muss eine Website nicht gut aussehen, und fantastisch funktionieren. Aber zumindest benutzbar sollte sie sein. Der IE 8 hat wohl noch 3% Marktanteil, was ich zwar bedauerlich finde, aber nicht ändern kann.

https://github.com/cmsimple-xh/cmsimple-xh/blob/master/cmsimple/tplfuncs.php#L575-L606

Wenn die SVGs am richtigen Ort liegen, müsste man ja nur diese Funktion ändern?

Ja, das hatte ich schnell mal gemacht. Einfach png durch svg ersetzt, und dem img Element noch ein style Attribut mit width und height Eigenschaften verpasst. Dabei hatte ich mal 23x16 ausprobiert. Auf dem IE 8 wurde dann nur der untere Rand des "Bild nicht verfügbar"-Symbols angezeigt (eigentlich nur ein dicker Strich).

Vermutlich könnte man das Problem lösen, wenn das Bild gar nicht mehr als img erzeugt wird, sondern per CSS.

[frase-git]

Na ja, soooo einfach nun auch wieder nicht.
Das CSS muss eingebunden werden.
Der Aufruf erfolgt dann mit
<span class="flag-icon flag-icon-XX"></span>
wobei XX das Länder-Kürzel ist.
Optional könnte man noch anbieten:
<span class="flag-icon flag-icon-XX flag-icon-squared"></span>
für quadratische Flaggen.

[cmb69]

Das CSS muss eingebunden werden.

36.8 KB CSS für ein oder zwei Flaggen fände ich ein "bisschen" viel. Aber klar, der größte Teil des CSS könnte auch dynamisch nur für die nötigen Flaggen generiert werden.

<span class="flag-icon flag-icon-XX"></span>

Ginge auch <span class="flag-icon flag-icon-XX">XX</span> oder <span class="flag-icon flag-icon-XX"></span> XX?

[frase-git]

Denke schon, dass das ginge. Aber dann hast du Bild UND Text.
Ich denke mal, das Bild wird wohl "$el" innerhalb des a-Tags.
Alt und Title hat es da nicht - oder? Das müsste zum a-Tag ???

[frase-git]

Teste es doch mal. Und dann merge doch einfach mal alles Anstehende.
Ist doch nur ein Test.

[cmb69]

Teste es doch mal. Und dann merge doch einfach mal alles Anstehende.

Ich habe es mal in minimalisierter Form als PR #29 eingestellt. Das kann auch als Gesamtpaket herunter geladen werden.

Voraussetzung fürs Testen und Ausprobieren ist das Anlegen einer englischen Sprachseite und ein Template, das das languagemenu() anzeigt.

Ich selbst halte nichts von dieser Integration, da in älteren Browsern (IE <= 8) gar nichts mehr angezeigt wird, der Link aber funktionieren würde. Und selbst wenn man ältere Browser ignorieren würde, gäbe es Accessibility-Problem (evtl. könnte man das mit einem passenden aria- Attribut beheben), und bzgl. SEO ist es wohl auch suboptimal. Man könnte vermutlich noch mit JS tricksen, also zunächst nur Text ausgeben, dann SVG Support prüfen, und falls vorhanden, dann dynamisch das benötigte HTML erzeugen, aber ehrlich gesagt finde ich das totalen Overkill. Ein img mit passendem alt Attribut (alt beim span bringt nichts) ist einfach und funktioniert überall. Ich schau mal, ob das nicht doch mit einer SVG-Grafik zu bewerkstelligen ist.

[frase-git]

Danke Christoph.
Probiert mit Gesamtpaket und mini1. Funktioniert.
Mit CSS kann man es natürlich noch größer machen.

Zugänglichkeit:
Genügt das Title-Attribut in diesem Fall nicht? Und für SEO nicht auch?

IE<9 würde ich tatsächlich ignorieren.
Keinesfalls noch mit JS tricksen.

Falls das CSS "zu groß" ist, könnte man beim Anlegen von Sprachseiten ein Script laufen lassen, das das CSS nur mit den benötigten Sprachen schreibt. Im Paket müssten dann aber immer noch mind. 3 MB an Flaggenbildern vorhanden sein. (inkl. quadratische = 6 MB)

Falls du es mit einer SVG-Grafik versuchen willst: Es gibt auch SVG-Sprite.
Dann sind die alten Browser aber auch draußen!?

Eigentlich gefällt mir deine Test-Version ganz gut. Es passt sich gut an die Schriftgröße an.
Aber ich bin ja nur "eine Meinung" ;-)

[cmb69]

Genügt das Title-Attribut in diesem Fall nicht? Und für SEO nicht auch?

Eigentlich sollte ein Bild, das eine Bedeutung hat (also kein rein dekorativer "Schnick-Schnack") immer auch ein alt Attribut haben, dass das Bild beschreibt. Dann kann jemand, der aus welchem Grund auch immer, keine Bilder sehen kann, dennoch den Inhalt grob erfassen. Ob moderne assistiver Technologie sich auch mit einem title zufrieden gibt, weiß ich nicht.

Jedenfalls sehe ich es so: wenn eine Website (nicht unbedingt Web-Applikation, wie z.B. das Backend von CMSimple_XH) mit Lynx benutzt werden kann, gut. Ansonsten kann es sehr teuer werden (entgangene Aufträge, Abmahnung wegen Diskriminierung, oder aufwendige Fallbacks um das zu verhindern).

Im Paket müssten dann aber immer noch mind. 3 MB an Flaggenbildern vorhanden sein.

Alle Flaggen müssen wir ja nicht ausliefern. Im Prinzip würden die 16 genügen, die auch jetzt schon in userfiles/images/flags ausgeliefert werden.

Falls du es mit einer SVG-Grafik versuchen willst: Es gibt auch SVG-Sprite.
Dann sind die alten Browser aber auch draußen!?

Na ja, so wie ich es sehe, gibt es bei CMSimple_XH i.d.R. maximal 2-3 Sprachen; da ist die Notwendigkeit eines Sprites noch nicht so groß, und der Schuss kann sogar nach hinten losgehen, wenn man ein einziges Sprite für alle ausliefert. Und HTTP/2.0 macht Sprites sowieso überflüssig.

Grundsätzlich sieht man bei SVG auf älteren Browsern kein Bild, aber eben der alt Text sollte angezeigt werden – das genügt mir vollauf. Mein Problem ist halt, dass wenn das img recht klein skaliert wird, der alt Text abgeschnitten (oder erst gar nicht angezeigt) wird.

Vielleicht sollten wir die SVG-Variante einfach mal als Addon anbieten (wer will, kann es dann ja nutzen), und doch erst mal bei GIF bleiben oder zu PNG wechseln (ersteres hätte den Vorteil, dass auch animierte Flaggen verwendet werden können, wie auf Ralfs Website). SVG ist klasse, weil beliebig skaliert werden kann, ohne dass die Bildqualität sinkt, aber bei den Flaggen dürfte i.d.R. doch nur wenig skaliert werden (vielleicht max. 64x48 oder so, eher weniger). Und außerdem kann der Anwender die Icons ja auch schnell austauschen.

Aber ich bin ja nur "eine Meinung" ;-)

Ich auch. :-)

[TN03]

Also ich halte vom PR #29 auch nicht wirklich viel. Nicht wegen der fehlenden Unterstützung von alten Browsern. Vielmehr macht es die Sache meiner Meinung nach zu kompliziert, wenn der User doch eine andere Variante / ein anders Design bevorzugt. Leicht austauschbare Grafikdateien scheinen mir im Moment hier noch die bessere Variante zu sein. Vielleicht überlegen wir noch einmal, ob verschiedene Größen und dazu passende höhere Auflösungen nicht die bessere Alternative sind und versuchen dann auf der Basis ein paar Größen mit auszuliefern.
Denkbar wäre auch die Möglichkeit dem Template bei der Auslieferung der Flaggen den Vorzug zu geben, wenn sie dort vorhanden sind. Die Core-Grafiken wären dann nur als Fallback anzusehen.

[TN03]

@cmb69
OT: wie kommt man an so einen
https://github.com/TN03/XH_split/archive/60a482d9658c7eea7e65ca3bca53487e64ff4dbc.zip
Link? Muss man den selber mit der Id des PR zusammenbasteln?

[cmb69]

OT: wie kommt man an so einen
https://github.com/TN03/XH_split/archive/60a482d9658c7eea7e65ca3bca53487e64ff4dbc.zip

Du kannst über den PR zum Commit navigieren, und dort dann den <> Button ("Browse the repository at this point in the history") klicken, und dann über grünen Button "Clone or download" unter "Download ZIP" den URL kopieren.