WBCE CMS Forum

rjgamer

Developer

Neoflow im neuen Gewand

Im Mai 2019 haben wir uns entschieden die Entwicklung des Everst CMS einzustellen und wenn möglich ProcessWire als Content Management System für neue Webseiten einzusetzen. Um mit ProcessWire vertiefte Erfahrungen sammeln zu können, haben wir daher als erstes unsere eigene Webseite neugestaltet.

Mehr erfahren: https://www.neoflow.ch/aktuelles/unsere … st-online/

PS: Selbstverständlich bieten wir immer noch Leistungen für WBCE an. Aber nur dann wenn vom Kunden/Auftraggeber explizit erwünscht.

Beitrag geändert von rjgamer (09.09.2019 18:56:09)

---

Neoflow | Fraggy Backend Theme

florian

Administrator

Re: Neoflow im neuen Gewand

Schön, auch der Quellcode sieht sauber aus (aber da ist WBCE auch auf einem guten Weg).
Ernst gemeinte Fragen:
Wie lange hast Du / habt Ihr gebraucht, Templates und Module bzw. das, was bei PW für den Output sorgt, zu programmieren?
Würden auch Redakteure, die technisch nicht ganz so versiert/affin sind, mit der Bearbeitung der Inhalte zurechtkommen?

Inhaltlich bzw. grammatikalisch:
Ich mag ja diese Auseinander Schreibung nicht so. Vong die Oddograffie her heißt sich das: "Webdesign", "Grafik- und Webdesign", "Designkollektiv", "Produktdesign" usw., auch wenn das SEO-mäßig vielleicht nachteilig ist.

& da fehlt imho ein "Dich":
"oder informiere * unter Aktuelles, was"

---

Code allein macht nicht glücklich. Jetzt spenden!

rjgamer

Developer

Re: Neoflow im neuen Gewand

Schön, auch der Quellcode sieht sauber aus (aber da ist WBCE auch auf einem guten Weg).

Mein Quellcode sieht immer gut aus.

Wie lange hast Du / habt Ihr gebraucht, Templates und Module bzw. das, was bei PW für den Output sorgt, zu programmieren?

Lange, sehr lange. Aber auch weil es das erste Webprojekt war und ich mehrmals von vorne anfing. Von der Idee her ist das CMS aber sehr einfach. Man muss aber der englischen Sprache mächtig sein und sich mind. 2-3 Stunden Zeit nehmen um die ersten paar Anleitungen und Tutorials zu lesen. Sobald man das Prinzip verstanden hat, kommt man aber schnell rein. Auch weil die komplete API bis ins Detail beschrieben ist.

Beim nächsten Webprojekt werde ich aber um einiges weniger lang brauchen, weil ich nun das CMS sehr ausgiebig kennengelernt habe. Cool an PW ist, dass man garkeine Module braucht und sich im Adminbereich die Seiteninhalte in Form von Templates dynamisch zusammenstellen muss.

Würden auch Redakteure, die technisch nicht ganz so versiert/affin sind, mit der Bearbeitung der Inhalte zurechtkommen?

Das UI ist sehr intuitiv. "Noobs" werden sich genaus so schnell wie in WBCE zurechtfinden (für Redaktionsarbeiten).

Ich mag ja diese Auseinander Schreibung nicht so. Vong die Oddograffie her heißt sich das: "Webdesign", "Grafik- und Webdesign", "Designkollektiv", "Produktdesign" usw., auch wenn das SEO-mäßig vielleicht nachteilig ist.

& da fehlt imho ein "Dich":
"oder informiere * unter Aktuelles, was"

Joa, weis auch nicht. Mein erstesmal dass ich Web Design auseinandergeschrieben habe. Ich finde es sieht im SEO- und optischen Kontext halt hübscher aus. Werde es vielleicht aber wieder rückgängig machen.

Den Schreibfehler werde ich korrigieren. Danke für den Hinweis.

Beitrag geändert von rjgamer (09.09.2019 19:45:18)

---

Neoflow | Fraggy Backend Theme

colinax

Developer

Re: Neoflow im neuen Gewand

Hmm... was soll ich zur Seite sagen, bin durchaus angetan interessiert.

Wenn man sich den Sourcecode und dass CSS mit den globalen Variablen ansieht, ja dass ist rjgamer.

Das Konzept der mobilen Ansicht (kleiner als 560px) gefällt mir sehr gut, da es auch für prefers-color-scheme CSS passen würde, nur die folgenden Elemente würde ich noch anpassen:

• Im Footer stören die fake Facebook und GitHub Logos extrem

• Die graue Schriftfarbe sollte auf #000 geändert werden, um den Kontrast zum Rest zu verbessern, dass man nicht mehr die Zoom Taste zum lesen benötigt.

• Im Menü fehlt der Link zur Startseite

