Immer mehr Smartphone-Besucher

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Be@t
Regular
Posts: 100
Joined: Sun Dec 18, 2005 5:24 pm
Location: switzerland
Contact:

Immer mehr Smartphone-Besucher

Post by Be@t »

Die Welt ist mobil und so steigt die Zahl der Blog-Besucher mit Smartphones an und die PC/Laptop/Tablet-Besucher werden weniger. Das heisst konkret, dass ich mich verstärkt um die Besucher mit kleinen Auflösungen/Displays kümmern möchte.

Ein wichtiges Kriterium für Smartphone-User ist ein einfach zu erreichendes Menü. Soweit ich das überblicken kann, bietet nur das Bootstrap 4 Theme eine Menüleiste, die oben kleben bleibt (sticky-top), bei allen anderen verschwindet die Menüleiste sobald man etwas nach unten scrollt.

Ein grundsätzliches Serendipity-Problem ist zudem, dass man (als Normaluser) keine Untermenüs erstellen kann. Das wäre z.B. für die Darstellung von Kategorien doch sehr interessant.

Navigationselemente in der Seitenleiste (z.B. Kategorien, Stichworte/Tags, usw.) sind für durchschnittliche Smartphone-Besucher ausserhalb des Blickfelds. In der Mobile-Ansicht werden Seitenleisten-Plugins unter dem letzten Seiten-Blogeintrag dargestellt. Bei 10 Beiträgen pro Seite muss jemand dann schon recht lange nach unten scrollen, bis er diese Plugins zu sehen bekommt. Das machen nur die Wenigsten.

Wie auch immer.

Mir gefällt das Grundgerüst des Next-Theme und auch das Menü funktioniert in etwa so, wie man sich das am Smartphone gewohnt ist. Um immer einfach nach oben (zur Menüleiste) zu gelangen, baute ich mit der Hilfe von yellowled einen ständig sichtbaren «scroll-to-top»-Button ein. Somit ist das Menü immer nur einen Fingertipp entfernt.

Durch try-and-error habe ich herausgefunden, dass ich zwischen 7 und 9 Menüpunkte in das Next-Theme aufnehmen kann, damit noch alle richtig dargestellt werden, bevor die Ansicht zum Mobile-Menü umschaltet (die genaue Anzahl ist von der Textlänge der Menüpunkte abhängig). Nun überlegte ich, wie ich die Ergebnisse der zwei Seitenleisten-Plugins Kategorien (categories) und Tags (freetag) in die Menüzeile kriege.

Die Kategorien liessen sich recht einfach auf einer statischen Seite abbilden, die ich über den Menüpunkt «Kategorien» aufrufe. Das finde ich soweit o.k. Ich verwalte <10 Kategorien und die wechseln auch nicht oft. Die kann ich gut auf einer statischen Seite verlinken (und bei Änderungen anpassen). Ein Vorteil der statischen Seite ist zudem, dass ich den jeweiligen Kategorien sehr einfach noch kurze Erklärungstexte beigeben kann.

Ganz anders sieht es bei den Tags aus. Derzeit gibt es in meinem Blog etwa 150 Tags und mit jedem neuen Beitrag wechselt die Anzahl der vergebenen Tags und die Wahrscheinlichkeit ist auch gross, dass neue Tags hinzukommen. Am liebsten hätte ich hier eine Tag-Wolke auf einer statischen Seite (oder es könnte auch ein normaler Blogbeitrag sein) die sich genauso automatisch aktualisiert, wie es das Seitenleisten-Plugin macht. Mangels technischer Fähigkeiten kriege ich das aber nicht hin.

Meine Notlösung führt wieder über eine statische Seite, die ich vom Menü her aufrufe. Da zeige ich eine klickbare Tag-Liste, die ich mir zuvor mit dem Seitenleisten-Plugin generiert habe (den entsprechenden html-Code kopierte ich in den Quelltext der statischen Seite). Funktioniert, ist aber eben statisch und morgen schon veraltet. Bis ich eine bessere Lösung gefunden habe, werde ich diese Seite halt monatlich aktualisieren.

