David Leininger - Capturing Your Audience with Mobility

592 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
592
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

David Leininger - Capturing Your Audience with Mobility

  1. 1. Ebwje!Mfjnjnhfs davidbleininger@gmail.comUijt!jt!nf!cfjnh!tpdjbm davidleininger dleininger David Leininger heyyou dleinin
  2. 2. Wibu!J!ep where I work where I freelancewith a some other with a some other computer nerds web nerds
  3. 3. Wibu!zpv!xjmm!mfbsn Uif!Cbtjdt Uif!Bewbndfe!Dmbtt• Why you should • Mobile first go mobile! • HTML5, CSS3• Location based services • Tons of examples and Where• QR Codes and MS Tags you can find resources - What are they? • How to make a mobile app - Do’s and Don’ts without going through the• Mobile Videos Appstore• Native Vs. Web app • Easy Native Apps• What’s Next • What’s next
  4. 4. B!rvjdl!hmbndf!bu!uif!qbtuI’m not talking about flip phones...
  5. 5. Ju!bmm!tubsufe!xjui!Wbmljnh• The Silk Road • Next came boats on a boat? I’m • Marco Polo traveledover • Travel time went from years to 1000km on the Silk Road routes months. between 1260–1269 and 1271–1295 • Railroad• Walking this far was definitely not • Months to weeks for everyone *As transportation got faster so did the transfer of information and ideas
  6. 6. take that gravity...
  7. 7. Pn!Tnbq"!Wf!Cfbu!Hsbwjuz"• Thanks to the Wright Brothers, we were able to take to the sky• Long distance travel was now possible within one day instead of weeks• This was the fastest way to transfer people and ideas
  8. 8. zfbs!cfdpnf!njnvuft• Enter the phone and eventually the Internet as the fastest way to spread and receive information.• E-mail and Google have turned into the new version of the Silk Road But wait there’s more...
  9. 9. Bmxbzt!pnBmxbzt!Dpnnfdufe Bmxbzt!xjui!vt
  10. 10. This is why you should go mobile... Svn!gps!uif!Ijmmt!uif!gvuvsf!jt!dpnjnh“By 2015, more U.S. Internet users will access the Internet throughmobile devices than through PCs or other wireline devices.” -Business Wire
  11. 11. Uif!Ofx!Cspxtfs!xbs Mobile Safari still holds around 50% of the mobile web browser share
  12. 12. xibu!epft!uibu!Nfbn!gps!Cvtjnftt@• People aren’t looking at your website on a computer any more• People are using location based services to find things • Train your team if you offer specials for checking in to a location• People are posting reviews both positive and negative faster than ever• There are so many new ways to interact with your customers
  13. 13. Mpdbujpn-!Mpdbujpn-!Mpdbujpn• The big three of location based services• Allow’s users to check in, receive specials, earn “badges”, and share socially
  14. 14. Npsf!uibn!pnf!xbz!up!ep!mpdbujpn• HTML5 (This will be covered more in the Advanced Class)• Being on Google Places• Dropp (currently iPhone only)• Interactive Media • QR Codes • Microsoft Tags
  15. 15. Tp!xibu!jt!b!RS!Dpef• QR Code is short for Quick Response Code• The Pros: • Highly customizable tags • More familiar to users • Much easier to create • Highly trackable• The Cons: • Can be difficult to change what the content links to
  16. 16. Uif!Bnbupnz!pg!b!RS!Dpef My favorite place to make QR Codes
  17. 17. Wibu!uif!Ifdl!jt!b!Njdsptpgu!ubh@• Microsoft’s version of a QR code.• The Pros: • Sometimes they scan a little better • Much easier to change the what the code links to • Highly trackable• The Cons: • Can only be made and scanned with Microsoft applications • People aren’t as familiar with it
  18. 18. Uif!Bnbupnz!pg!b!RS!Dpef
  19. 19. Uif!Ep’t!bne!Epn’ut• Do: • Don’t: • Customize your code with your brand • Don’t make it redundant (don’t have one on your site or facebook that links • Have a mobile friendly landing page to your site) • Give an incentive to scan your code • Don’t link to a site that is not mobile friendly • Track Results • NO FLASH CONTENT • Don’t push use codes that don’t scan
  20. 20. Tipx!bne!Ufmmhttp://vimeo.com/21228618
  21. 21. Tipx!bne!Ufmm http://fivable.com
  22. 22. Tipx!bne!Ufmm http://likify.net
  23. 23. Tipx!bne!UfmmJimmy Fallon Messed Up mirrored to be on youtube...
  24. 24. Cvu!Npcjmf!epftn’u!Ep!Gmbti• How can you do mobile video without flash • YouTube • Most familiar to users • Handles HTML5 integration • Vimeo/Vimeo Pro • Must have a Vimeo Pro account to display on mobile • Handles HTML5 integration • HTML5 <video> • Gives you the most control
  25. 25. Uifsf’t!bn!bqq!gps!uibu• Native app • Download through the Appstore or Marketplace • Pay fee to be a developer • More features• Web app • Works on all devices regardless of platform (build once) • As free as the internet • Can run as “Native App” • Only works off current web technology (it’s pretty strong)
  26. 26. Tp!xijdi!tipvme!Nz!dpnqbnz!Nblf@ It All depends...• What is your use?• What’s the time frame?• Do you need the features of a native app?• What is your budget?
  27. 27. Wibu’t!Ofyu@ I thought you’d never ask• Augmented Reality • Currently Apps like Yelp and Layer • Face Recognition and Social Profiles • Games are a great use of AR• NFC (Near Field Communication)• RFID (Radio Frequency ID)• No more computers• Teleportation?
  28. 28. Rvftujpnt@
  29. 29. Ebwje!Mfjnjnhfs davidbleininger@gmail.comUijt!jt!nf!cfjnh!tpdjbm davidleininger dleininger David Leininger heyyou dleinin
  30. 30. Wibu!J!ep where I work where I freelancewith a some other with a some other computer nerds web nerds
  31. 31. Wibu!zpv!xjmm!mfbsn Uif!Cbtjdt Uif!Bewbndfe!Dmbtt• Why you should • Mobile first go mobile! • HTML5, CSS3• Location based services • Tons of examples and Where• QR Codes and MS Tags you can find resources - What are they? • How to make a mobile app - Do’s and Don’ts without going through the• Mobile Videos Appstore• Native Vs. Web app • Easy Native Apps• What’s Next • What’s next
  32. 32. I don’t care what anyone tells you...ZPV!EP!OPU!nffe!b!tfqbsbuf! Npcjmf!xfctjuf
  33. 33. Wibu!epft!Npcjmf!Gjstu!Fwfn!Nfbn@Mobile first means designing you site or application so that it workson a mobile phone before working on the full blown app or site.This is especially important when you’re building your website. Start with what you need...
  34. 34. IUNM6!Sftpvsdft• HTML5 Boilerplate• HTML5 Demos
  35. 35. DTT4!Sftpvsdft• CSS3 generators (that I use) • CSS3 Button • CSS3 Please • Border Radius• 47 Stellar CSS3 Demos
  36. 36. Npcjmf!Wfc!Sftpvsdft• A List Apart • A Book Apart: Responsive Web Design• jQuery Mobile• Less Framework (Adaptive Web – Good)• HTML5 Boilerplate (Responsive Web – Better)
  37. 37. Nfejbrvfsj/ft http://mediaqueri.es
  38. 38. xfc!bqqt!Uibu!xpsl!mjlf!nbujwf!bqqt THis is awesome!•$FREE Dollars! (compared to a native app)• These Web Apps can work just like native apps• Lose some phone specific functionality (like GPS)• HTML5 and CSS3 friendly • Can use HTML5 APIs (History API, Geo-Location API, etc...)• Can save to and run from the phone’s home screen
  39. 39. Ipx!up!nblf!uiftf!bxftpnf!Wfc!bqqt• Use the apple-touch-icon.png • Works for Apple and Android • 114px X 114px covers all app icon sizes iPhone 4 and older • Apple will round the corners and add the icon “glare” for you
  40. 40. Ipx!up!nblf!uiftf!bxftpnf!Wfc!bqqt• Meta tags that you need to use • Disable scaling on mobile devices so that your content displays correctly: <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> • Tells the phone to run the app in full screen <meta name="apple-mobile-web-app-capable" content="yes"> • On iPhone adds a status bar at the top to give the Native App feel. Can be grey, black, or transparent (I don’t recommend transparent, because it will throw off styles). <meta name="apple-mobile-web-app-status-bar-style" content="black">
  41. 41. Ipx!up!nblf!uijt!Fwfn!npsf!Bxftpnf"• jQuery Plugin “Stay In Web App” • This plugin only runs when the Web App is running in full screen mode • This jQuery plugin will stop links from leaving full screen mode on iOS devices. $(function() { $.stayInWebApp(); }); • This will call the function based on links with the classic “stay” $(function() { $.stayInWebApp(‘a.stay’); });
  42. 42. Efnpt" &Rvftujpnt@

×