Slide 1
Slide 1 text
WEB NATIVE
Paul Robert Lloyd
DESIGNER
Geek in the Park
13 August 2011
THE
Slide 2
Slide 2 text
WEB NATIVE
v
Slide 3
Slide 3 text
WEB NATIVE
NATIVE
DEVICE
v
Slide 4
Slide 4 text
WEB NATIVE
NATIVE
DEVICE
&
Slide 5
Slide 5 text
WEB
NATIVE
Slide 6
Slide 6 text
Happy 20th birthday!
Photo by Robin Robokow
http://flic.kr/p/AqLWt
Slide 7
Slide 7 text
What are the three core
web technologies?
QUESTION
? ? ?
Slide 8
Slide 8 text
HTML
What are the three core
web technologies?
QUESTION
?
?
Slide 9
Slide 9 text
HTML HTTP
What are the three core
web technologies?
QUESTION
?
Slide 10
Slide 10 text
HTML HTTP URI’s
What are the three core
web technologies?
QUESTION
Slide 11
Slide 11 text
“
The primary design principle underlying
the Web’s usefulness and growth is
universality… it should be accessible from
any kind of hardware that can connect to
the Internet: stationary or mobile, small
screen or large.
TIM BERNERS-LEE
Long Live the Web: A Call for Continued Open
Standards and Neutrality
Slide 12
Slide 12 text
“
Want to know if your ‘HTML application’ is
part of the web? Link me into it. Not just
link me to it; link me into it. Not just to the
black-box frontpage. Link me to a piece
of content… That is the web: The beautiful
interconnection of navigable content.
BEN WARD
Understand the web
Slide 13
Slide 13 text
Fully responsive!
Slide 14
Slide 14 text
BAD EXAMPLES
Slide 15
Slide 15 text
As of August 1st, we will discontinue
support for the following browsers and
their predecessors: Firefox 3.5, Internet
Explorer 7, and Safari 3. In these older
browsers you may have trouble using
certain features and eventually these
apps may stop working entirely.
VENKET PANCHAPAKESAN (GOOGLE)
Our plans to support modern browsers across Google Apps
“
Slide 16
Slide 16 text
JS
CSS
HTML
Slide 17
Slide 17 text
HTML
Content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
CONTENT
Slide 21
Slide 21 text
In order to embrace designing native
layouts for the web – whatever the
device – we need to shed the notion that
we create layouts from a canvas in. We
need to flip it on its head, and create
layouts from the content out.
MARK BOULTON
A Richer Canvas
“
Slide 22
Slide 22 text
CONTENT FIRST
Slide 23
Slide 23 text
TIP
Design with real content.
Slide 24
Slide 24 text
CSS
Presentation
Slide 25
Slide 25 text
RESPONSIVE DESIGN
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
CONTEXT
Slide 30
Slide 30 text
Mobile users want to see our menu,
hours and delivery number.
Desktop users definitely want this 1Mb
PNG of somebody smiling at a salad.
MAT 'WILTO' MARQUIS
Tweeted on 27 April 2011
“
Slide 31
Slide 31 text
NO SILVER BULLET
Slide 32
Slide 32 text
TIP
Experiment and share
your findings.
Slide 33
Slide 33 text
TIP
Beware of fixed or device
specific values.
pt px
PRINT SCREEN WEB
% em
Slide 34
Slide 34 text
JavaScript
Behaviour
Slide 35
Slide 35 text
THE MISBEHAVING
BEHAVIOURAL LAYER
Slide 36
Slide 36 text
TIP
Think of enhancements
not fallbacks.
Slide 37
Slide 37 text
Erm...
I thought this talk was about design?
Slide 38
Slide 38 text
DEVELOPERS =
DESIGNERS
Slide 39
Slide 39 text
USER EXPERIENCE
DESIGNER
INTERACTION
DESIGNER
FRONT-END
DEVELOPER
ENTIRE TEAM
Slide 40
Slide 40 text
USER EXPERIENCE
DESIGNER
INTERACTION
DESIGNER
FRONT-END
DEVELOPER
ENTIRE TEAM
Slide 41
Slide 41 text
“
Being T-shaped means you can shift
yourself and provide value at just about
any stage or type of project—like
sketching, wire-framing, visual design,
and code.
MARK OTTO
Flatten those T’s
Slide 42
Slide 42 text
TIP
Only use static images to
aid collaboration.
Slide 43
Slide 43 text
(That’s what she said)
This is hard!
Slide 44
Slide 44 text
paulrobertlloyd.com/archive/
@paulrobertlloyd
Creative Commons Licensed
Attribution, Non-Commercial, Share Alike
cc
Thank-you.