search

springers54 / reiki

0 stars 0 forks source link

Menüs auf dem Handy: Untermenüs einklappen #192

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Im Moment sind die Handy-Menüs mehr als unübersichtlich. Es sollte, wie beim Desktop möglich sein, dass im Menü erst mal nur die Hauptpunkte und mit Akordion oder Mouseover die Unterpunkte kommen. Im Moment ist es nur eine einzig lange Liste. Falls du das nicht mit vertretbarem Aufwand (<1h) hinbekommst, dann sollten wir hierfür vielleicht besser ein Plugin nutzen. grafik

springers54 commented 5 years ago

Wir haben gestern mal mit einem Plugin auf der Seite https://zen-reiki-energieshop.de angefangen und ziemlich schnell was ganz brauchbares hinbekommen. Kannst du dir mal anschauen. Ich glaube nicht, dass du in ganz kurzer Zeit etwas Vergleichbares machen kannst. Wenn ja, um so besser, dann hätten wir ein Plugin weniger. Wenn nein, dann sollten wir an den Plugin-Einstellungen noch ein bisschen Feintuning betreiben.

springers54 commented 5 years ago

Wir haben das jetzt mal eingebunden und übertragen, schaut eigentlich ganz gut aus, was meinst du?

springers54 commented 5 years ago

Kannst du bitte mal schauen, warum das Login nicht Teil des Header-Menüs ist? Du musst da eine Sonderlösung haben. Auf jeden Fall müsste ich dies als Menüpunkt integrieren können. Im Moment haben wir uns mit einem zusätzlichen rechten Menü geholfen, aber das sieht unschön aus.

springers54 commented 5 years ago

Kannst du dein mobiles Menü und deren Umschaltung bitte ausblenden? Dann können wir selbst entscheiden, wo das PC-Menü noch funktioniert und wo wir mobil einschalten müssen.

joergsteinhauer commented 5 years ago

Ich habe eben zu dem Thema eine Mail geschrieben, können es aber heir klären.

Begeistert vom Plugin bin ich nicht. Du siehst, es kommen erste Probleme auf, für die ich länger brauche, als für die visuelle Anpassung.

Ich denke schon, dass ich das so umgestalten kann, wie gewünscht.

springers54 commented 5 years ago

Wenn der Aufwand sich in Grenzen hält und es am Ende so aussieht, super. Jedes Plugin, was wir nicht brauchen, ist ein Gewinn. Wir sind da entspannt.

joergsteinhauer commented 5 years ago

Ich habe Zeit sinnvoll genutzt und schon mal Clickdummy vorbereitet: https://jsfiddle.net/js6n8vme/14/

Werde es demnächst einbauen

joergsteinhauer commented 5 years ago

Habe schon etwas umgesetzt, bitte schauen. Muss noch ein paar Kleinigkeiten optimieren, aber der Grundaufbau ist hoffentlich ok?

springers54 commented 5 years ago

Der gute Wille ist zu erkennen, aber nutzbar ist das in keiner Weise. Hast du dir das mal auf deinem HTC angesehen und versucht, dort ein Menü aufzuklappen? Es ist schlichtweg nicht möglich.

Bitte zum Testen von Funktionen auch den Energieshop nehmen, dort vorbereiten und dann implementieren, wenn es bis auf wirkliche Feinheiten steht.

Im Moment muss man den Button fast punktgenau treffen, der obere lässt sich gar nicht zuklappen.

joergsteinhauer commented 5 years ago

Ok, war zu voreilig, am Desktop hats sich gut angefühlt. Wie ich sagte, ich muss noch optimieren. Muss bis abends warten, kann es dann erstmal zurück machen und weiter entwickeln.

joergsteinhauer commented 5 years ago

Bitte zum Testen von Funktionen auch den Energieshop nehmen

Was für Shop? Andere Domain? Verstehe ich nicht ganz. Andere Domain werde ich definitiv nicht nehmen, da ich dort zuvor die ganzen Daten abgleichen müsste... und zwar jedes mal. Zu viel Overhead. Das ist kein Workflow.

joergsteinhauer commented 5 years ago

Menü nun angepasst, bitte überprüfen. Ich finde es gut so.

joergsteinhauer commented 5 years ago

Zu "Menüleiste zum Aufklappen auch beim Scrollen oben immer sichtbar bleibt und wenig Platz frisst"

--> Braucht ihr das wirklich? Das ist nicht ganz ohne. Es läuft auch da hinaus, dass der ganze Header sticky bleibt. Dann zwar verkleinert, nimmt aber trotzdem enorm viel Platz ein.

springers54 commented 5 years ago

Zu "Menüleiste zum Aufklappen auch beim Scrollen oben immer sichtbar bleibt und wenig Platz frisst"

Das muss nicht sein, Ist nice to have, aber wenn es viel Aufwand macht, dann weglassen.

Aber es kommen einige Stylingdinge. grafik

Problem 1 Schriften zu groß

Siehe Bild oben, wie es andere Portale machen. Ebenso stimmen die Abstände nicht im Aufklappbereich.

Problem 2: Menü zu breit

