Downloaded 25 times
Uploaded byWax Interactive
Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach
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.
More Related Content
Similar to Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach
Sqli Agency Suisse - Talk x Design x Share - Episode 1 - HTML5 and Mobile First Approach
- 1. presents ! TALK DRINK SHARE an event aboutmobile 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 MathieuCollet 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îtHenry 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! © SQLIAGENCY / 2013-09 9
- 10. ALDO FERRARI Head of Development ©SQLI AGENCY / 2013-09 @aldo_ferrari 10
- 11. HTML5 THE RIGHTless time WAY Loseless 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 useHTML5 ...If it's not the right choice © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 13
- 14. RIGHT TOOLS ... atthe 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 iOSor Android © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 16
- 17. HTML5 OR NATIVE or Native iOSor Android © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 17
- 18. HOW TO MAKETHE 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 MAKETHE 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 MAKETHE RIGHT CHOICE? © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 IMAGE : NAGARRO.COM 20
- 21. BEING SUPPORTED BYTHE 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 toolsat 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 © SQLIAGENCY - 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'tneed © SQLI AGENCY / 2013-09 29
- 30. HI, I’M ANDY. ! I’MA UX DEVELOPER © SQLI AGENCY / 2013-09 30
- 31. WHAT IS MOBILE FIRST? ©SQLI AGENCY / 2013-09 31
- 32. WHAT IS MOBILEFIRST? 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 MOBILEFIRST? 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? © SQLIAGENCY / 2013-09 34
- 35. WHY MOBILE FIRST? Because MOBILE is EVERYWHERE ©SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 35
- 36. WHY MOBILE FIRST? 880million 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 mobilefirst mean for a business? © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 39
- 40. STRATEGY Mobile First helpsto define and refine your business goals © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 40
- 41. STRATEGY LOOK AT ALLOF 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 makethe user THINK © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 42
- 43. STRATEGY Make mobile apriority 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 mobiledevices (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 Tomark 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 youfind 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 accessiblefor every user © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 56
- 57. DESIGN If you findyourself 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 artof 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 escalatorcan 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 workson 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 ishuge 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 UXProject Manager © SQLI AGENCY / 2013-09 @benoithenry 68
- 69. KEYWORDS Customer Audience Tool Marketing LateNovember → © 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! THANKYOU! © SQLI AGENCY - TALK × DRINK × SHARE / 2013-09-25 SQLIAGENCY.CH