Door Sven Koene

UX Designer

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

17-10-2017 • 14:07

35 Linkedin

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%

Aantal stemmen: 827. Deelname gesloten op 18-10-2017 12:00. Stemmen is niet meer mogelijk.

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]

Dat kan je het best hier plaatsen: Mooie Features
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!

Kies score Let op: Beoordeel reacties objectief. De kwaliteit van de argumentatie is leidend voor de beoordeling van een reactie, niet of een mening overeenkomt met die van jou.

Een uitgebreider overzicht van de werking van het moderatiesysteem vind je in de Moderatie FAQ

Rapporteer misbruik van moderaties in Frontpagemoderatie.



Op dit item kan niet meer gereageerd worden.


Nintendo Switch (OLED model) Apple iPhone SE (2022) LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S22 Garmin fēnix 7 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2022 Hosting door True

Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee