$30 off During Our Annual Pro Sale. View Details »

Beyond progressive enhancement

Andy Clarke
April 05, 2007

Beyond progressive enhancement

Originally presented by Andy Clarke at Highland Fling, Edinburgh, 2007

Andy Clarke

April 05, 2007
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. Originally presented by Andy Clarke
    at Highland Fling, Edinburgh, 2007
    Beyond progressive
    enhancement
    Andy Clarke is a digital designer, speaker,
    and writer whose designs have helped
    companies around the world to increase
    their sales pipeline and revenue, and
    charities to increase donations.
    He founded Stuff & Nonsense and has
    consulted and designed for clients including
    Disney Store UK, Fairfax Media, Home Office
    (UK), Greenpeace, ISO, SAP, STV, SunLife,
    WIPO, and WWF.
    He works on creative website and digital
    product designs and provides ongoing
    creative direction. He coaches agencies and
    mentors designers on dealing with clients,
    and delivering creative projects.
    If you’re looking to design better digital
    products and websites, develop a design
    system or style guide, or want to understand
    how design can help your business, you
    should talk to him.
    Stuff & Nonsense Ltd. Eversleigh, Lon Capel, Gwaenysgor, Flintshire, LL18 6EJ, UK
    For work enquiries go to
    stuffandnonsense.co.uk
    or call +44 (0)1745 851848

    View Slide

  2. View Slide

  3. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    Portrait
by
Patrick
Lauke

    View Slide

  4. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  5. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    Beyond
    beyond
    progressive
    enhancement
    http://stuffandnonsense.co.uk/downloads/highlandfling.zip
    - andy clarke

    View Slide

  6. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    Progressive
enhancement
presents
a
viable

    approach
by
enabling
the
delivery
of
information

    as
demanded
by
the
users,
while
embracing

    accessibility,
future
compatibility,
and

    determining
user
experience
based
on
the

    capabilities
of
new
devices.
    Triangle
TechJournal,
September
2003
    http://hesketh.com/publications/progressive_enhancement_paving_way_for_future.html
    progressive
enhancement

    View Slide

  7. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  8. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  9. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    Progressive
rock
acts
often
combine
rock
formats

    with
elements
of
classical
music,
or
sometimes

    with
styles
such
as
jazz,
usually
rejecting
norms,

    and
instead
utilizing
relatively
uncommon

    musical
structures
and
ideas.

    http://en.wikipedia.org/wiki/Progressive_rock
    progressive
rock

    View Slide

  10. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    Progressive
rock
acts
often
combine
rock
formats

    with
elements
of
classical
music,
or
sometimes

    with
styles
such
as
jazz,
usually
rejecting
norms,

    and
instead
utilizing
relatively
uncommon

    musical
structures
and
ideas.

    http://en.wikipedia.org/wiki/Progressive_rock
    progressive
rock

    View Slide

  11. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  12. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    ‐
preposition
    1.

on,
at,
or
to
the
farther
side
of
    2.

farther
on
than;
more
distant
than
    3.

superior
to;
surpassing;
above
    http://dictionary.reference.com/browse/beyond
    beyond

    View Slide

  13. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    ‐
verb
(used
with
object)
    1.

to
raise
to
a
higher
degree;
intensify;
magnify
    2.

to
raise
the
value
or
price
of
    http://dictionary.reference.com/browse/progressive
    enhancement

    View Slide

  14. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    ‐
adjective
    continuously
increasing
in
extent

    or
severity,
as
a
disease
    http://dictionary.reference.com/browse/progressive
    12
results
for:
progressive

    View Slide

  15. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    ‐
adjective
    favoring
or
advocating
progress,
change,

    improvement,
or
reform,
as
opposed
to

    wishing
to
maintain
things
as
they
are
    http://dictionary.reference.com/browse/progressive
    progressive

    View Slide

  16. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    ‐
adjective
    making
progress
toward
better
conditions;

    employing
or
advocating
more
enlightened
or

    liberal
ideas,
new
or
experimental
methods,

    etc.:
a
progressive
community
    http://dictionary.reference.com/browse/progressive
    progressive

    View Slide

  17. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    ‐
adjective
    going
forward
or
onward;
passing
successively

    from
one
member
of
a
series
to
the
next;

    proceeding
step
by
step
    http://dictionary.reference.com/browse/progressive
    progressive

    View Slide

  18. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    ‐
noun
    a
person
who
is
progressive
or
who
favors

    progress
or
reform
    http://dictionary.reference.com/browse/progressive
    a
progressive

    View Slide

  19. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    While
I
understand
that
for
many,
learning

    standards
based
development
is
difficult,

    particularly
for
creative
people
who
have
not

    been
required
to
work
with
code
before,
I

    believe
that
the
time
has
now
passed
for
those

    working
with
old
fashioned
methods
to
be
called

    web
professionals.
    http://accessify.com/2005/11/interview‐with‐andy‐clarke‐aka.php
    Accessibility,
the
gloves
come
off

    View Slide

  20. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  21. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  22. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  23. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  24. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  25. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  26. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    “As
proposed
by
Andy
Clarke
in
his
blog
[1],
the

    'column‐rule‐image'
property
has
been
added

    to
the
spec.
The
examples
are:
    body
{
column‐rule‐image
:
url(rule.png);
}
    body
{
column‐rule‐image
:
url(rule.png)
repeat‐x
0
0;
}”
    Håkon
Wium
Lie.
CTO
Opera
Software,
W3C
CSS3
Working
Group
    CSS3
Multi‐column
module

    View Slide

  27. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  28. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  29. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  30. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  31. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  32. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  33. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    Illustrations
by
Holly
Lloyd

    View Slide

  34. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  35. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  36. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  37. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  38. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  39. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  40. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    Stuff
and
Nonsense
Ltd.
will
test
these
templates
in

    current
versions
of
all
major
browsers
including

    those
made
by
Apple,
Microsoft,
Mozilla
and

    Opera.
Stuff
and
Nonsense
Ltd.
will
also
test
to

    ensure
that
these
templates
will
visually
appear
to

    be
‘similar’,
albeit
not
identical
in
Microsoft

    Internet
Explorer
6
for
Windows.
    contract

    View Slide

  41. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    ...
will
not
test
these
templates
in
old
or
abandoned

    browsers,
for
example
Microsoft
Internet
Explorer
5

    or
5.5
for
Windows
or
Mac,
previous
versions
of

    Apple’s
Safari,
Mozilla
Firefox
or
Opera
unless

    otherwise
specified.

    Testing
and
the
writing
additional
code
for
these

    browsers
will
be
charged
at
the
daily
rate.
    contract

    View Slide

  42. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  43. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007

    View Slide

  44. Beyond
Progressive
Enhancement The
Highland
Fling,
Edinburgh,
2007
    Beyond
    beyond
    progressive
    enhancement
    http://stuffandnonsense.co.uk/downloads/highlandfling.zip
    - andy clarke

    View Slide

  45. View Slide