Fronteers Conference 2011

Op donderdag 6 en vrijdag 7 oktober namen Arnoud Huberts en Willem Cohen, namens De Nieuwe Zaak, deel aan de Fronteers Conference in Pathé Tuschinski te Amsterdam. Deze conferentie werd al voor de vierde keer georganiseerd door Fronteers, een vakvereniging voor front-end developers. Dit jaar steeg het bezoekersaantal naar 500 en waren er 14 toonaangevende sprekers uitgenodigd uit binnen- en buitenland. Een zeer interessante conferentie als je als fronteer wilt bijblijven op je vakgebied en nieuwe inspiratie en inzichten wilt opdoen. De organisatie was voortreffelijk en de presentaties afwisselend.

fronteers-visual[1]

Hieronder de hoogtepunten uit een aantal presentaties:

Aral Balkan : The Future is native

Er zit een laag tussen het besturingssysteem (OS) en het web, genaamd de browser. De browser kan de gebruikerservaring flink belemmeren, maar heeft nu nog veel voordelen boven de native app, namelijk: makkelijke publicatie, probleemloze updates, universele toegang. Native is echter wel met een inhaalrace bezig met de appstores. Nadelen zijn echter dat je voor meerdere platforms moet optimaliseren en testen. “Writeonce, run everywhere is a myth”. Het is: “Write once, optimize everywhere”. Maar web en native zijn geen vijanden. Chrome OS heeft als voordeel dat het web native is. Wij ontwikkelen ervaringen voor mensen, daarom moeten we ook ontwerpen voor de mens en ons niet te druk maken om onze eigen wensen. Een goede gebruikerservaring maakt mensen gelukkig en laat ze voelen als Superman, het lost problemen op. Native of web zou niet mogen uitmaken.  

Derek Featherstone : Accessibility for the Modern Web

Het optimaliseren van een website voor een betere toegankelijkheid voelt vaak als een hack. Deze hacks zijn nodig door keuzes die door anderen zijn gemaakt. Gebruik progressive enhancement dmv HTML, CSS, JS en ARIA’s (Accessible Rich Internet Applications). Dit hoeft niet perse de beste gebruikerservaring voor iedereen te betekenen, maar tenminste EEN ervaring voor iedereen. Belangrijke besturingselementen niet pas tonen onmouseover, want dit werkt niet op touch- en keyboard-only apparaten. Zo zijn de Youtube controls niet te gebruiken met het toetsenbord. Voorbeeld voor een oplossing met keyboard toegankelijke controls: examples.furtherahead.com/youtube/ Bedenk goed of icoontjes in CSS of in de content moeten staan. Als je Windows in high-contrast-mode draait, verdwijnen background-images. Als er geen verklarende tekst bij een icoontje staat, dient het icoontje in de content te staan. Belangrijkste gevaren:

  • Verkeerde besturingselementen. Gebruik focus-bare elementen zoals <a>, <input> en <button>.
  • Managing focus in een lineaire flow. Behoud de focus op de positie voor een uitstapje (zoals een thickbox). Gebruik geen ‘#’ in links, want deze schieten weer naar de top van de pagina.
  • Opgesloten raken door het keyboard doordat gebruik van tabindex en javascript resulteert een een tab-loop.
  • Verwachten dat alles wel werkt. Op dit moment.

Conslusie:

  • Gebruik de eenvoudigste mark-up.
  • Regisseer de keyboard flow.
  • Voorkom keyboard vallen.
  • Gebruik nieuwe technieken (ARIA’s) alleen als deze werken en niet conflicteren.
  • Content in context is king!

 

Lea Verou : CSS3 secrets

10 interessante nieuwe CSS3 technieken.

  1. Geavanceerde animaties en transities de cubic-bezier functie, waarmee je bijvoorbeeld ‘bounce’ effecten kunt maken.
  2. Flexibele schaalbare ellipsen dmv procentuele border-radius.
  3. Meerdere kaders om een element dmv box-shodow.
  4. Laat pointer events door bovenliggende elementen klikken door deze de eigenschap pointer-events: none mee te geven. (wordt nog weinig ondersteund).
  5. Wijzig de tab-breedte in je code met bijv. tab-size: 8;
  6. Styling op basis van het aantal siblings, bijv:
    • :nth-child(3n+1)
    • :first-child:nth-last-child(n+5) ~ b
  7. Styling van checkboxen en radiobuttons dmv de :focus en :checked pseudoclasses. cssn.in/ja/023
  8. Extra cursor types voor een betere gebruikerservaring: none (in games), cell, alias, copy, not-allowed, col-resize, row-resize, zoom-in, zoom-out (gracefull degration naar standaard pijl).
  9. Maak achtergrond patronen of virtuele kolommen met CSS3 gradients:
    • background: linear-gradient(0, black 40%, gray 52%);
    • background: linear-gradient(0, silver 30%, gray 30%);
    • background-size: 100px 100px;
    • background: repeating-linear-gradient(45deg, black 40%, gray 52%);

    Meer patterns: http://leaverou.me/css3patterns/

  10. Achtergrond positionering dmv offset en background-origin:
    • background-position: bottom 40px right 50px; (matige ondersteuning)
    • background-origin: content-box; (goede ondersteuning)

 

