the power of html5: 15 reasons your business should be using html5 for web and mobile
DESCRIPTION
Slides from the webinar conducted on November 8, 2012. Presenter: Dave PorterTRANSCRIPT
V Dave Porter
15 Reasons Your Business Should be Using HTML5 for Web & MobileDave Porter – SproutCore Developer & Core Team [email protected]
THE POWER OF HTML5
CANADIAN HEADQUARTERS152 West Hastings StreetVancouver BC, V6B 1G8
UNITED STATES OFFICE3414 Peachtree Road, #1600Atlanta Georgia, 30326-1164
UNITED KINGDOM OFFICE3000 Hillswood DriveHillswood Business ParkChertsey KT16 0RS, UK
V Dave Porter
Appnovation is one of the world’s TOP OPEN SOURCE DEVELOPMENT SHOPS.
V Dave Porter
LOCATIONS
VANCOUVER OFFICE152 West Hastings StreetVancouver BC, V6B 1G8
ATLANTA OFFICE3414 Peachtree Road, #1600Atlanta Georgia, 30326-1164
LONDON OFFICE3000 Hillswood DriveHillswood Business ParkChertsey KT16 0RS, UK
V Dave Porter
V Dave Porter
The Power Of HTML5
V Dave Porter
HTML5 CSS3
Blazing-Fast JavaScript Powerful New JavaScript APIs
WHAT IS HTML5?
V Dave Porter
STANDARD BASED!
WHAT IS HTML5?
V Dave Porter
The Decline of Flash
1
V Dave Porter
1. THE DECLINE OF FLASH
Interactive, video, big-data websites in 2005: Flash / Flex
June 2007: iPhone ships without Flash, Adobe promises it “soon”
April 2010: Steve Jobs publishes “Thoughts on Flash”
August 2010: Adobe releases crippled, battery-draining Flash for Android
October 2011: Adobe begins contributing to CSS3
June 2012: Adobe ceases development of Flash for mobile; removes it from Android store
V Dave Porter
1. THE DECLINE OF FLASH
If you want to be on the mobile web,you can’t be on Flash.
V Dave Porter
Write Once Run Anywhere
2
V Dave Porter
2. WRITE ONCE, RUN ANYWHERE
PCMacLinuxiPhoneiPadAndroidKindle FireModel S“Smart” RefrigeratorsAirplane seat-back screens
V Dave Porter
Responsive Design
3
V Dave Porter
3. RESPONSIVE DESIGN
V Dave Porter
3. RESPONSIVE DESIGN
V Dave Porter
3. RESPONSIVE DESIGN
V Dave Porter
3. RESPONSIVE DESIGN
V Dave Porter
3. RESPONSIVE DESIGN
V Dave Porter
3. RESPONSIVE DESIGN
V Dave Porter
3. RESPONSIVE DESIGN
One Site, any DisplayOn screen: NYDOT by Appnovation
V Dave Porter
Mobile, Mobile, Mobile!
4
V Dave Porter
• 46% of US adults carry smartphones• >100M US users in 2013• Worldwide: over 450M users TODAY• 1.6B by 2016
4. MOBILE, MOBILE, MOBILE!
V Dave Porter
4. MOBILE, MOBILE, MOBILE
V Dave Porter
4. MOBILE, MOBILE, MOBILE
• Is HTML5 ready to deliver sophisticated mobile applications?
• Performance: Great on iPad
• Performance: iPhone 5 is a turning point
V Dave Porter
Control Your Development Costs
5
V Dave Porter
5. CONTROL YOUR DEVELOPMENT COSTS
• Cover more users with one product
• Avoid rare, specialized skillsets• Zero-headache deployment
V Dave Porter
Control Your Destiny
6
V Dave Porter
6. CONTROL YOUR DESTINY
Nobody owns the web
No 30% app store fees
No sales channel rules
No long approval waits
V Dave Porter
Moving Forward with Backwards Compatibility
7
V Dave Porter
7. MOVING FORWARD WITH BACKWARDS COMPATIBILITY
• No more broken websites
• Standards promise to stay standards.
• Additive evolution: new features too, not instead
V Dave Porter
Accessibility8
V Dave Porter
• Section 508, Federal Rehabilitation Act of 1973
• Web browsers come accessibility-ready
• WIA-ARIA: Accessible Rich Internet Application standards
<img src=”info.png” aria-label=”Information”/>
8. ACCESSIBILITY
V Dave Porter
Standard-Based Video
9
V Dave Porter
9. STANDARD BASED VIDEO
V Dave Porter
9. STANDARD BASED VIDEO
V Dave Porter
9. STANDARD BASED VIDEO
http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space
/
V Dave Porter
Location Awareness
10
V Dave Porter
10. LOCATION AWARENESS
• Act mobile in mobile browsers• Provide better value in context• Location-based targeting &
marketing
V Dave Porter
10. LOCATION AWARENESS
navigator.geolocation.getCurrentLocation(cal
lback);
V Dave Porter
Enterprise-class Features
11
V Dave Porter
11. ENTERPRISE-CLASS FEATURES
• Data storage & querying• Fast, two-way communication• Big performance for big data• Visual flair: from easy CSS animation to
full 3D graphics
• Feature-parity with native solutions.
V Dave Porter
Open-Source Has Your Back
12
V Dave Porter
12. OPEN-SOURCE HAS YOUR BACK
jQuery / Twitter embeds / ember.js / SproutCore
V Dave Porter
The Fastest-Moving Platform Period
13
V Dave Porter
13. THE FASTEST-MOVING PLATFORM PERIOD
• Apple• Google• Microsoft• Adobe• You benefit for free.
V Dave Porter
WEB + APP
14
V Dave Porter
14. WEB + APP
• The technology is speeding ahead• No more tradeoffs• Open, standardized web technologies are
ready.
V Dave Porter
HTML5 Is The Future
15
V Dave Porter
15. HTML5 IS THE FUTURE
• Basic HTML5 – 77% compatibility
• Advanced HTML5 – 60% compatibility
• Mobile - 10% browser share
• ...and rising rapidly
V Dave Porter
QUESTIONS?
Thank You For Your Participation!
Dave Porter – SproutCore Core Team Member
CANADIAN HEADQUARTERS152 West Hastings StreetVancouver BC, V6B 1G8
UNITED STATES OFFICE3414 Peachtree Road, #1600Atlanta Georgia, 30326-1164
UNITED KINGDOM OFFICE3000 Hillswood DriveHillswood Business ParkChertsey KT16 0RS, UK