• Beim Portfolio Slider ist alles irgendwo unterhalb positioniert

• Dem Kontaktformular würde ich den Eingabefeldern einen grauen Hintergrund statt Rahmen geben

• Bereiche die Context mäßig nicht zusammenhängen, sollten farblich getrennt werden, wie bei Fraggy oder hier das Forum Design

Edit: Hab den Beitrag angepasst, nachdem die Seite mit einem Unterstützten Browser angesehen wurde.

Beitrag geändert von colinax (15.09.2019 14:51:23)

rjgamer

Developer

Re: Neoflow im neuen Gewand

Hmm... was soll ich zur Seite sagen, bin Enttäuscht - Verwirrt - würde besser passen.

Bisschen harte Kritik. Aber ich versuche mal konstruktiv daraufeinzugehen. Auch wenn ich mehrheitlich anderer Meinung bin als du.

Im Footer stören die fake Facebook und GitHub Logos extrem

Sorry, dass sind keine Fake Logos sind Verlinkungen auf die offizielle Facebook und GitHub Seite von Neoflow. Ersteres könnte mehr Updates vertragen. Aber es ist bestimmt kein "Fake". Keine Ahnung wieso du diesen Begriff verwendest.

Die graue Schriftfarbe sollte auf #000 geändert werden, um den Kontrast zum Rest zu verbessern, dass man nicht mehr die Zoom Taste zum lesen benötigt.

Ja, der Kontrast ist bei den vielen schwachen Grautönen noch nicht perfekt. Werde noch verschiedene Ausprägungen ausprobieren.

Im Menü fehlt der Link zur Startseite

Wurde bewusst weggelassen. Home oder Startseite wirkte deplatziert in der Navigation. Was meinen die anderen Leute dazu?

Beim Portfolio Slider ist alles irgendwo unterhalb positioniert

Könnte ein CSS Problem sein. Kannst du ein Screenshot machen?

Dem Kontaktformular würde ich den Eingabefeldern einen grauen Hintergrund statt Rahmen geben

Danke. Werde mal schauen wie ich es tweaken kann. Auch in der mobilen Auflösung ist das Formular noch nicht perfekt.

Bereiche die Context mäßig nicht zusammenhängen, sollten farblich getrennt werden, wie bei Fraggy oder hier das Forum Design

Darauf wurde bewusst verzichtet. Der Text und die Bilder sollen so hervorgehoben werden. Der Context ist aus meiner Sicht zusammenhängen (von oben nach unten, wie bei allen Webseiten). Klar diese Schlichtheit entspricht nicht dem in den vergangenen Jahren etablierten Ansatz bei Web Designs. Aber als Design Kollektiv wollen wir halt auch zeigen, dass wir versuchen gängiges zu brechen (solange die UX noch stimmt). Was meinen die anderen Leute dazu?

In größeren Ansichten wird alles nur noch schlimmer und defekter .

Sorry, aber Defekt wirkt für mich das Web Design nicht. Alle Links gehen, keine Design Bugs, usw. Wäre froh um konkrete Screenshot-Beispiele um dein Feedback besser verstehen zu können.

Alles ist irgendwo positioniert ohne Struktur ohne Plan, kein Menü, keine Bilder, viele leere Bereiche mit Hover Effekt!??

Sorry. Bei diesem Web Design ist nichts "irgendwo" platziert und wurde alles bewusst so dargestellt. Klar es hat viele leere Bereiche, aber alles wurde so bewusst gestaltet. Viel Freiraum, nicht überladen und doch explizit. Es gibt genau einen Effekt beim Scrollen im Header wo der weisse Hintergrund auf einen hellgrauen Hintergrund wechselt. Ist aber kein Hover-Effekt wie von dir beschrieben.

Beitrag geändert von rjgamer (10.09.2019 20:27:56)

---

Neoflow | Fraggy Backend Theme

colinax

Developer

Re: Neoflow im neuen Gewand

Hab mir jetzt in Ruhe deine Seite auf meinem Rechner und Smartphone mit Microsoft Edge (Chromium) angesehen, bis auf zwei Ausnahmen kann ich vermutlich alle Bilder sehen, bei den zwei eingerückten News fehlen noch die Bilder.

Von der Platzierung passt auch fast wieder alles, dass einzige was noch stört ist dass das Content einmal da und einmal hier anfängt, stört den Fluss/Flow beim lesen/ansehen.

Der Post oben wurde in der Arbeit/Ausbildungsinstitut gemacht, wenn ich Vorher gewusst hätte dass deine Seite keinen Browser Blocker besitzt und zwingend einen Browser benötigt der neuer als Februar 2019 ist (Ausnahme Chromium), hätte ich gewartet, bis ich Zuhause bin.

