David Leininger - Capturing Your Audience with Mobility

Ebwje!Mfjnjnhfs

davidbleininger@gmail.com

Uijt!jt!nf!cfjnh!tpdjbm davidleininger

dleininger

David Leininger

heyyou

dleinin

where I freelancewith a some other

web nerds

Wibu!J!ep

where I workwith a some othercomputer nerds

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

B!rvjdl!hmbndf!bu!uif!qbtuI’m not talking about flip phones...

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

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!DpnnfdufeBmxbzt!xjui!vt

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...

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

• Being on Google Places

• Dropp (currently iPhone only)

• Interactive Media

• QR Codes

• Microsoft Tags

(This will be covered more in the Advanced Class)

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:

• 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

Tipx!bne!Ufmm

http://vimeo.com/21228618

Tipx!bne!Ufmm

http://fivable.com

Tipx!bne!Ufmm

http://likify.net

Tipx!bne!Ufmm

Jimmy Fallon Messed Upmirrored 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@

• 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...

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

Rvftujpnt@

Ebwje!Mfjnjnhfs

davidbleininger@gmail.com

Uijt!jt!nf!cfjnh!tpdjbm davidleininger

dleininger

David Leininger

heyyou

dleinin

where I freelancewith a some other

web nerds

Wibu!J!ep

where I workwith a some othercomputer nerds

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

ZPV!EP!OPU!nffe!b!tfqbsbuf!Npcjmf!xfctjuf

I don’t care what anyone tells you...

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...

• HTML5 Boilerplate

• HTML5 Demos

IUNM6!Sftpvsdft

DTT4!Sftpvsdft

• CSS3 generators (that I use)• CSS3 Button

• CSS3 Please

• Border Radius

• 47 Stellar CSS3 Demos

• A List Apart• A Book Apart: Responsive Web Design

• jQuery Mobile

• Less Framework (Adaptive Web – Good)

• HTML5 Boilerplate (Responsive Web – Better)

Npcjmf!Wfc!Sftpvsdft

Nfejbrvfsj/ft

http://mediaqueri.es

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)

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:

• 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">

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’);});

Efnpt"&

Rvftujpnt@