Van een onzer experianen: Jesse Taverne

Some Things Are Just Too Special To Miss – met deze woorden zorgde Smashing Magazine ervoor dat ik namens Experius een tijdje geleden afreisde naar Freiburg voor hun conferentie. Smashing Magazine is een gerenommeerd platform waar experts blogs schrijven over alles dat te maken heeft met webdevelopment. De conferentie beloofde veel goeds; de bezoekers zouden overladen worden met oplossingen en nieuwe ideeën voor veelvoorkomende problemen in de webwereld. Van het optimaliseren van snelheid voor responsive websites tot het ontwikkelen van schaalbare 'design systems' en van webanimaties tot leren schetsen - alles zou de revue passeren. Het is een grote belofte om na te komen, maar als er één partij is die het waar kan maken is het Smashing Magazine.

De conferentie bestond uit 2 volle dagen met talks, een introductie avond, en optionele dag-workshops. Om het meeste te halen uit het bezoek besloot ik de workshop 'Responsive Design Patterns' te volgen.

 

Twitter is belangrijk

Voordat de conferentie op maandag zou beginnen waren er op zondag al een aantal activiteiten georganiseerd. Het begon goed met een boswandeling in het Schwarzwald. Om 13.00 uur scherp stond ik te wachten met een flesje water, klaar om mijn collega's te ontmoeten. 13.05 zag ik echter nog steeds niemand van Smashing Magazine en om 13.15 realiseerde ik me dat je voor dit soort events waarschijnlijk baat hebt bij een instant-messaging platform zoals Twitter. Bleek dat zonder een e-mail update de tijd van de walk was gewijzigd naar 09.00, en dit alleen via Twitter gecommuniceerd was. Gelukkig vond ik een lotgenoot (welke ook direct Twitter installeerde) en hebben we alsnog een wandeling gemaakt door het prachtige Freiburg en omstreken.

 

(Aside Freiburg: Freiburg is een prachtige middeleeuwse stad met een gezond nachtleven, en de conferentie vond plaats in het op-één-na-mooiste gebouw, het Historisches Kaufhaus - toevallig met uitzicht op het mooiste gebouw van de stad, het FreiburgerMünster - lucky me.)

IMG_1774

 

Lightning talks

Op zondagavond was er voor degenen die zich hadden aangemeld een sessie lightning talks.
Een lightning talk is een praatje van 20 minuten van een vrijwilliger, over een onderwerp waar hij of zij onlangs mee bezig is geweest en de moeite waard vond om te delen.
De onderwerpen liepen behoorlijk uiteen, er waren talks over 'collaborative digital art' (een canvas dat vanuit het publiek via hun smartphones real-time bekleed kon worden), 'hoe pattern labs gedoemd zijn om te falen' (dit werd direct tegengesproken in de dagen die volgden) en een overtuigend pleidooi over 'waarom het zeker niet altijd nodig is om elke website volledig werkend aan te bieden zonder Javscript' van Chris Heilman (Microsoft). De lightning talks waren echter hoofdzakelijk bedoeld om de bezoekers alvast kennis te laten maken met elkaar onder het genot van een biertje (of obscure Duitse limonade uit een heel hip flesje). Het was leuk om m'n collega's nu echt te ontmoeten, hoewel er bijzonder weinig webshop developers tussen zaten.

 

Conferentiedag 1

De eerste dag van de conferentie begon om klokslag 8.00 uur met kwaliteitskoffie en goede broodjes.
Dat was maar goed ook, gezien ik hierna van 9.00 tot 17.00 uur, 8 uur lang informatie moest verwerken - iets dat me onmiddellijk terug deed denken aan de collegebanken, maar dit keer met interessante onderwerpen. Dit alles kwam na een gezamenlijke ochtend oefening waarbij iedereen in het publiek werd geleerd hoe ze een Kazoo moesten bespelen. Dat ging ongeveer zo:

 

https://twitter.com/smashingmag/status/775446112903786496

(Dit filmpje is tevens bewijs van hoe braaf ik op de eerste rij zat.)

 

