presents

!

TALK
DRINK
SHARE
an event about mobile first design and modern front-end development
by Aldo Ferrari & Andy Mc...
WELCOME
TALK
DRINK
SHARE
© SQLI AGENCY / 2013-09

2
SQLI
AGENCY
© SQLI AGENCY / 2013-09

3
WHERE WE ARE

LAUSANNE
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

GENEVA
4
WHAT WE DO

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

5
WHO WE ARE

Mathieu Collet

Benoît Henry

Jérémie Fontana

Véronique Tillaud

Fleur Etwiller

Chiara Valerio

Andy McFee

...
TODAY'S SPEAKERS

Mathieu Collet

Benoît Henry

Jérémie Fontana

Véronique Tillaud

Fleur Etwiller

Chiara Valerio

Andy M...
LET'S GET CONNECTED!

sqliagency.ch

@sqliagency_ch

@sqliagency_ch

/sqliagencych

#TxDxS
© SQLI AGENCY - TALK × DRINK × ...
LET'S GO!
© SQLI AGENCY / 2013-09

9
ALDO
FERRARI
Head of Development
© SQLI AGENCY / 2013-09

@aldo_ferrari

10
HTML5
THE RIGHTless time
WAY
Lose less money and
© SQLI AGENCY / 2013-09

11
HTML5

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

IMAGE : ALTFIRE.IE 12
HTML5

Do not use HTML5
...If it's not the right choice

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

13
RIGHT TOOLS

... at the right moment
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

IMAGE : THECHALKFACE.NET 14
BRITISH K-CLASS SUBMARINE

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

IMAGE : SUBMERGED.CO.UK 15
HTML5 VS NATIVE

vs
Native
iOS or Android

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

16
HTML5 OR NATIVE

or
Native
iOS or Android

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

17
HOW TO MAKE THE RIGHT CHOICE?
Full capability
Native

Hybrid

Advanced UI interactions
Fastest performances
App store dist...
HOW TO MAKE THE RIGHT CHOICE?

Native

× Rich user experience
× Platform specific
× Proven path for mobile apps

© SQLI AGE...
HOW TO MAKE THE RIGHT CHOICE?

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

IMAGE : NAGARRO.COM 20
BEING SUPPORTED BY THE RIGHT PEOPLE

...at the right moment
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

21
RECAP
© SQLI AGENCY / 2013-09

22
RECAP

× Right tools at the right moment.
× Evaluating with open-mind approach.
× Right people involved at the right time....
SOME RESOURCES

esources
com/en/r
l5rocks.
htm
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

24
GRAZIE
MILLE
© SQLI AGENCY / 2013-09

linkedin.com/in/aldoferrari
@aldo_ferrari

25
QUESTION?
ANSWERS!
© SQLI AGENCY / 2013-09

26
NEXT!
© SQLI AGENCY / 2013-09

27
ANDY
MCFEE Developer
UX & Front-End
© SQLI AGENCY / 2013-09

@andymcfee

28
MOBILEany subtitle
FIRST
It doesn't need
© SQLI AGENCY / 2013-09

29
HI, I’M ANDY.
!

I’M A UX DEVELOPER

© SQLI AGENCY / 2013-09

30
WHAT IS
MOBILE FIRST?
© SQLI AGENCY / 2013-09

31
WHAT IS MOBILE FIRST?

MOBILE FIRST
is a strategy for

designing and building
web experiences for

mobile users first
© SQL...
WHAT IS MOBILE FIRST?

Mobile First is often

incorrectly
associated with the

‘Native vs HTML5’
debate

© SQLI AGENCY - T...
WHY
MOBILE FIRST?
© SQLI AGENCY / 2013-09

34
WHY MOBILE FIRST?

Because

MOBILE
is

EVERYWHERE
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

35
WHY MOBILE FIRST?

880 million
Android + iOS devices one year ago
Android hit 1 billion in July 2013
Apple - 600 million n...
WHY MOBILE FIRST?

87% of the world’s population
has access to a
mobile device.
http://bit.ly/tds-world
© SQLI AGENCY - TA...
BUSINESS
STRATEGY
© SQLI AGENCY / 2013-09

38
STRATEGY

So what does
mobile first
mean for a business?
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

39
STRATEGY

Mobile First helps to
define and refine
your business goals
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

