Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

Door Sven Koene

UX Designer

Finetunen van de lay-out en hands-on - Development-iteratie #117

17-10-2017 • 14:07

35 Linkedin Google+

Onze developers hebben iteratie #117 opgeleverd. De focus lag in deze sprint op de implementatie van een nieuwe editor voor het redactionele cms en een nieuwe tool voor het genereren van thumbnails.

Aanpassingen titelfont

Tweakers gebruikt al jaren de Roboto Condensed als lettertype voor paginatitels. Dit lettertype biedt een goede leesbaarheid op beeldschermen met een lage pixeldichtheid en is beschikbaar onder de vrije softwarelicentie van de Apache Foundation. Ook is de Roboto standaard aanwezig op Android-apparaten. Een nadeel is dat er maar twee zwaartes beschikbaar zijn van de versmalde variant. De reguliere variant vonden we wat aan de lichte kant en de dikgedrukte juist te zwaar. We hebben zelf een tussenvariant gemaakt die de koppen net wat dikker aanzet, zodat ze wat meer body hebben en beter leesbaar zijn.

Hero-afbeelding

Daarnaast hebben we een aanpassing gedaan in de weergave van de hero-afbeelding. Voorheen hield de afbeelding op desktops een vaste hoogte aan, waardoor een deel van de afbeelding wegviel aan de linker- en rechterkant als je Tweakers niet fullscreen bekeek op een full-hd-scherm. Nu wordt de afbeelding altijd volledig getoond in de breedte en is de hoogte variabel, afhankelijk van de breedte van de viewport. Voor de redacteuren is het daardoor beter te voorspellen wat er in beeld zal zijn en als gebruiker zie je een vollediger beeld.

Nieuwe editor

Daarnaast werken we aan een nieuwe, en in onze ogen betere, editor voor de redactie: CKEditor. De editor waarmee onze redactie werkt, is al een tijdje aan vervanging toe, ook omdat alle aanpassingen die door de jaren heen zijn gedaan, inmiddels uit een berg tech-debt bestaan. Hiermee voorzien we de redactie dus niet alleen van een nieuwe tool, maar ruimen we ook weer een beetje op.

Hands-on

We hebben regelmatig feedback gekregen over gebruikersreviews waarbij de reviewer eigenlijk te weinig tijd heeft gehad om een product goed te testen. Als je een product slechts een uurtje mag proberen, geeft dat natuurlijk niet dezelfde ervaring als wanneer je het product twee weken lang dagelijks gebruikt. In het laatste geval kun je tegen situaties aanlopen waaraan je in het eerste uur niet denkt. Voor deze situatie hebben we nu de 'hands-on'-optie voor een gebruikersreview. Wat is daar dan zo anders aan? Omdat we vinden dat de testperiode wel degelijk uitmaakt bij hoe je een product ervaart, laten we de hands-on niet meetellen in de scores die worden gegeven. Je kunt dus geen eindoordeel geven of subcriteria. We hopen dat je zelf de juiste keuze maakt tussen een hands-on en een review.

Community-pick - Iteratie #118

Je kunt weer stemmen op je favoriete feature. Stemmen kan tot woensdag 12.00 uur.

Betaalmethode 'n.v.t.' automatisch selecteren bij plaatsen advertentie van gratis/te ruilen product
34,6%
Notificaties van ongelezen dm's van dezelfde thread samenvoegen
24,9%
Topicacties ook onder forumtopic weergeven
23,5%
Dm-thread weergeven onder preview van nieuw bericht
11,4%
Alleen nieuwste dm als ongelezen markeren in berichteninbox
5,7%

Stemmen: 827
Deze poll is gesloten

Reacties (35)

Wijzig sortering
Feat request: maak die karma/foto opslag bruikbaar, door meerdere foto's gelijktijdig te uploaden (en insluiten in je forum post) ... Dat kon zelfs by Hyves al :+ maar op t.net zeker via mobiel, gruwelijke onhandig

