More Related Content
Similar to Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach
Similar to Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach (20)
More from Wax Interactive
More from Wax Interactive (20)
Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach
- 5. WHAT WE DO
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25
5
- 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. 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
- 13. HTML5
Do not use HTML5
...If it's not the right choice
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25
13
- 14. RIGHT TOOLS
... at the right moment
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25
IMAGE : THECHALKFACE.NET 14
- 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. 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. HOW TO MAKE THE RIGHT CHOICE?
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25
IMAGE : NAGARRO.COM 20
- 21. BEING SUPPORTED BY THE RIGHT PEOPLE
...at the right moment
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25
21
- 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
- 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. 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
- 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. 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
- 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
- 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. 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
- 47. DESIGN
Mobile Last - degraded, shoe-horned, short sighted, crappy
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25
47
- 48. DESIGN
Mobile First - progressively enhanced, future-friendly, awesome
© SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25
48
- 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
- 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
- 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. 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
- 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