Overslaan en naar de inhoud gaan

Frontend United

Frontend United

In het weekend van 21 en 22 april 2012 was het het Frontend United weekend. Een Drupalcongres speciaal voor alles wat met frontend te maken heeft. De venue was Pakhuis de Zwijger in hartje Amsterdam, prima locatie. Wat mij het eerste opviel bij binnenkomst was het internationale karakter van het evenement. Er waren mensen uit Denemarken, Zweden, Amerika en Duitsland (en een hoop andere). Nederland staat nu op de kaart met een fantastisch evenement als dit, #fistpump.

SESSIES ZATERDAG

Designing Drupal 8

Designing Drupal 8 Drupal staat niet altijd synoniem voor een gebruiksvriendelijke backend voor niet-ontwikkelaars. Ze worden links en rechts ingehaald door de concurrentie. Daar moet iets aan gedaan worden. In Drupal 8 is een hoop denkwerk gaan zitten in de backend. Er werden mockups getoond van voorstellen in Drupal 8. Het voornaamste doel is om in de backend te tonen wat belangrijk is en metadata netjes in een zijkolom te zetten. Boeiende sessie met een hoop mooie mockups die zeker niet onderdoen voor de concurrentie tegenwoordig.

UX Under Fire – On Communicating the Value of UX

UX under fire Boeiende sessie over UX. Wat is UX en wat denken mensen dat UX eigenlijk is. In elke UX sessie die ik gezien heb komen altijd leuke voorbeelden van #fails aan bod. De conclusie van deze sessie was dat UX het hele spectrum van het ontwikkelen van website beslaat. Het is niet alleen de eye candy die je website mooi maakt. Het heeft met het project te maken van begin tot het einde. Het is ook dat wat je website leuk en bruikbaar maakt. Het is het praten met klanten en met het komen van oplossingen voor problemen en vraagstukken. Op zowel technisch- als designgebied.

Using Responsive Grids with Drupal

Deze sessie ging over het gebruik van grids in websites. Met een kleine geschiedenisles dat grids al eeuwen toegepast worden in typografie en architectuur. Grids zijn de basislaag van je website, het is de fundering van waarop je kolommen en uitlijning op gebaseerd is. Wetenschappelijke studies wijzen uit dat je onderbewust ontwerpen die uit zijn gelijnd volgens een bepaalde logica, mooier vindt dan ontwerpen die net niet kloppen. De sessie bleef bij horizontale en verticale grids. Leuk was geweest om ook de golden ratio grids erbij te halen. Het ontwerp van de voorpagina van Twitter is daar een mooi voorbeeld van.

Designing in the Browser

Responsive grids Iets wat in opkomst is in de wereld van webdevelopment is responsive design. Om niet teveel uit te wijden daarover, een responsive website is een website die op basis van schermgrootte zijn layout aanpast. Het is geen apart ontwerp als de desktopversie maar een aangepast versie daarvan. Dit betekent dat ontwerpers met het maken van hun ontwerpen ook rekening moeten gaat houden met alle verschillende schermgroottes. Iets wat bijna niet te doen is en zeker niet te uit te leggen aan een klant. Een oplossing hiervoor is om je site te ontwerpen in de browser. Simpel met HTML en CSS. Het betekent niet dat je je Photoshop app en licentie kan weggooien. Het grote voordeel van het ontwerpen in de browser en het tonen van dit ontwerp in de browser aan de klant is dat deze meteen een beeld krijgt van de website zoals die er ECHT uit gaat zien in de browser. Photoshop mockups zijn ALTIJD een leugen en websites worden nooit exact hetzelfde als de ontwerpen in Photoshop ontworpen had. De klant denkt dat helaas wel. “The mockup is a lie.”

Een manier is om style tiles te maken van de verschillende onderdelen van de site. Dan moet je denken aan de fonts die je gaat gebruiken en de verschillende kleuren. Zo krijgt de klant toch een impressie van de site zonder het totaalplaatje (ik haat dat woord) te zien.

Er zijn een aantal leuke tools die het ontwerpen in de browser kunnen versnellen. Zo zijn er oplossingen waarbij stylesheets waar je aan zit te werken direct worden ververst op het scherm. Zo hoef je geen F5 meer te doen op alle devices waar je je website op hebt staan op dat moment. Een aantal van deze oplossingen zijn, boeiende shit:

  • http://aboutcode.net/vogue/
  • http://www.adobe.com/products/muse.html
  • http://www.alistapart.com/articles/style-tiles-and-how-they-work/

Data Driven Visualizations

Data driven visualizations Wat is het verschil tussen een infogram en een data visualisatie? Daar begon deze sessie mee. Een infogram is data op een leuke manier weergegeven middels plaatjes en afbeeldingen. Een data visualisatie is een weergave waarbij de data zelf voorop staat. Hoe kan je iets saai’s en droog’s als 250MB aan Excelbestanden toch op een mooie en duidelijke manier tonen in een visualisatie. De spreker had een aantal mooie voorbeelden en werkwijzes. Zijn werk is te vinden op http://tulpinteractive.com/. Zijn werk is te zien in een aantal toonaangevende bladen wereldwijd.

How to Tackle the New Hot Shit in an Accessible Way

Hot shit Een op de vijftien mensen heeft een handicap. De helft van de mensen boven de 50 zit op het internet in Nederland. Dit is een grote groep die moeite heeft om website te zien of te bedienen zoals een normaal persoon dat zou kunnen doen. Tijdens het bouwen van een site zal dat altijd in het achterhoofd gehouden moeten worden. Zorg dat je site door screenreaders te lezen en begrijpen is. Zorg dat je site logisch en begrijpelijk in elkaar zit. Als je je aan al deze dingen houdt is je site voor een groot deel van de gehandicapte mensen te begrijpen. Drupal werd geprezen door een out-of-the-box oplossing voor een groot deel van deze punten. De meeste themes die aangeboden worden houden zich voor een groot deel aan deze regels.