Phua… liest noch irgendwer? :?:

Nun komme ich zum eigentlichen Punkt.

Meiner Meinung nach verlieren Seitenleisten-Plugins wegen Smartphone-Benutzern rapide an Attraktivität und man sollte sich überlegen, wie man die teils sehr tollen Funktionen anderweitig anzeigen kann.

Mein Laienansatz ist: Sobald ich ein Plugin in einen Artikel/Beitrag integrieren kann, habe ich viel mehr Möglichkeiten. Z.B. als dauerhafter Eintrag oder auch, dass ich den Code in eine statische Seite übernehmen kann.

Dieser Forumsbeitrag soll zur Diskussion über responsibles Blog-Design und Mobile-Tauglichkeit anregen. Was macht ihr für Eure Smartphone-Besucher? Was habt ihr für Ideen in diesem Bereich?

Vielen Dank, wenn ihr bis hierhin durchgehalten habt! :shock:

Über einen regen Gedankenaustausch würde ich mich freuen.
onli
Regular
Posts: 2825
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Immer mehr Smartphone-Besucher

Post by onli »

Phua… liest noch irgendwer?
Klar! :)

Meine Lösung: Weniger ist mehr. Kein Benutzer braucht eine Tagwolke, noch weniger auf einem Smartphone. Welche Aufgabe erledigt er damit, welches Befürfnis setzt er damit um?
Ergo kann all sowas wegfallen, bzw die Seitenleistencontainer unter die Blogbeiträge anzuhängen halte ich für eine akzeptable Lösung; für die Sachen, die eben doch noch vorhanden sein sollen.

Technisch gesehen ist Smarty hier ein Weg, die Daten des Plugins generell verfügbar zu haben und dann in statische Seiten oder sonstwie im Template einbauen zu können. Das Freetag-Eventplugin macht das beispielsweise für die Artikeltags.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Immer mehr Smartphone-Besucher

Post by yellowled »

Das Folgende bitte als durchaus konstruktive Hinweise verstehen, nicht als destruktives „alles falsch, was Du schreibst“. (Ich ahne, dass man es so missverstehen könnte, weil ich ein bisschen „advocatus diaboli“ spiele. Aber Du wolltest ja einen regen Austausch. :wink:)
Be@t wrote: Mon Nov 04, 2019 11:14 pmSoweit ich das überblicken kann, bietet nur das Bootstrap 4 Theme eine Menüleiste, die oben kleben bleibt (sticky-top), bei allen anderen verschwindet die Menüleiste sobald man etwas nach unten scrollt.
Ich glaube, das stimmt. Ich persönlich hasse diese Menüs wie die Pest, insbesondere auf kleinen Bildschirmen, wo der Anteil des Bildschirms, den sie (normalerweise permanent) überlagern, größer ist.
Be@t wrote: Mon Nov 04, 2019 11:14 pmEin grundsätzliches Serendipity-Problem ist zudem, dass man (als Normaluser) keine Untermenüs erstellen kann. Das wäre z.B. für die Darstellung von Kategorien doch sehr interessant.
Ein grundsätzliches Problem von Multilevel-Navigationen ist, dass sie sehr schnell sehr schlecht bedienbar werden, insbesondere auf kleinen Bildschirmen und Touch Devices.

Ich sage wirklich immer, auch in Kundenprojekten, dass ein Multilevel-Menü („Dropdown“) der letzte Ausweg sein sollte, nachdem man eindringlich überlegt hat, ob man nicht seine Inhalte, deren Struktur und Verknüpfung untereinander vereinfachen und damit eine einfachere, besser bedienbare Navigation erzeugen kann. (Die Navigation ist ja letztlich ein Abbild der Seitenstruktur, oder zumindest sollte das im Idealfall so sein.)