De onderwerpen waren zeer uiteenlopend en diepgaand. Ik zal ze niet stuk voor stuk nalopen, maar de presentaties zijn in videovorm terug te zien. De interessantste talks voor mij waren die van Lyza Gardner en Nathan Curtis.

 

Lyza is mede oprichter van het bureau Cloud Four, een bekend bureau in de webdesign wereld, mede om hun goede artikelen. Haar talk was een introductie in de wereld van 'Service Workers'. Dit zijn handige tools in moderne browsers die ons als webdevelopers gebruik laten maken van gecachte informatie. Die informatie kunnen wij vervolgens inzetten om een website sneller aan te bieden aan bezoekers, of om een website te voorzien van een standaard offline pagina.  Een slimme manier om bezoekers met een slechte (of niet bestaande) internetverbinding alsnog informatie (zoals een telefoonnummer) aan te bieden. Voor Experius interessant omdat een basisvariant hiervan relatief gemakkelijk te implementeren moet zijn binnen een standaard webshop, waardoor we weer een extra dienst beschikbaar hebben voor onze klanten.

 

Schermafbeelding 2016-10-20 om 13.19.19Nathan Curtis is CEO/oprichter van EightShapes, een firma gespecialiseerd in User Experience. Hij vertelde over zijn favoriete onderwerp: design systems. Een design system kun je zien als een verzameling website-onderdelen (zoals een slider, een zoekformulier, een catalogus overzicht etc.), welke je door slim gebruik van technologie gemakkelijk kunt combineren, zowel in design-vorm als in code. Dit zorgt ervoor dat designers en developers binnen hetzelfde bedrijf een gezamenlijke 'taal' krijgen. Hiermee krijgen alle toekomstige producten die op basis van dit systeem worden gemaakt een coherent uiterlijk en krijgen ze binnen verschillende uitingen (zoals een app, een website en zelfs print-communicatie) allemaal dezelfde uitstraling en boodschap. Nathan gaf praktische tips vanuit de praktijk en waarschuwde voor valkuilen van dergelijke systemen, het belangrijkst volgens hem was dat iedereen die met het design system moet werken betrokken wordt bij de ontwikkeling. Voor Experius is hiervan de relevantie voornamelijk voor interne optimalisatie. Voor 2017 staat, mede met behulp van de informatie van deze conferentie, het opzetten van een design system hoog op het prioriteitenlijstje. Implementatie hiervan moet ervoor zorgen dat we ons werk sneller, beter, en meer coherent kunnen maken, zowel op gebied van design als front-end development. Exciting!

 

Conferentiedag 2

