Slide 1
Slide 1 text
SLOWING DOWN TO GO FASTER
RESPONSIVE WEB DESIGN & THE PROBLEM OF
AGILITY vs ROBUSTNESS
Slide 2
Slide 2 text
Ciao!
AT COPACABANA BEACH, BRAZIL
3 MILLION PEOPLE LISTENING TO THE POPE
Slide 3
Slide 3 text
PEOPLE NEVER SAW IT
THIS IS THE FIRST WEBSITE I EVER MADE, 3 MILLION
Slide 4
Slide 4 text
Ciao!
Hello!
AN AUDIENCE OF 3 MILLION
MAKING WEBPAGES IS CLOSEST I’LL EVER GET TO
Slide 5
Slide 5 text
UBIQUITY
LESS
IMPORTANT
THAN
ACCESSIBILITY
PERFORMANCE
USABILITY
SEO FRIENDLY
NO JAVASCRIPT
SEMANTICS
LESS
IMPORTANT
THAN
HTML
CSS
JAVASCRIPT
OUR WEBSITES
WE WANT AS MANY PEOPLE AS POSSIBLE TO VIEW
Slide 6
Slide 6 text
PART 1
WHAT IS RESPONSIVE WEB DESIGN?
Its when you
resize the browser and
the content changes
width, right?
YES
Slide 7
Slide 7 text
But isn’t it also about
building for mobiles first?
YES
Slide 8
Slide 8 text
And isn’t there
a massive difference
in device capabilities
too?
YES
Slide 9
Slide 9 text
Can’t everyone just
use an iPhone 5S?
You’re not
working hard enough if
you can’t afford one
NO!
Slide 10
Slide 10 text
RESPONSIVE WEB DESIGN IS:
A SOLUTION TO THE PROBLEM
OF THE MASSIVE DIFFERENCES
WE’RE NOW SEEING IN THE
CLIENT
Slide 11
Slide 11 text
ROBUSTNESS vs. AGILITY
THE PROBLEM IS
Slide 12
Slide 12 text
I WORK IN BBC NEWS VISUAL JOURNALISM...
Slide 13
Slide 13 text
WE BUILD INFOGRAPHICS AND DATA
VISUALISATIONS
Slide 14
Slide 14 text
MORE DESIGN TIME
RESPONSIVE WEB DESIGN TAKES LONGER
MORE COMPLEX DEVELOPMENT
MORE TESTING
EVERYTHING WE MAKE IS NOW RESPONSIVE
AND TAKES 3 TIMES LONGER TO BUILD
Slide 15
Slide 15 text
PART 2
OBVIOUS ADVICE
PERFORMANCE IS EASY, HERE ARE 4
OBVIOUS TIPS TO HELP YOU...
Slide 16
Slide 16 text
Small file sizes?
Oh... My... God...
#headfuck
MAKE YOUR FILES SMALLER
WORK EXPERIENCE
MONKEY
OBVIOUS RULE #1
Slide 17
Slide 17 text
Less requests? Of
course!!!
#ideagasm
MAKE LESS REQUESTS
PROJECT MANAGER
KITTEH
OBVIOUS RULE #2
Slide 18
Slide 18 text
Dag nammit you
clever!
#takemymoney
ONLY DOWNLOAD WHAT YOU NEED
ANYONE WHO LIKES
PARALLAX SCROLLING
OBVIOUS RULE #3
Slide 19
Slide 19 text
Floored by your
awesomeness
#maslened
DON’T BREAK WHAT
YOU’VE ALREADY MADE
THE GUY WHO BREAKS
THE BUILD ALL THE TIME
OBVIOUS RULE #4
Slide 20
Slide 20 text
BUT...
PUTTING IT INTO YOUR
WORKFLOW WITH RESPONSIVE
WEB DESIGN IS HARD
Slide 21
Slide 21 text
BUILD YOUR WORKFLOW
DOWNLOAD ONLY WHAT YOU NEED
REDUCE DOWNLOADS
IMPROVE TIME TO GLASS
DON’T BREAK STUFF
Slide 22
Slide 22 text
www.gruntjs.com
Slide 23
Slide 23 text
www.gruntjs.com
integralist.co.uk/Grunt-Boilerplate.html
MARK McDONNELL
@integralist
Slide 24
Slide 24 text
IMPROVE TIME TO GLASS
Slide 25
Slide 25 text
ANGRY GLASWEGIAN
PINT GLASS
Ay’m gonna
deck ya!
THIS IS NOT TIME TO GLASS
Slide 26
Slide 26 text
THIS IS TIME TO GLASS
ILYA GRIGORIK - @igrigorik
PATRICK HAMANN - @patrickhamann
http://bit.ly/16h5OHm
http://bit.ly/18AOWOz
“OPTIMIZING THE CRITICAL PATH”
“CSS AND THE CRITICAL PATH”
Slide 27
Slide 27 text
TIME TO GLASS
Slide 28
Slide 28 text
WE DO THIS USING THIS TECHNIQUE
Slide 29
Slide 29 text
CORE EXPERIENCE
SIMPLE LAYOUT, FAST, ALL BROWSERS
7 8
BB OS5
(MANGO)
1.6
9 10
BB OS6+
(WEBKIT)
2.1+
Slide 30
Slide 30 text
JAVASCRIPT
IF BROWSER “CUTS THE MUSTARD”...
if (
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window
) {
// load JS application
Slide 31
Slide 31 text
ENHANCED EXPERIENCE
COMPLEX LAYOUT, FUNCTIONAL, MODERN BROWSERS
CORE EXPERIENCE
SIMPLE LAYOUT, FAST, ALL BROWSERS
7 8
BB OS5
(MANGO)
1.6
9 10
BB OS6+
(WEBKIT)
2.1+
Slide 32
Slide 32 text
BUILD YOUR WORKFLOW
CORE EXPERIENCE
DOWNLOAD ONLY WHAT YOU NEED
REDUCE DOWNLOADS
IMPROVE TIME TO GLASS
DON’T BREAK STUFF
Slide 33
Slide 33 text
I’m gonna
shoot you!
STEVIE SOUDERS WILL GET ANGRY UNLESS...
Slide 34
Slide 34 text
YOU ONLY DOWNLOAD WHAT YOU NEED
Slide 35
Slide 35 text
Img$
62%$
JS$
17%$
Other$
9%$
Flash$
5%$
HTML$
4%$
CSS$
3%$
httparchive.org/interesting.php
AVERAGE % PER PAGE BY CONTENT TYPE
LETS START WITH
IMAGES
Slide 36
Slide 36 text
WE CAN’T TELL BY DEVICE WIDTH WHAT SIZE
IMAGE WE NEED
Slide 37
Slide 37 text
SOMETIMES THEY ARE FULL WIDTH...
Slide 38
Slide 38 text
OR HALF THE WIDTH...
Slide 39
Slide 39 text
OR EVEN SMALLER
Slide 40
Slide 40 text
WE NEED TO BUILD MULTIPLE VERSIONS OF THE
SAME IMAGE...
Slide 41
Slide 41 text
THEN DECIDE WHICH ONE TO USE
?
Slide 42
Slide 42 text
IMAGER.JS IS A GRUNT TASK TO DO THIS
Slide 43
Slide 43 text
MARK McDONNELL
@integralist
ADDY OSMANI
@addyosmani
MADE BY MYSELF AND THESE TWO CHAPS
Slide 44
Slide 44 text
A GRUNTFILE
ORIGINAL IMAGES
YOU NEED...
Slide 45
Slide 45 text
gruntfile.js
responsive_images:
{
options:
{
sizes:
[{
width:
320
},{
width:
640
},{
width:
1024
}]
},
files:
[{
cwd:
'./original_img/',
src:
['*.{jpg,gif,png}'],
dest:
'./resp_img/'
}]
}
WHERE THE ORIGINAL
IMAGES ARE
GRUNT NEEDS TO KNOW...
Slide 46
Slide 46 text
gruntfile.js
responsive_images:
{
options:
{
sizes:
[{
width:
320
},{
width:
640
},{
width:
1024
}]
},
files:
[{
cwd:
'./original_img/',
src:
['*.{jpg,gif,png}'],
dest:
'./resp_img/'
}]
}
WHAT SIZES OF IMAGES
YOU WANT
GRUNT NEEDS TO KNOW...
Slide 47
Slide 47 text
gruntfile.js
responsive_images:
{
options:
{
sizes:
[{
width:
320
},{
width:
640
},{
width:
1024
}]
},
files:
[{
cwd:
'./original_img/',
src:
['*.{jpg,gif,png}'],
dest:
'./resp_img/'
}]
}
WHERE IMAGES WILL BE
OUTPUTTED
GRUNT NEEDS TO KNOW...
Slide 48
Slide 48 text
var
imager
=
new
Imager({
availableWidths:
[320,
640,
1024]
});
IN YOUR HTML INCLUDE THE IMAGE.JS FILE AND
INSTANTIATE AN OBJECT LIKE SO
MUST BE SAME ARRAY
FROM TWO SLIDES PREVIOUS
Slide 49
Slide 49 text
In
your
HTML...
IS REPLACED BY
USE THIS DIV INSTEAD OF A NORMAL IMG TAG
IT WILL TURN INTO AN IMG TAG, AUTOMATICALLY
CHOOSING THE BEST FITTING IMAGE
IS REPLACED BY
USE THIS DIV INSTEAD OF A NORMAL IMG TAG
IT WILL TURN INTO AN IMG TAG, AUTOMATICALLY
CHOOSING THE BEST FITTING IMAGE
Slide 50
Slide 50 text
grunt
responsive_images
THE DIFFERENT WIDTH VERSIONS OF THE IMAGE
RUNNING THIS COMMAND WILL GENERATE
BEFORE AFTER
Slide 51
Slide 51 text
BUILD YOUR WORKFLOW
CORE EXPERIENCE
DOWNLOAD ONLY WHAT YOU NEED
REDUCE DOWNLOADS
IMPROVE TIME TO GLASS
DON’T BREAK STUFF
AUTOMATED
RESPONSIVE IMAGES
Slide 52
Slide 52 text
REDUCE DOWNLOADS
Slide 53
Slide 53 text
httparchive.org/interesting.php
CACHE LIFETIME (DAYS)
56%$
13%$
18%$
9%$
4%$
0%$
10%$
20%$
30%$
40%$
50%$
60%$
70%$
80%$
90%$
100%$
t$=$0$ 0$<$t$<=1$ 1$<$t$<=$30$ 30$<$t$<=$365$ t$>$365$
Slide 54
Slide 54 text
PRO TIP
CACHE JS, CSS &
IMAGES FOR A YEAR
Slide 55
Slide 55 text
github.com/h5bp/mobile-‐boilerplate/.htaccess
#
CSS
and
JavaScript
ExpiresByType
application/javascript
"access
plus
1
year"
ExpiresByType
text/css
"access
plus
1
year"
SETTING THE CACHE
Slide 56
Slide 56 text
CHANGE THE PATH TO BREAK THE CACHE WHEN
A VERSION OF THE FILE IS AVAILABLE
Slide 57
Slide 57 text
THIS ISN’T EASY IF THERE ARE MANY FILES
...
LUCKILY GRUNT CAN HELP US
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
JARROD OVERSON
@jsoverson
Slide 60
Slide 60 text
YOU NEED A PACKAGE FILE
Slide 61
Slide 61 text
{
"name":
"Example",
"description":
"Example
app
for
Velocity
EU
2013",
"version":
"0.1.1",
"devDependencies":
{
"grunt":
"~0.4.1",
"grunt-‐preprocess":
"~3.0.1"
}
}
APP VERSION
package.json
Slide 62
Slide 62 text
module.exports
=
function(grunt)
{
grunt.initConfig({
pkg:
'',
preprocess:
{
options:
{
context:
{
version:
'<%=
pkg.version
%>'
}
},
multifile
:
{
files
:
{
'example.html.tmpl'
:
'example.html'
}
}
}
});
grunt.loadNpmTasks('grunt-‐preprocess');
};
REFERENCE
GRUNT-PREPROCESS
INSTRUCTIONS
TEMPLATE OUTPUT
Gruntfile.js
TEMPLATE VARIABLE
Slide 63
Slide 63 text
">
example.html.tmpl
Slide 64
Slide 64 text
...
example.html
PACKAGE FILE OURSELVES BEFORE EACH RELEASE
THIS IS NICE, BUT WE HAVE TO UPDATE THE
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
File
updated
Path:
package.json
Old
version:
0.1.0.
New
version:
0.1.1.
Done,
without
errors.
Waiting...
OK
>>
File
"main.js"
changed.
Running
"version:build"
(version)
task
LOOK
Slide 67
Slide 67 text
Waiting...
OK
>>
File
"main.js"
changed.
Running
"version:build"
(version)
task
File
updated
Path:
package.json
Old
version:
0.1.1.
New
version:
0.1.1-‐1.
Done,
without
errors.
LOOK
Slide 68
Slide 68 text
...
example.html
AUTOMATED CACHE BREAKING!
Slide 69
Slide 69 text
BUT...
PROXY SERVERS DO NOT
CACHE ASSETS WITH QUERY
STRINGS
Slide 70
Slide 70 text
BREAK THE CACHE BY A CHANGE IN
THE FILE PATH, NOT THE QUERYSTRING
PRO TIP
BAD
:-‐(
GOOD
:-‐)
Slide 71
Slide 71 text
.js">
example.html.tmpl
MOVE THE VERSION NUMBER INTO THE FILE NAME
Slide 72
Slide 72 text
#Rules
for
Versioned
Static
Files
RewriteRule
^(scripts|css)/(.+)-‐(.+)\.
(js|css)$
$1/$2.$4
[L]
THIS REWRITE RULE...
DOES THIS REDIRECTION...
scripts/main-‐0.1.0.js scripts/main.js
Slide 73
Slide 73 text
BUILD YOUR WORKFLOW
CORE EXPERIENCE
DOWNLOAD ONLY WHAT YOU NEED
REDUCE DOWNLOADS
VERSION ASSETS
IMPROVE TIME TO GLASS
DON’T BREAK STUFF
AUTOMATED LONG
CACHE
AUTOMATED
RESPONSIVE IMAGES
Slide 74
Slide 74 text
DON’T BREAK STUFF
Slide 75
Slide 75 text
A RESPONSIVE VISUAL REGRESSION TESTING TOOL
Slide 76
Slide 76 text
@sthulb
STEVEN THULBOURN
@jcleveley
JOHN CLEVELEY
@dblooman
DAVID BLOOMAN
Slide 77
Slide 77 text
LIVE SITE TEST SITE DIFFERENCES
Slide 78
Slide 78 text
LIVE SITE TEST SITE DIFFERENCES
Slide 79
Slide 79 text
BUILD YOUR WORKFLOW
CORE EXPERIENCE
DOWNLOAD ONLY WHAT YOU NEED
REDUCE DOWNLOADS
VERSION ASSETS
IMPROVE TIME TO GLASS
DON’T BREAK STUFF
AUTOMATED
REGRESSION TESTS
AUTOMATED LONG
CACHE
AUTOMATED
RESPONSIVE IMAGES
Slide 80
Slide 80 text
ROBUSTNESS vs. AGILITY
THE PROBLEM IS
Slide 81
Slide 81 text
5 INCHES 7 INCHES
THE PROBLEM WILL ONLY INCREASE IN
COMPLEXITY
Slide 82
Slide 82 text
LAPTOP OR TABLET?
THE PROBLEM WILL ONLY INCREASE IN
COMPLEXITY
Slide 83
Slide 83 text
TOTAL DIVERGENCE
THE PROBLEM WILL ONLY INCREASE IN
COMPLEXITY
Slide 84
Slide 84 text
MULTIPLE INTERACTION TYPES PER DEVICE
THE PROBLEM WILL ONLY INCREASE IN
COMPLEXITY
Slide 85
Slide 85 text
TOOLING & AUTOMATION
THE SOLUTION IS
Slide 86
Slide 86 text
THE END
MOVE SWIFTLY
TOM MASLEN, BBC NEWS
@tmaslen