Verbeterde refurbished-omschrijvingen - Development-iteratie #187

Development-iteratie #187 is afgerond. In deze iteratie hebben we de refurbished-omschrijven geüpdatet en onderzoek gedaan naar de mogelijkheden die een css-framework ons kan bieden.

Refurbished-omschrijvingen

Al ruim een jaar staan er refurbished en teruggestuurde producten in de Pricewatch. Bij introductie van deze nieuwe functionaliteit zijn er vier verschillende statussen gevormd, die getoond worden als de verkopende partij geen omschrijving meegeeft. Deze omschrijvingen bleken niet in alle gevallen de lading te dekken. Om deze reden hebben we omschrijvingen verbeterd en aangepast naar:

1. Nieuwstaat - open doos: Nieuw product met originele accessoires en handleidingen. De verpakking kan geopend of beschadigd zijn. 100 procent technisch in orde.
2. Nieuwstaat - refurbished: In de hoogste kwaliteit gerepareerd, schoongemaakt en gecontroleerd door een gecertificeerde reparateur of fabrikant. Nauwelijks van nieuw te onderscheiden. 100 procent technisch in orde.
3. Lichte gebruikssporen: In goede conditie, met enkele sporen die je bij normaal gebruik mag verwachten, waaronder enkele haarfijne krasjes of scheurtjes aan de rand van het product. Deze gebruikssporen staan normaal gebruik niet in de weg. 100 procent technisch in orde.
4. Zichtbaar beschadigd: Heeft zichtbare deuken of krassen, maar beperken de functionaliteit van het apparaat niet. Bijvoorbeeld beschadigingen op de achterkant of aan de rand, maar niet op belangrijke onderdelen zoals een scherm. 100 procent technisch in orde.

Css-framework

Nu we een aantal maanden geleden een nieuw build-proces hebben voor onze Javascript, zijn we nu ook begonnen met het voorwerk om te kijken of het handiger/sneller is om een css-framework in gebruik te nemen, deze sprint zijn we bezig geweest met research doen naar css-frameworks.

Op dit moment gebruiken we SCSS en de native node-sass om de SCSS te compilen naar CSS. Dit heeft op dit moment als voordeel dat het zeer lightweight is en je precies kunt stylen wat je wilt. Echter is er in de loop van de jaren wel enige technical debt opgebouwd. Dit heeft er voor gezorgd dat we veel tijd kwijt zijn om styling toe te passen op generieke ui-componenten.

Daarom zijn we deze sprint gaan kijken of een css-framework een oplossing kan zijn. Met als achterliggende gedachte dat we beter met onze ux-designers kunnen samenwerken en we een consistente library met componenten kunnen gaan opzetten die over de hele website gebruikt kan worden, wat het veranderen van ui-componenten en styling zal versimpelen.

Reacties (24)

[Creesch]

Ik heb het gevoel dat er wat tekst mist bij het stukje over CSS frameworks. Leuk dat jullie er naar gekeken hebben maar ik ben dan ook eigenlijk wel benieuwd waar jullie (tot nu toe) tegen aan zijn gelopen en welke kant de keuze op lijkt te gaan?

[watcher46]

Op dit moment is de website desktop-first ontworpen. Als je de bron van deze pagina bekijkt zie je dat er diverse css wordt ingeladen aan de hand van de grootte van het scherm. In het verleden (nog voor dat mobiel bezoek main-stream was) was het dan ook voor de hand liggend dat we vanuit desktop beredeneerde.
Als we nu dus pagina's ontwerpen/aanpassen, moeten vanuit desktop naar beneden redeneren. Wat er voor zorgt dat je niet schaalbaar bent.
Tegenwoordig is mobiel gebruik veel meer dan vroeger en is er ook een design principe genaamd mobile-first. Wat er voor zorgt dat je (even kort door de bocht) op mobiel alles 100% breed zet, en per device-grade naar boven gaat schalen. Nu kunnen we dit principe lastig toepassen op de bestaande code.

Dit is een van de dingen waar we tegenaan lopen op dit moment.
Om het wiel niet opnieuw uit te vinden, hebben we afgelopen sprint gekeken of het mogelijk is om een CSS framework te gebruiken. Waaronder Bootstrap4, Tailwind, Foundation en Bulma.

Op dit moment lijkt het een oplossing te bieden om een framework te gebruiken. Maar voor we dit besluiten, willen we eerst een proof of concept hiermee maken. Kijken of het echt een toevoeging is, het kan ook zo zijn dat we het huidige grid kunnen omgooien zodat we mobile-first kunnen gaan stylen.

Kortom, nog een work in progress.

[Oon]