Hatte da nur IE, Edge und Firefox die alle kein webp als Bild Format unterstützen dass kann effektiv nur der Chromium, siehe https://caniuse.com/#search=webp%20image

Sorry, dass sind keine Fake Logos sind Verlinkungen auf die offizielle Facebook und GitHub Seite von Neoflow. Ersteres könnte mehr Updates vertragen. Aber es ist bestimmt kein "Fake". Keine Ahnung wieso du diesen Begriff verwendest.

Na weil sie im Vergleich zu den offiziellen anders, also wie Fake Icons aussehen, siehe https://github.com/logos und https://de.facebookbrand.com/assets/f-logo-3

Im Menü fehlt der Link zur Startseite

Wurde bewusst weggelassen. Home oder Startseite wirkte deplatziert in der Navigation.

Ich weis zwar dass das Logo ein Link zur Startseite ist aber da gehöre ich schon zur Minderheit.

Nebenbei beginnt es schon auf meinen 5.5 Zoll Smartphone dass sich das Logo und der über uns Link übereinander schieben, da heißt es dann Millimeter genau tippen.

Beim Portfolio Slider ist alles irgendwo unterhalb positioniert

Könnte ein CSS Problem sein. Kannst du ein Screenshot machen?

ist im  Anhang, die seltsamen Bereiche hab ich markiert, ideal wäre ein Slider wo die Elemente per hover sichtbar werden

Bereiche die Context mäßig nicht zusammenhängen, sollten farblich getrennt werden, wie bei Fraggy oder hier das Forum Design

Darauf wurde bewusst verzichtet. Der Text und die Bilder sollen so hervorgehoben werden. Der Context ist aus meiner Sicht zusammenhängen (von oben nach unten, wie bei allen Webseiten). Klar diese Schlichtheit entspricht nicht dem in den vergangenen Jahren etablierten Ansatz bei Web Designs. Aber als Design Kollektiv wollen wir halt auch zeigen, dass wir versuchen gängiges zu brechen (solange die UX noch stimmt).

Wer sagt den Etwas von bunt , es würde für meinen Geschmack auch reichen wenn, die einzelne News bein Hovern als Hintergrund z.B.: #f9f9f9 bekommt, damit Etwas Bewegung rein kommt.

Hoffe dass ich soweit alles aufgegriffen habe, zur harten Schreibweise sag ich mal, ich bin IT-Techniker, wir schreiben wenig und direkt

Edit: Anhang und Link entfernt, da gelöst

Beitrag geändert von colinax (12.09.2019 22:15:12)

rjgamer

Developer

Re: Neoflow im neuen Gewand

Hab mir jetzt in Ruhe deine Seite auf meinem Rechner und Smartphone mit Microsoft Edge (Chromium) angesehen, bis auf zwei Ausnahmen kann ich vermutlich alle Bilder sehen, bei den zwei eingerückten News fehlen noch die Bilder.

Von der Platzierung passt auch fast wieder alles, dass einzige was noch stört ist dass das Content einmal da und einmal hier anfängt, stört den Fluss/Flow beim lesen/ansehen.

Der Post oben wurde in der Arbeit/Ausbildungsinstitut gemacht, wenn ich Vorher gewusst hätte dass deine Seite keinen Browser Blocker besitzt und zwingend einen Browser benötigt der neuer als Februar 2019 ist (Ausnahme Chromium), hätte ich gewartet, bis ich Zuhause bin.

Hatte da nur IE, Edge und Firefox die alle kein webp als Bild Format unterstützen dass kann effektiv nur der Chromium, siehe https://caniuse.com/#search=webp%20image

War garnicht meine Absicht. Eigentlich gibt es einen Workaround dass non-webp-Browser einfach jepg-Bilder ausgeliefert bekommen. Scheint aber nicht zu klappen und werde ich fixen. Oh und die News haben keine Bilder

Das mit den Logos werde ich korrigieren und gebe ich dir recht.

Auf ein "Fullwidth-Image-Slider" wurde bewusst verzichtet. Aber welchen Anhang meinst du?

Werde mir mal deine Kritik zu Herzen nehmen und schauen was ich machen kann. Gerade das mit der Navigation im Mobile sollte natürlich auch nicht vorkommen.

---

Neoflow | Fraggy Backend Theme

colinax

Developer

Re: Neoflow im neuen Gewand

Aber welchen Anhang meinst du?

Ist oben verlinkt, Vorschau anzeigen entfernt den Anhang.

Auf ein "Fullwidth-Image-Slider" wurde bewusst verzichtet.

Das war der Falsche, meinte den Kleineren unterhalb.

Beitrag geändert von colinax (12.09.2019 22:05:14)

rjgamer

Developer

Re: Neoflow im neuen Gewand

Ja, hast recht. Werde den Slider im Mobile noch optimieren.

---

Neoflow | Fraggy Backend Theme

