Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Go Native(-ish)! (PrairieDevCon 2014)

timgthomas
April 07, 2014
Design
0
200

Go Native(-ish)! (PrairieDevCon 2014)

We've all heard the arguments of “Web vs. Native vs. Hybrid” mobile apps, but there's simply not enough time to learn it all. What if you're already an experienced Web developer, and you want to reuse as many of your skills as possible, yet still end up with a native-looking app? Fear not, for mobile devices can be a Web developer's best friend. In this presentation, you'll see how easy it is to make your Web app look—and behave—like its native cousins. We'll discuss UX principles, development techniques, interactions and behaviors, and testing and debugging...and help your Web app go native(-ish)!

timgthomas

April 07, 2014
Tweet

More Decks by timgthomas

See All by timgthomas
Living Style Guides: Bringing Designers and Developers Together
timgthomas
0
130
Icons and the Web: Symbols of the Modern Age
timgthomas
0
120
Constructing Modern UIs with SVG
timgthomas
0
130
Browser Invasion: Desktop Apps and the Web
timgthomas
0
110
Mind the Gap: Bringing Designers and Developers Together
timgthomas
0
76
Zero to App Store: A Hybrid App’s Tale
timgthomas
1
100
Chocolate-Covered Vegetables: Tasty Workflows with Broccoli
timgthomas
0
91
Ember ATX: Ember.Evented
timgthomas
0
100
Ember ATX: Components
timgthomas
0
74

Other Decks in Design

See All in Design
Credence
lratmansunu
0
380
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
300
202409_会社概要資料_Englishver.pdf
zakkerooni
0
200
Commune_Brand_Guideline_JA
commune
1
150
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
150
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
110
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
130
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.7k
Kim Possible - Crush
olgastoryboard
0
130
【Designship 2024｜10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
490
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
500
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
160

Featured

See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
160
KATA
mclloyd
29
13k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Side Projects
sachag
452
42k
Statistics for Hackers
jakevdp
796
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Designing Experiences People Love
moore
138
23k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
6.9k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Scaling GitHub
holman
458
140k
Building Applications with DynamoDB
mza
90
6.1k

Transcript

  1. Go Native(-ish)! ! Tim G. Thomas

  2. Go Native(-ish)! PrairieDevCon 2014 Photo Source: Wikipedia User Magnus Manske

  3. Tim G. Thomas frog [email protected] @timgthomas

  4. #nativeish

  5. Today Web apps

  6. Today Web apps Mobile devices

  7. Your Options Native ! Hybrid ! Web

  8. Your Options Native ! Hybrid Native(-ish) Web

  9. Why to Go Native-ish Build with web tools No approval

    process Rapid deployment

  10. However... Limited discoverability Some missing hardware APIs High standards for

    comparison

  11. Agenda Design Development Debugging

  12. Design

  13. None

  14. Experience Design

  15. Experience Design Navigation Bars !

  16. Experience Design Navigation Bars “Stacks”

  17. Experience Design Navigation Bars “Stacks” Long-Presses

  18. Experience Design bit.ly/prdc-apple bit.ly/prdc-android

  19. Visual Design

  20. Visual Design Skeuomorphism !

  21. Visual Design Skeuomorphism Bold, bright colors

  22. Visual Design Skeuomorphism Bold, bright colors Translucency

  23. Demo Off-the-Shelf Options

  24. Development

  25. Development Pin Apps Simulate Behavior Tweak UI Go Offline

  26. Step 1 Pin Apps

  27. App Pinning Mobile Safari Google Chrome

  28. To-Do: Pin Apps Remove browser frame Prevent resizing and scrolling

    Prevent links from opening a new window

  29. Remove Browser Frame <head> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    </head>

  30. Remove Browser Frame <head> <meta name="mobile-web-app-capable" content="yes"> </head>

  31. Prevent Resizing <head> <meta name="viewport" content=" width=device-width, initial-scale=1, user-scalable=no ">

    </head>

  32. Prevent Scrolling <script> $(document).on('touchmove', function() { return false; }); </script>

  33. Demo Step 1: App Pinning

  34. Step 2 Simulate Behavior

  35. To-Do: Simulate Behavior Use custom keyboards Support additional user inputs

  36. Custom Keyboards <input type="[keyboard]">

  37. Custom Keyboards Text ! !

  38. Custom Keyboards Text Email !

  39. Custom Keyboards Text Email Date

  40. Custom Keyboards Text Email Date Numeric Range

  41. Additional Inputs File !

  42. Additional Inputs File Location

  43. Additional Inputs File Location

  44. Additional Inputs: Location navigator .geolocation .getCurrentPosition(function(position) { ! // position.coords.latitude;

    ! // position.coords.longitude; ! });

  45. Additional Inputs: Acceleration bit.ly/prdc-accel

  46. Tweak UI Step 3

  47. To-Do: Tweak UI Add home screen icon Use device fonts

  48. Home Screen Icons 196x196 ! 152x152

  49. Home Screen Icons ! <link rel="apple-touch-icon" href="icon.png"> ! <link rel="icon"

    href="icon.png"> ! <link rel="apple-touch-icon" sizes="152x152" href="icon.png">

  50. Device Fonts -apple-system-headline ! -apple-system-subheadline ! -apple-system-body ! ! -apple-system-font

  51. Demo Step 3: Tweak UI

  52. Go Offline Step 4

  53. To-Do: Go Offline Cache infrequently-changing files Store data locally

  54. Application Cache (AppCache)

  55. AppCache CACHE MANIFEST ! LOCAL: /apple-touch-icon.png ! NETWORK: * !

    FALLBACK: /login /offline.html

  56. AppCache <html manifest="app.appcache"> ! <!-- `text/cache-manifest` --> ! </html>

  57. AppCache http://bit.ly/prdc-appcache

  58. Local Storage localStorage['tea'] = '{ "type":"Earl Grey" }'; ! console.log(localStorage['tea']);

    ! //> { "type":"Earl Grey" } ! console.log(JSON.parse(localStorage['tea']); ! //> Object { type: 'Earl Grey' }

  59. The Story So Far

  60. Demo Debugging

  61. Thanks! @timgthomas tiny.cc/prdc14 Photo source: Wikipedia user Hequals2henry