Matthias Apsel: Offizielle Ankündigung eines überarbeiteten Forumsdesigns

Seit der Mitgliederversammlung im Oktober hat sich einiges getan. Als äußeres Zeichen dieser Veränderung werden einige Seiten des Angebots von SELFHTML, darunter auch das Forum, ein neues Design bekommen. Dies dürfte den meisten von euch bekannt sein, da es schon in mehreren Threads, zuletzt im Weihnachtsbrief oder auch in thread 212400&m=1450591#m1450591 ff. bzw. thread 212397 thematisiert wurde.

Es wurden Änderungen am CSS sowie an der Struktur des HTML vorgenommen, sodass ggf. Userstylesheets und JavaScripte ins Leere laufen. Ihr könnt das neue Design schon jetzt in der devel-Ansicht sehen.

Benutzer-Einstellungen -> Expertenoptionen -> xhtml 1.0 (devel)

Es wäre sinnvoll alle eigenen CSS- und JS-Einstellungen zunächst zu deaktivieren, um dem Design eine Chance zu geben.

Die Umstellung wird nächste Woche geschehen. Wir hoffen, dass es zu keinen größeren Problemen kommt, weil wir beispielsweise eine ganze Reihe von Dingen nicht testen konnten, etwa das Aussehen und Verhalten für unangemeldete Leute.

Im SELFHTML-Wiki gibt es deshalb unter http://wiki.selfhtml.org/wiki/SELFHTML:Aktuelle_Ereignisse/neues_Forumsdesign eine Sammelstelle für Anregungen, Kritik, Fehlermeldungen und Featurewünschen geschaffen. Das Wiki hat gegenüber etwa trello oder github den Vorteil, dass jeder schreiben darf und automatisch eine Versionierung erfolgt.