[Reactie gewijzigd door himlims_ op 17 oktober 2017 14:10]

Ja inderdaad... Dat begint nu wel erg te erg te worden!!!
T.net Fotoalbum en de bijbehorende functies beginnen behoorlijk outdated te raken, ja. Even snel een afbeelding op het forum slingeren, is verder prima via de foto album optie in Post Reply, maar meerdere afbeeldingen.... pfff...
Om eerlijk te zijn snap ik 4 van de 5 opties niet eens.. dus jouw suggestie krijgt mijn vote ;).

Meer on-topic:
  • Wat is een topicactie?
  • Wat is een DM-thread?
Maken jullie het lettertype ook beschikbaar? Ik vermoed dat de licentie vereist dat je aanpassingen ook deelt met de buitenwereld? (I stand corrected.)

[Reactie gewijzigd door BramVroy op 17 oktober 2017 14:28]

Daar heb je niets aan, zie post hierboven over de embeddable flag van het font (fsType)

Tweakers heeft deze op 'editable' gezet, maar niet op 'installable'.

https://s1.postimg.org/9afb332gvz/Clipboard-2.png

Dus de toepassings-ruimte er van is bewust beperkt gehouden door Tweakers.net en deze font mag je niet zo maar installeren; https://tweakimg.net/x/fonts/RobotoCondensed-Medium.ttf
Je kan makkelijk de .woff converten naar .ttf en dan deze wel installeren. Dus je hebt er wel degelijk wat aan als je weet wat je doet.

Ik zag de .ttf niet staan tussen mijn netwerk tab en heb er ook niet naar gezocht.
Als typograaf weet ik wat ik doe :p

En als Tweakers in de meta-data van de .ttf / .woff / .eot / .woff2 / .svg bepaalt dat de ftType op 1 of 2 staat en niet op 8, geven ze daarmee indirect aan dat ze niet willen dat jij hun font embed / installed...
Ik had het over iedereen die de font wou gebruiken er wat aan heeft.

Kan zo zijn, maar is niemand tot verplicht gelukkig.
Aangezien dat dit gewoon een webfont is kan je de url voor deze bestanden in de @font-face definitie in de css stylesheet vinden. Dus openbaar is deze in dit geval al.

Niet elke opensource licentie vereist trouwens dat aanpassingen openbaar gemaakt en vrij aangeboden moeten worden, dit is dus ook het geval met de apache licentie van het Roboto font.
Aangezien dat dit gewoon een webfont is kan je de url voor deze bestanden in de @font-face definitie in de css stylesheet vinden. Dus openbaar is deze in dit geval al.
Maar dat wil niet zeggen dat je ze ook kan / mag gebruiken...

Fonts ontsluiten via de cache van je browser (en dus lokaal opslaan) staat gelijk aan publicatie er van en dat is per font anders geregeld...

Sowieso kan je een font openbaren en toch bepalen dat hij alleen passief (read only) gebruikt mag worden door de embeddable flag in OS/2 (nee, niet het OS zelf...) te zetten;

fsType values:
  • 0 embedding for permanent installation
  • 1 reserved - do not use
  • 2 embedding restricted (not allowed)
  • 4 embedding for preview & printing allowed
  • 8 embedding for editing allowed
