THE GOOD
THE BAD
AND THE UGLY
…with Responsive Web Design.
Slide 3
Slide 3 text
Hej!
Slide 4
Slide 4 text
I am @MarcoBarbosa
Slide 5
Slide 5 text
We are @14islands
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
…Responsive Web Design?
Slide 8
Slide 8 text
There are more devices
connected than people
in the world today.
http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
“
It’s about designing across an
ever-widening array of devices,
browsers, and whatever-the-
heck-comes-next.
- Ethan Marcotte
Slide 13
Slide 13 text
THE GOOD
Slide 14
Slide 14 text
“
Get your content ready to go
anywhere because it’s going to
go everywhere.
- http://bradfrost.com/blog/web/for-a-future-friendly-web/
- Brad Frost
Slide 15
Slide 15 text
Content needs to flow
LIKE WATER
Slide 16
Slide 16 text
C O N T E N T
Slide 17
Slide 17 text
EMBRANCE IT
Slide 18
Slide 18 text
keep the conversation going
COLLABORATION
Slide 19
Slide 19 text
UX Design Code
Slide 20
Slide 20 text
UX Design
Code
Slide 21
Slide 21 text
THE BAD
Slide 22
Slide 22 text
BAD IMPLEMENTATIONS
CAN GET PRETTY BAD
Slide 23
Slide 23 text
“
Shoot me now…responsive design
has seemingly become confused
with an opportunity to reduce
performance rather than improve it.
- Stephanie Rieger
- https://twitter.com/stephanierieger/status/245240465572642816
Slide 24
Slide 24 text
Caring for
PERFORMANCE IS CRUCIAL
Slide 25
Slide 25 text
RESPONSIVE ALSO MEANS
PERFORMANCE
Slide 26
Slide 26 text
“
85% of mobile users expect
pages to load as fast or faster
than they load on the desktop.
- http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/
Slide 27
Slide 27 text
MEASURE IT
webtest.org
Slide 28
Slide 28 text
the importance of
MOBILE FIRST
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
IGNORING MOBILE FIRST WILL
PROBABLY BITE YOU LATER
Slide 33
Slide 33 text
THE UGLY
Slide 34
Slide 34 text
RESPONSIVE IMAGES
Slide 35
Slide 35 text
“
There’s three topics I avoid
discussing: religion, politics,
and RESPONSIVE IMAGES.
http://bradfrost.com/blog/post/responsive-images/
- Brad Frost
Slide 36
Slide 36 text
“
62% of web traffic today
are images.
http://httparchive.org/interesting.php#bytesperpage
Slide 37
Slide 37 text
WHAT CAN WE
DO TODAY
Slide 38
Slide 38 text
srcset, sizes and
http://alistapart.com/article/responsive-images-in-practice
Slide 39
Slide 39 text
SERVICES CAN
HELP YOU TOO
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
HOW WE ROLL
RESPONSIVE.IO
Slide 45
Slide 45 text
CASE STUDIES
Putting it all together
Slide 46
Slide 46 text
TICTAIL
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Lazy loading.
(Like, a LOT)
Slide 49
Slide 49 text
Can’t hog the page.
Slide 50
Slide 50 text
one way:
SIMPLY DELAYING IT
Slide 51
Slide 51 text
Load me first!
Not yet!
Not yet!
Slide 52
Slide 52 text
Not yet!
Not yet!
Load me first!
Slide 53
Slide 53 text
Load me!
Load me!
Load me first!
Slide 54
Slide 54 text
another way:
DICTATED BY SCROLL
Slide 55
Slide 55 text
loaded loaded
loaded
Slide 56
Slide 56 text
loaded loaded
loaded
Visible area
Slide 57
Slide 57 text
loaded loaded
loaded
loading! loading!
not loaded
Visible area
Load area