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
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
MobileActOsaka_250704.pdf
akaitadaaki
0
120
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
visional_engineering_and_design
1
120
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
2025 AWS Jr. Championが振り返るAWS Summit
kazukiadachi
0
110
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
Connect 100+を支える技術
kanyamaguc
0
200
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A better future with KSS
kneath
238
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
A designer walks into a library…
pauljervisheath
207
24k
Navigating Team Friction
lara
187
15k
It's Worth the Effort
3n
185
28k
Thoughts on Productivity
jonyablonski
69
4.7k
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]