Außerdem als Gedankenfutter: Die meisten Besucher eines durchschnittlichen Blogs kommen über eine Googlesuche, lesen einen Artikel und gehen wieder. Die „brauchen“ also vermutlich eher keine komplexe Navigation, sondern vielleicht einfach eine prominente Suche?
Be@t wrote: Mon Nov 04, 2019 11:14 pmBei 10 Beiträgen pro Seite muss jemand dann schon recht lange nach unten scrollen, bis er diese Plugins zu sehen bekommt.
Man könnte die Anzahl der Beiträge pro Seite kleiner stellen. (Machen auch nur die Wenigsten.)
Be@t wrote: Mon Nov 04, 2019 11:14 pmUm immer einfach nach oben (zur Menüleiste) zu gelangen, baute ich mit der Hilfe von yellowled einen ständig sichtbaren «scroll-to-top»-Button ein. Somit ist das Menü immer nur einen Fingertipp entfernt.
Man kann übrigens auf (meine ich) so ziemlich jedem Smartphone mit einem Tap auf den oberen Fensterrand nach oben scrollen, aber so ein „Fahrstuhl-Button“ ist sicherlich etwas mehr „on the nose“ für Besucher, die diese Funktionalität nicht kennen.
Be@t wrote: Mon Nov 04, 2019 11:14 pmNun überlegte ich, wie ich die Ergebnisse der zwei Seitenleisten-Plugins Kategorien (categories) und Tags (freetag) in die Menüzeile kriege.
Ich meine, ich las gerade, dass Du Deine Besucher nicht trackst (was ja grundsätzlich löblich ist), aber hier wäre es echt mal interessant, zu sehen, ob das überhaupt genutzt wird. Ich hab Piwik schon vor längerer Zeit rausgerissen, aber damals waren die Zahlen so, dass man Kategorien und Tags im Grunde auch rauslassen konnte, weil es niemand benutzt hat. So bin ich darauf gekommen, Kategorien und Tags im Archiv auszugeben. (Das Timeline-Theme macht das m.E. nach genauso.)

Das meines Erachtens größte Problem an Kategorien und Tags nennst Du aber selbst: das bleibt nicht so, es verändert sich in den meisten Blogs ständig und ist damit für ein automagisch erzeugtes Menü eigentlich ungünstig. (Es sei denn, man möchte sich die Mühe machen, da irgendetwas manuell zu verwalten. Auch da wäre ich – ja, das kann man anders sehen – wieder bei der Nutzenfrage.)
Be@t wrote: Mon Nov 04, 2019 11:14 pmAm liebsten hätte ich hier eine Tag-Wolke auf einer statischen Seite (oder es könnte auch ein normaler Blogbeitrag sein) die sich genauso automatisch aktualisiert, wie es das Seitenleisten-Plugin macht. Mangels technischer Fähigkeiten kriege ich das aber nicht hin.
Ich weiß nicht, ob das in einer statischen Seite so geht (weil es Smarty ist), aber im Archiv über das Template ist es pro Plugin, das man ausgeben möchte, eine kurze Zeile wie z.B.

Code: Select all

{serendipity_showPlugin class="serendipity_plugin_freetag"}
(Braucht halt eventuell noch Layout-Code drumherum, und wenn man es nicht in der Seitenleiste haben möchte, muss man das Seitenleistenplugin auf versteckt setzen im Backend.)

Vielleicht sind aber wirklich Kategorien und Tags im Archiv für Dich eine gute Lösung?
Be@t wrote: Mon Nov 04, 2019 11:14 pmMeiner Meinung nach verlieren Seitenleisten-Plugins wegen Smartphone-Benutzern rapide an Attraktivität und man sollte sich überlegen, wie man die teils sehr tollen Funktionen anderweitig anzeigen kann.
Hab ich vor Jahren schon mal im s9y InfoCamp gesagt: Seitenleisten sind die Dachböden von Blogs. Da kommt alles hin, was man eigentlich nicht mehr braucht, aber auch noch nicht wegwerfen mag.