Dag 2 was net als de eerste dag een lange zit. Het weer (26C en zon) zorgde ervoor dat het geheel nog broeieriger was dan de dag ervoor - alsof 300 man in 1 zaal niet warm genoeg was.
De talks waren wederom veelzijdig en informatief, waarbij de meest interessante talks gingen over praktische oplossingen voor everyday-developer-problems, design systems (ja, het is zo'n hot topic dat er twee hele talks en een workshop aan waren gewijd) en een pleidooi voor een focusverplaatsing van millisecond-centric-performance-optimalisatie naar user-centric-performance-optimalisatie.

 

De eerste talk, een case study over het bouwen van de nieuwe site van Smashing Magazine zelf, werd gegeven door de tot dan toe onbekende mystery speaker Sarah Soueidan. Een Libanese front-end developer die anderhalf uur lang iedereen heeft weten te boeien met slimme oplossingen voor veel voorkomende problemen - ik heb nog nooit zoveel aantekeningen gemaakt in anderhalf uur als tijdens haar talk.

 

De talk van Paul LLoyd - net als Nathan Curtis een expert op het gebied van design systems - was een wat abstractere presentatie, waarbij aan de hand van architectuur in Brazilië en de vormgeving van de Underground in Londen werd uitgelegd waar uitdagingen en mogelijkheden zitten op het gebied van design systems.
Weer werd besproken wat de belangrijkste elementen zijn aan het opzetten van een design system (wederom: zorg dat je de uiteindelijke gebruikers betrekt).

 

Denys Mushinov Het pleidooi voor user-centric performance optimalisatie van Denys Mishunov (een front-end developer met een focus op psychgologie) was interessant omdat het een psychologische kant van webdevelopment belichtte.
Normaal gesproken wordt optimalisatie van een website gemeten in hoeveel seconden een webpagina nodig heeft om volledig te laden. Hoewel dit een belangrijke (en meetbare) maatstaf is voor de performance van webpagina's is het lang niet altijd de beste vorm van optimalisatie.
Mishunov legde uit dat de hersenen een passieve en actieve modus hebben. Zodra de passieve modus aan gaat vervelen mensen zich en beginnen zich te ergeren - ze hebben immers niets te doen. Zodra je er echter voor kunt zorgen dat deze passieve modus zo kort mogelijk is heeft de gebruiker niet het gevoel dat hij aan het wachten is en wordt daarmee gezorgd voor een prettige gebruikerservaring. Een voorbeeld van een implementatie hiervan is de achtergrond afbeelding die Facebook inlaadt voordat alle posts worden ingeladen (grijze balken op de plek waar tekst komt, grijze blokken op de plek van profielfoto's). Door snel dit eerste beeld te tonen en de content eroverheen te laden zorgt Facebook dat het lijkt alsof er al een gedeelte ingeladen is. Dit doet de hersenen vervolgens denken dat er binnenkort content aankomt en zet daarmee de hersenen in actieve modus - mensen beschouwen deze vorm van wachten als minder frustrerend dan een wit scherm wat geen indicatie van vooruitgang biedt.

 

Een andere manier van het uitschakelen van de passieve modus  is door te zorgen dat er nagenoeg geen wachttijd is.
Door voorspellingen te doen over wat de vervolgstap gaat zijn van een bezoeker kan er gezorgd worden voor minimale wachttijd.
Wanneer een bezoeker op een productpagina uitkomt zou je bijvoorbeeld al gedeeltes van de meest waarschijnlijke vervolgpagina (namelijk de winkelwagenpagina) kunnen inladen op de achtergrond, waardoor de laadtijd van de vervolgpagina nihil lijkt.
Hetzelfde zou je vervolgens kunnen doen op de winkelwagenpagina met elementen van de checkout.

 

Workshopdag

Als kers op de taart had ik de kans om op de derde dag deel te nemen aan de workshop responsive design van Vitaly Friedman (editor-in-chief van Smashing Magazine). Hoewel de dag bedoeld was als hands-on cursus bleek dit uiteindelijk wat lastig gezien de hoeveelheid stof die Vitaly te behandelen had. Dit resulteerde in een derde conferentiedag (met een beperkt aantal deelnemers en mogelijkheid tot vragen uit het publiek) vol waardevolle tips en tricks, met meer over service-workers, design systems en bijzonder nuttige hacks voor bekende problemen. Gelukkig was niet alles nieuwe stof, en heb ik wel meer kunnen leren over nieuwe technieken waar ik pas deels bekend mee was.

IMG_1881

Wrap-up

Freiburg was een hele waardevolle ervaring. Naast alle nieuwe onderwerpen en tips en tricks is het ook erg de moeite waard om buiten het eigen bedrijf te praten met andere mensen uit het vakgebied. Hierdoor wordt je blikveld verbreed - iets dat nooit kwaad kan, zeker in een markt die zo hard groeit als die van webdevelopment.
De main takeaways op inhoudelijk gebied zijn voor mij heel duidelijk dat zowel design systems en service workers technieken zijn waarmee we veel waarde kunnen toevoegen aan ons huidige portfolio - op intern gebied maar ook voor onze klanten.
Met een goed werkend design system kunnen we zorgen voor verbeterde interne communicatie en een versneld ontwikkel traject - dit staat voor 2017 zeker op de roadmap.

Service workers kunnen zorgen voor veel nieuwe mogelijkheden, zoals  (bijna) volledig functionerende, offline webshops.
Hier moeten we nog het juiste moment voor vinden, maar komen zullen ze zeker.

 

Houdt ons blog voor meer info hierover in de gaten.