david leininger - capturing your audience with mobility
TRANSCRIPT
![Page 1: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/1.jpg)
![Page 2: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/2.jpg)
Ebwje!Mfjnjnhfs
Uijt!jt!nf!cfjnh!tpdjbm davidleininger
dleininger
David Leininger
heyyou
dleinin
![Page 3: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/3.jpg)
where I freelancewith a some other
web nerds
Wibu!J!ep
where I workwith a some othercomputer nerds
![Page 4: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/4.jpg)
Wibu!zpv!xjmm!mfbsnUif!Cbtjdt
• Why you should go mobile!• Location based services• QR Codes and MS Tags - What are they? - Do’s and Don’ts• Mobile Videos• Native Vs. Web app• What’s Next
Uif!Bewbndfe!Dmbtt• Mobile first• HTML5, CSS3• Tons of examples and Where you can find resources
• How to make a mobile app without going through the Appstore• Easy Native Apps• What’s next
![Page 5: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/5.jpg)
B!rvjdl!hmbndf!bu!uif!qbtuI’m not talking about flip phones...
![Page 6: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/6.jpg)
![Page 7: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/7.jpg)
Ju!bmm!tubsufe!xjui!Wbmljnh• The Silk Road
• Marco Polo traveled over 1000km on the Silk Road routes between 1260–1269 and 1271–1295
• Walking this far was definitely not for everyone
• Next came boats
• Travel time went from years to months.
• Railroad
• Months to weeks
I’m on a boat?
*As transportation got faster so did the transfer of information and ideas
![Page 8: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/8.jpg)
take that gravity...
![Page 9: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/9.jpg)
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
![Page 10: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/10.jpg)
![Page 11: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/11.jpg)
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...
![Page 12: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/12.jpg)
![Page 13: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/13.jpg)
Bmxbzt!pnBmxbzt!DpnnfdufeBmxbzt!xjui!vt
![Page 14: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/14.jpg)
Svn!gps!uif!Ijmmt!uif!gvuvsf!jt!dpnjnh“By 2015, more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline devices.”
-Business Wire
This is why you should go mobile...
![Page 15: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/15.jpg)
Uif!Ofx!Cspxtfs!xbs
Mobile Safari still holds around 50%of the mobile web browser share
![Page 16: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/16.jpg)
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
![Page 17: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/17.jpg)
Mpdbujpn-!Mpdbujpn-!Mpdbujpn
• The big three of location based services
• Allow’s users to check in, receive specials, earn “badges”, and share socially
![Page 18: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/18.jpg)
Npsf!uibn!pnf!xbz!up!ep!mpdbujpn
• HTML5
• Being on Google Places
• Dropp (currently iPhone only)
• Interactive Media
• QR Codes
• Microsoft Tags
(This will be covered more in the Advanced Class)
![Page 19: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/19.jpg)
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
![Page 20: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/20.jpg)
Uif!Bnbupnz!pg!b!RS!Dpef
My favorite place to make QR Codes
![Page 21: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/21.jpg)
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
![Page 22: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/22.jpg)
Uif!Bnbupnz!pg!b!RS!Dpef
![Page 23: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/23.jpg)
Uif!Ep’t!bne!Epn’ut•Do:
• Customize your code with your brand
• Have a mobile friendly landing page
• Give an incentive to scan your code
• Track Results
•Don’t:
• Don’t make it redundant (don’t have one on your site or facebook that links to your site)
• Don’t link to a site that is not mobile friendly
• NO FLASH CONTENT
• Don’t push use codes that don’t scan
![Page 27: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/27.jpg)
Tipx!bne!Ufmm
Jimmy Fallon Messed Upmirrored to be on youtube...
![Page 28: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/28.jpg)
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
![Page 29: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/29.jpg)
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)
![Page 30: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/30.jpg)
Tp!xijdi!tipvme!Nz!dpnqbnz!Nblf@
• What is your use?
• What’s the time frame?
• Do you need the features of a native app?
• What is your budget?
It All depends...
![Page 31: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/31.jpg)
Wibu’t!Ofyu@• 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?
I thought you’d never ask
![Page 32: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/32.jpg)
Rvftujpnt@
![Page 33: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/33.jpg)
![Page 34: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/34.jpg)
![Page 35: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/35.jpg)
Ebwje!Mfjnjnhfs
Uijt!jt!nf!cfjnh!tpdjbm davidleininger
dleininger
David Leininger
heyyou
dleinin
![Page 36: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/36.jpg)
where I freelancewith a some other
web nerds
Wibu!J!ep
where I workwith a some othercomputer nerds
![Page 37: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/37.jpg)
Wibu!zpv!xjmm!mfbsnUif!Cbtjdt
• Why you should go mobile!• Location based services• QR Codes and MS Tags - What are they? - Do’s and Don’ts• Mobile Videos• Native Vs. Web app• What’s Next
Uif!Bewbndfe!Dmbtt• Mobile first• HTML5, CSS3• Tons of examples and Where you can find resources
• How to make a mobile app without going through the Appstore• Easy Native Apps• What’s next
![Page 38: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/38.jpg)
ZPV!EP!OPU!nffe!b!tfqbsbuf!Npcjmf!xfctjuf
I don’t care what anyone tells you...
![Page 39: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/39.jpg)
Wibu!epft!Npcjmf!Gjstu!Fwfn!Nfbn@Mobile first means designing you site or application so that it works on 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...
![Page 40: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/40.jpg)
• HTML5 Boilerplate
• HTML5 Demos
IUNM6!Sftpvsdft
![Page 41: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/41.jpg)
DTT4!Sftpvsdft
• CSS3 generators (that I use)• CSS3 Button
• CSS3 Please
• Border Radius
• 47 Stellar CSS3 Demos
![Page 42: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/42.jpg)
• A List Apart• A Book Apart: Responsive Web Design
• jQuery Mobile
• Less Framework (Adaptive Web – Good)
• HTML5 Boilerplate (Responsive Web – Better)
Npcjmf!Wfc!Sftpvsdft
![Page 44: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/44.jpg)
xfc!bqqt!Uibu!xpsl!mjlf!nbujwf!bqqt
• $FREE Dollars!
• 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
THis is awesome!
(compared to a native app)
![Page 45: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/45.jpg)
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
![Page 46: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/46.jpg)
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:
• Tells the phone to run the app in full screen
• 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="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
![Page 47: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/47.jpg)
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.
• This will call the function based on links with the classic “stay”
$(function() { $.stayInWebApp();});
$(function() { $.stayInWebApp(‘a.stay’);});
![Page 48: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/48.jpg)
Efnpt"&
Rvftujpnt@
![Page 49: David Leininger - Capturing Your Audience with Mobility](https://reader033.vdocuments.mx/reader033/viewer/2022060109/5558b890d8b42aa52a8b4cc7/html5/thumbnails/49.jpg)