Generell ist es übrigens echt schwierig, so z.T. individuelle Wünsche in einem Theme abzubilden, das in mehr als einem Blog laufen soll (und das gilt eigentlich für alle Themes, die im Kern oder auf Spartacus sind). Je mehr Varianten, je mehr Optionen man einbaut, desto mehr Arbeit ist das, sowohl beim Erstellen als auch später in der Wartung des Themes. Deshalb (würde ich sagen) gibt es nicht so viele Themes wie 2k11 oder Timeline, die richtig viele Optionen bieten. Das ist echt viel Arbeit. :lol:

Das wäre dann übrigens auch die Antwort auf die Frage, was ich für meine Besucher mache – Custom-Theme, das nur bei mir laufen muss, in das vieles hart einkodiert ist. Keine Seitenleisten, keine 10 Posts pro Seite, Off-Canvas-Menü (ich weiß grad nicht, ob es ein s9y-Theme gibt, das sowas hat), das auch die Suche enthält, damit man die 4 wichtigen Menüpunkte (mehr sind es nicht, mehr brauche und will ich nicht) kompakt zusammen hat. Kategorien nutze ich nur intern für mich, Tags gibt's nur unter dem Artikel, beide Seitenleistenplugins werden im Archiv ausgegeben. (Ich bin aber ziemlich sicher, dass ich die einzige Person bin, die das Archiv regelmäßig benutzt.)

YL
Be@t
Regular
Posts: 100
Joined: Sun Dec 18, 2005 5:24 pm
Location: switzerland
Contact:

Re: Immer mehr Smartphone-Besucher

Post by Be@t »

yellowled wrote: Tue Nov 05, 2019 7:44 pm
Be@t wrote: Mon Nov 04, 2019 11:14 pmSoweit ich das überblicken kann, bietet nur das Bootstrap 4 Theme eine Menüleiste, die oben kleben bleibt (sticky-top), bei allen anderen verschwindet die Menüleiste sobald man etwas nach unten scrollt.
Ich glaube, das stimmt. Ich persönlich hasse diese Menüs wie die Pest, insbesondere auf kleinen Bildschirmen, wo der Anteil des Bildschirms, den sie (normalerweise permanent) überlagern, größer ist.
Be@t wrote: Mon Nov 04, 2019 11:14 pmEin grundsätzliches Serendipity-Problem ist zudem, dass man (als Normaluser) keine Untermenüs erstellen kann. Das wäre z.B. für die Darstellung von Kategorien doch sehr interessant.
Ein grundsätzliches Problem von Multilevel-Navigationen ist, dass sie sehr schnell sehr schlecht bedienbar werden, insbesondere auf kleinen Bildschirmen und Touch Devices.
So unterschiedlich sind die Geschmäcker. Ich finde die Bootstrap4-Navigation auf meinem Handy ziemlich schick und sehr viel Platz nimmt sie auch nicht weg. Bedienbar ist sie problemlos und auch die nachfolgende genannte "Suche" ist nett integriert.
Image
yellowled wrote: Tue Nov 05, 2019 7:44 pmMan könnte die Anzahl der Beiträge pro Seite kleiner stellen. (Machen auch nur die Wenigsten.)
Klar, könnte man. Ich find's persönlich einfach angenehmer nach unten zu scrollen, als nach jedem zweiten/dritten Beitrag die Seite neu zu laden (egal ob am PC oder am Smartphone). Ich verwende deshalb auch keinen "Erweiterter Beitrag". Ich hasse diese Teaser die mich nur zum klicken animieren, damit sie meinen Besuchsverlauf besser tracken können. Aber auch das ist eine ganz persönliche Meinung.

yellowled wrote: Tue Nov 05, 2019 7:44 pmMan kann übrigens auf (meine ich) so ziemlich jedem Smartphone mit einem Tap auf den oberen Fensterrand nach oben scrollen, aber so ein „Fahrstuhl-Button“ ist sicherlich etwas mehr „on the nose“ für Besucher, die diese Funktionalität nicht kennen.
Das klappt bei meinem Android-Handy leider nicht (Huawei P19).

