Tweet
Tweet

Slide 1

Slide 1 text

MOBILE FIRST As difficult as doing things right Javier Usobiaga #bdc13

Slide 2

Slide 2 text

@HTMLBOY Swwweet.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Opera Mini

Slide 7

Slide 7 text

200 MILLION USERS WORLDWIDE

Slide 8

Slide 8 text

HATES MY WEBSITES

Slide 9

Slide 9 text

No @font-face No client-side JavaScript No gradients No border-radius

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

1. AN OVERWEIGHT PROBLEM

Slide 12

Slide 12 text

“We've remade the Internet in our image… Obese.” – Jason Grigsby –

Slide 13

Slide 13 text

The average webpage is 1.617MB. Mostly images. httparchive.org

Slide 14

Slide 14 text

milwaukeepolicenews.com

Slide 15

Slide 15 text

milwaukeepolicenews.com 7MB

Slide 16

Slide 16 text

redrobin.com

Slide 17

Slide 17 text

redrobin.com 10.9MB

Slide 18

Slide 18 text

grolsch.com

Slide 19

Slide 19 text

grolsch.com 25MB

Slide 20

Slide 20 text

moto.oakley.com

Slide 21

Slide 21 text

moto.oakley.com 85MB

Slide 22

Slide 22 text

Just because we can, it doesn’t mean we should.

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

74% of mobile users won’t wait longer than 5 seconds for a page to load bit.ly/5secondsmobile

Slide 26

Slide 26 text

20€/month for 1GB

Slide 27

Slide 27 text

20€/month for 1GB 85MB = 1.70€

Slide 28

Slide 28 text

US roaming: 10€/MB

Slide 29

Slide 29 text

US roaming: 10€/MB 85MB = 850€

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

2. THE IMPORTANCE OF BEING MOBILE FIRST

Slide 33

Slide 33 text

Content First?

Slide 34

Slide 34 text

User First?

Slide 35

Slide 35 text

Everything First!

Slide 36

Slide 36 text

Reduced Browser Window In Developer's Computer First

Slide 37

Slide 37 text

Worry about the less capable first

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Design around real content

Slide 40

Slide 40 text

1 column of content + basic styles

Slide 41

Slide 41 text

body{max-width: 30em;}

Slide 42

Slide 42 text

Consider layout an enhancement: 
 inside @media queries

Slide 43

Slide 43 text

@media screen and (min-width:1px){ 
 body{
 max-width: inherit;
 }
 }

Slide 44

Slide 44 text

Slide 45

Slide 45 text

github.com/scottjehl/Respond

Slide 46

Slide 46 text

Enhance with JavaScript

Slide 47

Slide 47 text

if( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window )

Slide 48

Slide 48 text

Cutting the mustard

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Conditionally load: secondary assets third-party content transitions, effects AJAX stuff

Slide 51

Slide 51 text

Design agnostically

Slide 52

Slide 52 text

Design for every input

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Design for every context

Slide 55

Slide 55 text

Design for every connection

Slide 56

Slide 56 text

3. OPTIMIZE ALL THE THINGS!

Slide 57

Slide 57 text

The average webpage is 1.617MB. Mostly images. httparchive.org

Slide 58

Slide 58 text

Can we afford another image?

Slide 59

Slide 59 text

Try to serve the right image size

Slide 60

Slide 60 text

adaptive-images.com

Slide 61

Slide 61 text

github.com/scottjehl/picturefill

Slide 62

Slide 62 text

Do retina devices need retina images?

Slide 63

Slide 63 text

netvlies.nl/blog/design-interactie/retina-revolution

Slide 64

Slide 64 text

Optimize images: ImageOptim JpegMini SVGO

Slide 65

Slide 65 text

Optimize everything: reduce requests combine & minify gzip

Slide 66

Slide 66 text

JS files belong on the footer

Slide 67

Slide 67 text

Do we need a JS framework?

Slide 68

Slide 68 text

Avoid or conditionally load: iframes social plugins third-party assets

Slide 69

Slide 69 text

Consider plain links for social stuff

Slide 70

Slide 70 text

https://twitter.com/intent/tweet?url=http://bit.ly/ ancientMistery&text=What+is+your+sound?&via=htmlboy Twitter: http://www.facebook.com/sharer.php?u=http://bit.ly/ ancientMistery&t=What+is+your+sound? Facebook: https://plus.google.com/share?url=http://bit.ly/ ancientMistery Google+:

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

There’s so much we can optimize

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

4. PERFORMANCE BUDGET

Slide 75

Slide 75 text

“We’ll do it later” is a lie

Slide 76

Slide 76 text

Performance as a design principle

Slide 77

Slide 77 text

“Make the page usable in less than 10 seconds on a GPRS connection.” – BBC News –

Slide 78

Slide 78 text

First load: somewhere between 65KB and 100KB

Slide 79

Slide 79 text

“Don't make more than 
 20 http requests”

Slide 80

Slide 80 text

“Make the page weigh 
 less than 300KB”

Slide 81

Slide 81 text

“1. Optimize an existing feature or asset. 2. Remove an existing feature or asset. 3. Don’t add the new feature or asset.” – Steve Souders –

Slide 82

Slide 82 text

5. PERCEIVED PERFORMANCE

Slide 83

Slide 83 text

Avoid JS redrawings

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

Show content as soon as possible

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

FOUT: Flash Of Unstyled Text

Slide 90

Slide 90 text

github.com/typekit/webfontloader

Slide 91

Slide 91 text

300ms delay on touch devices

Slide 92

Slide 92 text

github.com/ftlabs/fastclick

Slide 93

Slide 93 text

WRAPPING UP

Slide 94

Slide 94 text

Web design is not about
 pretty pictures

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

wow such design very icons so flats nice font wow dribbble such parallax

Slide 98

Slide 98 text

Set a performance budget
 in the design workflow

Slide 99

Slide 99 text

“What a fast website, that on top of that, is beautiful.”

Slide 100

Slide 100 text

LET PEOPLE COMMUNICATE

Slide 101

Slide 101 text

THANKS! @htmlboy · [email protected]