Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Blur The Lines - Native Feeling Web Apps
Search
Rob Tarr
February 25, 2014
Technology
0
86
Blur The Lines - Native Feeling Web Apps
Some tips for writing web apps that feel like part of the native ecosystem
Rob Tarr
February 25, 2014
Tweet
Share
More Decks by Rob Tarr
See All by Rob Tarr
Frontend_Testing.pdf
robtarr
0
100
Blur the Lines: Write Web Apps That Feel Native
robtarr
1
100
Blur the Lines: How to write web apps that look native.
robtarr
0
84
Responsive JavaScript
robtarr
4
950
Development Tools and Responsive JavaScript
robtarr
1
160
JavaScript App Development
robtarr
3
390
Other Decks in Technology
See All in Technology
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
120
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
460
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
170
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
130
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.2k
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Agile that works and the tools we love
rasmusluckow
329
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Rails Girls Zürich Keynote
gr2m
95
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Facilitating Awesome Meetings
lara
54
6.4k
Side Projects
sachag
455
42k
Transcript
Rob Tarr Blur the Lines: Write Web Apps That Feel
Native
Blur the Lines: Write web apps that look native What
are we talking about?
Building Native Web Apps
Blur the Lines: Write web apps that look native Who’s
Your Audience?
Who’s Your Audience?
There are some advantages to a native app
A few native app cons ‣ Limited to certain devices
- iOS vs. Android ‣ Approval processes ‣ Delay in pushing out updates ‣ Some users don’t upgrade ‣ iOS no Nitro JavaScript engine
A few web app cons ‣ Limited access to APIs
‣ Publicity ‣ Harder to monetize
Building Native Web Apps
Building Native Web Apps http://bit.ly/1oDzPLW How to create a web
app that looks like a iOS7 native app
Building Native Web Apps ‣ Style ‣ Behavior ‣ Compatibility
http://bit.ly/1oDzPLW
Blur the Lines: Write web apps that look native Typography
iOS7 & Apple System Fonts
iOS7 & Apple System Fonts -apple-system-body -apple-system-caption1 -apple-system-caption2 -apple-system-footnote -apple-system-headline
-apple-system-short-body -apple-system-short-caption1 -apple-system-short-footnote -apple-system-short-headline -apple-system-short-subheadline bit.ly/1oDSoiS font: {
iOS7 & Apple System Fonts <div style="font:-apple-system-headline"> <div style="font-size:2em">This is
the headline…</div> </div>
Safari Chrome
Safari Chrome <meta name="apple-mobile-web-app- capable" content="yes">
Safari Chrome <meta name="apple-mobile-web-app-status- bar-style" content=“black-translucent">
Safari Web Content Guide Configuring Web Applications bit.ly/1cMoCDB
Blur the Lines: Write web apps that look native Images
Home Screen Icons
Home Screen Icons <link rel="apple-touch-icon" href="icon.png"> <link rel="apple-touch-icon" sizes="144x144" href="/icon-144x144.png">
! <meta name="msapplication-TileColor" content="#73c5d3"> <meta name="msapplication-TileImage" content="icon.png"> bit.ly/1hnz18G
SVGs ‣ Inline ‣ Backgrounds ‣ Data URIs ‣ Animations
SVG Animations
Blur the Lines: Write web apps that look native Animations
Animations
Navigation Animations www.thepetedesign.com/demos/jquery_wheelmenu_demo.html
Navigation Animations www.thepetedesign.com/demos/jquery_wheelmenu_demo.html
Animations easings.net
Navigation Animations www.snowbird.com
Animations forecast.io
Animations forecast.io
Matching ‣ http://jeremyckahn.github.io/stylie/ ‣ http://matthewlein.com/ceaser/ ‣ http://easings.net/
Blur the Lines: Write web apps that look native Behavior
fastclick ...mobile browsers will wait approximately 300ms from the time
that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap. ! https://github.com/ftlabs/fastclick
fastclick playthreeve.com
fastclick
fastclick
fastclick
fastclick
dragging
dragging http://eightmedia.github.io/hammer.js/
Linking to Native Apps href=“tel:19374010915” href=“facetime:19374010915” ! href=“http://maps.apple.com? q=123+Webster+St.,+Dayton,+OH +45402”
http://bit.ly/1j2MswD
keyboards http://bit.ly/1fJluWA
Blur the Lines: Write web apps that look native Performance
Performance bit.ly/1mu9bTz Simple explanation: ! The Nitro Javascript engine compiles
your code into native ARM code
Performance bit.ly/1mu9bTz Apps saved to the iOS home screen don’t
get the benefits of the Nitro JavaScript engine. BUSTED
Performance Application Cache bit.ly/1bHGKAh bit.ly/1hs9ifb Service Workers mzl.la/1fkPWWa bit.ly/1edzjjz
Performance Write really good code.
Blur the Lines: Write web apps that look native New
APIs
Geolocation JavaScript APIs
Battery JavaScript APIs http://www.smartjava.org/examples/webapi-battery/
Camera JavaScript APIs <input type=“file”> bit.ly/1o3Lu3w
JavaScript APIs shinydemos.com/warholiser/
Accelerometer JavaScript APIs isthisanearthquake.com
JavaScript APIs https://developers.inkfilepicker.com/docs/web/
In-App Purchases http://bit.ly/1fEcJgA
In-App Purchases http://bit.ly/1fEcJgA
In-App Purchases http://bit.ly/1fEcJgA
Building Native Web Apps
THANKS! @robtarr
[email protected]