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
83
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
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
370
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
390
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
370
RSNA2024振り返り
nanachi
0
530
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.9k
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
16
6.3k
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
1.4k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
990
Larkご案内資料
customercloud
PRO
0
650
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
510
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
150
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
350
Featured
See All Featured
Building an army of robots
kneath
302
45k
Embracing the Ebb and Flow
colly
84
4.6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Site-Speed That Sticks
csswizardry
3
370
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Invisible Side of Design
smashingmag
299
50k
Writing Fast Ruby
sferik
628
61k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
BBQ
matthewcrist
86
9.5k
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]