Betatest nieuwe redactionele layout

[MueR]

Verwijderd schreef op woensdag 21 juni 2017 @ 23:35:
...

Nu ga je er van uit dat mensen op Full HD zitten te browsen. Die layout zou _misschien_ werken zonder sidebar, maar met sidebar is het gewoon te crowded. Ik vind de test ook niet echt geweldig, maar dit gaat me te ver.

[Hahn]

Plus dat dit alleen werkt bovenaan de pagina. Als je nu naar beneden scrollt voor meer reacties, zit je naar een gigantische loze ruimte links te kijken

[cmndr_adama]

Op m'n mobiel ziet de nieuwe layout er prima uit. Echter de oude layout deed dat ook al! Ik zit vrijwel altijd op Tweakers op m'n desktop met 1080p en de eerste keer dat ik daar een artikel in de nieuwe layout zag dacht dat er iets misging en ik de mobiele variant voorgeschoteld kreeg.

Er zal natuurlijk nog e.e.a. verbeterd worden maar op dit moment ben ik eigenlijk wel teleurgesteld in deze keus. Het voelt niet af, bijna amateuristisch (Ik weet niks van het ontwikkelen van websites, dus ik bekijk 't met ogen van een leek )

Fontsize is te groot en ik vindt het ook geen erg fijne font, ik begrijp dat dit in het kader van de leesbaarheid is maar ik vindt het maar irritant. De uitlijning geeft me het amateuristische gevoel en de witruimte, omg wat een verspilling, zo zonde

[core_dump]

Ik mis vooral de "singlepage" weergave optie, ik ben een tijdje geleden al afgestapt van 800x600 en vind het prettig als ik gewoon 1 pagina heb waar ik een review kan lezen dmv scrollen (ik heb tijden geleden ook al zo'n hippe muis mét een scrollwieltje gekocht)

Zonder gekheid, waarom moet een normale review op 8-9 pagina's staan en kan er niet gewoon, net zoals bij nieuwsartikelen één pagina gebruikt worden?

[Verwijderd]

MueR schreef op donderdag 22 juni 2017 @ 00:03:
[...]

Nu ga je er van uit dat mensen op Full HD zitten te browsen. Die layout zou _misschien_ werken zonder sidebar, maar met sidebar is het gewoon te crowded. Ik vind de test ook niet echt geweldig, maar dit gaat me te ver.

Natuurlijk schaalbaar, is er geen ruimte dan gaan de reacties naar beneden en dan houd je vrijwel de huidige weergave over. Mijn genoemde voorbeeld doet dat ook

Hahn schreef op donderdag 22 juni 2017 @ 00:31:
Plus dat dit alleen werkt bovenaan de pagina. Als je nu naar beneden scrollt voor meer reacties, zit je naar een gigantische loze ruimte links te kijken

Feitelijk heb je net zo veel witruimte als nu. (in totaal) Maar je zou natuurlijk de hoogte van de reacties dynamisch maken en de overflow in subpagina's doen.

Ik geef toe dat mijn ontwerp niet perfect is (dat was de bedoeling niet) maar het is wel een idee waar je over na kan denken.

[_David_]

core_dump schreef op donderdag 22 juni 2017 @ 07:03:
Ik mis vooral de "singlepage" weergave optie, ik ben een tijdje geleden al afgestapt van 800x600 en vind het prettig als ik gewoon 1 pagina heb waar ik een review kan lezen dmv scrollen (ik heb tijden geleden ook al zo'n hippe muis mét een scrollwieltje gekocht)

Zonder gekheid, waarom moet een normale review op 8-9 pagina's staan en kan er niet gewoon, net zoals bij nieuwsartikelen één pagina gebruikt worden?

De singlepage weergave is er gewoon nog? Links onder de kop staat de knop "singlepage layout".

[Hahn]

Verwijderd schreef op donderdag 22 juni 2017 @ 07:14:
[...]

Feitelijk heb je net zo veel witruimte als nu. (in totaal) Maar je zou natuurlijk de hoogte van de reacties dynamisch maken en de overflow in subpagina's doen.

Er is evenveel witruimte, alleen in jouw voorstel zit alle witruimte links en de content helemaal rechts als je beetje scrollt. Dat is denk ik een stuk vreemder dan de content in het midden met witruimte er omheen

[Señor Sjon]

Kan die inhoudsopgave ook weg op singlepage? Hij scrollt mee en het lijkt de enige reden te zijn dat er links een witruimte is?

[jLing]

Ik dacht dat er iets mis was met tweakers.. blijkt het een 'redesign' te zijn. Sorry, maar ik vind het helemaal niks. Ik ga maar weer even het custom css topic induiken en de adblocker weer aan vanwege de reclame die in het artikel staat.


deze chaos trek ik niet

[ Voor 2% gewijzigd door jLing op 22-06-2017 11:01 . Reden: resized image ]

[anboni]

Femme schreef op woensdag 21 juni 2017 @ 16:52:
[...]

Qua leeservaring is er eigenlijk weinig verschil met de oude situatie. De tekst is één stapje groter geworden (komt de leesbaarheid alleen maar ten goede),

Sorry, maar hier ben ik het toch echt heel erg mee oneens. Mijn leeservaring van het geheel is door de grotere tekst echt slechter geworden en de enorme witruimte helpt daar ook niet bij.

[HKLM_]

Tja er zijn nog verbeterpunten en het is nog niet af maar ik ben ondertussen wel heel benieuwd naar wat het uiteindelijk gaat worden. en of tweekers nog wat met de feedback gaat doen ? Er vallen zoveel mensen over dat als ze om de users geven ze wel iets moeten aanpassen.

Zelf erger ik me het meest aan die coolblue banner direct naast het artikel. Kwam ik van de week een advertentie tegen onder het artikel die direct begon af te spelen en is de inhoudsopgave voor reviews een draak van een ding wat alleen maar meer kliks kost om je doel te bereiken.

Ik betaal voor tweakers omdat ik ze mag en hoop dat ze nog lang blijven bestaan en heb de advertenties ook gewoon aan staan maar deze gaan op deze manier wel uit. Het is nu gewoon TE aanwezig allemaal.

[ Voor 15% gewijzigd door HKLM_ op 22-06-2017 11:06 ]

[Femme]

Downloader_NL schreef op donderdag 22 juni 2017 @ 11:04:
Tja er zijn nog verbeterpunten en het is nog niet af maar ik ben ondertussen wel heel benieuwd naar wat het uiteindelijk gaat worden. en of tweekers nog wat met de feedback gaat doen ? Er vallen zoveel mensen over dat als ze om de users geven ze wel iets moeten aanpassen.

Uiteraard gaan we de feedback evalueren en waar nodig aanpassingen doen. Ik kan hier geen beloftes doen behalve dat er waarschijnlijk nog wel wat getweakt zal worden aan de positie van de reacties. Verder blijven we natuurlijk verder werken naar het ontwerp dat je onderaan de .plan over de aankondiging kunt zien. Dit houdt o.a. in het toevoegen van de hero-afbeelding, mogelijkheid bieden om afbeeldingen, tabellen en video's breder weer te geven en om streamers te laten uitbreken.

[Hahn]

Femme schreef op donderdag 22 juni 2017 @ 11:25:
[...]


Uiteraard gaan we de feedback evalueren en waar nodig aanpassingen doen. Ik kan hier geen beloftes doen behalve dat er waarschijnlijk nog wel wat getweakt zal worden aan de positie van de reacties.

Ik kan niet zeggen dat dit nou een heel erg vertrouwenwekkend bericht is...

"Waar nodig aanpassingen doen" en "waarschijnlijk nog wel wat getweakt worden aan [onderdeeltje]" komt over als 'we zullen hier en daar wat veranderen, maar meer ook niet'.

[Verwijderd]

En voornamelijk ook niet de grootste pijnpunten: de hoeveelheid witruimte en de agressievere reclame uitingen.

[WK100]

@Femme ik ben fan van deze stijl:


De CSS kwam oorspronkelijk uit het topic voor custom css (credits aan user Chester). Intussen heb ik zelf een paar wijzigingen gedaan die het compatibel maken met de huidige stijl. Zoals je ziet kan dit ook op hoge resoluties, zonder enorme witte randen.

Om toch met hero-images te werken kun je overwegen de rode balk te vervangen met de gewenste image. Voor de mobiele versie zou je de rode balk kunnen bewaren om data te besparen (of compleet weglaten natuurlijk). Als voorbeeld:


Ook de informatiedichtheid (is dit wel de juiste term?) moet niet in het gedrang komen: het leest immers zeer onprettig, zie reacties op verschillende topics. De wijzigingen die Radiant voorstelde zijn dus doorgevoerd:

Radiant schreef op woensdag 21 juni 2017 @ 10:38:

Cascading Stylesheet:

.relatedContent {
  display: none !important;
}
.article p {
  line-height: 1.3 !important;
}

Dit maakt het al een stuk prettiger
Benadrukt wel de rare uitlijning van de reacties met de tekst van het artikel

[ Voor 54% gewijzigd door WK100 op 23-06-2017 02:10 ]

[bonzz.netninja]

Ik ben wel positief over de verandering eigenlijk en vind het prima werken. Het past ook beter in wat we tegenwoordig weten hoe teksten online gelezen worden, en wat goed werkt en wat niet. Dat hier onder de tweakers andere meningen/ervaringen zijn geloof ik direct, en die zijn ook heel waardevol, maar ik snap de afweging.

Wel viel mij een kleinigheidje op


Joost mag wegen wat die social media knoppen doen daar. Eerst dat ik het dat het naar het linkedin profiel van Jurre zou gaan, maar het blijkt over delen te gaan.

Het is goed gebruik om expliciet te zijn en hier is naar mijn idee over-design/simplificatie geweest. Het toevoegen van een simpele 'deel op..." zou al voldoende zijn.

[Carpento]

bonzz.netninja schreef op donderdag 22 juni 2017 @ 13:07:
Ik ben wel positief over de verandering eigenlijk en vind het prima werken.

Dat mag gezegd worden, en ik sluit me er bij aan. Ik vind het nu al een verbetering en het moet nóg beter worden begreep ik

[Wom]

Nu enige tijd gewerkt en gewend te hebben aan de nieuwe layout heb ik persoonlijk enkel problemen met de uitlijning van de reacties. Dat is al eerder genoemd hier, maar wilde het toch even melden

Door het grotere lettertype vind ik de teksten wel wat rommelig ogen, maar dat is met het instellen van een klein lettertype zo opgelost

[epias]

Ik had echt het idee dat er iets stuk was. Volgende stap is het font nog een paar stappen groter, forced smooth scrolling aan, stoppen met de reacties, en Tweakers is weer helemaal bij de tijd...

[JustFogMaxi]

Dacht al dat mijn browser settings verkeerd stonden maar het is dus echt een nieuwe layout. Sorry maar ziet er niet uit. Alsof iemand voor het eerst <center> heeft gevonden in Frontpage...

[HKLM_]

Dat center is juist het probleem het leest niet fijn. Ik merkte dat ik de afgelopen dagen gewoon geen artikelen las omdat het niet fijn is. Vanmiddag de advertenties uitgezet en CSS aan. Nu de textuur weer links staat is het een stuk beter.

[Electrowolf]

Downloader_NL schreef op donderdag 22 juni 2017 @ 19:38:
Dat center is juist het probleem het leest niet fijn. Ik merkte dat ik de afgelopen dagen gewoon geen artikelen las omdat het niet fijn is. Vanmiddag de advertenties uitgezet en CSS aan. Nu de textuur weer links staat is het een stuk beter.

Dit, al zou het mischien ook gewenning zijn... maar dat duurt iig al wel langer dan de paar dagen dat we aan het lezen zijn dan .

Wat ik zelf helaas moet constateren is dat de informatiedichtheid hard omlaag is gegaan. Een zelfde grap heeft de NOS met hun app al eens gedaan, en sinds dien ben ik overgestapt op de nu.nl app. Om dit toch nog een beetje te compenseren en de boel leesbaar te maken bekijk ik de website op 90% size/scale (ctrl + 1x omlaag scrollen in de meeste browsers) zodat de fontsizes weer prettig is. Echter heeft dat dit tot gevolg op de FP:



De boel gaat dus redelijk stuk bij scaling.

Tevens komen de "gerelateerde artikelen" nu over als banners of clickbait door alle fleurige plaatjes en pakkende titels (de ironie...). Wat meer zakelijke of praktische indeling zou fijn zijn.

Hero foto's zijn trouwens tof en een mooi idee, ook interessant hoe websites steeds meer op papiere uitgaves gaan lijken .

[delta9vdp]

Hier een mooi voorbeeld dat vernieuwing niet automagisch een verbetering is. De nieuwe layout is optisch een draak. Van waar deze obsessie voor white space?

[Mystic_Jack]

Verandering is prima.

Het is even wennen, zoals je altijd moet als er iets nieuws is.
De hero-afbeelding is een mooie update mits het toegepast gaat worden.

Verder is het een twijfel.

• De lettertype grootte van de content is 14px, 12px was al genoeg. Met een 1920x1080 monitor.
• De witruimte aan de linkerkant van de content zou smaller kunnen om het optisch beter te maken. Zo lijkt er minder witruimte te zijn. De rest erom heen wordt toch grijs.
• De social media pictogrammen zou van mij wel iets verder elkaar mogen, dit om mis klikken/drukken te voorkomen.
• Het reactie gedeelte mag nog beter aansluiten aan de content aan de bovenkant. Zodat dat ook moderner uitziet.

Ik typ moderner, want hoe Tweakers.net dit ontworpen heeft lijkt op veel andere websites. Bijvoorbeeld Elsevier.nl heeft iets wat er op lijkt en hun hebben ook een responsive design.

[ Voor 2% gewijzigd door Mystic_Jack op 23-06-2017 20:29 . Reden: Doorgehaald wat niet werkt ]

[Ma_rK]

De sprite voor de socials krijgt aan de onderkant net een pixel te veel ruimte.

[crisp]

Ma_rK schreef op vrijdag 23 juni 2017 @ 21:51:
De sprite voor de socials krijgt aan de onderkant net een pixel te veel ruimte.

[afbeelding]

Waarschijnlijk iets ingezoomed?

[Ma_rK]

crisp schreef op vrijdag 23 juni 2017 @ 21:58:
[...]

Waarschijnlijk iets ingezoomed?

Haha, die heb ik eerste even gecontroleerd. 100% in Chrome, standaard Chrome config. Toch een pixel te veel.

Update
Even wat verder gekeken. Ratio van placeholder = 16x13. Ratio van SVG = 200x122.9

200/16 = 12,5. Zou het daar fout kunnen gaan?

[ Voor 31% gewijzigd door Ma_rK op 23-06-2017 22:07 ]

[crisp]

Ma_rK schreef op vrijdag 23 juni 2017 @ 22:02:
[...]


Haha, die heb ik eerste even gecontroleerd. 100% in Chrome, standaard Chrome config. Toch een pixel te veel.

Update
Even wat verder gekeken. Ratio van placeholder = 16x13. Ratio van SVG = 200x122.9

200/16 = 12,5. Zou het daar fout kunnen gaan?

Ik zie het hier iig niet, maar ik zal de spritesets volgende week eens aanpassen met iets meer ruimte tussen de verschillende versies.

[Ma_rK]

crisp schreef op vrijdag 23 juni 2017 @ 22:50:
[...]

Ik zie het hier iig niet, maar ik zal de spritesets volgende week eens aanpassen met iets meer ruimte tussen de verschillende versies.

Config is: Dell XPS 13, schaal in Windows 10 op 125%, resolutie 1920x1080.

(bij die schaal 125% gaat het fout trouwens, als ik die op 100% zet is het klaar, zet ik dan de browser op 110%, dan is het probleem weer terug). Is het een idee om dit soort dingen in een font te zetten? Of de .SVG te stylen met css/js?

Lekker bezig overigens. Zie veel opmerking die snel worden verwerkt. Build, Measure, Learn FTW.

[ Voor 32% gewijzigd door Ma_rK op 24-06-2017 00:07 ]

[Bl@ckbird]

Het rode inhoudsopgave tabje linksonder op m'n iPad vind ik gruwelijk irritant..
reviews: Maak kennis met de white hats

[ Voor 42% gewijzigd door Bl@ckbird op 24-06-2017 06:53 ]

[josvane]

@Bl@ckbird inderdaad, bij het typen van een reactie ligt deze over het reactie veld heen.
https://imgur.com/gallery/RpOHx

[HKLM_]

Eigenlijk zou je dat inhoudsopgave blokje moeten kunnen weg klikken of uit kunnen zetten in je account.

[crisp]

Ma_rK schreef op zaterdag 24 juni 2017 @ 00:01:
[...]


Config is: Dell XPS 13, schaal in Windows 10 op 125%, resolutie 1920x1080.

(bij die schaal 125% gaat het fout trouwens, als ik die op 100% zet is het klaar, zet ik dan de browser op 110%, dan is het probleem weer terug).

Scaling, zoom, allemaal 1 pot nat en ellende op desktops (mobile browsers doen het meestal beter)

Is het een idee om dit soort dingen in een font te zetten? Of de .SVG te stylen met css/js?

Dat zijn beide imo nogal 'vieze' technieken...

Lekker bezig overigens. Zie veel opmerking die snel worden verwerkt. Build, Measure, Learn FTW.

Thx

[_David_]

Waarom staat de auteur informatie bij reviews niet op dezelfde plek als bij de artikelen? Zelfs compleet afwezig op mobiel.

artikelen:

reviews:


Zelfde geldt trouwens voor de delen icon's, zou die ook graag op dezelfde plek hebben als bij de artikelen. (mijn CSS skillz zijn helaas niet goed genoeg om dat zelf te fixen )

[Nox]

Chromebookreview gaat iets mis denk...


images upload

[Hmmbob]

Oh, die kwam ik ook net posten. Same here

[Wannial]

Nox schreef op zondag 25 juni 2017 @ 10:32:
Chromebookreview gaat iets mis denk...

[afbeelding]
images upload

Zelfde hier, wou 'm ook net uploaden

[Nox]

Ha, ben ik jullie allemaal lekker voor! Na na na na

[jorisjan]

Downloader_NL schreef op zaterdag 24 juni 2017 @ 09:32:
Eigenlijk zou je dat inhoudsopgave blokje moeten kunnen weg klikken of uit kunnen zetten in je account.

Inderdaad! Gruwelijk irritant op mobiel, onder andere omdat ie wel meescrolt, maar niet vloeiend/direct, omdat ie wél verdwijnt met een stukje naar terug scrollen en er nog een pixel wit onder zit.

Doe de inhoudsopgave dan bovenaan die in beeld komt met terugscrollen, net zoals bij het hoofdmenu kon

[Ramon]

crisp schreef op zaterdag 24 juni 2017 @ 10:24:
[...]

Scaling, zoom, allemaal 1 pot nat en ellende op desktops (mobile browsers doen het meestal beter)

[...]

Dat zijn beide imo nogal 'vieze' technieken...

[...]

Thx

Dit werkt erg goed: https://github.com/TrySound/postcss-inline-svg

[crisp]

Ramon schreef op maandag 26 juni 2017 @ 23:31:
[...]

Dit werkt erg goed: https://github.com/TrySound/postcss-inline-svg

Serieus, een js-library om een svg in te laden?

[Ramon]

crisp schreef op dinsdag 27 juni 2017 @ 07:13:
[...]

Serieus, een js-library om een svg in te laden?

Het is nog vroeg dus ik begrijp de verwarring, maar PostCSS is onderdeel van je build-stap, een proces waar JavaScript tegenwoordig vrij veel wordt gebruikt, bijvoorbeeld icm Gulp of Grunt of Webpack.

Voordeel van het BASE64 inlinen van images boven het maken van sprites is dat je background-repeat en background-position nog gewoon kan gebruiken.

https://github.com/borodean/postcss-assets gebruiken voor normale afbeeldingen btw

[ Voor 23% gewijzigd door Ramon op 27-06-2017 07:57 ]

[crisp]

Ramon schreef op dinsdag 27 juni 2017 @ 07:39:
[...]

Het is nog vroeg dus ik begrijp de verwarring, maar PostCSS is onderdeel van je build-stap, een proces waar JavaScript tegenwoordig vrij veel wordt gebruikt, bijvoorbeeld icm Gulp of Grunt of Webpack.

Voordeel van het BASE64 inlinen van images boven het maken van sprites is dat je background-repeat en background-position nog gewoon kan gebruiken.

https://github.com/borodean/postcss-assets gebruiken voor normale afbeeldingen btw

Ah ja, node Maar dit zorgt wel voor enorme bloated CSS, terwijl je heel efficient een spriteset met verschillende kleuren kan maken:

code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="52.1" height="300" viewBox="0 0 52.1 300">
    <defs>
        <symbol id="facebook">
            <path d="M52 .7A118.5 118.5 0 0 0 38.4 0c-13.6 0-23 8.3-23 23.5v13H0v18h15.4V100h18.4V54.4H49l2.4-17.8H33.8V25.2c0-5 1.4-8.6 8.8-8.6H52V.6z"/>
        </symbol>
    </defs>
    <use xlink:href="#facebook" x="0" y="0" fill="gray"/>
    <use xlink:href="#facebook" x="0" y="200" fill="#3b5998"/>
</svg>

[Wannial]

Downloader_NL schreef op zaterdag 24 juni 2017 @ 09:32:
Eigenlijk zou je dat inhoudsopgave blokje moeten kunnen weg klikken of uit kunnen zetten in je account.

Dit, vreselijk irritant ding.
Graag de mogelijkheid om hem uit te kunnen zetten

[crisp]

Wannial schreef op woensdag 28 juni 2017 @ 10:03:
[...]


Dit, vreselijk irritant ding.
Graag de mogelijkheid om hem uit te kunnen zetten

Cascading Stylesheet:

#toc.fixed { display: none; }

alstu