Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach
•
3 likes•3,070 views
This document summarizes a mobile first design event hosted by SQLI Agency. The event featured talks from Aldo Ferrari and Andy McFee on mobile first design and front-end development. It provided information on SQLI Agency's locations in Lausanne and Geneva, an introduction to the speakers, and recaps of the topics discussed which included evaluating the right tools for a job, mobile first strategies, design constraints, and progressive enhancement in development. The event concluded with networking over drinks and sharing.
Recommended
More Related Content
What's hot
What's hot (15)
Viewers also liked
Viewers also liked (20)
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)
Recently uploaded
Recently uploaded (20)
Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach
- 1. presents ! TALK DRINK SHARE an event about mobile first design and modern front-end development by Aldo Ferrari & Andy McFee
- 2. WELCOME TALK DRINK SHARE © SQLI AGENCY / 2013-09 2
- 3. SQLI AGENCY © SQLI AGENCY / 2013-09 3
- 4. WHERE WE ARE LAUSANNE © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 GENEVA 4
- 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
- 8. LET'S GET CONNECTED! sqliagency.ch @sqliagency_ch @sqliagency_ch /sqliagencych #TxDxS © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 8
- 9. LET'S GO! © SQLI AGENCY / 2013-09 9
- 10. ALDO FERRARI Head of Development © SQLI AGENCY / 2013-09 @aldo_ferrari 10
- 11. HTML5 THE RIGHTless time WAY Lose less money and © SQLI AGENCY / 2013-09 11
- 12. HTML5 © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 IMAGE : ALTFIRE.IE 12
- 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
- 15. BRITISH K-CLASS SUBMARINE © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 IMAGE : SUBMERGED.CO.UK 15
- 16. HTML5 VS NATIVE vs Native iOS or Android © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 16
- 17. HTML5 OR NATIVE or Native iOS or Android © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 17
- 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
- 22. RECAP © SQLI AGENCY / 2013-09 22
- 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. SOME RESOURCES esources com/en/r l5rocks. htm © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 24
- 25. GRAZIE MILLE © SQLI AGENCY / 2013-09 linkedin.com/in/aldoferrari @aldo_ferrari 25
- 26. QUESTION? ANSWERS! © SQLI AGENCY / 2013-09 26
- 27. NEXT! © SQLI AGENCY / 2013-09 27
- 28. ANDY MCFEE Developer UX & Front-End © SQLI AGENCY / 2013-09 @andymcfee 28
- 29. MOBILEany subtitle FIRST It doesn't need © SQLI AGENCY / 2013-09 29
- 30. HI, I’M ANDY. ! I’M A UX DEVELOPER © SQLI AGENCY / 2013-09 30
- 31. WHAT IS MOBILE FIRST? © SQLI AGENCY / 2013-09 31
- 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
- 34. WHY MOBILE FIRST? © SQLI AGENCY / 2013-09 34
- 35. WHY MOBILE FIRST? Because MOBILE is EVERYWHERE © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 35
- 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
- 38. BUSINESS STRATEGY © SQLI AGENCY / 2013-09 38
- 39. STRATEGY So what does mobile first mean for a business? © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 39
- 40. STRATEGY Mobile First helps to define and refine your business goals © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 40
- 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. STRATEGY Focus your Content ! Don’t make the user THINK © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 42
- 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
- 45. HALFWAY HONEY BADGER To mark the middle of my talk © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 45
- 46. DESIGN © SQLI AGENCY / 2013-09 46
- 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
- 49. DESIGN Constraints © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 49
- 50. DESIGN Constraints © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 50
- 51. DESIGN Mobile First? Content First © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 51
- 52. DESIGN © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 52
- 53. DESIGN © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 53
- 54. DESIGN © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 54
- 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. DESIGN Everything is accessible for every user © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 56
- 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. DEVELOPMENT © SQLI AGENCY / 2013-09 58
- 59. DEVELOPMENT Progressive Enhancement The art of crafting web experiences from the content outward. © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 59
- 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. 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
- 63. TO SUM IT ALL UP © SQLI AGENCY / 2013-09 63
- 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. THX GUYS © SQLI AGENCY / 2013-09 andymcfee.com @andymcfee → Twitter → GitHub → CodePen 65
- 66. QUESTION? ANSWERS! © SQLI AGENCY / 2013-09 66
- 67. NEXT EVENT © SQLI AGENCY / 2013-09 67
- 68. BENOÎT HENRY & Strategist UX Project Manager © SQLI AGENCY / 2013-09 @benoithenry 68
- 69. KEYWORDS Customer Audience Tool Marketing Late November → © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 69
- 70. LET'S GET CONNECTED! sqliagency.ch @sqliagency_ch @sqliagency_ch /sqliagencych #TxDxS © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 70
- 71. Now, let's drink & share! THANK YOU! © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 SQLIAGENCY.CH