Slide 1
Slide 1 text
Web is Flux
Slide 2
Slide 2 text
@souvikdg
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Hi!
Slide 5
Slide 5 text
1999
Slide 6
Slide 6 text
My rst exposure to
HTML was as a 7th grader.
Slide 7
Slide 7 text
IE5, Netscape
Slide 8
Slide 8 text
,
Slide 9
Slide 9 text
Tim Berners-Lee, 1989
Slide 10
Slide 10 text
~25 years
Slide 11
Slide 11 text
Have you ever wondered
how has it managed to
survive so long, and also
improve over time?
Slide 12
Slide 12 text
Principles
Slide 13
Slide 13 text
Principle of Least Power
Slide 14
Slide 14 text
Tim Bernes-Lee
Computer Science spent the last forty years
making languages which were as powerful
as possible.
Nowadays we have to appreciate the
reasons for picking not the most powerful
solution but the least powerful. e less
powerful the language, the more you can
do with the data stored in that language.
Slide 15
Slide 15 text
HTML is forwards compatible.
It has healthy fallbacks for
things it doesn’t know yet.
Slide 16
Slide 16 text
As a result of many such
excellent design principles…
Slide 17
Slide 17 text
824*
di erent ways to connect to the web
Slide 18
Slide 18 text
7,063*
kinds of web browsers access the web
Slide 19
Slide 19 text
432,102*
kinds of devices access the web
Slide 20
Slide 20 text
1,180*
di erently sized screens access the web
Slide 21
Slide 21 text
*cooked up facts
Slide 22
Slide 22 text
However, the
point still stands.
Slide 23
Slide 23 text
Web is everywhere,
and in many ways
we’re dependent on it.
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
e clients are fragmented
— a side e ect of ubiquity
Slide 26
Slide 26 text
How did we deal with this?
Slide 27
Slide 27 text
For a long time by
Graceful Degradation
Slide 28
Slide 28 text
is site is best viewed
on IE6 at 800×600.
Slide 29
Slide 29 text
Today?
Slide 30
Slide 30 text
BrowserStack claims to have
300+ browser versions.
Slide 31
Slide 31 text
In 2011 there were
20+ mobile browsers.
http://www.quirksmode.org/presentations/USTourApril11/albany.pdf
Slide 32
Slide 32 text
How long can we
continue doing
things that way?
Slide 33
Slide 33 text
Looks are deceiving.
Slide 34
Slide 34 text
Because the web is tolerant,
you can make any code
“look” good on your
preferred web browser.
Slide 35
Slide 35 text
Are we catering to
just web browsers?
Slide 36
Slide 36 text
A whole bunch of services
consume our websites —
read-it-later, accessibility
tools, search bots…
Slide 37
Slide 37 text
http://futurefriendlyweb.com
Disruption will only accelerate. e
quantity and diversity of connected
devices—many of which we haven't
imagined yet—will explode, as will
the quantity and diversity of the
people around the world who use
them.
Slide 38
Slide 38 text
Fads will die,
and new ones will be born.
Slide 39
Slide 39 text
:/
SEO
Slide 40
Slide 40 text
:/
Mobile is in
Slide 41
Slide 41 text
“Inclusive Web Design
For the Future”
Steve Champeon and Nick Finck, 2003
Slide 42
Slide 42 text
Progressive
Enhancement
Slide 43
Slide 43 text
Content
Slide 44
Slide 44 text
Content
HTML
Slide 45
Slide 45 text
Content
HTML
CSS
Slide 46
Slide 46 text
Content
HTML
CSS
JS
Slide 47
Slide 47 text
People who are on basic
browsers get a base experience,
those on newer browsers get an
enhanced experience.
Slide 48
Slide 48 text
No one’s excluded.
Slide 49
Slide 49 text
Christian Heilmann
I am always amazed about the lack
of support for progressive
enhancement on the web.
Whenever you mention it, you face
a lot of “yeah, but…” and you feel
having to defend something that
should be ingrained in the DNA of
anyone who works on the web.
Slide 50
Slide 50 text
:/
We know our customers.
Slide 51
Slide 51 text
:/
No one uses that browser.
Slide 52
Slide 52 text
:/
We build enterprise apps.
Slide 53
Slide 53 text
:/
But that’s too much work.
Slide 54
Slide 54 text
:/
Move fast, break things.
Slide 55
Slide 55 text
:/
We make “web apps”
Slide 56
Slide 56 text
:/
Who has Javascript
disabled anyways?
Slide 57
Slide 57 text
:/
Relying on Javascript is not a
problem for us. Today no one
can complete an online
transaction without
Javascript anyways.”
“
Slide 58
Slide 58 text
Dependence on
Javascript
is a mistake.
Slide 59
Slide 59 text
“Shoot this idiot down!”
Slide 60
Slide 60 text
Javascript can make your
application a super-hero…
Slide 61
Slide 61 text
…but even
Superman
has legs
http://www. ickr.com/photos/hajagosb/6264235487/
Slide 62
Slide 62 text
@andyhume
Progressive enhancement is more
about dealing with technology
failing than technology not
being supported.
And you can quote me on that.
Slide 63
Slide 63 text
@GnrlMxms
Most bugs I deal with on a
daily basis are caused by some
JavaScript library or the other
randomly breaking :/
Slide 64
Slide 64 text
http://www. ickr.com/photos/vpickering/8777968566/
Slide 65
Slide 65 text
Q: Are we not encouraging
people to continue using old
browsers by supporting
absence of Javascript?
Slide 66
Slide 66 text
People don’t use old
browsers out of choice, and
it is far more important for
a website to ful l its
purpose/promise.
Slide 67
Slide 67 text
In July 2013, there was a lot
of discussion on the web
about the relevance of
progressive enhancement.
Slide 68
Slide 68 text
Some people have
inaccurate notions.
Slide 69
Slide 69 text
Progressive enhancement is
not about making websites
for the most basic systems.
It’s about starting with the
most basic systems in mind.
Slide 70
Slide 70 text
So no one’s asking you to
not use Javascript.
Slide 71
Slide 71 text
Brad Frost
ere is a di erence between
support and optimization.
Slide 72
Slide 72 text
:/
Our product should look
the same everywhere.
Slide 73
Slide 73 text
It’s okay if a website looks
di erent on di erent browsers.
Slide 74
Slide 74 text
We write code that
run on client systems.
Slide 75
Slide 75 text
We shouldn’t ignore
the known unknowns.
Slide 76
Slide 76 text
If we start listing the known
unknowns, we’ll almost
immediately start feeling
helpless about the situation.
Slide 77
Slide 77 text
e thought of not
being in control is scary.
Slide 78
Slide 78 text
How can you control
something that is
changing all the time?
Slide 79
Slide 79 text
Don’t control it, embrace it.
Slide 80
Slide 80 text
John Allsopp
A Dao of Web Design
e control which designers know
in the print medium, and o en
desire in the web medium, is simply
a function of the limitation of the
printed page. We should embrace
the fact that the web doesn’t have
the same constraints, and design for
this exibility.
Slide 81
Slide 81 text
Je Bezos
Find the things that won’t
change in your business and
invest heavily in those things.
Slide 82
Slide 82 text
Focus on functionality and
content out design.
Slide 83
Slide 83 text
Uphold the core
principles of web.
Slide 84
Slide 84 text
@lukew
Perhaps ironically the more
backwards compatible your
web site is, the more future
friendly it is.
Slide 85
Slide 85 text
Don’t be fad-friendly.
Be web-friendly.
Slide 86
Slide 86 text
e web is an
amazing platform.
Slide 87
Slide 87 text
“ e Power of Simplicity”
Jeremy Keith
border:none 2013
Slide 88
Slide 88 text
http://www. ickr.com/photos/theenmoy/9356165709/
Slide 89
Slide 89 text
e web is an
amazing platform.
Slide 90
Slide 90 text
e web is an
amazing stack.
Slide 91
Slide 91 text
e web is an
amazing medium.
Slide 92
Slide 92 text
e state of web keeps going
through continuous change.
Slide 93
Slide 93 text
Web is Flux
Slide 94
Slide 94 text
Web is Flux