Twee dagen inspiratie opdoen en nieuwe trucjes leren op CSS Day 2019!

Een tweedaagse conferentie volgepakt met talks van vooraanstaande sprekers uit de front-end en design industrie over de laatste ontwikkelingen omtrent CSS en User Interface design? YES PLEASE!!!
Dat is de zevende editie van CSS DAY in een notendop. Op donderdag 13 & vrijdag 14 juni zijn we daarom met drie man sterk (Kevin, Willemijn en ondergetekende) afgereisd naar het Compagnietheater in Amsterdam voor de nodige inspiratie en nieuwe kennis.

Dag 1 – UI Special

Op de eerste dag waren er in totaal acht hoogstaande talks van ieder ongeveer drie kwartier. Deze talks gingen onder andere  over design en development van user interfaces. Lees verder en ontdek wat er voor ons uitsprong.

Josh Clark – A.I. is your new design material  

Het bal werd geopend door Josh Clark met een sterke presentatie over machine learning. De centrale vraag in zijn verhaal was hoe we machine learning op zo’n manier kunnen inzetten, dat we de machines maximaal benutten en wij mensen maximaal tot ons recht komen.

De kracht van A.I. en machine learning zit hem in het overnemen van voorspelbare repetitieve taken. Hierdoor krijgen wij dan zelf meer ruimte voor de meer uitdagende en interessante taken, zoals werk dat de nodige creativiteit vereist.
A.I. hoeft niet alleen ingezet te worden als oplossing voor grote alomvattende problemen, maar het kan ook prima gebruikt worden bij het ondersteunen van gebruikers bij kleine interacties.

Hakim El Hattab – Building better interfaces

Ons front-enders hart ging sneller kloppen bij de presentatie van Hakim El Hattab. Deze Zweedse designer/developer staat namelijk bekend om zijn ingenieuze UI oplossingen.

Aan de hand van een aantal voorbeelden liet hij zien hoe hij te werk ging om op het eerste gezicht goed werkende interacties verder te optimaliseren en nog gebruiksvriendelijker te maken.
Onder het mom van… het kan altijd beter!

Next-level was zijn dropdown menu, waarbij de hit-area dynamisch berekend wordt zodat de dropdown nooit meer op ongewenste momenten dicht kan klappen. Supercool!

Joe Leech – UX, psychology and your product

Veel gebruikers die taken moeten uitvoeren met applicaties die wij ontwerpen/bouwen, hebben daar vaak helemaal geen zin. Denk dan bijvoorbeeld aan bankieren of het afsluiten van een verzekering. Bovendien worden ze tijdens het uitvoeren van dit soort taken vaak afgeleid.
Wij mensen blijken dus helemaal niet zo goed te zijn in multitasken. En dit levert voor designers / developers een flinke uitdaging op.

Mensen leren en onthouden dingen beter d.m.v. opeenvolgende stappen / sequenties (procedurele kennis) ten opzichte van het simpelweg leren van feiten (declaratieve kennis). Aan de hand van een aantal voorbeelden heeft Joe laten zien hoe we van dit gegeven gebruik kunnen maken bij het ontwerpen en gebruiksvriendelijker maken van interacties.

Een voorbeeld waarbij het principe van sequenties is toegepast, is het tekenen van een patroon om in te loggen op je mobiele telefoon in plaats van het intoetsen van een pincode die je uit je hoofd moet leren.

Bovenstaande is slechts een greep uit de talks van dag 1. Bijna alle talks van de eerste dag waren de moeite waard (Brad Frost, Başak Haznedaroğlu). Het niveau lag erg hoog en doordat een talk gemiddeld ongeveer 45 minuten duurde was er volop ruimte voor verdieping.

Dag 2 – CSS day

Dusss… op de tweede dag van CSS day draaide het natuurlijk vooral om… jawel.. CSS!

Een gevarieerd aanbod aan CSS gerelateerde talks waarbij verschillende nieuwe, onderbelichte of nog te ontwikkelen features van CSS aan bod kwamen. Daarnaast werd de ontwikkeling van CSS als programmeertaal besproken. Bovendien werd uitgelegd hoe het implementeren van een nieuwe CSS feature in zijn werk gaat.

Een dag over blokken, grids en het verticaal ritme van layouts dus.

Rachel Andrew – Refactoring (the way we talk about) CSS

Over CSS wordt vaak nog gesproken alsof het een fragiele, ongestructureerde en ietwat rommelige taal is. Rachel probeerde hier met haar talk verandering in te brengen. Ze ging diep in op de fundamentals van CSS en de positieve ontwikkelingen die CSS als taal de afgelopen jaren heeft doorgemaakt.

Wanneer je de fundamentele keuzes achter CSS begrijpt, kun je de mogelijkheden die CSS biedt ook effectiever te benutten.

Fonts & Layouts

In de twee daarop volgende talks van Florian Rivoal en Elika J. Etemad werd diep ingegaan op het stylen en formatten van tekst. Florian ging uitgebreid in op het hoe en waarom van line breaking en alle mogelijkheden die je hebt. Bekijk deze talk hier.

Een probleem waar we bij het opmaken van websites vaak nog tegenaan lopen is dat elk font weer net iets anders is opgebouwd. De baseline zit niet altijd op dezelfde plek. Daarom is de ruimte boven en onder de letters nooit gelijk. In veel gevallen heb je op dit moment dus weinig tot geen controle over witruimtes en regelafstanden bij teksten waarin verschillende fonts en font sizes gebruikt worden. Het is dan lastig om de witruimtes en regelafstanden in teksten consistent te krijgen en op die manier te zorgen voor een goed ‘leesritme’. Dit tot afgrijzen van veel grafisch ontwerpers en DTP-ers. Er is echter licht aan de horizon.
De talk van Elika ging over mogelijke toekomstige features van CSS die ons meer controle kunnen geven over de weergave van fonts en wat daar allemaal voor nodig is.

Bekijk de talk van Elika hier terug.

Heydon Pickering – Flexbox Holy Albatross

Het evenement werd afgesloten door Heydon Pickering. Omdat na twee dagen vol talks de aandacht en concentratie van het publiek meestal wel wat verslapt is, is dat vaak een ondankbare taak. Met een goed verhaal en veel humor wist hij gelukkig de aandacht moeiteloos vast te houden.

In zijn talk behandelde hij een zelf ontwikkelde ‘flexbox CSS hack’, waarmee je elementen op basis van de breedte van het element zelf en de beschikbare ruimte kunt stylen. Op dit moment is stylen op basis van schermbreedte de standaard. Deze hack is superhandig omdat compontenten op die manier overal inzetbaar zijn, Je hoeft hiervoor dan geen extra styling op basis van een template of de locatie van het component te schrijven.
Daardoor verbetert de code en heb je minder afhankelijkheden.

Voorbeelden van dit soort oplossingen kun je op every-layout.dev vinden.

Recap

Ondanks dat dit alweer de zevende editie van CSS DAY was, was het voor ons de eerste keer dat we op CCS DAY aanwezig waren.
Het niveau van de sprekers was erg hoog en de onderwerpen gevarieerd en interessant.
De lengte van de talks bood voldoende ruimte voor diepgang.
Al met al twee inspirerende en leerzame dagen.