Website-Relaunch: Layouts für die Artikel

Sieht finde ich so schon ziemlich geil aus. Allerdings finde ich das Ihr die Schrift für Zitate dunkler machen solltet (main_elements_desktop.pdf - Unterhalb des Screenshots, der in Hellgrau geschriebene Teil). Das Grau hebt sich nicht wirklich vom Hintergrund ab, und könnte für leute mit schlechter Sehkraft nur schwer zu lesen sein. Das selbe gilt für die Schrift in den grauen Kästen. Die hebt sich auch nicht stark genug vom Hintergrund ab.

Diese Grautöne sind zwar schick anzuschauen, der Kontrast ist für Leute mit schlechter Sehkraft aber einfach nicht groß genug. Ich würde sagen wenn ihr das Grau (der Schrift) um etwa 50% dunkler macht, dann dürfte es besser lesbar sein, sich aber immer noch gut genug vom Hintergrund abheben.

Achtet darauf das der Kontrast zwischen den einzelnen Farben stark genug ist. Das gilt um so mehr je näher die Farbtöne bei einander liegen (Dunkelgrau auf Grau ist schlecht, Dunkelgrau auf Hellgrau wesentlich besser, Schwarz auf Hellgrau ideal).

Daher meine dringende Bitte nochmal an der Schriftfarbe für alles was kein normaler Fließtext ist schrauben.

Wie gesagt, vom Layout und vom sonstigen Design her ist es schon mal ziemlich geil.

 

Das "Grau" kommt immer von unseren Designer, die alle mit iMacs und geilen Displays arbeiten. Das müssen wir in der Tat dann im HTML deutlicher abheben.

Danke für den Hinweis!

 

Ich muss sagen mir gefällt das schon sehr, bin gespannt wann wir das live sehen dürfen, da kommt das dann alles ein wenig besser rüber, aber auf den ersten Blick ist das schon gut so.

 

Sieht gut aus.
Was stört, ist die Schrift des normalen Textes, Videobeschreibungen, Kommentare etc.pp Sieht irgendwie aus als ob das alles fett wäre.

Das video "Overwatch - Entwicklerupdate" wurde auf "overlay-Video" als angesehen markiert. In "main_elements" ist es nicht markiert. Ist das dann grundsätzlich so, oder nur weil es tatsächlich noch nicht angesehen wurde?

Und warum haben bei "overlay_Video" alls bis auf eines keinen Play-Button?

 

Ich glaube, dass sieht nur in dem Screenshot (PDF) so aus.

Die Schriftdicke wird im Browser nachher in diese Richtung gehen:
http://www.gamepro.de/videos/battlefield-1-gameplay-und-expertentalk-zur-beta-map,90039.html

"Angesehen" ist ein Feature, was wir vielleicht einführen wollen. Es zeigt dem User an, welchen Inhalt/Video er schon gesehen hat (ist von Youtube geklaut^^).

Die Elemente in der rechten Spalte sind zum Teil noch vom Videobereich kopiert (es gibt für Artikel noch andere Listen und Widgets). Im Videobereich gibt es ja auch im Desktop die Mouseover-Variante, bei Mobile sind sie immer sichtbar.

Wir sind noch am überlegen und rumprobieren. Wir wollen Videos deutlich kennzeichnen (zb. über das Play-Symbol) in Abgrenzung zu normalen Artikeln. Daher wird es in Listen Thumbnails mit Play-Symbol und ohne geben (war früher auf der Startseite von GameStar.de auch schon so, bis wir die farbigen "Tags" eingeführt haben).

 

Zum angesehen: Schon klar, aber wurde es auf dem einen Screen einfach noch nicht angesehen oder ist die FUnktion da deaktiviert?

Play-Button: Pro Button bei reinen Video Artikeln/News
https://drive.google.com/file/d/0ByWgxUknE24-RkpSU0pFUFlJdDQ/view?pref=2&pli=1 hier zb wird unterschieden zwischen Buttonund ohne. Nur zu testzwecken oder noch nicht ganz fertig gebaut?

 

Das sind alles Mockups, das ist noch nicht in HTML mit echter Funktion umgesetzt. Es sind nur die Vorlagen für die Entwickler, damit sie die einzelnen "Zustände" kennen. Daher tauchen einzelne Elemente mal so und mal so auf.

 

