openhsr/www.openhsr.ch

Verbesserungen Layout vor Onlinegang

fabianhauser opened this issue · 17 comments

Was im aktuellen Design auf jeden Fall vor einer Aufschaltung angegangen werden sollte:

  • Haupt- und/oder Subnavigation soll mitscrollen (--> praktisch für lange Seiten) => Einklappbarer Content
  • Bei den Dokus sollten Ubuntu / OSX Anleitungen aufklappbar sein
  • "Back to Top" Link am Seitenende o.ä.
  • min-length für Dropdown menü (--> damit es nicht so "abgehackt" aussieht
  • Favicon
  • Tabellen, z.B. im styleguide
  • Subnavigation, z.B. bei E-Mail
  • Grundlayout
  • Navigation
  • Tabellen
  • Definition Lists
  • Code Tag
    • Graue Farbe für Kommentare (siehe hier)
  • Figures / Image Caption
  • Umschreiben in Jekyll Template
  • Inline-Codes im Styleguide sind nicht mehr Inline
  • Das Logo ist noch auf der Seite etwas abgeschnitten (Original)
  • Responsive Design
  • Buttons für Apt-Links
  • Kein Shadow für Smilies (Siehe hier)
  • Formatierung für Blockquotes (Auch hier)
  • Margin ca. 1rem nach p, Siehe auch 1 und 2
  • Produziere valides HTML
  • Github Icon

Falls irgendwem was auffällt, bitte gleich hier ^ in die Liste reinschreiben.

Wenn jemand Zeit und Lust hat, was ausführliches zu machen, das hier wäre evtl. einen Blick wert. Das war mal für den VSHSR angedacht, wurde aber irgendwie nie realisiert...

Im neuen Branch "template_preview" findet ihr eine statische Seite welche als Vorlage für das effektive Template dienen soll. Inputs eurerseits sind erwünscht :)

Super! Das layout find ich super! Merci!

Für mich ist das Banner - speziell bei Dokumentationen - zu domminant. Vorallem weil wir die ganze Mitgliederschaft ja noch im Detail anschauen müssen.

Auch müssen wir uns Fragen ob wir wirklich News machen - für den Anfang würde ich beim Vorschlag von @fabianhauser für die Landingpage bleiben.

Mir gefällt das Design auch sehr gut! Habe es gerade schnell in ein Template umgewandelt 😉

Das Banner ist tatsächlich relativ dominant. Habe es beim übernehmen vom statischen Design auf der Home-Seite gelassen, aber sonst rausgenommen, sieht IMHO nicht so schlecht aus. Evtl. können wir ja den Button auf "Jetzt Mithelfen" mit dem Ziel http://altcomp.raphael.li/contribute/ ändern?

Ein paar Sachen sind mir gerade noch aufgefallen:

  • Ich würde Dokumentationen und Programme in der Sidebar genau in der umgekehrten Reihenfolge einfügen; vermutlich haben wir ja mehr Programmseiten als Dokumentationen.
  • Was denkt ihr, sollen wir die Sidebar auf der Startseite und auf allgemeinen Seiten wie z.B. Styleguide einbinden, oder nur eine minimalistische Landingpage gemäss meinem Vorschlag in #6 erstellen?

Looking good. Besten Dank! Habe gerade noch einige Fixes reingemacht. Nun sollte alles wieder einigermassen sauber aussehen. (a2b6a79)

Die Installation via Apt-Links wie in Issue #7 wäre etwas schicker mit Buttons - Analog zum Ubuntuusers-Wiki

@raphiz und @michiwieland : Ich habe mir stinkfrech erlaubt, eure Checkliste in meinen ersten Kommentar zu verfrachten, damit wir hier nicht die Übersicht im Kommentarjungle verlieren.
Hoffe das ist OK :)

Falls noch was auffällt: Feel free to Edit!

Wäre es nicht sinnvoller das Twitter Icon durch ein Github icon zu ersetzen?
Der Twitter-Account ist...nicht wirklich sehr informativ 😄

Das mit dem Twitter Account kann ja noch werden 😉
Aber ein Github Icon fände ich in der Tat auch eine gute Idee! Hab's mal in die Liste geschrieben.

Die Sache mit dem validen HTML habe ich als erledigt markiert. Es werden nur noch Warnungen angezeigt, welche aus Kompatibilitätsgründen ratsam sind oder es geht um die Hinweise bezüglich den Headings. (IMHO, vernachlässigbar). Puristen dürfen das aber gerne selber angehen 😉

Ich hätte noch einen Vorschlag bezüglich den Überseiten "Programme" "Community" und "Dokumenationen". Meiner Meinung nach wäre es gut, die Unterseiten in der Sidebar analog der Tutorial Seiten anzuzeigen - damit wären diese auch immer mit Sicherheit via Mobile Geräte erreichbar und es ist etwas übersichtlich, als diese im Text suchen zu müssen wie bsp. bei Community.

Was meint ihr?

Stimmt, diese Seiten sind jetzt auf einem Mobile Device gar nicht direkt erreichbar...
Anstatt der Sidebar (welche relativ viel Platz braucht, auch auf dem Desktop) könnten wir sonst auch die Subnavigation anzeigen?

Grundsätzlich ist beides möglich. Wie ihr denke ich auch, dass die Seiten schnell erreichbar sein müssen. Die Subnavi war sogar bereits schon einmal drin. Die haben wir dann aber zugunsten der Übersicht wieder entfernt :)

Habe noch zwei Punkte hinzugefügt bzgl. Nutzerfreundlichkeit
mitscrollende navigation und "back to Top" link
sowie min-length für die Dropdown menüs
ansonsten: tolles design thumps up

Ich denke wir können uns die fixe Sidebar und Navigation sparen. @fabianhauser hat tolle einklappbare Sektionen erstellt, welche die Seite genügend kompakt halten.
Was meint ihr?
Des Weiteren habe ich die Sidebar in der mobilen Ansicht wieder unter den eigentlichen Inhalt verschoben. Da der Inhalt der Sidebar in Zukunft stetig wachsen wird, befürchte ich, dass der Benutzer durch die lange Liste nur abgelenkt wird, bevor er es überhaupt zum eigentlichen Inhalt schafft.

Ja, das ist auf deutlich übersichtlicher! 👍
Die Frage ist, ob wir die Auflistungen der Programme und Dokus überhaupt zusätzlich auf Mobile Devices brauchen? Sonst könnten wir die TOC vor den Inhalt nehmen und die Auflistungen nach /display/none verbannen, die Subnavigation im Menü hast du ja für's Mobile fit gemacht 😉

Ja, da bin ich auch deiner Meinung. Werde das noch anpassen..

@michiwieland @fabianhauser ich würde dieses Issue zumachen wenn wir soweit fertig sind - dann können wir für alles weitere neue Tickets erstellen!

Dazu noch ein grosses Dankeschön! Super arbeit 👍