40
STRATEGY

LOOK AT ALL OF THIS SPACE I HAVE!
Things you should focus on:
Let me tell you a bit about
FOCUS! A user will dec...
STRATEGY

Focus your

Content
!

Don’t make the user

THINK

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

42
STRATEGY

Make mobile a priority in order
to capitalize on the growth and
capabilities of the medium.
— Brad Frost

© SQLI...
STRATEGY

Instagram
Only on mobile devices (first)
Explosive growth
Capitalizes on the capabilities of
the medium - Camera ...
HALFWAY HONEY BADGER
To mark the middle of my talk

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

45
DESIGN
© SQLI AGENCY / 2013-09

46
DESIGN

Mobile Last - degraded, shoe-horned, short sighted, crappy

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

47
DESIGN

Mobile First - progressively enhanced, future-friendly, awesome

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25...
DESIGN

Constraints

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

49
DESIGN

Constraints

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

50
DESIGN

Mobile First?
Content First
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

51
DESIGN

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

52
DESIGN

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

53
DESIGN

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

54
DESIGN

Next time you find yourself intentionally depriving
someone an experience—
!

to acquire knowledge, to complete a t...
DESIGN

Everything is accessible for every user

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

56
DESIGN

If you find yourself saying

“Let’s hide/show this content
only for mobile users”
then just get rid of that
content...
DEVELOPMENT
© SQLI AGENCY / 2013-09

58
DEVELOPMENT

Progressive Enhancement
The art of crafting
web experiences
from the content outward.
© SQLI AGENCY - TALK × ...
DEVELOPMENT

Content - HTML
Presentation - CSS
Functionality - JS
Cutting Edge Stuff - CSS3, HTML5, Crazy JS
© SQLI AGENCY ...
DEVELOPMENT

Progressive Enhancement
An escalator can never break: it
can only become stairs. You
should never see an ‘Esc...
DEVELOPMENT

Pure HTML works on any web-enabled
device by default.
!

It’s not until we start adding styles
and functional...
TO
SUM IT
ALL UP
© SQLI AGENCY / 2013-09

63
CONCLUSION

× Mobile is huge and only getting bigger.
× Embrace constraints, focus your content.
× Build escalators not el...
THX
GUYS
© SQLI AGENCY / 2013-09

andymcfee.com
@andymcfee
→ Twitter
→ GitHub
→ CodePen

65
QUESTION?
ANSWERS!
© SQLI AGENCY / 2013-09

66
NEXT
EVENT
© SQLI AGENCY / 2013-09

67
BENOÎT
HENRY & Strategist
UX Project Manager
© SQLI AGENCY / 2013-09

@benoithenry

68
KEYWORDS

Customer Audience
Tool

Marketing Late November
→

© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

69
LET'S GET CONNECTED!

sqliagency.ch

@sqliagency_ch

@sqliagency_ch

/sqliagencych

#TxDxS
© SQLI AGENCY - TALK × DRINK × ...
Now,
let's drink
& share!

THANK YOU!
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25

SQLIAGENCY.CH
Prochain SlideShare
Chargement dans…5
×

Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach

1 988 vues

Publié le