Kunnen we hiermee dan verwachten dat de website beter te gebruiken gaat worden op een klein scherm?

Als (o.a. frontend) developer zie ik overigens heel vaak dat websites omgebouwd worden van desktop-first naar mobile-first, maar daarin enorm veel gebruikersgemak verliezen op de desktop-website; hebben jullie specifieke plannen om dit te voorkomen (bijv. UX-regressietesten)?

Aan de developmentkant kan ik zeer zeker aanraden om Bootstrap 4 als basis in je SCSS-compile te gooien. Je hebt dan (mits je het goed aanpakt) de mogelijkheid om de SCSS-variabelen direct te overriden en dus de (IMO lelijke) Bootstrap-eigen styling er direct vanaf het begin uit te werken. Bij Bootstrap heb je ook het vertrouwen dat je mobile-first design technisch in orde is, iets dat bij veel andere frameworks niet altijd het geval is (alleen al door edge-cases die nog niet voorgekomen zijn door een kleiner marktaandeel, niet per sé door kwaliteitsverschil).

Als ik zo de broncode van Tweakers bekijk vanuit mijn browser (waar ik dus niet evt. markup linting en templating kan zien) dan lijkt het me een flink project om e.e.a. generieker te maken, dus ik ben benieuwd! Mooie uitdaging om dezelfde look & feel in stand te houden maar toch je tech debt weg te werken en alles beter onderhoudbaar te maken.

[TheVivaldi]

Is responsive design niet bedoeld om op zowel mobiel als desktop prettig te werken?

Wat dat betreft is het jammer dat WAP niet meer gangbaar is, want dat vond ik altijd wel prettig navigeren op mobiel

[Oon]

Is responsive design niet bedoeld om op zowel mobiel als desktop prettig te werken?

In de basis is responsive design gewoon ontwerpen met de gedachte dat iets op iedere schermgrootte leesbaar en bruikbaar wordt, zonder dat hierbij een 'm.' website nodig is. Op het begin ging het puur om het schalen, laten wegvallen of inklappen van elementen op een kleiner scherm, zoals bij Tweakers ook het geval is (desktop first). Naarmate telefoons meer en meer op het net kwamen en desktops minder hebben de grote frameworks zoals Bootstrap het omgegooid waar je eerst ontwerpt voor een klein scherm, en op desktop dingen naast i.p.v. onder elkaar laat zien.

Niet alle sites doen dat netjes, je krijgt vaak een iets uitgebreidere mobiele website te zien waar je ook op een groot scherm nog het menu uit moet klappen in plaats van dat de knoppen direct zichtbaar zijn.

Ik neem aan dat een tech-gerelateerde site als Tweakers dat wel op een goede manier gaat oplossen, maar helaas zie je vaak dat responsive design meer 'werkt ook op desktop als het echt moet' is.

[OmgItsKoen]

Natuurlijk, maar de aanname bij mobile-first is dat het overgrote deel van je gebruikers via een smartphone of tablet naar je website browset, in plaats van vanuit de desktop.

[Chris7]

