Inventis op CSS Day 2018

Geschreven door: Rob Rijken

Donderdag 14 en vrijdag 15 juni trokken we met enkele collega’s naar de jaarlijkse CSS Day conferentie, een event in hartje Amsterdam dat volledig draait rond – je raadt het al – alles wat CSS is of ermee te maken heeft. De eerste dag werd daarnaast ingewijd als UX-special, waarbij de focus van de talks meer op User Experience lag. Kortom, twee dagen gevuld met 16 boeiende talks die we als front-end developers & designers zeker niet wilden missen! Lees hieronder mee over wat we zoal hebben bijgeleerd.

Inventis op CSS Day 2018Dag 1: UX Special

Build bridges, not walls - Design for users across cultures – Jenny Shen

Wanneer je een product ontwikkelt voor een internationale doelgroep is het logischerwijs belangrijk dat je je product aanpast aan die doelgroep. Jenny heeft het in haar talk over hoe het niet langer voldoende is om je website of product te vertalen, maar dat je ook hoort rekening te houden met de cultuur, karakteristieke eigenschappen en gewoontes van je doelgroep. Ook op vlak van UI patronen kan je belangrijke verschillen tegenkomen. Wist je bijvoorbeeld dat terwijl het hamburger icoon bij ons goed gekend is als navigatie of extra opties, een ‘discover’ icoon (in de vorm van een kompas) in China beter gekend is voor diezelfde functionaliteit?

Goed onderzoek is dus van belang, maar hoe pak je dat aan?
Jenny geeft ons enkele tips mee:

  • Voer je onderzoek zoveel mogelijk uit in de taal van de lokale bevolking.
  • Houd rekening met streektalen en dialecten.
  • Lees bronnen zoals blogs, Wikipedia, expat websites en officiële websites van het land in kwestie.
  • Gebruik Hofstede’s country comparison tool om karakteristieke eigenschappen van landen te bekijken en vergelijken.
  • Vergelijk statistieken van device-gebruik via de Globalstats statcounter.

Motion & Playfulness – Benjamin De Cock

Benjamin De Cock pleit in deze talk voor een human-centered design aanpak om zo producten te bouwen die mensen niet enkel moeten gebruiken, maar ook wíllen gebruiken. Subtiele animaties en overgangen kunnen een positieve invloed hebben op de gebruikerservaring, maar wanneer je het verkeerd toepast, heeft het al snel een averechts effect.

Bovendien gaf hij ons zowel op het vlak van design als development ook nog enkele best practices mee:

  • Houd je animaties snel en gebruik custom easing curves voor vloeiende en natuurlijke animaties.
  • Probeer je te beperken tot het animeren van opacity en transform. Deze properties zijn het het minst intensief om te animeren.
  • De meeste effecten kan je met een combinatie van deze twee bereiken. Mocht dat niet lukken, overweeg dan SVG’s te gebruiken.

Kort samengevat: “Animate responsibly”.

Data Sketches: a year of exotic data visualizations – Nadieh Bremer

Nadieh gaf ons in haar talk een zicht op hoe ze haar datavisualisatie project samen met Shirley Wu heeft aangepakt. In dit project kozen ze een jaar lang een maandelijks onderwerp om data van te visualiseren. Een project van lange adem met veel data onderzoek, datamanipulatie, schetsen, programmeren en itereren, maar met interessante resultaten tot gevolg. Heb je je bijvoorbeeld ooit afgevraagd wie er het meest aan het woord is in de Lord of The Rings trilogie en op welke locaties? Zoek niet verder!

'Who's speaking in Middle Earth' - Datavisualisatie door Nadieh Bremer

Dirty Little Tricks From The Dark Corners of eCommerce – Vitaly Friedman

Een heerlijk komische en praktische talk door de co-founder van het welbekende Smashing Magazine. Vitaly heeft het 50 minuten over hoe verschrikkelijk de gemiddelde e-commerce ervaring voor gebruikers wel niet is. Extra onverwachte kosten bij de checkout, verplichte accounts, beperkte betaalmethoden en een algemeen gebrek aan vertrouwen in het platform dragen allemaal bij tot een gemiddelde shopping cart abandonment rate van 69%. Naast de pijnpunten overloopt hij de vaak kleine maar oh zo belangrijke optimalisaties die we kunnen doen om de UX te verbeteren en zo conversie van een webshop omhoog te krikken.