Publié dans : Technologie, Business
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 988
Sur SlideShare
0
Issues des intégrations
0
Intégrations
23
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach

  1. 1. presents ! TALK DRINK SHARE an event about mobile first design and modern front-end development by Aldo Ferrari & Andy McFee
  2. 2. WELCOME TALK DRINK SHARE © SQLI AGENCY / 2013-09 2
  3. 3. SQLI AGENCY © SQLI AGENCY / 2013-09 3
  4. 4. WHERE WE ARE LAUSANNE © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 GENEVA 4
  5. 5. WHAT WE DO © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 5
  6. 6. WHO WE ARE Mathieu Collet Benoît Henry Jérémie Fontana Véronique Tillaud Fleur Etwiller Chiara Valerio Andy McFee Barbara Chabriw Aldo Ferrari Agency Manager Strategist UX & Front-End Developer © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 Strategist UX Designer Interaction Designer Art Director UX Designer Head of Development 6
  7. 7. TODAY'S SPEAKERS Mathieu Collet Benoît Henry Jérémie Fontana Véronique Tillaud Fleur Etwiller Chiara Valerio Andy McFee Barbara Chabriw Aldo Ferrari Agency Manager Strategist UX & Front-End Developer © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 Strategist UX Designer Interaction Designer Art Director UX Designer Head of Development 7
  8. 8. LET'S GET CONNECTED! sqliagency.ch @sqliagency_ch @sqliagency_ch /sqliagencych #TxDxS © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 8
  9. 9. LET'S GO! © SQLI AGENCY / 2013-09 9
  10. 10. ALDO FERRARI Head of Development © SQLI AGENCY / 2013-09 @aldo_ferrari 10
  11. 11. HTML5 THE RIGHTless time WAY Lose less money and © SQLI AGENCY / 2013-09 11
  12. 12. HTML5 © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 IMAGE : ALTFIRE.IE 12
  13. 13. HTML5 Do not use HTML5 ...If it's not the right choice © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 13
  14. 14. RIGHT TOOLS ... at the right moment © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 IMAGE : THECHALKFACE.NET 14
  15. 15. BRITISH K-CLASS SUBMARINE © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 IMAGE : SUBMERGED.CO.UK 15
  16. 16. HTML5 VS NATIVE vs Native iOS or Android © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 16
  17. 17. HTML5 OR NATIVE or Native iOS or Android © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 17
  18. 18. HOW TO MAKE THE RIGHT CHOICE? Full capability Native Hybrid Advanced UI interactions Fastest performances App store distribution Web developer skills Access to native platform App store distribution Single platform Multiple platforms Web developer skills Instant updates Unrestricted distribution HTML5 Partial capability © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 18
  19. 19. HOW TO MAKE THE RIGHT CHOICE? Native × Rich user experience × Platform specific × Proven path for mobile apps © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 Hybrid × App-like experience × Multiple platforms × Leverages device capabilities HTML5 × Fast development cycles × Cross-platform × Instant updates 19
  20. 20. HOW TO MAKE THE RIGHT CHOICE? © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 IMAGE : NAGARRO.COM 20
  21. 21. BEING SUPPORTED BY THE RIGHT PEOPLE ...at the right moment © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 21
  22. 22. RECAP © SQLI AGENCY / 2013-09 22
  23. 23. RECAP × Right tools at the right moment. × Evaluating with open-mind approach. × Right people involved at the right time. © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 23
  24. 24. SOME RESOURCES esources com/en/r l5rocks. htm © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 24
  25. 25. GRAZIE MILLE © SQLI AGENCY / 2013-09 linkedin.com/in/aldoferrari @aldo_ferrari 25
  26. 26. QUESTION? ANSWERS! © SQLI AGENCY / 2013-09 26
  27. 27. NEXT! © SQLI AGENCY / 2013-09 27
  28. 28. ANDY MCFEE Developer UX & Front-End © SQLI AGENCY / 2013-09 @andymcfee 28
  29. 29. MOBILEany subtitle FIRST It doesn't need © SQLI AGENCY / 2013-09 29
  30. 30. HI, I’M ANDY. ! I’M A UX DEVELOPER © SQLI AGENCY / 2013-09 30
  31. 31. WHAT IS MOBILE FIRST? © SQLI AGENCY / 2013-09 31
  32. 32. WHAT IS MOBILE FIRST? MOBILE FIRST is a strategy for designing and building web experiences for mobile users first © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 32
  33. 33. WHAT IS MOBILE FIRST? Mobile First is often incorrectly associated with the ‘Native vs HTML5’ debate © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 33
  34. 34. WHY MOBILE FIRST? © SQLI AGENCY / 2013-09 34
  35. 35. WHY MOBILE FIRST? Because MOBILE is EVERYWHERE © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 35
  36. 36. WHY MOBILE FIRST? 880 million Android + iOS devices one year ago Android hit 1 billion in July 2013 Apple - 600 million now - 1 billion in 2014 http://bit.ly/tds-billion © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 36
  37. 37. WHY MOBILE FIRST? 87% of the world’s population has access to a mobile device. http://bit.ly/tds-world © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 37
  38. 38. BUSINESS STRATEGY © SQLI AGENCY / 2013-09 38
  39. 39. STRATEGY So what does mobile first mean for a business? © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 39
  40. 40. STRATEGY Mobile First helps to define and refine your business goals © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 40
  41. 41. STRATEGY LOOK AT ALL OF THIS SPACE I HAVE! Things you should focus on: Let me tell you a bit about FOCUS! A user will decide to • Immediate user actions leave or stay on your website • Important data and figures after only 5 seconds. I don’t • Simple and effective UI have stats for that figure, but Things you should NOT focus on: now that I think about it, it may be just 2 seconds. I will • Adding content that distracts and try looking it up later, but my deters the user from their primary point is that you have to grab action or goal their attention right away or • Superfluous and redundant content else you lose a customer. • Redundant content © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 The number one thing you should take away from this is to not make the user think. The user is not stupid (usually) but it is safe to assume that they are lazy. 41
  42. 42. STRATEGY Focus your Content ! Don’t make the user THINK © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 42
  43. 43. STRATEGY Make mobile a priority in order to capitalize on the growth and capabilities of the medium. — Brad Frost © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 43
  44. 44. STRATEGY Instagram Only on mobile devices (first) Explosive growth Capitalizes on the capabilities of the medium - Camera & GPS Laser focused on the medium © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 44
  45. 45. HALFWAY HONEY BADGER To mark the middle of my talk © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 45
  46. 46. DESIGN © SQLI AGENCY / 2013-09 46
  47. 47. DESIGN Mobile Last - degraded, shoe-horned, short sighted, crappy © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 47
  48. 48. DESIGN Mobile First - progressively enhanced, future-friendly, awesome © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 48
  49. 49. DESIGN Constraints © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 49
  50. 50. DESIGN Constraints © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 50
  51. 51. DESIGN Mobile First? Content First © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 51
  52. 52. DESIGN © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 52
  53. 53. DESIGN © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 53
  54. 54. DESIGN © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 54
  55. 55. DESIGN Next time you find yourself intentionally depriving someone an experience— ! to acquire knowledge, to complete a task, to do something online that can make their life even just a little better ! —picture yourself standing in front of that person in real life, looking them square in the eyes, then firmly and definitively saying “Fuck you.” — Brad Frost http://bit.ly/tds-bradfrost © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 55
  56. 56. DESIGN Everything is accessible for every user © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 56
  57. 57. DESIGN If you find yourself saying “Let’s hide/show this content only for mobile users” then just get rid of that content for all your users ಠ_ಠ © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 57
  58. 58. DEVELOPMENT © SQLI AGENCY / 2013-09 58
  59. 59. DEVELOPMENT Progressive Enhancement The art of crafting web experiences from the content outward. © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 59
  60. 60. DEVELOPMENT Content - HTML Presentation - CSS Functionality - JS Cutting Edge Stuff - CSS3, HTML5, Crazy JS © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 60
  61. 61. DEVELOPMENT Progressive Enhancement An escalator can never break: it can only become stairs. You should never see an ‘Escalator Temporarily Out Of Order’ sign, just ‘Escalator Temporarily Stairs. Sorry for the convenience.’ — Mitch Hedberg © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 61
  62. 62. DEVELOPMENT Pure HTML works on any web-enabled device by default. ! It’s not until we start adding styles and functionality that things begin to break. © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 62
  63. 63. TO SUM IT ALL UP © SQLI AGENCY / 2013-09 63
  64. 64. CONCLUSION × Mobile is huge and only getting bigger. × Embrace constraints, focus your content. × Build escalators not elevators. × Mobile Users are not second class citizens. © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 64
  65. 65. THX GUYS © SQLI AGENCY / 2013-09 andymcfee.com @andymcfee → Twitter → GitHub → CodePen 65
  66. 66. QUESTION? ANSWERS! © SQLI AGENCY / 2013-09 66
  67. 67. NEXT EVENT © SQLI AGENCY / 2013-09 67
  68. 68. BENOÎT HENRY & Strategist UX Project Manager © SQLI AGENCY / 2013-09 @benoithenry 68
  69. 69. KEYWORDS Customer Audience Tool Marketing Late November → © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 69
  70. 70. LET'S GET CONNECTED! sqliagency.ch @sqliagency_ch @sqliagency_ch /sqliagencych #TxDxS © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 70
  71. 71. Now, let's drink & share! THANK YOU! © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 SQLIAGENCY.CH

×