Menüanpassung responsive

dnederveld

Wiee man an dem Entwurf der Homepage sieht, ist sie für ältere Menschen gedacht (ich bin auch einer von der Sorte). Beim Usertest auf dem Smartphone sehe ich immer die Probleme beim Umgang mit dem Hamburgermenü, wenn es als solches überhaupt erkannt wird.
Schaut man sich diese Seite auf dem Smartphone an. verdrängt die Mainmenüleiste, wenn das Menü mehr Punkte enthält, den Content nach unten.

Meine Bastellösung mit der Untermenüleiste bricht nicht nach jedem Menüpunkt um, sondern erst wenn die Punkte nicht mehr in die Zeile passen, das sollte doch auch im Mainmenü möglich sein, nur finde ich die Lösung nicht.

Rolf Dautrich

Da ich auch zu den Älteren gehöre (Jahrgang 1949), maße ich mir an, hier eine Meinung zu haben. Ich glaube, dass die "klassische" Version mit dem Hamburgermenü mit unseren dicken Fingern auf dem Smartphone besser zu bedienen ist als Deine Variante. Übrigens habe ich auch meine Ehefrau an die Benutzung von Hamburger-Menüs gewöhnt; und die ist alles andere als IT-affin.

Letztlich musst das aber Du entscheiden.

dnederveld

Tja, mache ich auch in meinem Umfeld, aber wie gewöhne ich die Senioren daran, die ich gar nicht kenne?
Meine Erfahrungen im Senioren Internetcafé sind andere. Das trifft vor allem die, die vom Telefon auf das Smartphone umgestiegen sind und fast nur mit Whatsapp arbeiten, um mit Kindern und Enkeln Kontakt halten und nur bedingt surfenderweise unterwegs sind. Die können i.d.R nichts mit Symbolen anfangen, die sie nicht kennen.

Rolf Dautrich

Na ja, auch in unserem Alter kann man noch lernen, wie ein Hamburger-Symbol aussieht und welche Bedeutung es hat.

drmenzelit

Dein Menü ist kein echtes Menü, sondern ein Eigenes Modul mit Links. Ich würde dir empfehlen ein Joomla Menü anzulegen und dann per CSS zu gestalten. Ich kann gerne den passenden Code erstellen, aber zuerst muss das Menü richtig sein.

firstlady

UND wenn es ein echtes Menü ist also mit <ul><li> ..dann ist es auch barrireefrei und für blinde Senioren verwendbar.

Und mein Jahrgang bleibt geheim

Rolf Dautrich

Zitat

Und mein Jahrgang bleibt geheim

Aber Du hast -wie ich- noch Programme in Lochkarten geschrieben.

dnederveld

genau firstlady und drmenzelit danach hatte ich gefragt, eigentlich wollte ich ein 2-zeiliges Menü, wie in dem Modul "Bastellösung". Ich habe hier schon einiges gefunden, aber nichts passt. auch der Versuch mit wrap klappt irgendwie nicht. Schön wäre eine user.css, aber ein override bekomme ich auch noch hin.

drmenzelit

Ein Override brauchst du nicht, nur ein normales Menü und ein bisschen CSS damit es umbricht

dnederveld

an dem bisschen CSS bin ich bisher gescheitert, das Original ist hier: https://iv-senioren-darmstadt.de/, die user.css als textfile im Anhang

Rolf Dautrich

Was Du mit der Klasse "untermenue" versuchst, ist auf jeden Fall syntaktisch falsch. Das siehst Du auf den ersten Blick, wenn Du Dir z.B. notepad++ als Editor installierst und Deine user.css lädst.

Wenn Du einen Link im untermenue meinst, musst Du schreiben (ich habe die Kommentare wegen der Übersicht herausgenommen):

Code

.untermenue a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}
.untermenue a:hover {
    color: yellow; 
    text-decoration: underline;

}

Auch bei a und a:hover hast Du Dich mit Deinen Kommentaren ins Abseits geschossen. Bei .container-component ist es ähnlich falsch wie bei untermenue.

Übrigens: Meine Bibel für HTML und CSS ist das hier: https://wiki.selfhtml.org/wiki/SELFHTML

Stef

Zitat von dnederveld

... das Original ist hier: https://iv-senioren-darmstadt.de/

Ich zweifle daran, ob der schlechte Kontrast und die Vielzahl verschiedener Farben für Senioren wirklich als barrierefrei angesehen werden können.

dnederveld

deswegen baue ich gerade um: https://j5iv.devolment.de/

Rolf Dautrich

Barrierefreiheit kannst Du mit Google Chrome, Microsoft Edge oder Vivaldi prüfen, indem Du in den Entwicklertools Lighthouse über Deine Seite laufen lässt.

Noch ein paar Anregungen:

Du solltest einen Link zur Datenschutzerklärung ins Footermenü aufnehmen und dieses auf jeder Seite anzeigen lassen.
Ich würde mir überlegen, ob die Informationen zur Geschäftsstelle wirklich so prominent in der Sidebar der Startseite stehen müssen. Würde mir unter Kontakt reichen.
Aus eigener Erfahrung weiß ich, dass die kostenlose Version von jEvents nicht sonderlich gut mit Mobilgeräten funktioniert. Du könntest Dir als Alternative mal dpCalendar (Lite) anschauen.

dnederveld

Danke für die Tips. Die Originalseite wurde von einem nicht zu Ende geführtem Wordpress-System übernommen. Die Farben stören mich schon lange und einige andere Dinge auch.

Deswegen bin ich gerade am Umbau. Impressum und DSGVO liegen nicht in meinem Ermessen sondern bei der Stadt.

Der Terminkalender entfallt wahrscheinlich komplett (10 öffentliche Termien pro Jahr)

Es gibt auch einen internen Teil, der hier nicht zugänglich ist. Hier sind die Menüs "gehamburgert".

Jevents nutze ich schon seit Jahren und es gab noch keine Beschwerden, aber ich schaue mir mal den dpCalender mal an.

dnederveld

Zitat von drmenzelit

Ein Override brauchst du nicht, nur ein normales Menü und ein bisschen CSS damit es umbricht

an dem bisschen CSS bin ich bisher gescheitert, das Original ist hier: https://iv-senioren-darmstadt.de/, die user.css als textfile im Anhang