marctrix: Seitenkopf mobil

Hej alle,

Noch ein Problem ist mir aufgefallen, was die mobile Darstellung betrifft. Egal, welchen Menüpunkt man drückt, man erhält immer folgendes Bild:

Alternativ-Text

So merkt man gar nicht, dass überhaupt etwas passiert. Vorschlag: alles zwischen dem blauen Balken und dem Logo könnte hinter einem Menüpunkt verschwinden. Der Menüpunkt besteht aus DEM selbstgewählten icon bei angemeldeten Nutzern, so dass man sieht, man ist angemeldet.

Das Logo würde ich sehr viel kleiner machen, damit man die dann folgende Seitenüberschrift sehen kann (die es noch gar nicht gibt - verwirrt mich ständig!) ;-)

Gruß,

Marc

Marc

  1. Hallo marctrix,

    So merkt man gar nicht, dass überhaupt etwas passiert.

    Deshalb hatte ich in meinen ersten Entwürfen via Flexbox reordering das meiste nach unten, unter main sortiert. Das war aber aufgrund des Layouts nicht so richtig gewünscht.

    Die Idee, die personal links hinter einem Dropdown zu verstecken, halte ich für unausgereift: es fehlt dann die Information über neue Benachrichtigungen und neue Post. Das müsste man IMHO berücksichtigen.

    Die Logo-Grafik wird halt auf 100% Breite skaliert, wenn du ein geringer auflösendes Telefon hast, dann ist das Logo insgesamt kleiner. Vielleicht sollte man dafür nochmal einen Breakpoint einfügen, wo nur 80% der Breite benutzt wird oder so.

    LG,
    CK

    1. Hallo Christian Kruse,

      oder main bekommt eine ID und alle Links lauten auf Seite#main.

      Bis demnächst
      Matthias

      --
      Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
      1. Aloha ;)

        oder main bekommt eine ID und alle Links lauten auf Seite#main.

        Das löst das Problem vordergründig, ist aber irgendwie igitt. Hört sich jedenfalls nicht nach was an, was wir als Verfechter von best practice so im Selfraum einsetzen sollten.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
      2. Hallo,

        oder main bekommt eine ID und alle Links lauten auf Seite#main.

        tja, Pest und Cholera, oder so.

        Sicher, für diesen Fall mag das helfen. Aber Verlinkungen auf seiteninterne Anker werden schnell zum Ärgernis. Ich ärgere mich beispielsweise oft darüber, dass auch in der Threaded-Ansicht beim Aufruf eines Einzelpostings noch ein unnützer #Anker dranhängt. So scrollt das Fenster nämlich bei jedem Refresh (F5) wieder an den Anfang des Posting-Textes, obwohl ich extra schon nach unten gescrollt habe und eigentlich sehen wollte, ob im Threadbaum was Neues dazugekommen ist.

        So long,
         Martin

        1. Hallo Der Martin,

          Ich ärgere mich beispielsweise oft darüber, dass auch in der Threaded-Ansicht beim Aufruf eines Einzelpostings noch ein unnützer #Anker dranhängt.

          Dagegen lässt sich bestimmt was tun.

          Bis demnächst
          Matthias

          --
          Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
          1. Aloha ;)

            Ich ärgere mich beispielsweise oft darüber, dass auch in der Threaded-Ansicht beim Aufruf eines Einzelpostings noch ein unnützer #Anker dranhängt.

            Dagegen lässt sich bestimmt was tun.

            Ich denke nicht - oder zumindest nicht einfach.

            Da wären wir wieder bei einem typischen Problem: Dieser in der Einzelansicht unnötige Anker ist in der Nested-Ansicht quasi überlebensnotwendig ;)

            Um das zu umgehen müssten die Links je nach nested-oder-nicht-Einstellung mit oder ohne Anker präsentiert werden - und wehe, jemand verlinkt dann seine URL ohne Anker in einem Posting und jemand mit nested-Ansicht öffnet das dann.

            Diese Anker sind dadurch leider notwendig und das Ärgernis der hohen Konfigurierbarkeit hier im Forum geschuldet.

            Einzige Alternative bei Entfernung des Ankers wäre, das Scrollen für die nested-Ansicht per JS zu lösen - was dann aber wieder andere Probleme aufwirft und summa summarum noch schlechter ist als der ist-Zustand.

            Man müsste also (wenn-dann) eine Lösung für das spezifische Problem finden, welches @Der Martin hier nennt, die ohne Entfernung des Ankers auskommt und nur für Einzel-Posting-Ansicht greift - das hat jetzt aber schon wieder so gut wie gar nichts mehr mit dem ursprünglichen Problem hier im Thread zu tun.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
            1. Hallo Camping_RIDER,

              Da wären wir wieder bei einem typischen Problem: Dieser in der Einzelansicht unnötige Anker ist in der Nested-Ansicht quasi überlebensnotwendig ;)

              Um das zu umgehen müssten die Links je nach nested-oder-nicht-Einstellung mit oder ohne Anker präsentiert werden - und wehe, jemand verlinkt dann seine URL ohne Anker in einem Posting und jemand mit nested-Ansicht öffnet das dann.

              Diese Anker sind dadurch leider notwendig und das Ärgernis der hohen Konfigurierbarkeit hier im Forum geschuldet.

              Exakt. Das ist der Grund, warum ich sie immer mit anhänge.

              LG,
              CK

              1. Hallo Christian Kruse,

                Diese Anker sind dadurch leider notwendig und das Ärgernis der hohen Konfigurierbarkeit hier im Forum geschuldet.

                Exakt. Das ist der Grund, warum ich sie immer mit anhänge.

                Ja, die Anker müssen sein. Aber ein einfaches UserJS könnte helfen

                $('html, body').animate({ scrollTop: ($('html').offset().top)}, 0);
                

                Bis demnächst
                Matthias

                --
                Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                1. Hallo miteinander,

                  Diese Anker sind dadurch leider notwendig und das Ärgernis der hohen Konfigurierbarkeit hier im Forum geschuldet.

                  das ist mir klar, auch dass sie in der Nested-Ansicht notwendig sind, um zum gewünschten Beitrag im Thread zu kommen.

                  Ich will deswegen auch kein Fass aufmachen; das ist eine Sache, mit der ich mich abgefunden habe, auch wenn sie mich manchmal noch stört. Ich wollte nur darauf hinweisen, damit nicht der gleiche "Fehler" an einer anderen Stelle erneut gemacht wird.

                  Ja, die Anker müssen sein. Aber ein einfaches UserJS könnte helfen

                  $('html, body').animate({ scrollTop: ($('html').offset().top)}, 0);
                  

                  Was soll das bewirken? Dass die Seite an den Anfang scrollt? Wann? Auf welches Ereignis hin?

                  Und nein, ein Scrollen zum Seitenanfang ist ja eben nicht das, was man möchte - jedenfalls nicht beim Refresh. Da soll die Seite an exakt der Scroll-Position stehenbleiben, wo sie gerade steht.

                  So long,
                   Martin

                  1. Aloha ;)

                    Ja, die Anker müssen sein. Aber ein einfaches UserJS könnte helfen

                    $('html, body').animate({ scrollTop: ($('html').offset().top)}, 0);
                    

                    Was soll das bewirken? Dass die Seite an den Anfang scrollt? Wann? Auf welches Ereignis hin?

                    Stimmt, das löst das Problem nicht, sondern verschiebt es nur (daraufhin, dass nicht mehr unerwünscht auf das Anfang des Postings, dafür aber (immer) unerwünscht auf den Seitenanfang gescrollt wird).

                    Wie wäre es aber im User-JS mit

                    window.addEventListener('load',function(){
                       if (location.hash != '') {
                          location.hash = '';
                       }
                    });
                    

                    Das veranlasst meinen Chrome (wie es in deinem Opera ist weiß ich nicht) zwar direkt zu einem Sprung auf den Seitenanfang, allerdings ohne neues Laden der Seite und nur einmalig dann, wenn ein Anker gesetzt war - danach ist dafür aber der Anker nicht mehr gesetzt und du kannst nach Belieben und vollkommen ohne Sprünge neu laden. Um den erstmaligen Sprung noch unauffälliger zu gestalten könntest du evtl. auch auf addEventListener verzichten und das Innere der Funktion direkt ausführen lassen; mWn sollte schon vor dem vollständigen Laden des Window alles da sein, was du für location.hash benötigst; und damit findet der Sprung u.U. sogar schon statt, bevor du ihn überhaupt bemerken kannst.

                    Wenn du die Funktionalität wirklich nur für Postings haben möchtest könntest du im if noch zusätzlich prüfen, ob location.hash mit einem "m" beginnt und ob das, was nach dem "m" kommt, mit dem Ende von location.pathname übereinstimmt - das ist ohne großen Aufwand möglich.

                    Aber dann bitte in Zukunft die Anker dann wieder manuell anhängen, wenn du im Forum was verlinkst, nicht dass ich noch bereue dir diesen Rat gegeben zu haben ;)

                    Grüße,

                    RIDER

                    --
                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                    1. Hallo Camping_RIDER,

                      Aber dann bitte in Zukunft die Anker dann wieder manuell anhängen, wenn du im Forum was verlinkst, nicht dass ich noch bereue dir diesen Rat gegeben zu haben ;)

                      Eben.

                      Bis demnächst
                      Matthias

                      --
                      Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                  2. Hallo Der Martin,

                    Du schriebst:

                    So scrollt das Fenster nämlich bei jedem Refresh (F5) wieder an den Anfang des Posting-Textes, obwohl ich extra schon nach unten gescrollt habe und eigentlich sehen wollte, ob im Threadbaum was Neues dazugekommen ist.

                    Liest sich für mich, du willst nach einem Refresh beim Threabaum landen.

                    Sieh
                    $('html, body').animate({ scrollTop: ($('html').offset().top)}, 0);
                    als Arbeitsgrundlage.

                    Der Threadbaum ist ein div-Element der Klasse root.
                    $('html, body').animate({ scrollTop: ($('div.root').offset().top)}, 0);
                    srollt zum Threadbaum.

                    Du könntest per JavaScript einen URL-Parameter an die gewünschten Links anhängen, etwa:
                    …/meta/2015/dec/12/seitenkopf-mobil/1656918?myjs=scrolltoroot#m1656918
                    und falls der URL-Parameter (der bei anderen keinen Schaden anrichtet) in der URL enthalten ist, obige Zeile beim Laden ausführen.

                    Bis demnächst
                    Matthias

                    --
                    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                    1. Moin,

                      Du schriebst:

                      So scrollt das Fenster nämlich bei jedem Refresh (F5) wieder an den Anfang des Posting-Textes, obwohl ich extra schon nach unten gescrollt habe und eigentlich sehen wollte, ob im Threadbaum was Neues dazugekommen ist.

                      Liest sich für mich, du willst nach einem Refresh beim Threabaum landen.

                      nein, das war nur ein Beispiel. Ich möchte nach dem Refresh wieder da landen, wo ich auch vorher war. Egal, an welcher Position das im Einzelfall ist.

                      Du könntest per JavaScript einen URL-Parameter an die gewünschten Links anhängen, etwa:
                      …/meta/2015/dec/12/seitenkopf-mobil/1656918?myjs=scrolltoroot#m1656918
                      und falls der URL-Parameter (der bei anderen keinen Schaden anrichtet) in der URL enthalten ist, obige Zeile beim Laden ausführen.

                      Klar, ich kann mir auch ein Loch ins Knie bohren, ein Feingewinde reinschneiden und mit der Schraube den Schmerz regulieren. ;-)

                      Aber ehrlich gesagt, erscheint mir das alles gemessen am möglichen Erfolg zu viel Aufwand. Sozusagen mit Elefanten auf Mücken geschossen. Da lass ich es lieber so wie es ist, und muss halt ab und zu von Hand wieder dorthin scrollen, wo ich hin will.

                      So long,
                       Martin

                      1. Hallo Der Martin,

                        Da lass ich es lieber so wie es ist, und muss halt ab und zu von Hand wieder dorthin scrollen, wo ich hin will.

                        Oder das.

                        Bis demnächst
                        Matthias

                        --
                        Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                        1. Hallo,

                          Da lass ich es lieber so wie es ist, und muss halt ab und zu von Hand wieder dorthin scrollen, wo ich hin will.

                          Oder das.

                          Aber der Vorschlag mit dem Feingewinde hatte auch was...

                          Gruß
                          Kalk

    2. Hallo,

      Die Logo-Grafik wird halt auf 100% Breite skaliert, wenn du ein geringer auflösendes Telefon hast, dann ist das Logo insgesamt kleiner. Vielleicht sollte man dafür nochmal einen Breakpoint einfügen, wo nur 80% der Breite benutzt wird oder so.

      Wie wärs, wenn der Text "die Energie des Verstehens" zweizeilig neben dem Selfhtml stünde?

      Gruß
      Kalk

      1. Hallo Tabellenkalk,

        Die Logo-Grafik wird halt auf 100% Breite skaliert, wenn du ein geringer auflösendes Telefon hast, dann ist das Logo insgesamt kleiner. Vielleicht sollte man dafür nochmal einen Breakpoint einfügen, wo nur 80% der Breite benutzt wird oder so.

        Wie wärs, wenn der Text "die Energie des Verstehens" zweizeilig neben dem Selfhtml stünde?

        Ich bin hier nicht für die Grafik, aber ich würde meinen, dass das ein Problem mit der Marke gibt in dem Sinne, dass der @Performer ja versucht hier eine Marke zu etablieren. Der selfhtml\nDie Energie des Verstehens-Teil findet sich ja quasi überall wieder (nur das Weblog müssen wir nochmal angehen, das wird zur Zeit mangels Arbeitskraft etwas stiefmütterlich behandelt).

        Ich bin nicht sicher, ob „Marke“ der richtige Begriff ist, aber ihr wisst sicher, was ich meine.

        LG,
        CK

  2. Hallo marctrix,

    Denkbar wäre auch:

    • die türkise Leiste nicht anzuzeigen
    • (EDIT) das Logo etwas kleiner zu machen
    • die Reihenfolge page-header, main, personal-links zu wählen

    Bis demnächst
    Matthias

    --
    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)