michael-neu

Mitglied

Re: Neoflow im neuen Gewand

Geht mich nichts an, bin auch kein Experte für solche Dinge - aber wenn es schon öffentlich zur Diskussion gestellt wird: ein paar Dinge, die mir spontan auffallen:

Klar es hat viele leere Bereiche, aber alles wurde so bewusst gestaltet. Viel Freiraum, nicht überladen und doch explizit.

O.k. wenn das so beabsichtigt ist, kann man nichts dagegen sagen.

Allerdings finde ich, dass man bei den Hauptüberschriften dennoch etwas Platz sparen könnte. Die sind alle zweizeilig und ziehen damit die Seite unnötig in die Länge. Konkret beziehe ich mich auf:

WIR MACHEN
DESIGNS

[...]

AUSZUG AUS DEM
PORTFOLIO

[...]

INTERESSE
GEWECKT?

[...]

Das könnte man jeweils in eine Zeile stellen.

Und die (ohnedies spärlich verwendeten) Farben könnte man meines Erachtens auch etwas großzügiger einsetzen:
Im Moment haben die (nicht anklickbaren) Überschriften dieselbe (oder nahezu dieselbe) Farbe wie Links (z.B. "Design Kollektiv", "Portfolio-Referenzen" usw.). Hier erschiene mir eine farbliche Unterscheidung benutzerfreundlich(er).

Klar diese Schlichtheit entspricht nicht dem in den vergangenen Jahren etablierten Ansatz bei Web Designs. Aber als Design Kollektiv wollen wir halt auch zeigen, dass wir versuchen gängiges zu brechen (solange die UX noch stimmt). Was meinen die anderen Leute dazu?

Ich finde, es ist gerade die (übertriebene) Schlichtheit, die in den vergangenen Jahren ohendies fast überall zum Standard geworden ist.

Ich bin prinzipiell ein ganz großer Befürworter von colinax' Überlegung:

[*]Bereiche die Context mäßig nicht zusammenhängen, sollten farblich getrennt werden, wie bei Fraggy oder hier das Forum Design[/*]

Gerade das wurde leider in den letzten Jahren auf viel zu vielen Webseiten der Philosophie der "Schlichtheit" geopfert. Auch bei eurer neoflow-Seite könnte meines Erachtens etwas mehr Farbe oder sonstige Abgrenzung nicht schaden. Aber ich gebe zu: durch die vielen Leerräume und die relativ wenigen und umfangsmäßig knapp gehaltenen Inhalte ist das vielleicht nicht von sooo großer Dringlichkeit.

Hier trotzdem ein Beispiel, wie man meiner Meinung nach noch benutzerfreundlicher strukturieren könnte:

Auf https://www.neoflow.ch/aktuelles/ habt ihr jeden zweiten Beitrag eingerückt. Einrückungen werden aber üblicherweise als Unterpunkt zum Voranstehenden gesetzt und so vom Leser aufgefasst - was hier aber nicht gemeint ist.

Daher sollte man meines Erachtens alle Überschriften nach links ausrücken. Und wenn man will, könnte man zur besseren Unterscheidbarkeit jede zweite Überschrift (samt Text darunter) mit einer dezenten Hintergrundfarbe unterlegen.

PS:
Und wenn ich das noch anmerken darf (ohne jetzt in Details zu gehen): Rechtschreibung und Beistrichsetzung stimmt an etlichen Stellen auch noch nicht.

rjgamer

Developer

Re: Neoflow im neuen Gewand

Danke für euer Feedback. Hab nun einige ToDos zusammengestellt, die ich angehen werde...

Beitrag geändert von rjgamer (10.09.2019 22:25:54)

---

Neoflow | Fraggy Backend Theme

rjgamer

Developer

Re: Neoflow im neuen Gewand

Allerdings finde ich, dass man bei den Hauptüberschriften dennoch etwas Platz sparen könnte. Die sind alle zweizeilig und ziehen damit die Seite unnötig in die Länge. Konkret beziehe ich mich auf:

WIR MACHEN
DESIGNS

[...]

AUSZUG AUS DEM
PORTFOLIO

[...]

INTERESSE
GEWECKT?

[...]

Das wurde bewusst so gestaltet. Den Titel in dieser Schriftgrösse auf eine Breite von 100% passt optisch nicht. Entsprechend werde ich hier nichts optimieren.

---

Neoflow | Fraggy Backend Theme

colinax

Developer

Re: Neoflow im neuen Gewand

Hallo rjgamer,

die bisher durchgeführten Änderungen gefallen mir sehr gut, weiter so   

LG

rjgamer

Developer

Re: Neoflow im neuen Gewand

Vieles wurde auf Basis von eurem Feedback optimiert. Danke nochmals.

Gruss

---

Neoflow | Fraggy Backend Theme