yellowled wrote: Tue Nov 05, 2019 7:44 pm Ich meine, ich las gerade, dass Du Deine Besucher nicht trackst (was ja grundsätzlich löblich ist), aber hier wäre es echt mal interessant, zu sehen, ob das überhaupt genutzt wird.
Wenn ich es selber nutze, reicht mir das. :P Und lieber biete ich etwas an was keiner nutzt, als dass Besucher etwas nicht finden, was sie suchen. Das hört man ja dann auch nie.

yellowled wrote: Tue Nov 05, 2019 7:44 pm
Be@t wrote: Mon Nov 04, 2019 11:14 pmAm liebsten hätte ich hier eine Tag-Wolke auf einer statischen Seite (oder es könnte auch ein normaler Blogbeitrag sein) die sich genauso automatisch aktualisiert, wie es das Seitenleisten-Plugin macht. Mangels technischer Fähigkeiten kriege ich das aber nicht hin.
Ich weiß nicht, ob das in einer statischen Seite so geht (weil es Smarty ist), aber im Archiv über das Template ist es pro Plugin, das man ausgeben möchte, eine kurze Zeile wie z.B.

Code: Select all

{serendipity_showPlugin class="serendipity_plugin_freetag"}
(Braucht halt eventuell noch Layout-Code drumherum, und wenn man es nicht in der Seitenleiste haben möchte, muss man das Seitenleistenplugin auf versteckt setzen im Backend.)
Da bastle ich noch weiter daran rum. Danke für den Code-Hinweis.
yellowled wrote: Tue Nov 05, 2019 7:44 pmVielleicht sind aber wirklich Kategorien und Tags im Archiv für Dich eine gute Lösung?
Nein. Ich weiss nicht wieso, doch Kategorien und Tags im Archiv fand ich von Beginn weg ziemlich unlogisch.
yellowled wrote: Tue Nov 05, 2019 7:44 pm Hab ich vor Jahren schon mal im s9y InfoCamp gesagt: Seitenleisten sind die Dachböden von Blogs. Da kommt alles hin, was man eigentlich nicht mehr braucht, aber auch noch nicht wegwerfen mag.
Mag sein. Ich mag jedenfalls das Kommentar- und das Historie-Plugin auch ganz gerne in anderen Blogs.

yellowled wrote: Tue Nov 05, 2019 7:44 pm Das wäre dann übrigens auch die Antwort auf die Frage, was ich für meine Besucher mache – Custom-Theme, das nur bei mir laufen muss, in das vieles hart einkodiert ist. Keine Seitenleisten, keine 10 Posts pro Seite, Off-Canvas-Menü (ich weiß grad nicht, ob es ein s9y-Theme gibt, das sowas hat), das auch die Suche enthält, damit man die 4 wichtigen Menüpunkte (mehr sind es nicht, mehr brauche und will ich nicht) kompakt zusammen hat. Kategorien nutze ich nur intern für mich, Tags gibt's nur unter dem Artikel, beide Seitenleistenplugins werden im Archiv ausgegeben. (Ich bin aber ziemlich sicher, dass ich die einzige Person bin, die das Archiv regelmäßig benutzt.)
Na ja, bei fünf Bogposts pro Jahr könntest Du Deinen Blog auch als statische Seite betreiben. :twisted: :lol:

Spass bei Seite. Die Bedürfnisse und Vorlieben sind verschieden und das ist auch gut so. Ich finde den Diskussionsbeginn zumindest mal gelungen. :wink:
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Immer mehr Smartphone-Besucher

Post by yellowled »