SESSIES ZONDAG

Designing and Building for the Editor Experience

Editor experience De websites die we op het werk bouwen, bouwen we niet voor onszelf. Het CMS heeft een hoop onderdelen die alleen gebruikt mogen worden door ervaren Drupal gebruikers. Maar wat moeten de andere gebruikers, de redacteuren en de webloggers dan. Het bouwen van een gebruikelijke backend is heel belangrijk voor het goed werken van de backend, en dus automatisch ook de frontend, van de site. Moeten de gebruikers wel alle opties krijgen bij het bewerken van een node. Is de volgorde van de velden logisch en duidelijk. Kan de gebruikers niets fout doen. Het rechtensysteem gebruiken om bepaalde delen af te schermen en dat als afdoende te beoordelen is een valkuil waar menigeen in gevallen is. Een goede backend is deel maatwerk omdat het de wensen en eisen van de gebruikers moet volgen en respecteren. Gelukkig zijn er een hoop modules die daar een handje bij kunnen helpen.

Managing a Client With Multiple Devices

Multiple devices Hoe ga je aan een klant uitleggen wat een mockup gaat doen in een responsive ontworpen website. Dat zijn de uitdagingen waar we tegenwoordig tegenaan lopen. Een photoshop mockup kan nooit responsive worden. In een zekere zin was deze sessie een vervolg op het designen in de browser van zaterdag. Deze sessie ging meer in op de filosofie erachter. Hoe kan je een klant duidelijk maken wat een bepaald ontwerp gaat doen in de browser. De boodschap was wederom dat je de klant nooit moet vertellen dat de Photoshop mockup het uiteindelijk resultaat gaat worden. Deze sessie was vooral ook boeiend vanwege de anekdotes die spreker vertelde waarbij hij ervaring in zijn leven relateerde aan de problemen die hij tegenkwam in zijn werk. De raakvlakken die het had met de alledaagse problemen op de werkvloer.

What the f**k is a Polyfill?

Polyfill Ik had inderdaad nog nooit van een polyfill gehoord maar stiekem toch wel een paar keer gebruikt. Zoals de afbeelding hiernaast al doet vermoeden zijn polyfills pleisters voor browsers. De moderne browsers zijn goed opgewassen tegen het constant veranderende internet, de HTML5 en CSS3 technieken veranderen met de dag en browsers als Firefox, Chrome en Opera, die korte levenscycles hebben, kunnen daar goed op inspelen. Internet Explorer daarintegen totaal niet. Daarbij komt ook nog eens bij dat IE6, IE7 en IE8 nog veel gebruikt worden. Om deze browsers toch nog mee te laten genieten met de wonderen die CSS3 met zich meebrengt kan je polyfills gebruiken. Een van de meest bekende polyfills is CSS PIE. Deze maakt gebruikt van Javascript en IE-eigen scripts om toch nog effecten te kunnen tonen die anders alleen door moderne browsers gezien kunnen worden. Het grote nadeel is dat al deze pracht komt tegen een behoorlijke performance penalty. Mooi is in dit geval dus traag, erg traag.

HTML 4S - While We Are Waiting for the Revolution

HTML4S De laatste sessie. Spreker van deze sessie was de Deense Morten. Een zeer bekende naam in Drupalland en medeorganisator van het evenement. Hij staat bekent om zijn grof taalgebruik en dat werd ook duidelijk. Met zijn zware rokerstem bulderde hij tussen de vaktermen door vaak genoeg wat scheldwoorden. Heerlijk om naar te luisteren. De naam van de sessie was afgeleid van de naam van de Iphone. Toen iedereen zat te wachten op de Iphone5, kwam de 4S uit. Dat gevoel heeft hij dus ook met HTML5. We wachten op een nieuwe magische taal maar het is eigenlijk 4 plus wat extras. Wat vooral opviel was het tomeloze enthousiasme waarmee hij vertelde, de liefde en passie die hij heeft voor zijn vak. Het bouwen van themes voor Drupal. Kort samengevat ging het erover dat de code uit de vorige delen van Drupal eigenlijk niet meer relevant zijn in HTML5 maar er toch nog inzitten en dat het de taak aan ons, de community, is om ervoor te zorgen dat de themes voor Drupal kwalitatief beter worden. Of het nou de core is of contrib. Zelf heeft hij ook een theme gemaakt die alle onnodige <div> tags verwijderd. En dat zijn er een hoop. Het heeft zelfs een eigen naam: divitus.

Deze man is werkelijk de rockstar onder de themers. Na deze sessie was de hele zaal opgeladen en zal weer vol passie om mooie dingen te maken en geen consessies te doen. Een samenvatting van hem is hieronder te vinden onder de andere recensies.

Zondagavond was ik kapot maar tegelijkertijd weer helemaal opgeladen. De Drupal community is er eentje met heel veel zeer gemotiveerde en getalenteerde mensen. Mensen die mooie dingen willen maken. Geen enkele keer heb ik in een sessie mensen horen klagen of bitchen (behalve op IE6 dan). Er hing een positieve sfeer. Dat is iets wat ik vooral meegekregen heb van het weekend. Dit is een congres wat vast op mijn agenda gaat staan.

Drupal Rocks! Front end Rocks! Op naar DrupalCon Munchen 2012!

Andere recensies

  • http://www.bariswanschers.com/blog/frontend-united-was-awesome
  • http://morten.dk/blog/frontend-united-we-came-rock