Een terugblik op Fronteers 2014

Fronteers 2014Terugblik op inspiratie

Text

2 dagen: 18 pressentaties

https://www.flickr.com/photos/_fabio/3049934416/

http://www.flickr.com/photos/dmitry-baranovskiy/2378867408

http://www.flickr.com/photos/chrisglass/3949460066

http://www.flickr.com/photos/bqra/5390165850/

Text

https://www.flickr.com/photos/h8ianxpress/4481139770/

http://rachelnabors.com/nyantuna/

http://impactjs.com

https://www.flickr.com/photos/jonaseklundh/8390958322/

–Monthy Python

“Get on with it!”

Best practiceDingen doen op de best denkbare manier

https://www.flickr.com/photos/patrickwilken/4918194190

https://www.flickr.com/photos/worldbank/4248400673

https://www.flickr.com/photos/philsframe/5280150750

https://www.flickr.com/photos/cooleyd/10163117113

Wat is de best denkbare manier?

Sliders

Social media icons

Design gimmicks

Grote plaatjes

https://www.flickr.com/photos/91562291@N00/74589499

Common sense vs Best practice

Bekijk ontwerpen kritisch

Vraag jezelf zal ik dit wel doen?

https://www.flickr.com/photos/27667439@N00/4627168448

Waarom schrijven we nog html?

HTML is geen code

HTML is voor content

HTML is een inventaris van wat er op de pagina staat

https://www.flickr.com/photos/bunnyrel/8418328700

–Nathan Ford

“What could we do with our time, if we didn't have to write html?”

http://rachelnabors.com

–Rachel Nabors

“Since flash died we talk about animation as something dirty”

Animaties zijn nuttig

Leiden gebruikers door interactie

Bevorderen de acceptatie van de interface

Bevorderen usability

Geeft een natuurlijk gevoel

Hoe maak je animaties?

velocity.js

GSAP

Web animations API

SVG + CSS

https://www.flickr.com/photos/arselectronica/6115663857/

Text

Real-time applicaties

https://www.flickr.com/photos/cianginty/5503813594

Text

Evolutie van real-timehttps://www.flickr.com/photos/st3f4n/3877704299

Evolutie van real-time

Plugins

Ajax polling

XDomainRequest

Websockets

HTTP2

Technische uitdagingen

Inconsistent browser support

Slecht support op mobiele devices

https://www.flickr.com/photos/34652102@N04/5393506662

Functionele uitdagingen

Hoe om te gaan met time-outs?

Reconnect problemen

https://www.flickr.com/photos/tjmartins/3341107849

Text

Offline firsthttp://hood.ie

https://www.flickr.com/photos/bilal-kamoon/6773383766

On/off-line web applicaties

Je hebt niet altijd internet

Dingen die we maken zullen stuk gaan

Mobiel gebruik is het grootst als de verbinding het slechts is

We leven niet in een perfecte wereld https://www.flickr.com/photos/katacha/5848424919

Een applicatie die het altijd doet

Offline is geen error-status

Wat moet er allemaal offline?

Niet direct verbinden met de server

Nu opslaan, synchroniseer later

Zie het netwerk als een verbetering

Resultaat

Betere performance

Robuustheid

Betere gebruikerservaring

Efficiënter netwerk gebruik

Bruikbare applicaties

En wat als we wel online zijn?

– http://www.websiteoptimization.com/

“The average page weight of the top 1000 websites is 1.8 MB”

Flexibele layouts is niet genoeg

Feature detection

Content strategie

Touch optimalisatie

Performance

https://www.flickr.com/photos/mythoto/5217799814

5 SecondenOptimaliseer je pagina

https://www.flickr.com/photos/jamiesrabbits/5641308012

Text

Stel een budget inHoeveel kb mag een pagina zijn?Vergelijk met concurrenten

https://www.flickr.com/photos/lendingmemo/11702261845

Text

MinimaliseerMinder plaatjes, kleinere plaatjesGebruik geen grote JS libraries

https://www.flickr.com/photos/iartmuseum/10924927803

Text

Juiste server instellingenComprimeer assetsActiveer cache headers

https://www.flickr.com/photos/johnonolan/4886521902

Text

Laad alleen de nodige codeKnip JavaScript en CSS op in kleine stukkenTest met een trage verbinding

https://www.flickr.com/photos/24561019@N02/2324725537

Accessibility is geen extra

Wees trotsStel team regels op

https://www.flickr.com/photos/44739432@N06/4417885007

Voorbeeld van team regels

Geen zeemeeuwen

Laat code altijd netter achter dan dat je het gevonden hebt

Performance is het belangrijkst

Usability is geen feature

Accessibility is gemeengoed

En wat komt hierna?

–Abraham Lincoln

“The best way to predict the future is to create it.”

https://www.flickr.com/photos/121483302@N02/13491081124

–Petro Salema

“Dream big. Think small.”

“The best way to predict the future is to enable it.”