Be@t wrote: Wed Nov 06, 2019 12:01 amNa ja, bei fünf Bogposts pro Jahr könntest Du Deinen Blog auch als statische Seite betreiben. :twisted: :lol:
Würde ich wahrscheinlich, wenn ich nicht der Meinung wäre, dass ein Blog ohne Kommentare relativ witzlos ist. (Disqus kommt für mich nicht in Frage.) Statisches HTML kann man inzwischen sehr bequem generieren lassen, in Sachen Performance, Sicherheit und Wartung ist es dynamisch erzeugtem HTML um Längen überlegen und der Aufwand, eine statische Seite lokal zu entwickeln ist drastisch geringer als bei einem Apache/MySQL-Blog.

YL
Be@t
Regular
Posts: 100
Joined: Sun Dec 18, 2005 5:24 pm
Location: switzerland
Contact:

Re: Immer mehr Smartphone-Besucher

Post by Be@t »

Ein anderes Smartphone-Thema:

Die Anzeige kleiner Texte mit Mouse-Over finde ich vor allem bei Bildern, als Bildbeschreibung, überaus praktisch. Wenn die Bilder in einer Lightbox angezeigt werden, dann erscheint der Mouse-Over-Text als Bildbeschreibung. Wenn ich das Bild aber nicht verlinke und keine Lightbox anspringt, entgeht dem Smartphone-User die Bildbeschreibung.

Gibt es vielleicht eine Möglichkeit, mit der bei einem img ohne link auf einen Tap/Fingertipp/Klick die Mouse-Over-Information (title) angezeigt wird?
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Immer mehr Smartphone-Besucher

Post by yellowled »

Be@t wrote: Fri Nov 08, 2019 10:52 amDie Anzeige kleiner Texte mit Mouse-Over finde ich vor allem bei Bildern, als Bildbeschreibung, überaus praktisch.
Fun fact: Es gibt Leute, die aus Gründen der Barrierefreiheit empfehlen, darauf zu verzichten. Normalerweise hat nämlich jedes Bild ein sogenanntes alt-Attribut, das eine Bildbeschreibung für Screenreader enthält. Wenn es zusätzlich ein title-Attribut (das erzeugt den „Mouse-Over-Text“) hat, wird diese Beschreibung (üblicherweise verwenden Systeme wir s9y dafür denselben Text) zweimal vorgelesen.
Be@t wrote: Fri Nov 08, 2019 10:52 amWenn die Bilder in einer Lightbox angezeigt werden, dann erscheint der Mouse-Over-Text als Bildbeschreibung.
Wenn das Lightbox-Script das so macht, ja. (Machen nicht alle.)
Be@t wrote: Fri Nov 08, 2019 10:52 amGibt es vielleicht eine Möglichkeit, mit der bei einem img ohne link auf einen Tap/Fingertipp/Klick die Mouse-Over-Information (title) angezeigt wird?
Fertig für s9y meines Wissens nicht. Grundsätzlich sind viele Ansätze denkbar, aber im worauf es am ehesten hinausläuft wären Tooltips. Das kann man im Prinzip mit ein bisschen JavaScript selbst realisieren, ein ganz guter (touch-freundlicher) Ansatz ist z.B.

https://osvaldas.info/elegant-css-and-j ... e-friendly

jQuery hat s9y im Frontend eh dabei, das CSS kann man in seine user.css kippen. Das HTML braucht man nicht, aaaber im JavaScript (das man in seine theme.js oder so kippen müsste) müsste man was anpassen, denn [rel=tooltip] setzt s9y natürlich nicht. Aber

Code: Select all

var targets = $( 'img[title]' ),
müsste funktionieren.

YL
Be@t
Regular
Posts: 100
Joined: Sun Dec 18, 2005 5:24 pm
Location: switzerland
Contact:

Re: Immer mehr Smartphone-Besucher

Post by Be@t »

Danke, yellowled, für die Informationen. Vielfach habe ich bei Bildern in die Felder ALT und TITLE den gleichen Text kopiert. Weil ich dachte, ALT wird von Suchmaschinen für die Bildersuche ausgelesen und TITLE brauche ich für die Lightbox. Nun überlege ich, ob ich zukünftig ALT weglassen soll.