Verder kwam Alla Kholmatova ons vertellen over ‘Design Principles’, had Ida Aalen het over ‘User Testing on a Budget’ en wist Jane Austin ons met ‘10 Easy Ways To Irritate Your Design Team’ duidelijk te maken hoe je design succesvol in je bedrijf integreert. Om de dag af te sluiten was er nog Andy Budd, die ons meer kwam vertellen over design leadership in zijn talk ‘The Accidental Leader’.

 

Dag 2: CSS Day

The Friction of Web Standards – Eric Meyer

Dag twee starten we met een talk van Eric Meyer, waarin hij ons een blik achter de schermen van de Web Standards geeft. Met een aantal voorbeelden maakt hij duidelijk dat een op het eerste zicht eenvoudige CSS property enorm complex kan zijn om uit te werken tot een web standaard. Een voorbeeld dat hij aanhaalde is de border radius en hoe daarbij om te gaan met verschillende border widths, styles en background images.

Golden Rules for Typography on the Web – Richard Rutter

“Webdesign is 95% typography, dus het is niet meer dan logisch dat een webdesigner opleiding zou moeten krijgen in typografie.” Zo start Richard Rutter zijn talk over web typografie. Hij geeft ons 10 richtlijnen mee naar mooie, responsive typografie die ‘gewoon werkt’. Topics die hierbij onder andere aangehaald worden zijn variable fonts, het optimaliseren van page render timing, payload reduction (door te kiezen voor het WOFF2 formaat) en leesafstand versus tekstgrootte.

CSS for the next billion users – Ire Aderinokun

Een interessante talk van de Nigeriaanse Ire Aderinokun over het bouwen van websites voor ‘The next billion users’, of met andere woorden de gebruikersgroep die – nu technologie toegankelijker wordt – voor de eerste keer online komt. Denk aan personen in ontwikkelingslanden, personen die geen Engels spreken of de personen die door een beperking geen gebruik konden maken van het internet.

“In Nigeria, the average person has to work 28 hours to earn enough to use 500MB of data. In Germany, it’s only 1 hour.” Performance is voor deze groep dus een belangrijke factor, iets wat Ire met enkele tips & best practices duidelijk maakt. Zo heeft ze het onder andere over het gebruiken van de juiste tools (HTML voor content, CSS voor presentatie, JS voor functionaliteit), globally-aware benamingen, selector efficiency, het gebruik van feature queries en meer.

SVG Filters – Sara Soueidan

Met SVG-filters haal je een hele reeks effecten die je normaal gezien in Photoshop zou toepassen – zoals blurring, blend modes, displacement maps, color matrix en meer – rechtstreeks naar je browser. Sara Soueidan gaat als een sneltrein door deze technische talk over wat er mogelijk is met SVG-filters en hoe ze door filters te combineren bepaalde effecten heeft bereikt. Een intensieve maar boeiende crash course!

Naast bovenstaande talks kwam Chen Hui Jing ons nog alles vertellen over ‘Box alignment’, gaat Greg Whitworth in op ‘Container queries’ en de oplossingen die we er de dag van vandaag voor hebben, en weet Hidde de Vries ons meer te vertellen over hoe het web klaar is voor ‘Great graphic design’. Tot slot was er nog een talk van de excentrieke Bruce Lawson over ‘CSS-in-JS’, de controverse errond en een oplossing in de vorm van Stylable.io.

Conclusie

Onze eerste editie van CSS Day was alvast een succes!
Zowel op het vlak van design als development hebben we verschillende inzichten opgedaan waarmee we kunnen experimenteren en die we kunnen meenemen in projecten voor onze klanten.

Mocht je zelf meer willen weten over één of meerdere talks tijdens CSS Day, dan kan je hier enkele slides herbekijken. De opnames van de talks zullen na verloop van tijd ook online komen. Houd daarvoor het CSS Day Vimeo kanaal in de gaten!

0 Reacties op deze blogpost:

Er zijn momenteel nog geen reacties op deze blogpost.

Reageer ook op dit artikel


{* Remarketing tag *}