• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
David Leininger - Capturing Your Audience with Mobility
 

David Leininger - Capturing Your Audience with Mobility

on

  • 477 views

 

Statistics

Views

Total Views
477
Views on SlideShare
477
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    David Leininger - Capturing Your Audience with Mobility David Leininger - Capturing Your Audience with Mobility Presentation Transcript

    • Ebwje!Mfjnjnhfs davidbleininger@gmail.comUijt!jt!nf!cfjnh!tpdjbm davidleininger dleininger David Leininger heyyou dleinin
    • Wibu!J!ep where I work where I freelancewith a some other with a some other computer nerds web nerds
    • 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
    • B!rvjdl!hmbndf!bu!uif!qbtuI’m not talking about flip phones...
    • 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
    • take that gravity...
    • 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
    • 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...
    • Bmxbzt!pnBmxbzt!Dpnnfdufe Bmxbzt!xjui!vt
    • 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
    • Uif!Ofx!Cspxtfs!xbs Mobile Safari still holds around 50% of the mobile web browser share
    • 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
    • Mpdbujpn-!Mpdbujpn-!Mpdbujpn• The big three of location based services• Allow’s users to check in, receive specials, earn “badges”, and share socially
    • 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
    • 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
    • Uif!Bnbupnz!pg!b!RS!Dpef My favorite place to make QR Codes
    • 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
    • Uif!Bnbupnz!pg!b!RS!Dpef
    • 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
    • Tipx!bne!Ufmmhttp://vimeo.com/21228618
    • Tipx!bne!Ufmm http://fivable.com
    • Tipx!bne!Ufmm http://likify.net
    • Tipx!bne!UfmmJimmy Fallon Messed Up mirrored to be on youtube...
    • 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
    • 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)
    • 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?
    • 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?
    • Rvftujpnt@
    • Ebwje!Mfjnjnhfs davidbleininger@gmail.comUijt!jt!nf!cfjnh!tpdjbm davidleininger dleininger David Leininger heyyou dleinin
    • Wibu!J!ep where I work where I freelancewith a some other with a some other computer nerds web nerds
    • 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
    • I don’t care what anyone tells you...ZPV!EP!OPU!nffe!b!tfqbsbuf! Npcjmf!xfctjuf
    • 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...
    • IUNM6!Sftpvsdft• HTML5 Boilerplate• HTML5 Demos
    • DTT4!Sftpvsdft• CSS3 generators (that I use) • CSS3 Button • CSS3 Please • Border Radius• 47 Stellar CSS3 Demos
    • Npcjmf!Wfc!Sftpvsdft• A List Apart • A Book Apart: Responsive Web Design• jQuery Mobile• Less Framework (Adaptive Web – Good)• HTML5 Boilerplate (Responsive Web – Better)
    • Nfejbrvfsj/ft http://mediaqueri.es
    • 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
    • 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
    • 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">
    • 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’); });
    • Efnpt" &Rvftujpnt@