Download to read offline
Uploaded bySocialCrush
David Leininger - Capturing Your Audience with Mobility
The document provides information about creating mobile-friendly websites and web applications. It discusses topics like mobile-first design, responsive design, HTML5 and CSS3 resources, creating location-based services using QR codes and Microsoft tags, and how to make web applications that work like native mobile apps. The document contains numerous links to additional online resources and examples.
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
David Leininger - Capturing Your Audience with Mobility
- 2. Ebwje!Mfjnjnhfs davidbleininger@gmail.com Uijt!jt!nf!cfjnh!tpdjbm davidleininger dleininger David Leininger heyyou dleinin
- 3. Wibu!J!ep whereI work where I freelance with a some other with a some other computer nerds web nerds
- 4. 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
- 5. B!rvjdl!hmbndf!bu!uif!qbtu I’m not talkingabout flip phones...
- 7. Ju!bmm!tubsufe!xjui!Wbmljnh • The SilkRoad • 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
- 8.
- 9. 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
- 11. 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...
- 13.
- 14. This is whyyou should go mobile... 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
- 15. Uif!Ofx!Cspxtfs!xbs Mobile Safaristill holds around 50% of the mobile web browser share
- 16. xibu!epft!uibu!Nfbn!gps!Cvtjnftt@ • People aren’tlooking 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
- 17. Mpdbujpn-!Mpdbujpn-!Mpdbujpn • The bigthree of location based services • Allow’s users to check in, receive specials, earn “badges”, and share socially
- 18. 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
- 19. Tp!xibu!jt!b!RS!Dpef • QR Codeis 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
- 20. Uif!Bnbupnz!pg!b!RS!Dpef Myfavorite place to make QR Codes
- 21. Wibu!uif!Ifdl!jt!b!Njdsptpgu!ubh@ • Microsoft’s versionof 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
- 22.
- 23. 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
- 24.
- 25.
- 26.
- 27. Tipx!bne!Ufmm Jimmy Fallon MessedUp mirrored to be on youtube...
- 28. 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
- 29. 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)
- 30. 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?
- 31. 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?
- 32.
- 35. Ebwje!Mfjnjnhfs davidbleininger@gmail.com Uijt!jt!nf!cfjnh!tpdjbm davidleininger dleininger David Leininger heyyou dleinin
- 36. Wibu!J!ep whereI work where I freelance with a some other with a some other computer nerds web nerds
- 37. 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
- 38. I don’t carewhat anyone tells you... ZPV!EP!OPU!nffe!b!tfqbsbuf! Npcjmf!xfctjuf
- 39. Wibu!epft!Npcjmf!Gjstu!Fwfn!Nfbn@ Mobile first meansdesigning 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...
- 40. IUNM6!Sftpvsdft • HTML5 Boilerplate •HTML5 Demos
- 41. DTT4!Sftpvsdft • CSS3 generators(that I use) • CSS3 Button • CSS3 Please • Border Radius • 47 Stellar CSS3 Demos
- 42. Npcjmf!Wfc!Sftpvsdft • A List Apart • A Book Apart: Responsive Web Design • jQuery Mobile • Less Framework (Adaptive Web – Good) • HTML5 Boilerplate (Responsive Web – Better)
- 43.
- 44. 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
- 45. 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
- 46. 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">
- 47. 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’); });
- 48. Efnpt" & Rvftujpnt@