ah okay.

 

Ich schließe mich den anderen an, das neue Layout sieht wirklich gut aus. Ich freue mich schon wenn das live geht, damit man es mal in natura sehen kann.

 

Bitte macht die Seitenbreite am Desktop (responsive) größer Auf einem 27"er mit vernünftiger Pixeldichte wird gerade mal ein Fünftel des Bildes ausgenutzt...

 

Wir bleiben bei der gleichen Breite wie aktuell im neuen Videobereich.

Gerade bei Artikeln ist es auch nicht so einfach den Textbereich noch weiter aufzuziehen. Siehe Diskussion/Feedback von anderen Usern zum Relaunch.

Wenn die ganze Seite umgebaut ist, können wir bei weiterer Verbreitung von UHD/WHD noch breiter machen. Die Realität ist aber eher, dass vor allem immer mehr Mobil-User die Seite besuchen und die Desktop-Nutzer weiter zurückgehen (zb. im August -40% bei den Direkt-Besuchern gegenüber Vorjahr).

 

Ist halt auch so ein Henne-Ei-Problem. Wenn Websiten nur noch für mobile optimiert werden und große Bildschirme ignoriert werden, verstärkt das die Abwanderung der User zu mobile nur noch.

 

@Lurtz: Das ist mit Verlaub Unsinn. ;-)

Wenn ich unterwegs bin und eine Website besuchen will, dann ist es mir herzlich egal, ob sie "4k optimiert" ist. Die mobile Nutzung steigt einfach, gerade für newsgetriebene Seiten.

Wir entwickeln erstmal für die Mehrheit unserer User.

Hier die aktuellen Werte für GameStar.de:

Top 10:
desktop 1920x1080
mobile 360x640
mobile 375x667
desktop 1680x1050
tablet 768x1024
desktop 1366x768
desktop 1920x1200
mobile 320x568
desktop 2560x1440 <--- 2,4% aller Sessions im Monat
desktop 1600x900

 

Ich wollte lediglich ein Feedback zum Design geben und dass ich es mit HighDPI-Monitor unangenehm finde.

Was ihr daraus macht, ist natürliche Sache, aber ihr habt auch jahrelang nicht für die Mehrheit der Mobiluser entwickelt, insofern verstehe ich ehrlich gesagt den Zusammenhang nicht, aber ich will das jetzt hier auch nicht ausdehnen.

 

Auf dein Feedback habe ich auch geantwortet.

Und was soll uns das sagen? Wir versuchen es jetzt besser zu machen und dann schlägst du vor, wir können die User weiter ignorieren? Komisches Feedback. Klingt eher nach, ich sage was dagegen, damit ich was dagegen sagen kann.

 

Es ist unheimlich schwierig, sowas gestalterisch sinnvoll zu machen. Das Ding ist: Artikel, Nachrichten etc... dürfen nicht zu breit sein, da sonst Leserlichkeit verloren geht. Eigentlich kann man das halt nur mit gestalterischen wie Bildern füllen. Alternativ müsste man zwei Wege programmieren: Optimiert für größere Bildschirme, und alternative Versionen für kleinere.

 

Kann ich nur unterstützen. Nur weil man prinzipiell mehr Platz zur Verfügung hat, macht es noch lange nicht immer Sinn diesen auch ausfüllen zu müssen. Das endet nachher wie bei zu vielen Seiten in riesigen Texten und Bildern oder aber die Seite muss am Ende wegen Überfüllung geschlossen werden, weil munter weiter Inhalte in den Freiraum geknallt werden.

 

Das hat doch nichts mit High DPI zu tun.
Jedes Webseiten-Layout basiert auf 96-DPI-Pixel (also im Endeffekt auf „Echtwelt-Größe“). Es ist am Browser bzw. Betriebssystem, das in echte Pixel zu übersetzen. Stichwort Pixels per Device Pixel. Wenn deine Probleme also tatsächlich von High DPI kommen, liegt ein Client-seitiger Fehler vor, bei dem ein Webentwickler nichts machen kann.

