Alweer voor de derde keer heb ik het jaarlijkse Fronteers-congres bijgewoond. Wederom goede (internationale) sprekers, en ook steeds meer deelnemers uit andere landen. Het was weer uitstekend georganiseerd, zowel de Fronteers Jam (de avond vooraf aan het congres) als het congres zelf: geweldig hoe de groep vrijwilligers dit voor elkaar krijgt.
Hieronder licht ik een paar presentaties van het congres uit.
Mark Boulton – Adapting to responsive design
Responsive design is een buzzword, net als voorheen AJAX en als HTML5. Men wil het, want het is hot. Maar in de praktijk zijn organisaties nog steeds gewend aan pixelperfecte Photoshop designs en watervalmethoden waar de verschillende disciplines in eigen ‘silo’s’ werken. En deze twee benaderingen gaan niet samen, zo werkt het web niet (meer). Flexible layout vereist ook flexibele content, en flexibele advertentie-pakketten. En ga dat maar ’s uitleggen aan de betrokkenen.
Fixed pixel-designs werken niet meer, wire-frames werken niet meer. Want de interactie is heel anders op een iPad of een smartphone. Er moet niet meer gedacht worden in pagina’s, maar in losse blokken content die een andere vorm en interactie hebben op een ander apparaat. Maar hoe moeten we dat dan wel aanpakken? Volgens Mark Boulton: een prototype maken in HTML, en het design, de interactie en de content(vorm) gedurende het bouwproces steeds verder aanpassen tot er een goede mix is ontstaan.
Het is dus niet zo dat door responsive design alleen het eindproduct verandert, maar ook het gehele proces. Inclusief het gebruik van het CMS. (En waar kennen we dit van? Precies: toegankelijkheid).
Stephen Hay – Style guides are the new Photoshop
Stephen’s presentatie sloot goed aan bij het verhaal van Mark Boulton. User experience leidt je niet af uit een Photoshop mock-up. Het is geen doen om voor elke pagina/onderdeel uitgewerkte designs te maken voor 10 verschillende apparaten en views. Als er één detail wordt aangepast, moet je alles handmatig bij langs. Met css en HTML is dat zo gebeurd.
Verder: je ontwerpt een ervaring, niet een statische pagina. ‘We design websites, not pictures of websites’.
Een goede oplossing is volgens Stephen om te werken met dynamische style-guides in HTML. Zo’n online stijlgids bevat alle belangrijke elementen die op een website voor kunnen komen. En de gids wordt bij aanpassingen in het prototype ook meteen ge-update. Een heel mooi voorbeeld van zo’n online styleguide is de Global Experience Language van de BBC.
Voor een uitgebreide verhandeling van de tools die je hiervoor kunt gebruiken, zie de live notes van dag 1.
Accessibility panel – Antoine Hegeman, Bor Verkroost en Bram Duvigneau
Elk jaar is er wel een presentatie over toegankelijkheid op het web. Doorgaans zijn dit ontwikkelaars die vertellen wat je wel en niet moet doen als je rekening houdt met accessibility. Dit keer werd het anders aangepakt: drie sprekers die zelf een beperking hebben én werken in webontwikkeling, werden door Cristian Heilmann ondervraagd over hoe ze zelf werken, websites bezoeken en waar ze tegenaan lopen.
Bor Verkroost heeft een ziekte waardoor hij zijn handen niet of nauwelijks kan gebruiken. Hij laat zien dat het erg moeilijk navigeren is met een beperkte handfunctie wanneer elementen te dicht bij elkaar staan, of wanneer ze snel weer verdwijnen als je er een klein stukje buiten komt (hover-out). Zoals bij lange hover-menu’s. Het is voor hem veel fijner wanneer er (in het algemeen) meer witruimte is tussen pagina-elementen. Zoomen is voor hem geen goede oplossing, omdat je daarmee het overzicht snel kwijt bent. Voor slechtzienden kan dit zeker handig zijn, maar voor hem dus niet.
Bram Duvigneau is blind. Hij legt uit dat hij werkt via een screenreader en een braille-regel. Hiermee kan hij ook back-end programmeren. Als voorbeeld doet hij een zoekopdracht in Google. De screenreader leest alle links uit het topmenu op (mail, drive etc). Niet handig, dus daarom navigeert hij via headings. Alle zoekresultaten hebben een h3.
Een van zijn grootste frustraties is wanneer web-apps de single-click veranderen in double-click. Dit gaat in tegen usability-regels.
Voorleestools zoals Readspeaker zijn zinloos voor blinde gebruikers, want die hebben al hun eigen screenreaders. Zo’n Readspeaker zit eerder in de weg. Voor bijvoorbeeld dyslectici kan het wel nuttig zijn. Dit is weer een voorbeeld van conflicterende toegankelijkheidsissues: wat voor de één handig is, is voor de ander juist lastig.
Antoine Hegeman lijdt aan cerebrale parese (bewegingsstoornis). Hij kan zijn handen gebruiken, maar het kost hem veel moeite om veel handelingen achter elkaar te verrichten. Hoe meer klikken nodig zijn, hoe lastiger dus. Ook laat hij een voorbeeld zien van een online aanvraagformulier van het UWV dat eindigt met printen, signeren en opsturen van het formulier. En dat laatste lukt hem dus niet. Waarom wordt er geen DigiD gebruikt voor die laatste stap?
David DeSandro – Open Source Ain’t Free
Onze beste bron van informatie is View Source. Een eigenschap van front-end ontwikkeling is dat je code altijd kunt inzien, hergebruiken en delen. In zie zin is open source heilig in de frontend-community. David DeSandro heeft verschillende jQuery plugins ontwikkeld, zoals Masonry en Isotope. Dit kost veel tijd, ook als het open code is en andere developers meedenken en -vele- vragen en suggesties insturen. Hij besteedt er gemiddeld 1 dag per week aan. Op een gegeven moment vroeg hij zich af of hij er niet wat geld mee kon verdienen, terwijl het wel open source bleef. Mensen die mobiele apps maken of Premiun WordPress themes kunnen er wel een prijs voor vragen, maar front-end developers niet? Hij besloot een licensie te gaan verkopen voor commercieel gebruik. Het werd een groot succes, en zorgde voor een kwart van zijn inkomen in 2011.
Nog los van de details van dit specifieke product, vond ik het een interessante gedachtengang over wat wel en niet geaccepteerd wordt binnen de front-end development community.
Jeroen Wijering -The State of HTML5 video
HTML5 video is nu beter aan het worden dan Flash video. Een aantal pluspunten:
- werkt op iOS, Android
- wordt geïndexeerd door Google
- 80% support (de rest is IE8 of lager en feature phones)
- <track> element voor ondertiteling, captions (is dezelfde taal als de audio), audio descriptions (beschrijving wat er gebeurt als er niet wordt gesproken), chapters (zoals op een DVD), metadata : zoeken in videos!
- preview via thumbnails
- page interaction, bijvoorbeeld artworks laten zien bij bepaalde scenes
Phil Hawksworth – I can smell your CMS
Een duur CMS is niet altijd een goed CMS, maar bedrijven kunnen er toch lang aan vast zitten. Veranderen van systeem kost namelijk ook weer geld.
Phil Hawksworth laat met prachtig vormgegeven slides en veel humor een paar stinkende voorbeelden zien van slechte, logge CMS-en en belachelijk zware websites. Zoals lange onleesbare URL’s die ook de technologie erachter laten zien en enorm veel extra gegenereerde HTML waarmee WYSISYG-gebruikers de site gemakkelijk om zeep kunnen helpen. Vraag de klant wat er eigenlijk echt dynamisch moet zijn. De rest hebben ze niet nodig! Manage de content, niet het design.
Om lock-in en slechte performance te voorkomen kun je beter een klein, licht CMS gebruiken of -doe ’s gek- GEEN CMS. Ook hiervoor heeft hij een paar praktische tips, zoals Perch CMS, Markdown of Jekyll.