Ik ben zelf echt enorm blij met Tailwind (https://tailwindcss.com/ voor degenen die het niet kennen). Is een andere manier van werken doordat je alleen utilities hebt en alleen in uitzonderingsgevallen classes maakt voor specifieke componenten.

Een groot voordeel tov andere frameworks zoals Bootstrap en Bulma is dat het niet geredeneerd vanuit componenten is, waardoor je bestaande styling eruit moet slopen om die aan te passen aan je custom design (uiteraard kunnen Bootstrap en consorten heel fijn zijn als je niet een eigen design aan het implementeren bent). Daarnaast schrijf je eigenlijk geen CSS meer omdat alles te ondervangen is met utilities.

Ik gebruik Tailwind nu voor vrijwel elk project en wil echt nooit meer terug naar andere frameworks. Werk nu aan een ouder project met Bootstrap 4 maar die heeft ook veel utility classes beschikbaar, dus dat werkt al redelijk fijn.

[LuBJe]

Hier ook een tevreden gebruiker, met daarbij nog https://github.com/alpinejs/alpine voor de benodigde JavaScript en een minimale overhead.

[RoestVrijStaal]

Op dit moment is de website desktop-first ontworpen.

Vind je?

De content staat vaak gecentreerd in het scherm, met flinke "witruimte" aan weerszijden. Alsof we nog in het 4:3 CRT/TFT tijdperk leven en dat breedbeeld nog niet mainstream is.

Kijk eens bijvoorbeeld naar een pagina van Dumpert waar een video af gespeeld wordt.
Daar wordt een breedbeeldscherm wel optimaal gebruikt. Het content waar het om gaat (in dit geval de video) en de secundaire content ernaast (of eronder) en scrollbaar (de reacties en gerelateerde video's).

[Reactie gewijzigd door RoestVrijStaal op 25 juli 2024 11:33]

[gold_dust]

Wat met een makkelijke optie bovenaan om refurbished weg te filteren? Als je bijvoorbeeld op Apple laptops zoekt en vervolgens op prijs sorteert krijg je heel veel refurbished te zien, iets waar ik in ieder geval geen interesse in heb.

[aequitas]

Mee eens. Daarnaast staan er soms ook producten op vanuit b.v. Bol plaza die refurbished zijn maar niet zo vermeld zijn: pricewatch: Apple iPad mini 2 Wi-Fi + Cellular 64GB Grijs

[GewoonWatSpulle]

Ook typisch zo'n verkoop kanaal wat volgens mij meer in V&A thuis hoort ipv. Pricewatch.

[claudior]

Ja, mee eens. Wat mij betreft het meest dringende wat aangaande refurbished aangepakt moet worden.

[Xfade]

Of aan de linker kant iets, zodat je wat u zegt, het uit kan zetten, maar ook een optie om specifiek op refurbished te zoeken lijkt me ook wel wat.

[GewoonWatSpulle]

Inderdaad laat die zaken gewoon via Vraag & Aanbod lopen en niet de pricewatch vervuilen, we zijn niet geïnteresseerd in het prijs verloop van een enkel aangeboden product, wel die van structureel aangeboden producten bij verschillende aanbieders.

[.oisyn]

Die laat ie ook alleen zien als er verder geen prijzen vermeld staan. Toen ik op zoek was naar een laptopje wilde ik juist ook best de refurbished modellen bekijken, maar dat gaat dus heel lastig als al die dingen ook gewoon een nieuwprijs hebben, want dan staan ze niet in het overzicht.

Dus eens, het zou handig zijn als je erop kon filteren (zowel alleen refurbished als geen refurbished)

[sambalbaj]

Nog makkelijker is als je bovenaan de optie hebt om refurbished aan te vinken en het niet standaard aan staat.
Opt-in ipv opt-out.

Wat nog wel een punt blijft is als een product niet meer nieuw maar enkel nog refurbished te koop is, de lijn met prijsveranderingen wel gewoon doorloopt. Ook dat zou opgelost worden door het niet standaard aan te zetten en die prijslijn enkel voor nieuwprijs te laten gelden.

[supersnathan94]

Wat bedoelen jullie precies met een CSS framework? Dingen als Bootstrap en fontawesome zijn in principe ook CSS frameworks, maar ik gok dat jullie iets anders bedoelen?

[watcher46]

We bedoelen inderdaad Bootstrap en consorten. Let wel, we hebben het dan wel alleen over het scss-gedeelte. Bootstrap4 biedt ook componenten met interactie, dat gaat gepaard met jQuery. Dat laatste willen we sowieso niet. Dus in theorie valt BS4 af. Maar Bootstrap5 daarentegen. Maar die is nog in alpha, maar houden we goed in de gaten!

[Cyw00d]

Bootstrap leent zich prima om alleen het grid systeem te gebruiken als scss variant. Hiervoor heb je een integratie zonder alle componenten/styling en dus ook geen jquery nodig. Je hebt dan puur een integratie van het grid, verder niets.

[watcher46]

Dat klopt, de insteek is wel, dat als we een framework gebruiken we het niet alleen voor het grid (om die als voorbeeld te noemen) gaan gebruiken. Zodat het framework voor de consistentie zorgt en dat je zelf je componenten consistent moet zien te houden.

[bbob]

Nieuwstaat - refurbished: In de hoogste kwaliteit gerepareerd, schoongemaakt en gecontroleerd door een gecertificeerde reparateur of fabrikant. Nauwelijks van nieuw te onderscheiden. 100 procent technisch in orde.

Voor producten met een ingebouwde accu vraag ik me dan af is er bij deze staat van refurbished de accu vervangen ?
Zo niet past dit niet echt onder nieuwstaat.

[Jeroen73]

Een accu die in de winkel een half jaar op plank heeft gelegen of zijn broertje die intussen verkocht, geretourneerd en refurbished weer wordt aangeboden? Maakt toch niet uit dan?

[Reactie gewijzigd door Jeroen73 op 25 juli 2024 11:33]

[AW_Bos]

Grappig dat Tweakers nu kiest voor een grid-systeem die BS4 onder andere heeft.
Gezien haast alle code van Tweakers in eigen huis geschreven is, en niet rust op externe libraries vraag ik mij af of het niet zinvoller is voor Tweakers om een eigen grid-systeem te schrijven die compatible is met de huidige styling en UI?