Bruce Lawson : HTML5 Semantics

Semantiek is lasting want het gaat over content en er is geen validator voor. De gouden regel voor het gebruik ervan is dat er geen gouden regel is. Toch is het belangrijk om hier verstandig en consistent mee om te gaan want we weten nog niet hoe het in de toekomst toegepast gaat worden. In HTML5 zijn 33 nieuwe elementen toegevoegd wat het totaal op 105 brengt. Enkele voorbeelden:

  • <header>, <nav>, <article>, <footer>
  • role = banner, navigation, contentinfo, article
  • <time datetime=2011-10-06T13:40Z01.00>
  • <figure> <img> <figcaption> <small>
  • <details> <summary>, <p> (Klik op summary om p te tonen).

Een aantal bestaande elementen zijn opnieuw gedefineerd, zoals de <i>, <b> en <small>. Omdat niet alles al werkt, betekent niet dat we het nog niet moeten implementeren, want vroeg of laat is de tijd daar dat het gewaardeerd wordt. Aan de andere kant moeten we ook geen elementen gaan implementeren, alleen omdat het kan.

 

Stephen Hay : Go with the Flow

Nu het web steeds meer terrein wint op print, wordt het ook tijd dat we meer layout mogelijkheden krijgen zoals in print. Deze mogelijkheden zijn namelijk nog erg beperkt, terwijl we wel allerhande technieken hebben voor afgeronde hoeken, shaduwen en animaties. Stephen Hay beschouwt een aantal experimentele CSS technieken voor geavanceerde layout, zoals tekst in vormen, tekst rondom vormen en tekst in kolommen. Deze technieken zijn wellicht over enkele jaren te gebruiken. Multi-column layout:

  • div { columns: 3; column-gap: 2em; }

CSS regions:

  • .source { flow: ‘flowname’; }
  • #one, #two, #three { content: from-flow(‘flowname’); }

Print styles:

  • break-before: always, never, avoid
  • break-inside
  • break-after

Exclusions:

  • Tekst in of rondom zwevende vormen laten lopen.

Line-grid:

  • Align elements according to a vertical grid.
  • p { layout-grid-line: 1.5; layout-grid-mode: baseline; margin-top: 1gd; margin-bottom: 1gd; }

 

Tab Atkins : Future of CSS

Tab Atkins is werkzaam bij Google en schrijft mee aan CSS specificaties. Hij had een zeer interessante presentatie stampvol nieuwe CSS specificaties die hopelijk in de nabije toekomst geïmplementeerd zullen worden. Image:

  • De mogelijkheid om elementen als achtergrond van een ander element te gebruiken.
  • image-resolution, image-orientation, object-fit, object-position;

List:

  • Bullets kunnen gestijld worden door gebruik van het :marker pseude-selector.
  • Gebruik van nieuwe counter-styles met andere symbolen: leaves / binary / dice { attr }

Values & Units:

  • vw, vh = relative to window size
  • ex= relative to x height
  • rem = em from root element
  • ch = width of ‘0’
  • calc(50% + 20px);
  • calc(100% / 7);
  • width: attr(data-size as px, 100px);
  • Cycle: em { font-style: cycle(italic, normal); }

Selectors:

  • td:col(col.foo)
  • td:nth-col(n) :nth-last-col
  • :any-link
  • :local-link
  • :local-link(1)
  • :current
  • :past
  • :future
  • label:hover /for/ input { styles }

Variables:

  • @var $header-color #006;
  • color: $header-color;

Nesting styles:

ul > li {
     color: white;
     & > a {
          color: black;
     }
 }

Bekijk de presentatie van Tab Atkins  

Divya Manian : The new developer workflow

Webdevelopment tools: Ontdek welke tools handig voor je zijn en gebruik ze, niet alleen om te debuggen. Versiebeheer: Gebruik versiebeheer in je projecten, ook voor design bestanden. Enkele voorbeelden: Git, Progit.org, Tortoise SVN. Gericht op de toekomst: Maak gerichte afwegingen voor je ontwerp. Welke features wil ik gaan gebruiken en hoe goed worden deze ondersteund? Gebruik polyfills voor functionaliteit die belangrijk is voor de basis gebruikerservaring van de website. Gebruik vendor-prefixes (-moz, -webkit, -o, -ms) indien nodig en laat ze anders achterwege. De ondersteuning voor de volgende CSS specificaties is inmiddels voldoende dat er geen vendor-prefixes meer nodig zijn: box-shadow, border-radius, background-clip. Pre-processors: Deze tools kunnen je werkzaamheden vermakkelijken en versnellen. Denk daarbij aan tools voor genereren van sprites, het uitvoeren van geautomatiseerde calculaties en het minimaliseren van CSS en Scripts. Waardeer de specificaties, leer ze uit je hoofd en maak het onderdeel van je werk. Ben je goed op de hoogte, rapporteer dan bugs aan de verschillende firma’s en doe mee aan werkgroep discussies. Interessante links:

Bekijk de presentatie van Divya Manian  

Robert Nyman : HTML5 Forms

“Thou shalt make things simple” Maak gebruik van specifieke input types om het de gebruiker makkelijker te maken: date, url, email, time, month, range, … Nieuwe formulier attributen: autofocus, formnovalidate, mozactionhelp (beïnvloed de actieknop op het touch keyboard), pattern[A-Z]*, placeholder, Nieuwe formulier elementen: meter, data-list (vrije invoer, maar keuzemogelijkheid uit voorgedefinieerde lijst). Formulier validatie werkt nog onvoorspelbaar en ongelijk in verschillende browsers. Zo worden spaties beschouwd als invoer. De inhoud en weergave van dialoogvensters voor foutmeldingen lopen ook erg uit een per browser. De tekst kan worden gestuurd dmv setCustomValidity(“text”);

  • input:required { styles }
  • input:focus:invalid (use focus to avoid onload styling)
  • input:out-of-range
  • input:-moz-ui-invalid (works onfocus)
  • input:-moz-placeholder, input:-webkit-placeholder

Interessante links:

Bekijk de presentatie van Robert Nyman  

Jake Archibald : In Your @font-face

@font-face werd al geïntroduceerd in Internet Explorer 4. In CSS2 werd het vervolgens niet opgenomen en nu is het weer terug in CSS3. Het font moet in verschillende formaten aangeboden worden voor de verschillende browsers:

  • .eot Gedownload door: IE
  • .woff Gedownload door: Safari, Chrome, Firefox, Opera Ondersteund door: IE
  • .ttf Gedownload door: Android, iOS Ondersteund door: Safari, Chrome, Firefox, Opera, IE
  • .svg Gedownload door: iOS < 4.2 Ondersteund door: Chrome, Safari, Opera

Er moeten allerlei hacks gebruikt worden om elke browser te bedienen met de juiste font file. Maar dan ben je er nog niet. De wijze waarop de fonts gedownload worden verschilt namelijk ook flink per browser. Zo download IE8 alle @font-face fonts, ook al gebruik je ze niet. Daarom moet je voor IE8 per pagina alleen de fonts laden die je daadwerkelijk gebruikt. Daarnaast verschilt het nogal per browser wanneer de fonts daadwerkelijk gerenderd worden. In sommige gevallen wordt er een standaard font getoond alvorens het @font-face font gedownload is, bij andere browsers wordt er tot die tijd helemaal geen tekst getoond. IE8 maakt het helemaal bont door de hele pagina niet te tonen, voordat alle fonts gedownload zijn. Door gebruik te maken van een JS fontloader kun je classes (bv: .fontname-inactive) toekennen en de weergave van de tijdelijke standaard tekst te optimaliseren. Font-files dienen voor gebruik geoptimaliseerd te worden. Om de bestandsgrootte te reduceren voeg je alleen de karakters en symbolen toe die je nodig hebt. In je CSS kun je dmv een unicode-range specificeren voor welke tekens welke font-file gebruikt moet worden.

@font-face {
     font-family: ‘ubuntu’;
     src: ....
     unicode-range: U+21-7e;
}
@font-face {
     font-family: ‘ubuntu extended’;
     src: ....
     unicode-range: U+a1-fb04;
}
h1 {
     font-family: ‘ubuntu’, ‘ubuntu extended’, sans-serif;
}

Gebruik gzip voor compressie van de fonts, maar laat de hinting intact. Zonder hinting worden de fonts zonder anti-aliasing namelijk onleesbaar. Test altijd in Windows XP, IE8 met cleartype/antialiasing en zonder.

Bekijk de presentatie van Jake Archibald   Hieronder nog even alle sprekers en presentaties op een rijtje:

(Dank aan Darius Kruythoff voor het maken van deze lijst en Flurin voor de aanvulling op notities die ik zelf niet had)

Arnoud Huberts

Front-end developer

“Het succes van uw webwinkel valt of staat met de gebruikerservaring”

Reageer

  • * graag invullen
  • * graag invullen
  • * graag invullen

  • Google Partner logo
  • adCore Platinum Agency logo
  • Thuiswinkel Business Partner logo
  • Bing Ads Accredited Professional logo
  • Tripolis Dialogue E-mailmarketing Solutions logo
  • FD Gazellen Awards 2013 logo