Vier trends op het vlak van front-end design vanuit Smashing Conference Oxford

Lisez en français - Read in English

Blog door Michiel Van de Veire, webdeveloper bij Intelligent (holding boven Combell)

Als webdeveloper vind ik het noodzakelijk om op de hoogte te blijven over de laatste nieuwe trends en technieken. Initiatieven als Smashing Magazine, Smashing Books en de Smashing Conferences zijn wat dat betreft voor mij een ideale bron van inspiratie. Ze richten zich namelijk helemaal op webdesign en front-end development.

Smashing Conference OxfordToen ik zag dat er een Smashing Conference in Oxford ging plaatsvinden was ik dan ook enthousiast om te gaan. Binnen Combell is opleiding ook cruciaal en dus regelden ze direct mijn tickets naar de UK. Yay!

Vitaly Friedman en het Smashing team zorgden voor twee conferentiedagen vol topsprekers van over de hele wereld, met talks over pattern libraries, SVG, Flexbox, performance, HTTP/2, en meer…  Helemaal mijn ding.

Deze vier trends, die ik in Oxford bevestigd zag, wilde ik even graag met jullie delen.

1. Responsive design blijft belangrijk

Responsive design blijft belangrijkDe aandacht voor responsive (design dat zich aanpast aan de drager) blijft absoluut aan de orde, zo stelde ik vast in Oxford. Bij responsive design denkt je al snel aan media queries, die werken als breakpoints om CSS al dan niet toe te passen, maar Vasilis van Gemert toonde ons dat het ook zonder kan. Zo is het slim gebruik van floats, CSS kolommen, viewport units en flexbox (zie 2e trend) vaak een betere oplossing.

Aangezien we volop bezig zijn de Combell website responsive te maken kwamen deze tips van pas. Ook Vitaly Friedman leerde ons heel wat tricks, zijn presentatie - met de ronkende titel ‘Dirty front end tricks’ - zat boordevol creatieve oplossingen.

“Beware: you will not be able to unlearn what you’ll learn in the session!” – Vitaly Friedman

2. Flexbox

CSS 3De opmars van Flexbox hoort bij de vorige trend. Het is een onderdeel van CSS. Flexbox is een efficiënte manier om lay-outs te bepalen die zich vlot aanpassen.Christopher Wright front-end developer bij Campaign Monitor toonde ons de vele mogelijkheden van Flexbox in zijn talk Taking layout to the next level.

“As web designers, we’re not designing around content, but rather we’re designing places for content to flow into.” – Mark Boulton

Flexbox brengt heel wat nieuwe mogelijkheden met zich mee, ik ga me hier dan ook verder in verdiepen. De boodschap tijdens de talk was alvast heel duidelijk, experimenteer: fail early, learn faster.

3. HTTP/2

Ook aan HTTP/2, de nieuwe versie van het HTTP-protocol dat zorgt voor de communicatie tussen een webbrowser en een server, werd in Oxford aandacht besteed.

Patrick Hamann senior engineer bij Financial Times maakte ons warm om HTTP/2 te gebruiken. Het huidige HTTP1.1-protocol, dat sinds 1999 de standaard is en sindsdien onveranderd bleef, is dan ook aan een upgrade toe. Zo is het met HTTP1.1 slechts mogelijk om een beperkte hoeveelheid data in één keer op te laden, bijvoorbeeld slechts zes afbeeldingen tegelijkertijd.

http/2Het grote voordeel van HTTP/2 is multiplexing. Hierbij worden meerdere http-requests vanuit de browser gebundeld en naar de webserver gestuurd. Dit resulteert in veel minder actieve connecties en daarmee in een snellere overdracht van alle gegevens. Pagina’s zullen dus sneller opladen, en dat is altijd iets wat eindgebruikers toejuichen.

“HTTP/2 produces the biggest performance gains on mobile, because it remedies high latency.” – Patrick Hamann

Onze research zit wat HTTP/2 betreft in een vergevorderd stadium. Bepaalde van onze servers kunnen in een proof-of-concept modus zelfs al HTTP/2 aanbieden. We verwachten een volledige integratie voor het meerendeel van de hostingklanten op onze hostingcluster later dit jaar.

De multiplexing die HTTP/2 voorziet, zal ook bij de Combell-omgeving, zorgen voor een drastische daling van het aantal simultane connecties op onze omgeving. Daarnaast zullen browsers via multiplexing inderdaad sneller content kunnen laden. En dankzij het server push principe zal de klant zelf in staat zijn om resources te preloaden en de prioriteit van deze resources te bepalen.

4. Living Design Systems


salesforce uxDesign Systems
is dan weer wel een specifieke design trend. Het is een aanpak die zorgt voor een consistent design, en dat cross-platform. Jina Bolton werkt voor Salesforce UX en gaf er tijdens de Smashing Conference een presentatie over.

“While a company is growing fast, there is nothing more important than constant communication and complete alignment.” – Mark Benioff

Vooral bij grotere projecten of voor vooraanstaande merken, is het belangrijk dat stijl en stijlelementen uniform blijven. Traditioneel werd hiervoor een stijlgids gemaakt, maar die wordt al snel amper aangepast en verandert als het ware in een “zombie” stijlgids.

Een Design System daarentegen is een levend product en zorgt ervoor dat de code van zo’n style guide dynamisch wordt. Op basis hiervan creëren alle leden van een team uiteindelijk binnen hetzelfde design. Het Lightning Design System is hier een schitterend voorbeeld van.

 

Michiel @ Smashing Oxford 2016

Kortom, de Smashing Conference was erg leerzaam. De inhoud van de talks was perfect uitgebalanceerd: interessante, bruikbare front-end technieken en heel wat design kennis. Dat dit alles zicht afspeelde in het prachtige Oxford, beroemd van zijn University en Colleges was natuurlijk mooi meegenomen.

Overigens veel dank aan Smashing Magazine en Combell voor de ervaring en opleiding.