Slide 1
Slide 1 text
Sunday, 10 June 2012
Slide 2
Slide 2 text
@jcleveley
Sunday, 10 June 2012
Slide 3
Slide 3 text
how we built the
responsive site
why
Sunday, 10 June 2012
Slide 4
Slide 4 text
velocity + mod_include
Sunday, 10 June 2012
Slide 5
Slide 5 text
2012
2010
2008
2009
2006
2007
2011
Sunday, 10 June 2012
Slide 6
Slide 6 text
Screen Size
Capability
mobiles desktop
small big
It used to be simple ..
Sunday, 10 June 2012
Slide 7
Slide 7 text
we built www. & m.
desktop =Great UX
mobile =poor UX
Sunday, 10 June 2012
Slide 8
Slide 8 text
device EXPLOSION
EXPLOSION
EXPLOSION
Sunday, 10 June 2012
Slide 9
Slide 9 text
Sunday, 10 June 2012
Slide 10
Slide 10 text
not
mutually
exclusive
Sunday, 10 June 2012
Slide 11
Slide 11 text
thin - rotate - wide
fast - tunnel - slow
Sunday, 10 June 2012
Slide 12
Slide 12 text
Screen Size
Capability
mobiles desktop
small big
b okE
r N
Sunday, 10 June 2012
Slide 13
Slide 13 text
Screen Size
Capability
Smart
phones
desktop
small big
tablets
Net books
TVs
e-readers
feature
phones
it’s complicated ..
Connection speed? Resolution? input method?
Sunday, 10 June 2012
Slide 14
Slide 14 text
Mobile will overtake desktop
Sunday, 10 June 2012
Slide 15
Slide 15 text
Sunday, 10 June 2012
Slide 16
Slide 16 text
need to
adapt
we
Sunday, 10 June 2012
Slide 17
Slide 17 text
low
bandwidth users
Don’t alienate
Sunday, 10 June 2012
Slide 18
Slide 18 text
why?
Sunday, 10 June 2012
Slide 19
Slide 19 text
Even
Google
[is]
not
rich
enough
to
support
all
of
the
different
mobile
pla:orms...
“
”
Vic
Gundotra,
VP
of
engineering
at
Google
Sunday, 10 June 2012
Slide 20
Slide 20 text
Sunday, 10 June 2012
Slide 21
Slide 21 text
how?
Sunday, 10 June 2012
Slide 22
Slide 22 text
Device detection
client side
client
server wurfl
set
cookie
client
server
1. Detect
2. Scale
3. Enhance
XHR
server side
Sunday, 10 June 2012
Slide 23
Slide 23 text
initial markup
Everyone gets
the same
Sunday, 10 June 2012
Slide 24
Slide 24 text
responsive
DESIGN
Sunday, 10 June 2012
Slide 25
Slide 25 text
responsive
design
Features
built
once
-‐
release
simultaneously
all
pla:orms
Quickly
adapt
when
a
new
device
arrives
One
code
base
Hosted
on
a
single
URL
space
Sunday, 10 June 2012
Slide 26
Slide 26 text
Mobile first
+
progressive enhancement
Sunday, 10 June 2012
Slide 27
Slide 27 text
trash
rubbish
filler
content
nonsense
crap
poppycock
garbage baloney
twaddle tomfoolery
tripe
jQuery.js jQueryUI.js Uniform.js
jTextTranslate.js TopUp.js TipTip.js
FullCalendar.js grid.js Uploadify.js
Elastic.js Contactable.js MarkItUp.js
Autotab.js jExpand.js jBreadCrumb.js
Vertical-Scroll-Menu.js Compact-
News-Previewer.js Pull-Out-Content-
Panel.js Mega-Drop-Down-Menu.js
Apple-like-Retina-Effect.js Simple-
Accordion.js gMap.js Stylish-Content-
Sunday, 10 June 2012
Slide 28
Slide 28 text
content
Sunday, 10 June 2012
Slide 29
Slide 29 text
It’s
a
myth
that
mobile
users
don’t
want
to
do
everything
that
desktop
users
do.
Sunday, 10 June 2012
Slide 30
Slide 30 text
Text
un
problème
Sunday, 10 June 2012
Slide 31
Slide 31 text
We split devices into
good and bad
core
experience
enhanced
experience
Sunday, 10 June 2012
Slide 32
Slide 32 text
Sunday, 10 June 2012
Slide 33
Slide 33 text
speed
the core experience is fast
1
HTML
document
1
image
for
the
first
story
2
CSS
requests
2
branding
images
1
stats
web
bug
7
requests
21kb
~
Sunday, 10 June 2012
Slide 34
Slide 34 text
good browser?
it cuts the mustardtm
if(
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window
){
// party time!
}
Sunday, 10 June 2012
Slide 35
Slide 35 text
good browser?
it cuts the mustardtm
Avoids
downloading
large
DOM
libraries
Make
use
of
naVve
features
in
the
browser
Most
browsers
will
sVll
pass
Reduces
dev
Vme
on
new
features
Sunday, 10 June 2012
Slide 36
Slide 36 text
images
whilst w3c talk about it ...
img {
max-width: 100%;
}
Sunday, 10 June 2012
Slide 37
Slide 37 text
images
Dynamic resizing
Sunday, 10 June 2012
Slide 38
Slide 38 text
LAZY Load
The illusion of speed
Sunday, 10 June 2012
Slide 39
Slide 39 text
ADAPT interface
Sunday, 10 June 2012
Slide 40
Slide 40 text
things can get out of hand
Sunday, 10 June 2012
Slide 41
Slide 41 text
Gzip
responses
from
your
server
Concatenate
your
CSS
/
JS
Use
CSS
sprites
Monitor
3rd
party
plugins
OPtimise
fewer requests smaller responses
Sunday, 10 June 2012
Slide 42
Slide 42 text
render on server
keep it simple.
Non-‐JS
devices
can
view
content
Keep
templates
in
one
place
JS
rendering
engines
are
slooooooow
TranslaVons
are
much
easier
on
the
server
Sunday, 10 June 2012
Slide 43
Slide 43 text
Sunday, 10 June 2012
Slide 44
Slide 44 text
tools
rock
Sunday, 10 June 2012
Slide 45
Slide 45 text
anmo
capybara
cucumber
selenium
symfony
components
zend
wally
pimple
varnish
vagrant
AMD
ender
event
emi]er
QUnit
less
css
rake
github
xhprof
jshint
tsung
phpunit
Sunday, 10 June 2012
Slide 46
Slide 46 text
varnish
protect your back end
Front-‐end
annotations
ZTM
Service
Varnish
X-Cache-Control:
max-age=120
Sunday, 10 June 2012
Slide 47
Slide 47 text
Sunday, 10 June 2012
Slide 48
Slide 48 text
A sprinkle of
magic
Sunday, 10 June 2012
Slide 49
Slide 49 text
Pimple
small and fearsome
Light
weight
Dependency
InjecVon
Container
Easy
for
developers
to
understand
Promotes
good
pracVce
without
a
heavy
lib
Easy
to
start
using
within
Zend
Framework
Sunday, 10 June 2012
Slide 50
Slide 50 text
register( new HttpClientProvider() );
$this->register( new CandyProvider() );
// Make container available to Zend controllers
$this['zend_front']->setParam(
'container', $this
);
}
Sunday, 10 June 2012
Slide 51
Slide 51 text
class BaseController
extends Zend_Controller_Action
{
public function init()
{
$this->container
= $this->getInvokeArg('container');
}
}
Sunday, 10 June 2012
Slide 52
Slide 52 text
Event
dispatcher
Promotes
nice
decoupled
components
Add
logic
throughout
app
without
hard
coding
method
calls.
SomeVmes
difficult
to
keep
track
of
calls
Sunday, 10 June 2012
Slide 53
Slide 53 text
class Zend_Events extends Zend_Controller_Plugin_Abstract
{
...
public function dispatchLoopStartup($request)
{
$this->dispatcher->dispatch(
'zf.request', $this->createEvent($request)
);
}
public function preDispatch($request)
{
$this->dispatcher->dispatch(
'zf.controller', $this->createEvent($request)
);
}
public function dispatchLoopShutdown()
{
$this->dispatcher->dispatch(
'zf.response', $this->createEvent()
);
}
...
Sunday, 10 June 2012
Slide 54
Slide 54 text
JS Micro libraries
we don’t need the kitchen sink
Small
single
purpose
components
Send
code
to
the
client
that
you
actually
use
Interchange
with
other
micro
libs
Remove
the
dependency
on
a
framework
Sunday, 10 June 2012
Slide 55
Slide 55 text
Reqwest
-‐
AJAX
requests
Qwery
-‐
Selector
wrapper
for
naVve
funcVons
Bonzo
-‐
DOM
uVlity
methods
Event
EmiIer
-‐
PubSub
Curl
-‐
AMD
Javascript
loader
Sunday, 10 June 2012
Slide 56
Slide 56 text
AMD
Makes JS Maintainable
Manages
your
dependencies
1
6
5
2
4
3
B
A
COMPILE
Sunday, 10 June 2012
Slide 57
Slide 57 text
AMD
Makes JS Maintainable
define(
['vendor/reqwest', 'vendor/pubsub'],
function(reqwest, pubsub){
return {
name: 'fred'
};
}
);
Dependencies
Local
vars
The
thing
Sunday, 10 June 2012
Slide 58
Slide 58 text
Sunday, 10 June 2012
Slide 59
Slide 59 text
Sunday, 10 June 2012
Slide 60
Slide 60 text
Final
thoughts
Speed
is
the
key
Back
to
basics
Responsive
design
What’s
next?
...
Sunday, 10 June 2012
Slide 61
Slide 61 text
Thanks for
listening!
@jcleveley
Sunday, 10 June 2012
Slide 62
Slide 62 text
Sunday, 10 June 2012