Mit dem Code von Osvaldas Valutis sowie Deiner Anmerkung zur richtigen Variable habe ich nun etwa ein Stunde rumgespielt. (CSS in style.css kopiert, JS in theme.js kopiert und die Variable angepasst). Doch weil mir das grundlegende Knoff-Hoff fehlt, habe ich es so nicht zum Laufen gekriegt. :oops:
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Immer mehr Smartphone-Besucher

Post by yellowled »

Be@t wrote: Fri Nov 08, 2019 8:01 pmNun überlege ich, ob ich zukünftig ALT weglassen soll.
Auf gar keinen Fall! Das alt-Attribut darf in HTML nur dann leer sein, wenn das Bild rein dekorativer Natur ist (und selbst dann muss das Bild alt="" haben). Da die meisten Suchmaschine-Robots Websites wie Screenreader sehen, ist das alt-Attribut auch für SEO wichtig. Wenn, dann solltest Du title weglassen.

Ich weiß, man kann da geteilter Meinung sein, aber ich finde diese title-„Beschreibungen“ immer etwas sinnfrei. Der sehende Benutzer erkennt ja normalerweise, was auf dem Bild zu sehen ist. Bedarf das einer Beschreibung, die nicht aus dem umliegenden Text abzuleiten ist, kann man eine Bildunterschrift hinzufügen – dafür hat HTML sogar extra die Elemente <figure> und <figcaption>. Screenreader und Suchmaschinen werten halt alt aus.
Be@t wrote: Fri Nov 08, 2019 8:01 pmDoch weil mir das grundlegende Knoff-Hoff fehlt, habe ich es so nicht zum Laufen gekriegt. :oops:
Du müsstest schon genauer beschreiben, was Du wie gemacht hast und ggf. den fehlerhaften Code auch mal ein wenig online lassen, damit man sich ggf. mal von außen angucken kann, warum das nicht funktioniert, ansonsten ist es schwierig, Dir zu helfen.

YL
Be@t
Regular
Posts: 100
Joined: Sun Dec 18, 2005 5:24 pm
Location: switzerland
Contact:

Re: Immer mehr Smartphone-Besucher

Post by Be@t »

Hallo yellowled

Für solche Dinge habe ich einen Testblog eingerichtet. https://www.s9y.dokumenzi.ch/ . Dort ist auch das erwähnte theme.js und style.css mit den Änderungen von Osvaldas Valutis aktiv.

Mittlerweile denke ich jedoch, dass es einen einfacheren Weg gibt. Bei Bildern, die nicht in der Lightbox angezeigt werden (also ohne Link), fülle ich nebst ALT und TITLE den gleichen Text in den Bildkommentar. Mit CSS sollte ich es schaffen, dass der Kommentar dann auf grossen Displays nicht angezeigt wird (sondern nur TITLE via Mouse-Over). So sehen dann Smartphone-User (die kein Mouse-Over sehen) den Bildkommentar.

Natürlich wäre die Idee mit Tooltip schöner und ausgereifter (und könnte nicht nur für Bilder genutzt werden). Doch Du brauchst Dir diesbezüglich wirklich keinen Aufwand zu machen.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Immer mehr Smartphone-Besucher

Post by yellowled »

Be@t wrote: Sat Nov 09, 2019 2:19 pmMit CSS sollte ich es schaffen, dass der Kommentar dann auf grossen Displays nicht angezeigt wird
Klar.

Code: Select all

@media screen and (max-width: 767px) {
    .serendipity_imageComment_txt {
        display: none;
        visibility: hidden;
    }
}
Nur mit beiden ist sicher gestellt, dass dieser – für sie unnötige – Text von Screenreadern nicht vorgelesen wird. (767px ist relativ zufällig gewählt, 768px ist ein iPad im Portraitmodus.)

YL
Be@t
Regular
Posts: 100
Joined: Sun Dec 18, 2005 5:24 pm
Location: switzerland
Contact:

Re: Immer mehr Smartphone-Besucher

Post by Be@t »

yellowled wrote: Sat Nov 09, 2019 7:24 pm

Code: Select all

@media screen and (max-width: 767px) {
    .serendipity_imageComment_txt {
        display: none;
        visibility: hidden;
    }
}
Image Klappt bestens! Danke! Image

Nachtrag: Hab's noch etwas geändert. iPad war das Stichwort (hat ja auch keine Maus und somit kein Mouse-Over). Deshalb der Eintrag nun unter:

Code: Select all

@media screen and (max-width: 1024px)
Auf dem iPad meiner Frau kann ich das nun gut überprüfen: Hochformat wird der Kommentar angezeigt, drehe ich auf Querformat, verschwindet er. Tip-Top!
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Immer mehr Smartphone-Besucher

Post by yellowled »

Be@t wrote: Sat Nov 09, 2019 10:32 pm

Code: Select all

@media screen and (max-width: 1024px)
Winzige Anmerkung: Das „erschlägt“ natürlich alle Auflösungen <= 1024px. Wenn ich also auf einem 1280px breiten Display das Browserfenster nicht voll aufziehe … Aber ja, es ist gleichzeitig eben auch ein iPad in Landscape. Und es gibt (leider) keinen zuverlässigen Weg, Touch Devices zu erkennen.

YL
Be@t
Regular
Posts: 100
Joined: Sun Dec 18, 2005 5:24 pm
Location: switzerland
Contact:

Re: Immer mehr Smartphone-Besucher

Post by Be@t »

Soweit funktioniert das recht gut. Ich wundere mich einfach ein wenig, wieviel Code (mit dem WYSIWYG-Editor) nun für ein Bild erzeugt wird.

Code: Select all

<figure class="serendipity_imageComment_right" style="width: 150px">
<div class="serendipity_imageComment_img">
<a class="serendipity_image_link" href="/uploads/2019/20191111_901.jpg" title="Kraftwerk im Sonnenschein"><!-- s9ymdb:6349 --><img alt="Kraftwerk im Sonnenschein" class="serendipity_image_right" src="/uploads/2019/20191111_901.serendipityThumb.jpg" style="width:150px" title="Kraftwerk im Sonnenschein" />
</a></div>
<figcaption class="serendipity_imageComment_txt">Kraftwerk im Sonnenschein</figcaption>
</figure>
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Immer mehr Smartphone-Besucher

Post by yellowled »

Be@t wrote: Mon Nov 11, 2019 11:38 pm Soweit funktioniert das recht gut. Ich wundere mich einfach ein wenig, wieviel Code (mit dem WYSIWYG-Editor) nun für ein Bild erzeugt wird.
Das ist schon richtig so. Ich gebe Dir Recht, dass es schöner wäre, wenn man das <div> und die Klassen weglassen könnte, aber das ist aus Gründen der Abwärtskompatibilität keine gute Idee. Erschwerend kommt halt hinzu, dass Du zusätzlich zur Caption nun noch alt-Text und doppelten title hast. Das wäre so nicht nötig, und mindestens einer der title ist auch wirklich überflüssig. (Es könnte aber sein, dass es für die Lightbox-Geschichte so sein muss, da bin ich überfragt, zumal ich nicht weiß, wie Du das genau erzeugst?)

In einer idealen Welt wäre das Markup so:

Code: Select all

<figure class="serendipity_image_right" style="width: 150px">
<a href="/uploads/2019/20191111_901.jpg"><!-- s9ymdb:6349 --><img alt="Kraftwerk im Sonnenschein" src="/uploads/2019/20191111_901.serendipityThumb.jpg" /></a>
<figcaption>Kraftwerk im Sonnenschein</figcaption>
</figure>
… aber das würde mit den diversen Themes und Plugins, die da theoretisch involviert sein können, nicht funktionieren.

YL
Post Reply