Das Layout, was Gamestar hier benutzt, mit einem handelsüblichen CSS-Grid, ist „tried and tested”. Wenn es zu breit wird, kann man Texte nicht mehr vernünftig lesen. Bei einer Webanwendung kann man den Platz anders nutzen, aber diese Webseite ist keine Anwendung.

 

Damit ja eigentlich sowieso nicht, weil die Pixeldichte keine Auskunft über das Format/Seitenverhältnis gibt oder die Auflösung. Wer es breiter will kann ja die Zoomfunktion nutzen.

 

Du nutzt 2160p ohne Vergrößerung der UI-Elemente und Inhalte?

Ich finde das ja bei meinem 1440p teils schon grenzwertig klein.

 

Mir gefällt das neue Design. Es wirkt deutlich entschlackter und nüchterner. Kurz: Zeitgemäß. Gibt es einen groben "finalen" Termin, wann die gesamte Website umgestellt wird?

 

Habe versucht, mich an das neue Design zu gewöhnen, aber es zündet bei mir einfach nicht. Ich habe mir jetzt beispielhaft die aktuelle Phil Spencer News auf GP genauer angesehen ( http://www.gamepro.de/artikel/ps4-p...r-zu-hohen-erwartungen-an-4k-hdr,3304935.html )
Das Material-Design in der Titelleiste: OK, geschenkt, das ist halt momentan (noch) im Trend und auf dem reitet GS mit. Schön finde ich es nicht, aber es funktioniert.

Im Artikel selber fehlt mir Struktur und das Absetzen vom Hintergrund, was im alt(backen)en Design durch leicht angedeutete Rahmen erreicht wurde. Die Schriftart ist ok, aber die Größe sieht viel mächtiger aus als vorher. Das in Verbindung mit einer Zoomsperre (wtf?) macht die Seite für mich auf Mobilgeräten unbrauchbar. Nachdem ich die Zoomsperre per FF-Addon auf meinem Tablet umgangen habe, ist es wieder halbwegs ok.

Kommentare: Wie der Rest des Artikels für mein Empfinden viel zu sehr auf weißem Hintergrund "schwebend". Dieses Nicht-Absetzen wirkt irgendwie billig und sieht im Gesamten eher nach einfachem Blog aus. Zudem fehlt mir deutlich eine Direktwahl in der Navigation. Bei vielen Kommentaren ist das neue System einigermaßen unbrauchbar. Auch hier finde ich es auf Mobilgeräten schlimmer als am Desktop.
Das Daumensystem war ja verhasst und geliebt gleichzeitig. Für mich ist es aber eher schade, weil der größte Nutzen für mich darin bestand, dass man häufig gesehen hat, dass die Community Trollkommentare damit "abgestraft" hat. Nicht, dass es den Troll interessiert hätte, aber manchmal war es schön zu sehen, dass der Großteil doch eher vernünftig ist und die Deppen in der Minderheit sind.

Der Videobereich geht schon in Ordnung, aber wenn ich wirklich mehrere Videos anschauen will, dann sicherlich eher auf dem YT-Kanal. Das trifft wieder insbesondere für Mobilgeräte zu. Der Player ist allerdings wirklich etwas besser und mobil jetzt halbwegs zu gebrauchen.

Alles in allem sehe ich wirklich praktisch keine neuen Features. Anpassungen an höhere Auflösungen wie WQHD sind wie bereits bestätigt überhaupt nicht im Fokus (Ich lese auch lieber etwas längere Zeilen), sondern eher Reduktionen und vermutlich (hoffentlich) viel unter der Haube.

 

Hallo,

ich finde auch die Artikelgestaltung gut gelungen. Bis auf das bereits angesprochen Grauproblem.

Meine Meinung zum Seitenbreitenproblem: Ich habe zwar eine Auflösung von 2.560x1600, aber surfe immer nur auf einer Hälfte des Bildschirmes, weil es mir sonst schlicht zu groß wäre. Trotzdem fände ich es gut, wenn man den kompletten rechten Kasten entweder ausblenden oder nach unten verschieben und somit den Artikel über die vorhande Breite strecken könnte (zumindest für Plus-Leser). Alles was rechts ist lenkt mich nur ab und stört beim Lesen.

Ebenfalls fände ich es gut, wenn man die Kommentare komplett einklappen könnte, also inklusive dem Kasten.

Schön zu sehen, dass es voran geht!

 

Die Zoomsperre ist leider nötig, weil Mobilbrowser sonst teilweise unkontrollierbares Verhalten an den Tag legen. Dann zoomt er rein und auf einmal liegen wichtige Bedienelemente außerhalb des Bildschirms. Nein danke.

Material Design kann ich dort ehrlich gesagt keins finden. Ganz im Gegenteil kann es ja schon mal kein Material Design sein, weil es flach ist.

Was die Seitenleiste angeht: Die sehe auch auf dem Tablet nur im Querformat. Und da ist es auch in Ordnung, weil der Text sonst zu breit ist.

Und nochmal: Lange Zeilen sind erwiesen schlecht. Es hat schon seinen Grund, dass Zeitungen den Text in mehreren Spalten haben. Selbst eine A4-Seite ist eigentlich schon zu breit für einspaltigen Text.

 

Dann sollte die Sperre aber aus sein, wenn ich sowieso auf dem Tablet standardmäßig die "Desktop-Seite" (ja, gibts nicht, schon klar, aber das kann man ja auswerten) anfordere. Stattdessen wird das wohl an das Betriebssystem oder den Useragent gekoppelt sein, was ich Quatsch finde. Auf einem 10"-Tablet ist dieser Zoomlock mMn. kontraproduktiv. Hingegen kann ich mir durchaus vorstellen, dass das auf Smartphones mit geringerer Auflösung als 1080x1920 sehr viel Sinn ergibt.

Vermutlich hast Du recht, ich verbinde dieses Flat Design aber durchaus mit dem Material Design, weil sich die grundsätzliche Designsprache ähnelt. Aber ja: Flat Design wäre treffender gewesen. Gefällt mir am Desktop PC trotzdem nicht

Das hat doch aber viel mit Geschmack und Gewöhnung zu tun, oder? Oder gibt es dazu Studien, die das (nicht empirisch) nachweisen? Dass ich nicht das Maß der Dinge bin, ist mir auch klar, ich wollte lediglich meine persönliche Präferenz darlegen.

 

Warum gibt's mobile keinen Blocksatz? Fände ich auf den ersten Blick ansprechender.

 

Ja, aber diese Seite funktioniert anders als du denkst. Nennt sich Responsive Design und bedeutet, dass die selbe(!) Seite auf allen Bildschirmgrößen(!) ein passendes Layout bereithält. Unglücklicherweise kann die Skalierbarkeit nicht Bestandteil des Layouts sein, sondern steht immer drin. Auch am Desktop.

Die Auflösung ist übrigens egal. Es geht immer um die physische Größe.

Das ist allgemein anerkanntes Typographie-Wissen. Keine Ahnung, ob es wissenschaftliche Studien dazu gibt, habe auf die schnelle nix bei Google gefunden. Das ganze stammt auch aus Zeiten wo man es mit Studien nicht so hatte.

http://baymard.com/blog/line-length-readability
http://typefacts.com/artikel/grundlagen/zeilenlaenge

 

Muss das Menü unbedingt an der linken Seite kleben?
http://i.imgur.com/yXdepxt.jpg
Finde es besser, wenn es unter dem Menüpunkt aufklappen würde.

Und die Velinkung des Forums unter dem Menü -> Community ist recht versteckt.

 

Da würde sich doch zu jetzt auch nichts ändern, da auch hier schon der link zum forum unter dem Community menüpunkt "versteckt" ist.

 

Scroll mal ganz nach oben...

 

Ich weiß das da noch eine unnütze Leiste ist...drauf achten tu ich da allerdings nie drauf, da die große Menüleiste der Seite einem sehr viel mehr ins Auge springt als das Ding da oben

 

Ganz ehrlich? Ich bin hier schon einige Jahre und so wirklich wahrgenommen hab ich die Leiste nie - das ist kein gutes Zeichen dafür. Ein Forum sollte schnell zu finden sein - und nicht erst versteckt oder so unauffällig das man es übersieht.

 

Ich war bestimmt auch schon 2 Jahre angemeldet bevor ich das geschnallt habe. Meines Erachtens könnte man den Reiter 'Tipps' streichen und den Platz für einen Reiter 'Forum' nutzen.

Denn die Tipps Sparte nutzt sowieso kaum einer und sowas könnte eher ein Unterpunkt von 'Community' sein als das Forum. Abgesehen davon wäre im Seitenlayout aber auch so noch Platz, sodass man nichts streichen müsste. Aber beim Forum galt ja schon immer "das tut's..." und insofern ist daran wahrshceinlich jeder Gedanke verschwendet.

 

Dass es keine separate Mobilseite gibt, deswegen ja die Anführungsstriche und die Klammer. Dass man die Zoomlocks nicht davon abhängig machen kann, ob jemand im "Desktop-Mode" oder "Mobile-Mode" surft, kann ich mir zwar nicht vorstellen, aber vielleicht ist der Aufwand dafür dann zu groß. Mit entsprechendem Addon kann ich mir ja auf dem Tablet helfen und am Desktop ist mir so eine Einschränkung noch nicht aufgefallen. Dass die Auflösung keine Rolle spielt, war mir tatsächlich neu.

Während ich weiterhin glaube, dass das von Person zu Person unterschiedlich sein kann(!), bin ich bei Dir, dass das aufgeführte sicherlich für deinen Großteil der Anwender zutrifft. Bei mir mag es daran liegen, dass ich es auch einfach gewöhnt bin, selbst auf größeren Monitoren kleine Shells zu verwenden. Wenn man öfter Logfiles oder komplexe Configs schnell durchscrollt, hilft es ungemein, keinen Zeilenumbruch zu haben.

Danke für Deine Erklärungen. Was Webdesign angeht bin ich schon immer Noob gewesen und das wird sich nicht ändern .

 

Es geht wirklich nicht wenn es die selbe Seite ist, weil das ein Tag ist, der in der HTML-Seite oben drinsteht:

PHP:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no">

Wenn man also nicht doch wieder eine Weiche irgendeiner Art einbaut, steht es immer drin. Es gibt keine Möglichkeit, das hinter einer clientseitigen Weiche zu verbauen.

Ja Moment. Bei einer Logdatei liest man auch nicht, da besteht ja kein Textfluss. Da ist jede Zeile eine in sich geschlossene Informationseinheit. Das ist schon ein bisschen anders als Fließtext.

Natürlich kann das jeder unterschiedlich gut, aber ich glaube kaum, dass du z.B. bei 1920 Pixel Zeilenbreite die nächste Zeile direkt mit den Augen findest.

 

Klar ist das etwas anderes, aber man ist dadurch gewöhnt, relativ kleine Schrift über die gesamte Bildschirmbreite zu erfassen (zumindest rudimentär). Ich benutze dafür aber in der Regel ein 1440p - Display, dann passt noch etwas mehr drauf Ob das jetzt wirklich eine Auswirkung darauf hat, dass ich es bevorzuge, längere Zeilen zu lesen? Keine Ahnung. Das war ja nur eine Vermutung, dass sich alltägliche Anwendungsfälle eventuell in unüblichen Präferenzen niederschlagen.

Die nächste Zeile zu finden ist außerdem ganz simpel, wenn man den grep-Befehl in ein (perl)-script piped, was die Zeilen alternierend einfärbt

 

Weil irgendwer mal meinte das "Blocksatz" unmodern wäre. Haben leider mittlerweile viele Websites und auch Magazine nicht mehr. Zumal echter Blocksatz der nicht von irgendwelcher Software erzwungen wird sowieso eine Kunst ist an der auch viele Mediengestalter verzweifeln

Ansonsten gefällt mir das Design, nur muss auch der Unterbau stimmen (Kein Flash!!)

 

Frage an die Design Abteilung: Könnte man die untere Social Media Leiste optional machen?

Screenshot: https://picload.org/image/riolorlr/screenshot_20170531-091251.png

Auf meinem Smartphone habe ich fast kein Lesebereich mehr, das geht gar nicht. Es ist wirklich sehr, sehr störend. Man sieht deswegen nicht einmal die Bilder im Artikel vollständig.

Solches aufzwingen von Social Buttons war vor ein paar Jahren noch Mode, inzwischen auf den meisten Seiten weniger prominent und schon gar nicht mit-scrollend :_(

 

Ist auf der Feedback-Liste. Kann aber noch nicht sagen, wann es in die Live-Version kommt.