Es wäre gut, wenn das Menü nicht breiter als der halbe Bildschirm wäre

Problem 3: Menübanner mit Schließen-Button,

siehe oben. Es ist verwirrend, dass das Zen-Reiki gelb ist, denn es ist nicht die Homepage, sondern ein Menüpunkt, wie die anderen auch.

Problem 4: Pfeile hässlich

aus deiner Bibliothek sind die alle nicht wirklich brauchbar. Das kleinste Übel ist der quadratische Rahmen grafik

joergsteinhauer commented 5 years ago

Problem 1

Schrift kann ich verkleinern, allerdings sollte die Fläche dazu in etwa gleich bleiben (evtl. nur minimal verkleinern), denn sonst würde man die Menüpunkte nicht korrekt treffen. Schrift wirkt so groß durch die Großschreibung. Diese kann ich auch entfernen.

Problem 2

Menü ist so breit wie die Texte. Schaue bei anderen - genau so ist es auch dort. Durch Problem 1 wird das schon mal kleiner. Dennoch, weitere mögliche Lösungen:

Frage: warum ist das ein Problem?

Problem 3

Hamburger-Icon (Menü-Banner) kann ich immer sichtbar bleiben lassen, dann würde aber das Menü, wie auf anderen Seiten, unterhalb des Headers aufgehen. Orange Schrift signalisiert derzeit den aktiven Menüpunkt. Ist eher als eine UX Verbesserung gedacht. Man kann es auch anders visuell darstellen (wie?). Oder ganz weg lassen, alle Menüpunkte wären dann weiß.

Problem 4

Ok, mache ich

Bevor ich anfange, bitte alle Fragen klären.

springers54 commented 5 years ago

Zu Problem 1

wie besprochen verkleinern, dann schauen wir weiter

Zu Problem 2:

dann Texte umbrechen, es geht darum, die Breite des Menübereichs zu reduzieren

Zu Problem 3:

verstehen wir leider nicht, was du damit meinst.

joergsteinhauer commented 5 years ago

Problem 3

So meine ich es: image

Und das ist mit "Hamburger Icon" gemeint: https://de.wikipedia.org/wiki/Hamburger-Men%C3%BC-Icon

springers54 commented 5 years ago

Das wäre so ok mit der Leiste

joergsteinhauer commented 5 years ago

Ok. Weiter zu klären wäre: Wenn das Layout nun mit der "oberen Leiste" gemacht wird (das ist übrigens der Header), dann gibts noch eine Anpassung, dafür gibts zwei Varianten:

  1. Header bleibt immer oben fixiert, wenn man nach unten scrollt (s. spiegel.de, auto.de)
  2. Header bleibt nicht fixiert, wenn man nach unten scrollt. Dafür schiebt sich das Drop-Down Menü mit nach oben (s. wirkaufendeinauto.de)

Bitte entscheiden, welche Variante passt.

springers54 commented 5 years ago

Variante 1

joergsteinhauer commented 5 years ago

Ok. Allerdings gibt es da ein Problemchen, wenn man eingeloggt ist. Das Admin-Menü ist ja oberhalb der Seite, das kollidiert dann mit dem fixiertem Header. Es gibt dafür zwei Lösungen:

  1. Header wird vom Admin-Menü verdeckt, wird aber beim Scrollen nach unten sichtbar: https://gyazo.com/8234bcb50387a8d694e95c877b9293db
  2. Header ist unterhalb des Admin-Menüs, beim Scrollen nach unten entsteht allerdings ein "Loch" https://gyazo.com/3e3c2f197a16afe66f1985c2ca1b4411

Zur Zeit ist die Lösung 1 eingebaut.

joergsteinhauer commented 5 years ago

Sollte erledigt sein

springers54 commented 5 years ago

gut, sieht zwar wenn man eingeloggt ist, auf der Startseite komisch aus, weil da ein weißer Bereich über dem Banner entsteht, aber ich denke, damit leben wir. Die Besucher sind ja nicht eingeloggt.

joergsteinhauer commented 5 years ago

Ah, na das habe ich tatsächlich nicht gesehen. Habs gefixt.

springers54 commented 5 years ago

Leider funktioniert es nicht. Das Menü verdeckt gererell jetzt den oberen Seitenbereich. Kannst du am besten auf Detailseiten sehen. grafik Ist aber auf allen Seiten so, nicht nur auf dieser. Auch von den Bildern wird jetzt oben etwas abgeschnitten nach der H1

joergsteinhauer commented 5 years ago

Jep, ist mir auch die Tage aufgefallen. Gefixt.

springers54 commented 5 years ago

wie wäre es, wenn du dann mal Signal gibst, wenn dir was auffällt? Dann geht es in der Issue nicht unter

joergsteinhauer commented 5 years ago

Wenn du es so genau wissen willst.... das Problem sit mir gestern früh zwischen Angel und Tür aufgefallen, als ich die Seite überprüfte (weil Dani nicht drauf zugreifen konnte). Zu dem Zeitpunkt hatte ich eigentlich meine Kinder zu betreuen, hatte eigentlich keine Zeit für sowas und war mobil unterwegs (kein Zugang zu Github).