Als een font-distributeur de waarde niet op 8 zet, kan je er dus feitelijk niet veel mee ( of zelf omcutten via http://www.derwok.de/downloads/ttfpatch/ )
"Een nadeel is dat er maar twee zwaartes beschikbaar zijn van de versmalde variant."

https://fonts.google.com/specimen/Roboto+Condensed

Er zijn toch drie? Mis ik iets?
Ja, er zijn er 3.
Maar van de niet versmalde variant is er ook een 4de Medium en een 5de Black.

Maar de medium ontbrak dus in de condensed/versmalde variant.

[Reactie gewijzigd door NIMIC op 17 oktober 2017 14:30]

Medium is er gewoon hoor.
Waar dan? Medium is er echt alleen maar voor de reguliere Roboto, niet Condensed.

[Reactie gewijzigd door P1nGu1n op 17 oktober 2017 14:39]

Waarschijnlijk bedoelen ze twee zwaartes naast Regular.
IMO is het lettertype nu wat te dik.. Alsof ze daar op het hoofdkantoor van Tweakers de letters vetmesten. :P
Iedere sprint wordt het lettertype ietsje dikker tot het nieuwe jaar dan wordt hij de eerste sprint(s) weer wat slanker.
Laat me raden: als voornemen voor het nieuwe jaar? :+
Dat zou een tactiek kunnen zijn om de layout weer 'vers en nieuw' te laten lijken zonder dat ze er daadwerkelijk tijd in hoeven te steken :D
Tot hoeverre kan je in CKeditor widgets gebruiken om bijv. citaten of afbeeldingsgalerijen toe te voegen? Of gebruikt de redactie daar placeholder-variabelen voor?
Op dit moment gebruiken we daar RML-like tags voor die bij weergave geparsed worden. Het is de bedoeling dat we die mbv 'widgets' meer visueel gaan maken in de editor zelf. Een video-embed kan bijvoorbeeld de placeholder tonen met een play-button er op etc. Op die manier kan een redacteur al tijdens het schrijven van een artikel zie hoe het eindresultaat er (grotendeels) uit komt te zien.

[Reactie gewijzigd door crisp op 17 oktober 2017 17:41]

Waarom geen Markdown-editor?

Ik heb op basis van deze https://simplemde.com/ een heel eigen editor gemaakt, incl. (semi) preview van video, oEmbed, etc...

Voordeel van Markdown tov. Markup is toch wel dat je layout nauwelijks kapot kan gaan door verkeerd geplaatste opmaak-code (en het kan zelfs wysiwyg met een toggle die ik zelf in de editor had aangebracht voor Kirby CMS).
Waarom ineens overstappen op een compleet andere markup taal? De basis die we nu al gebruiken voor de redactie is gewoon HTML. In feite willen we de redactie op dat punt ook niet teveel 'beperken' (al zijn <style> en <script> niet zondermeer toegestaan). CKEditor biedt ons alle mogelijkheden die we nodig hebben en is in de basis bijna een drop-in replacement van onze huidige editor :)
Betaalmethode 'n.v.t.' automatisch selecteren bij plaatsen advertentie van gratis/te ruilen product
De opties worden wel steeds beter zeg. ;)
Feature request voor volgende keer: optie om de volgorde van vergeleken items in Pricewatch-vergelijking te wijzigen zonder dat je de productcodes in de URL hoeft rond te slepen. Op dekstop nog wel ok, op mobiel niet zo handig :P
@dinnnozo
Dan moet je hier zijn, want hier wordt het opgepakt: Mooie Features

[Reactie gewijzigd door AnonymousWP op 17 oktober 2017 14:29]

Wat betreft editor, zeer goed bezig. CKEditor is wat mij betreft nummer 1, gebruik zelf ook voor klanten. Is ff afwachten wat versie 5 precies gaat brengen, maar verwacht daar veel van.
CKEditor is an sich een fijne editor, maar voor plugins e.d. echt een kriem af en toe, wat ik van collega's begrepen heb, dus ik wens jullie alvast veel succes!

Op dit item kan niet meer gereageerd worden.


Apple iPhone XS Red Dead Redemption 2 LG W7 Google Pixel 3 XL OnePlus 6T (6GB ram) FIFA 19 Samsung Galaxy S10 Google Pixel 3

Tweakers vormt samen met Tweakers Elect, Hardware.Info, Autotrack, Nationale Vacaturebank en Intermediair de Persgroep Online Services B.V.
Alle rechten voorbehouden © 1998 - 2018 Hosting door True