Matthias

  1. Ich möchte nicht versäumen, mich bei Performer zu bedanken, der viel Zeit in das Layout investiert hat.

    Matthias

    1. [latex]Mae  govannen![/latex]

      Ich möchte nicht versäumen, mich bei Performer zu bedanken, der viel Zeit in das Layout investiert hat.

      Dem Dank für die sicherlich nicht unerhebliche Arbeit schließe ich mich hiermit an.

      Stur lächeln und winken, Männer!
      Kai

      --
      var jQuery = $(hit);
      „Die Borg würden nicht mal Spaß verstehen, wenn sie einen Vergnügungspark assimiliert hätten!” (B'Elanna Torres)
      SelfHTML-Forum-Stylesheet
    2. Lieber Matthias Apsel,

      Ich möchte nicht versäumen, mich bei Performer zu bedanken, der viel Zeit in das Layout investiert hat.

      das ist auf jeden Fall zu würdigen. Da schließe ich mich dem Dank mit einem Lob verbunden an.

      Aktuell genieße ich die devel-Ansicht. Dabei ist mir aufgefallen, dass ich fast eine Bildschirmhöhe abwärts scrollen muss, bis ich an die aufgelisteten Threads gelange. Sicherlich ist das nur vor dem Wechsel so? Diese Dinge, die im Moment noch in einer Tabelle gelayoutet werden, wandern doch bestimmt an irgendeinen (wahrscheinlich den rechten) Rand...

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      1. Om nah hoo pez nyeetz, Felix Riesterer!

        Diese Dinge, die im Moment noch in einer Tabelle gelayoutet werden, wandern doch bestimmt an irgendeinen (wahrscheinlich den rechten) Rand...

        eigentlich sollte da keine Tabelle sein.

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. Lieber Matthias Apsel,

          eigentlich sollte da keine Tabelle sein.

          mein Fehler, ich habe nicht in das Dokument geschaut, sondern bin von der "alten" Struktur ausgegangen.

          Das Element <div id="beschreibung"> möchte ich im Idealfall nur einmal sehen, danach sollte es per Cookie/Session bis auf erneute Anforderung ausgeblendet bleiben, damit ich schneller an die eigentlichen Links zu den Postings gelange - von mir aus mit JavaScript/CSS.

          Ebenso könnte ich mir die "Quicklinks" an der rechten Seite vor den Mitteilungen vorstellen, um die Posting-Links noch weiter nach oben zu bringen. Alternativ verschiebt man die Quicklinks mit der oben genannten Beschreibung in ein Klapp-Menü oder ähnliches.

          Was meinst Du dazu?

          Liebe Grüße,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
          1. Om nah hoo pez nyeetz, Felix Riesterer!

            Was meinst Du dazu?

            In diesem <del>Leben</del><ins>Facelift</ins> nicht mehr. Aber im neuen Forum haben wir noch überhaupt keine Design-Ideen.

            Matthias

            --
            1/z ist kein Blatt Papier.

          2. Hallo Felix,

            Das Element <div id="beschreibung"> möchte ich im Idealfall nur einmal sehen, ...

            ja, nur leider steckt da auch der Link zum Erstellen eines neuen Postings drin. Das ist etwas unglücklich strukturiert.

            Ebenso könnte ich mir die "Quicklinks" an der rechten Seite vor den Mitteilungen vorstellen, um die Posting-Links noch weiter nach oben zu bringen. Alternativ verschiebt man die Quicklinks mit der oben genannten Beschreibung in ein Klapp-Menü oder ähnliches.

            Ich habe für mich auch einige Elemente ausgeblendete bzw. anders angeordnet, um im Kopfbereich etwas Platz zu sparen. Zuerst habe ich die oben fixierte Leiste oben (div#top) weggenommen und das damit korrelierende padding-top für das html-Element eliminiert. Dann auch noch div#kopf entsorgt und das neue selfhtml-Logo stattdessen als rechts ausgerichtetes Hintergrundbild in div#side-menu gesteckt. Dann habe ich diesen div-Container "entfloatet", die darin enthaltenen Überschriften ausgeblendet, die ul-Container zu inline und die li-Elemente zu inline-block gemacht. Die Links werden nun nur noch durch Icons visualisiert; die Text-Beschriftung habe ich mit einem großzügigen negativen text-indent ins Off geschoben, und schließlich dem div#beschreibung sein margin-left auf 0 gesetzt.

            Man könnte nun aus dem div#aside noch das eine oder andere Element rausnehmen; ich habe z.B. den Themenfilter entsorgt. Und so ist der ganze Kopfbereich bei mir "nur noch" etwa 400px hoch.

            Vielleicht magst du das als Anregung für eigene Entwürfe nehmen; wenn du möchtest, kannst du auch mit meinem Stylesheet (still under construction) starten und von da aus weiterbauen. Lass mal gelegentlich hören, was du daraus gemacht hast.

            So long,
             Martin

            --
            Zwischen Leber und Milz
            passt immer noch'n Pils.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Om nah hoo pez nyeetz, Der Martin!

              Ich habe für mich auch einige Elemente ausgeblendete bzw. anders angeordnet, ...

              Zeig mal ein Bild, bitte. Vor allem die Symbole interessieren mich. Auch wenn den Stylesheet sicher nicht für Erstbesucher geeignet ist, klingt es interessant.

              Matthias

              --
              1/z ist kein Blatt Papier.

              1. Hallo Matthias,

                verdammt, jetzt habe ich schon wieder die Vorschau aufgerufen und in dem Glauben, ich hätte das Posting abgeschickt, das Browser-Tab geschlossen. Hmpf.

                Ich habe für mich auch einige Elemente ausgeblendete bzw. anders angeordnet, ...
                Zeig mal ein Bild, bitte. Vor allem die Symbole interessieren mich. Auch wenn den Stylesheet sicher nicht für Erstbesucher geeignet ist, klingt es interessant.

                et voilà: Screenshot (233k PNG)
                Über die Icons kann man natürlich noch diskutieren; das waren die erstbesten, die mir gestern bei der Suche als "einigermaßen brauchbar" vor die Flinte kamen.

                Ciao,
                 Martin

                --
                Alleine sind wir stark ...
                gemeinsam sind wir unausstehlich!
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                1. Hi,

                  et voilà: Screenshot (233k PNG)

                  die Thread-Liste finde ich gut, vor allem die Themen ohne Klammern.

                  Alles andere ertrage ich tapfer. :-D

                  Ciao, Performer

          3. Moin,

            Ebenso könnte ich mir die "Quicklinks" an der rechten Seite vor den Mitteilungen vorstellen, um die Posting-Links noch weiter nach oben zu bringen. Alternativ verschiebt man die Quicklinks mit der oben genannten Beschreibung in ein Klapp-Menü oder ähnliches.

            Per User-CSS und Javascript-Datei lassen sich dort ja großartig manuelle Änderungen vornehmen. Ich beispielsweise blende die ganzen Divs oben per CSS aus und generiere mir einen Javascript-Button, der mir selbige im Bedarfsfall wieder herholt:

            [CSS]
            #kopf, #side-menu, #aside, #beschreibung { display:none; }

            [Javascript]

            var x = document.createElement("input");  
            x.onclick = function(){  
            	var chgTo;  
            	var curDiv=document.getElementById('kopf');  
            	if(curDiv.style.display=='none')  
            		chgTo = 'block';  
            	else  
            		chgTo = 'none';  
            	curDiv.style.display=chgTo;  
            	curDiv=document.getElementById('side-menu');  
            	curDiv.style.display=chgTo;  
            	curDiv=document.getElementById('beschreibung');  
            	curDiv.style.display=chgTo;  
            	curDiv=document.getElementById('aside');  
            	curDiv.style.display=chgTo;  
            };  
            x.value ='Kopf anzeigen';  
            x.type = 'button';  
              
            window.onload = function(){  
            document.body.insertBefore(x, document.getElementById('kopf'));  
            };
            

            Ergebnis:
            Screenshot vom Forum

            Grüße Marco

            1. [latex]Mae  govannen![/latex]

              Per User-CSS und Javascript-Datei lassen sich dort ja großartig manuelle Änderungen vornehmen. Ich beispielsweise blende die ganzen Divs oben per CSS aus und generiere mir einen Javascript-Button, der mir selbige im Bedarfsfall wieder herholt:

              [...]

              var curDiv=document.getElementById('kopf');
              if(curDiv.style.display=='none')
              chgTo = 'block';
              else
              chgTo = 'none';
              curDiv.style.display=chgTo;
              curDiv=document.getElementById('side-menu');
              curDiv.style.display=chgTo;
              curDiv=document.getElementById('beschreibung');
              curDiv.style.display=chgTo;
              curDiv=document.getElementById('aside');
              curDiv.style.display=chgTo;

                
              Es wäre einfacher, einem gemeinsamen Vorfahren eine Klasse (sagen wir mal "kompakt") zu geben/nehmen, dann könntest du das ganze Style-Geraffel entsorgen und einfach im CSS schreiben  
                
              ~~~css
              .kompakt #side-menu,  
              .kompakt #beschreibung,  
              .kompakt #kopf {  
                  display: none;  
              }
              

              Stur lächeln und winken, Männer!
              Kai

              --
              var jQuery = $(hit);
              Wir sind die Schlumpf. Widerschlumpf ist schlumpflos. Wir werden Sie einschlumpfen.
              SelfHTML-Forum-Stylesheet
              1. Moin,

                Es wäre einfacher, einem gemeinsamen Vorfahren eine Klasse (sagen wir mal "kompakt") zu geben/nehmen, dann könntest du das ganze Style-Geraffel entsorgen und einfach im CSS schreiben

                .kompakt #side-menu,

                .kompakt #beschreibung,
                .kompakt #kopf {
                    display: none;
                }

                  
                Ich verstehe nicht ganz: Einen gemeinsamen Vorgänger, der nur die Kopf-Elemente einfasst gibt es nicht, den müsste man erst hinbasteln. Das halte ich für unsinnig.  
                  
                Und mein CSS sieht ja auch recht einfach aus. Nur das Javascript für den "Kopf anzeigen"-Button ist wahrscheinlich noch verbesserbar. Da JQuery ja standardmäßig eingebunden wird, wäre es vielleicht sinnvoll mit .toggle() zu arbeiten.  
                  
                Grüße Marco
                
                1. Om nah hoo pez nyeetz, misterunknown!

                  .kompakt #side-menu,

                  .kompakt #beschreibung,
                  .kompakt #kopf {
                      display: none;
                  }

                  
                  >   
                  > Ich verstehe nicht ganz: Einen gemeinsamen Vorgänger, der nur die Kopf-Elemente einfasst gibt es nicht, den müsste man erst hinbasteln. Das halte ich für unsinnig.  
                    
                  Der Vorgänger darf durchaus auch andere Elemente enthalten.  
                    
                  Matthias
                  
                  -- 
                  1/z ist kein Blatt Papier.  
                  ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
                  
                  
                  1. Moin,

                    Der Vorgänger darf durchaus auch andere Elemente enthalten.

                    Ja, aber wo ist der wesentliche Unterschied zwischen:

                    .kompakt #side-menu, .kompakt #beschreibung, .kompakt #kopf { display: none; }

                    und

                    #side-menu, #beschreibung, #kopf { display:none; }

                    Es ist doch der gleiche Effekt, nur dass bei der ersten Version mehr dasteht, oder? Oder bin ich gerade extrem schwer von Begriff?

                    Grüße Marco

                    1. Hallo,

                      Ja, aber wo ist der wesentliche Unterschied zwischen:

                      .kompakt #side-menu, .kompakt #beschreibung, .kompakt #kopf { display: none; }

                      und

                      #side-menu, #beschreibung, #kopf { display:none; }

                      Es ist doch der gleiche Effekt, nur dass bei der ersten Version mehr dasteht, oder?

                      nein, es gibt einen wesentlichen Unterschied - nämlich dann, wenn du z.B. dem body-Element die Klasse "kompakt" dynamisch zuweist und bei Bedarf wieder wegnimmst. Dann kannst du den Ausblend-Effekt steuern.

                      Ciao,
                       Martin

                      --
                      Früher habe ich mich vor der Arbeit gedrückt. Heute könnte ich stundenlang zusehen.
                      Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                      1. Moin,

                        nein, es gibt einen wesentlichen Unterschied - nämlich dann, wenn du z.B. dem body-Element die Klasse "kompakt" dynamisch zuweist und bei Bedarf wieder wegnimmst. Dann kannst du den Ausblend-Effekt steuern.

                        Stimmt, danke :) Ich sah den Baum vor lauter Wäldern nicht.

                        Grüße Marco

                        1. Moin,

                          ich habe jetzt mein CSS so geändert, dass wenn der Body die Klasse .kompakt bekommt, die Kopf-Divs ausgeblendet werden. Auch das Javascript habe ich dahingehend verändert. Ich nutze jetzt  JQuery-Funktionen. Soweit funktioniert alles, aber nur zur Sicherheit: Habe ich die Kontextwechsel (bei onclick=) korrekt beachtet? Ich habe keine Ahunung, ob JQuery im Gegensatz zu Javascript an sich bestimmte Anführungszeichen verlangt:

                          $(document).ready(function() {  
                            $("body").addClass("kompakt");  
                            $("body").prepend('<input id="switchHead" type="button" onclick="$(\'body\').toggleClass(\'kompakt\');" value="Kopf anzeigen" />');  
                          });
                          

                          Grüße Marco

                          1. Lieber misterunknown,

                            $("body").prepend('<input id="switchHead" type="button" onclick="$(\'body\').toggleClass(\'kompakt\');" value="Kopf anzeigen" />');

                            dessen Sichtbarkeit könnte man auch über diese Klasse steuern...

                            Liebe Grüße,

                            Felix Riesterer.

                            --
                            ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
                            1. Moin,

                              dessen Sichtbarkeit könnte man auch über diese Klasse steuern...

                              Stimmt. Danke :)

                              Grüße Marco

                    2. [latex]Mae  govannen![/latex]

                      Ja, aber wo ist der wesentliche Unterschied zwischen:

                      .kompakt #side-menu, .kompakt #beschreibung, .kompakt #kopf { display: none; }

                      und

                      #side-menu, #beschreibung, #kopf { display:none; }

                      Es ist doch der gleiche Effekt, nur dass bei der ersten Version mehr dasteht, oder? Oder bin ich gerade extrem schwer von Begriff?

                      Scheint so ;)

                      Bei der zweiten Version sind die Elemente _immer_ ausgeblendet, bei der ersten nur dann, wenn ein Vorgänger die Klasse kompakt hat. Entfernt man diese, werden die Elemenete wieder sichtbar.

                      Stur lächeln und winken, Männer!
                      Kai

                      --
                      var jQuery = $(hit);
                      „Die Borg würden nicht mal Spaß verstehen, wenn sie einen Vergnügungspark assimiliert hätten!” (B'Elanna Torres)
                      SelfHTML-Forum-Stylesheet
  2. Wir werden über einen Zeitraum von etwa 4 Wochen Änderungswünsche im Wiki sammeln. Der Zeitraum ist deshalb so gewählt, dass man auch seinen ersten Eindruck noch revidieren kann. *g* (Gib dem Design eine Chance)

    Dann werden wir feststellen, für welche Sachen sich eine Mehrheit herausgebildet hat. Die vorgenommenen Änderungen werden wir dann dort im Wiki dokumentieren, sodass jeder ggf. sein Userstylesheet anpassen kann.

    Tatsächliche Fehler werden möglichst umgehend behoben.

    Die Benutzerfreundlichkeit und Barrierearmut wird gefördert.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Moin Matthias,

      als jemand, der sich schon im letzten Jahrtausend <g> an das Layout hier gewöhnt hat, war ich erstmal skeptisch, als ich "neues Design" gelesen habe.

      Ich habe aber gerade mal auf die Developer-Ansicht umgestellt und muss sagen: mir gefällt's auf Anhieb sehr gut!

      Nur ein Punkt ist mir unangenehm aufgefallen: beim Fernsehen sitze ich zurückgelehnt auf der Couch, der Laptop steht ca. 1,5m vor mir und somit wird die Standardschrift natürlich zu klein - also nutze ich die Zoom-Funktion des Browsers(FF 18.0.1)...

      Im alten Design klappt das wunderbar, es wird immer ein passender Zeilenumbruch gemacht, zoome ich im neuen aber mal extrem rein, verschwindet der Text der Postings am rechten Bildschirmrand, es ist wohl eine feste Breite oder eine Mindestbreite angegeben.

      Da du es ja gerade erwähnst:

      Die Benutzerfreundlichkeit und Barrierearmut wird gefördert.

      gerade für diese beiden Punkte ist das sicherlich eine Verschlimmbesserung (bei mir kein Problem, ich komme auch mit etwas kleinerer Schrift noch gut klar, aber für extrem Sehbehinderte dürfte das schon wichtig sein).

      Glück auf
      Dirk

      1. Om nah hoo pez nyeetz, Dirk Ruchatz!

        Im alten Design klappt das wunderbar, es wird immer ein passender Zeilenumbruch gemacht, zoome ich im neuen aber mal extrem rein, verschwindet der Text der Postings am rechten Bildschirmrand, es ist wohl eine feste Breite oder eine Mindestbreite angegeben.

        Ja, notwendig für die nested-Ansicht. In der Thread-Ansicht könnte man drauf verzichten. Magst du es ins Wiki tragen, damit es nicht vergessen wird?

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. Moin Matthias,

          Magst du es ins Wiki tragen, damit es nicht vergessen wird?

          ist drin...

          Aber, wie gesagt, es ist nur ein Kritikpunkt bei einem ansonsten sehr gelungenen Redesign :-)

          Glück auf
          Dirk

  3. Folgende Ergänzungen werden Eingang in das neue Forumsdesign finden:

    • grafische Veranschaulichung der Postinghierarchie
    • Hervorhebung von Codeblöcken

    Beides kann man bereits live sehen, wenn man in seinen Benutzer-Einstellungen unter Experten-Optionen das ergänzende eigene Stylesheet "http://selfhtml.apsel-mv.de/test/neuigkeiten.css" sowie das JavaScript "http://selfhtml.apsel-mv.de/test/br-finden.js" einstellt.

    Zudem wird die fehlerhafte Positionierung der Sprungmarken bei den Benutzereinstellungen korrigiert.

    Änderungen an der HTML-Struktur zwischen der jetzigen devel-Version und der dann neuen Standard-Version wird es nicht geben.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Tach!

      Folgende Ergänzungen werden Eingang in das neue Forumsdesign finden:

      <del>Futur</del><ins>Perfekt</ins>

      • grafische Veranschaulichung der Postinghierarchie
      • Hervorhebung von Codeblöcken

      Beides kann man bereits live sehen, wenn man in seinen Benutzer-Einstellungen unter Experten-Optionen das ergänzende eigene Stylesheet "http://selfhtml.apsel-mv.de/test/neuigkeiten.css" sowie das JavaScript "http://selfhtml.apsel-mv.de/test/br-finden.js" einstellt.

      Braucht's nicht mehr.

      Änderungen an der HTML-Struktur zwischen der jetzigen devel-Version und der dann neuen Standard-Version wird es nicht geben.

      Hat es aber doch geringfügig gegeben, weil im Kopf drei Sachen geändert wurden.

      • "Neue Nachricht" gibt's nun auch unter Optionen im linken Menü. In der Mitte hab ich ihn gelassen, nicht dass ihn die "Betriebsblinden" nicht mehr finden ...
      • In den "Tipps zum Forum" auf der rechten Seite ist die allgemeine Mail-Adresse durch einen Verweis zu einer Tipps-und-Tricks-Wiki-Seite ausgetauscht worden, auf der Snippets für das User-Stylesheet (und -JS) gesammelt werden.
      • Die allgemeine Mailadresse ist dafür in die Mitte gewandert.

      dedlfix.

      1. Hi,

        • In den "Tipps zum Forum" auf der rechten Seite ist die allgemeine Mail-Adresse durch einen Verweis zu einer Tipps-und-Tricks-Wiki-Seite ausgetauscht worden, auf der Snippets für das User-Stylesheet (und -JS) gesammelt werden.

        Wenn du jetzt noch ein Leerzeichen einfügst, bin ich mit einverstanden. ;-)

        SELFHTML:Forum/Tipps und Tricks
                ^^

        Ciao, Performer

        1. Hi,

          vor laute Leerzeichen habe ich nicht wirklich nachgedacht. Textvorschlag:

          Tipps und Tricks für die individuelle Ansicht des Forums sammeln wir im [ Wiki ].

          Ciao, Performer