41
Fronteers 2014 Terugblik op inspiratie

Een terugblik op Fronteers 2014

Embed Size (px)

DESCRIPTION

Een terugblik op Fronteers Conf 2014

Citation preview

Page 1: Een terugblik op Fronteers 2014

Fronteers 2014Terugblik op inspiratie

Page 2: Een terugblik op Fronteers 2014

Text

2 dagen: 18 pressentaties

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

Page 3: Een terugblik op Fronteers 2014

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

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

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

Page 4: Een terugblik op Fronteers 2014

Text

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

Page 5: Een terugblik op Fronteers 2014

http://rachelnabors.com/nyantuna/

http://impactjs.com

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

Page 6: Een terugblik op Fronteers 2014

–Monthy Python

“Get on with it!”

Page 7: Een terugblik op Fronteers 2014

Best practiceDingen doen op de best denkbare manier

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

Page 8: Een terugblik op Fronteers 2014

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

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

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

Page 9: Een terugblik op Fronteers 2014

Wat is de best denkbare manier?

Sliders

Social media icons

Design gimmicks

Grote plaatjes

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

Page 10: Een terugblik op Fronteers 2014

Common sense vs Best practice

Bekijk ontwerpen kritisch

Vraag jezelf zal ik dit wel doen?

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

Page 11: Een terugblik op Fronteers 2014

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

Page 12: Een terugblik op Fronteers 2014

–Nathan Ford

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

Page 13: Een terugblik op Fronteers 2014

http://rachelnabors.com

Page 14: Een terugblik op Fronteers 2014

–Rachel Nabors

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

Page 15: Een terugblik op Fronteers 2014

Animaties zijn nuttig

Leiden gebruikers door interactie

Bevorderen de acceptatie van de interface

Bevorderen usability

Geeft een natuurlijk gevoel

Page 16: Een terugblik op Fronteers 2014

Hoe maak je animaties?

velocity.js

GSAP

Web animations API

SVG + CSS

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

Page 17: Een terugblik op Fronteers 2014

Text

Real-time applicaties

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

Page 18: Een terugblik op Fronteers 2014

Text

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

Page 19: Een terugblik op Fronteers 2014

Evolutie van real-time

Plugins

Ajax polling

XDomainRequest

Websockets

HTTP2

Page 20: Een terugblik op Fronteers 2014

Technische uitdagingen

Inconsistent browser support

Slecht support op mobiele devices

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

Page 21: Een terugblik op Fronteers 2014

Functionele uitdagingen

Hoe om te gaan met time-outs?

Reconnect problemen

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

Page 22: Een terugblik op Fronteers 2014

Text

Offline firsthttp://hood.ie

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

Page 23: Een terugblik op Fronteers 2014

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

Page 24: Een terugblik op Fronteers 2014

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

Page 25: Een terugblik op Fronteers 2014

Resultaat

Betere performance

Robuustheid

Betere gebruikerservaring

Efficiënter netwerk gebruik

Bruikbare applicaties

Page 26: Een terugblik op Fronteers 2014

En wat als we wel online zijn?

Page 27: Een terugblik op Fronteers 2014

– http://www.websiteoptimization.com/

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

Page 28: Een terugblik op Fronteers 2014

Flexibele layouts is niet genoeg

Feature detection

Content strategie

Touch optimalisatie

Performance

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

Page 29: Een terugblik op Fronteers 2014

5 SecondenOptimaliseer je pagina

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

Page 30: Een terugblik op Fronteers 2014

Text

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

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

Page 31: Een terugblik op Fronteers 2014

Text

MinimaliseerMinder plaatjes, kleinere plaatjesGebruik geen grote JS libraries

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

Page 32: Een terugblik op Fronteers 2014

Text

Juiste server instellingenComprimeer assetsActiveer cache headers

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

Page 33: Een terugblik op Fronteers 2014

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

Page 34: Een terugblik op Fronteers 2014
Page 35: Een terugblik op Fronteers 2014

Accessibility is geen extra

Page 36: Een terugblik op Fronteers 2014

Wees trotsStel team regels op

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

Page 37: Een terugblik op Fronteers 2014

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

Page 38: Een terugblik op Fronteers 2014

En wat komt hierna?

Page 39: Een terugblik op Fronteers 2014

–Abraham Lincoln

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

Page 40: Een terugblik op Fronteers 2014

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

Page 41: Een terugblik op Fronteers 2014

–Petro Salema

“Dream big. Think small.”

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