14 Reasons To Use HTML5 For Your Next Web & Mobile Development Project

Size: px

Start display at page:

Download "14 Reasons To Use HTML5 For Your Next Web & Mobile Development Project"

Buddy Cobb
6 years ago
Views:

1 Issue 9 14 Reasons To Use HTML5 An Appnovation Digital ebook 14 Reasons To Use HTML5 For Your Next Web & Mobile Development Project P.1

2 Thank you for downloading our E-Book: 14 Reasons to Use HTML For Your Next Web & Mobile Development Project We hope you learn a lot from our free resource. If you have any questions, please do not hesitate to contact us online or in person at any of our offices around the world. We look forward to hearing from you soon! The information in this E-Book is transcribed by Appnovation Technologies from 14 Reasons To Use HTML5 For Your Next Web & Mobile Development Project webinar presented by Dave Porter - Appnovation SproutCore Architect. For more information, visit Appnovation Technologies P.2

3 Table of Contents What is HTML5? P.4 Open Standards P.5 Write Once, Run Anywhere P.7 Responsive Design P.8 Mobile, Mobile, Mobile! P.9 Control Your Development Costs P.11 Control Your Destiny P.13 Moving Forward with Backwards Compatibility P.14 Accessibility P.15 Consumer Class Features P.16 Enterprise Class Features P.17 Open Source Has Your Back P.18 The Fastest Moving Platform P.19 Web + App P.20 HTML5 is the Future P.21 P.3

4 1 What is Html5? Components of HTML5 1. HTML5: integrated audio, video, canvass (for drawing) & SVG (Scalable Vector Graphics). 2. CSS3: Rounded corners, gradients, smooth scaling, skewing, animations, media queries. 3. JavaScript: Do more things, much faster. The collective wisdom of Internet at large has been to capture all these great things and mash them into one catchall phrase: HTML5. P.4

5 Open Standards 2000 September Mozilla Firefox is released 2008 September Google Chrome is released April Thoughts on Flash Steve Jobs March Internet Explorer 9 release October Adobe contributes to CSS3 June Adobe removes Flash for mobile 2014 The Lost Decade The Transition P.5

6 Reason 1: Open Standards The first difference making reason to jump on board the HTML5 train is that HTML5 and all its accompanying components are OPEN STANDARDS. This has not always been the case: : The Lost Decade: When Microsoft won the First Browser War, it stopped innovating. As though monopolies impact markets. And for a very long time, Flash was the only game in town for standard for rich, interactive anything, never mind video. So these two forces of nature became de-facto standards, but they weren t OPEN standards: the only people deciding how IE should work was Microsoft, and with Flash it was even worse. Closed standards don t absolutely guarantee horrible outcomes, but closed standards without pressure to seriously innovate left us stuck in neutral for nearly a decade : The Transition: April 2010: Steve Jobs publishes Thoughts on Flash March 2011: Microsoft releases IE9, in response to growing competitive pressure from Firefox. It was great and standard compliant. October 2011: Adobe begins contributing to CSS3 June 2012: Adobe ceases development of Flash for mobile; removes it from Android store So we are now at this place where the web is running on these open standards. The Standards Panacea Deliberative Bodies, like the W3C Improved APIs, because they get chewed on by more people that are going to use them before they get standardized, which leads to: Improved Interoperability The modern standards panacea is the root cause of the other difference-makers: the lost decade is over; we ve got a new, robust, browser market, and it s all being built on open standards. P.6

7 Write Once, Run Anywhere Reason 2: Write Once, Run Anywhere Now the biggest advantage that the open standards and deliberative bodies can get you is WRITE ONCE, RUN ANYWHERE, which has always been a promise of the web, but finally, in 2013, we can deliver on it. You can write your HTML5 code once, and it can run everywhere that has a browser engine, including PC, Mac, Linux, iphone, ipad, Android, Kindle Fire, Cars, Refrigerators, Airplanes, etc. P.7

In today s modern design, however, you could go with any resolution.

8 Responsive Design 4 Reason 3: Responsive Design Related to the previous point is Responsive Design (because devices come in all shapes and sizes). Historically, designers would pick a resolution and optimize the design for that resolution. In today s modern design, however, you could go with any resolution. You decide in advance with your team of developers and designers that you are going to do responsive design, and everyone understands and delivers on that. fig New York City Department of Transportation Responsive Website POC P.8

Mobile, Mobile, Mobile! Reason 4: Mobile, Mobile, Mobile! 46% of US adults carry smartphones > 100M US users in 2013 Worldwide: over 450M users TODAY 1.6B by 2016 Is Mobile HTML5 Ready?

9 Mobile, Mobile, Mobile! Reason 4: Mobile, Mobile, Mobile! 46% of US adults carry smartphones > 100M US users in 2013 Worldwide: over 450M users TODAY 1.6B by 2016 Is Mobile HTML5 Ready? Performance: Great on ipad Performance: iphone 5 is a turning point Facebook s recent criticized the platform. They were a couple of years too early for the degree of sophistication they needed. There are videos on the net of folks doing better HTML5 implementations than Facebook did. Phil Schiller of Apple is under oath as saying that they sell more of each generation of iphone than all others combined. Within a year, more than half of the iphones ever sold never mind in use will be able to chew through HTML5 applications. Figure 1: Worldwide Smart Connected Device Shipments, (Unit Millions) Sources: P.9

10 5 14 Reasons To Use HTML5 fig New York City Department of Transportation Responsive Website POC P.10

11 Control Your Development Costs Reason 5: Control Your Development Costs Cover more users with one product: With responsive design, you can cover both desktop and mobile; and with HTML5 you can cover both Android and ios: more users covered by one product. Avoid expensive, specialized skill-sets: One product means one team, and it s a team made up of the most common skill set out there. There is a very active market for web developers, with tons of training resources available for free. Zero-headache deployment: No more problem-prone intranet installs, and no managing upgrade paths for your customers. New version? Hit Refresh. Get sophisticated offline behavior with the Apache standard. No convincing them to upgrade, or if you re a company, no obnoxious admin-sensitive deploy processes. And, no app stores. P.11

12 6 fig Kobo Instant Reader Built with SproutCore P.12

13 For Your Next Web & Mobile Development Project Control Your Destiny Reason 6: Control Your Destiny No App store: Nobody owns the web No 30% app store fees No sales channel rules No long approval waits P.13

8 Moving Forward With Backwards Reason 7: Moving Forward With Backwards Compatibility 7Compatibility No more broken websites: The bad old days of websites breaking whenever your company or, worse,

14 8 Moving Forward With Backwards Reason 7: Moving Forward With Backwards Compatibility 7Compatibility No more broken websites: The bad old days of websites breaking whenever your company or, worse, your customers upgrade their browsers is over. Standards promise to stay standards: New and evolving standards have an established on-ramp process; once they re established, they re established. Additive evolution: new features are promised to not to break old ones. P.14

For Your Next Web & Mobile Development Project Accessibility Reason 8: Accessibility This comes in handy if your application has to be compliant with accessibility standards.

15 For Your Next Web & Mobile Development Project Accessibility Reason 8: Accessibility This comes in handy if your application has to be compliant with accessibility standards. For example: In US: US Federal Rehabilitation Act of 1973 In UK: Britain s Equality Act (2010) Web browsers come accessibility-ready: it s built in WIA-ARIA - Accessible Rich Internet Application standards: - It consists of some tags that you put in your elements and tell it what it needs to know: <img src= info.png aria-label= Information /> This gives accessibility software all the information it needs to guide an impaired user through your application. P.15

Geolocation Act mobile in mobile browsers Provide better value in context Location-based targeting & marketing Yelp.

16 Source: Consumer- Class Features 1 Reason 9: Consumer-Class Features Standards-Based Video Geolocation Act mobile in mobile browsers Provide better value in context Location-based targeting & marketing Yelp.com is the most popular (and most straight-forward) example of browser geolocation put to good use. There is a one-line command (navigator.geolocation. getcurrentlocation) that tells you where the browser is, and the app can use that information in location-based advertising. Figure 1: Blowing apart fragments of video Figure 2: 3D Video P.16

17 0 Enterprise- Class Features Reason 10: Enterprise-Class Features Data storage & querying: LocalStorage, WebSQL, IndexedDB for performance and offline caching Fast, two-way communication: Web Sockets Big performance for big data: Web Workers standard Visual flair: from easy CSS animation (with CSS transitions & keyframe animations) to full 3D graphics with WebGL standard The goal of all of these features is Feature-parity with native solutions: It s 2013 and HTML5 can finally say that yes, we have feature parity: if you can do it in native, you can do it in the browser. P.17

1 Open-Source Has Your Back 1 Reason 11: Open-Source Has Your Back By jumping on the HTML5 train, you get a ton of free value from the open source community.

18 1 Open-Source Has Your Back 1 Reason 11: Open-Source Has Your Back By jumping on the HTML5 train, you get a ton of free value from the open source community. No matter what you need, someone has solved that problem before and they are going to share it for free. Moreover, you are building on top of a platform that can not die, and there are no barriers to entry. Github s Top Languages JavaScript Ruby Python Java Shell PHP C C++ Perl Objective-C 21% 13% 8% 8% 8% 7% 6% 4% 4% 3% P.18

19 2 The Fastest- Moving Platform Reason 12: The Fastest-Moving Platform 1990s: Browser wars 2003: Apple releases WebKit 2004: Firefox 1.0, funded largely by Google 2008: Chrome; Google begins iterating and turns JavaScript into a world-class programming language : IE9; Microsoft gets on board with standards : Adobe begins contributing to CSS3 These companies (market cap of $1.01T) are investing heavily to improve the platform, and you benefit for free. P.19

20 3 1 Web + App Reason 13: Web + App 14 Reasons To Use HTML5 The technology is speeding ahead No more trade offs Open, standardized web technologies are ready Five years ago, when folks started singing this song, the web wasn t ready. Deploying via the browser meant major compromises in capabilities and performance. No longer. Open, standardized web technologies are ready to bring your product to any platform. P.20

21 4 HTML5 is the Future Reason 14: HTML5 Is The Future Basic HTML5 (boarder radius) 77% compatibility Advanced HTML5 (web workers) 68% compatibility Mobile - 11% browser share...and rising rapidly Sources: P.21

Thank you again for downloading this E-Book. If you would like to know what it takes to deliver your next web or mobile development project using HTML5, contact us today at contact@appnovation.com.

22 Thank you again for downloading this E-Book. If you would like to know what it takes to deliver your next web or mobile development project using HTML5, contact us today at We look forward to hearing from you soon! Proudly delivering quality projects to companies, organizations and government entities around the world. Here are just a few of the names you might recognize: P.22

WHAT IS WEBKIT? COPYRIGHTED MATERIAL SMASHING WEBKIT CHAPTER 1

WHAT IS WEBKIT? COPYRIGHTED MATERIAL SMASHING WEBKIT CHAPTER 1 1 WHAT IS WEBKIT? WEBKIT IS AN open-source rendering engine designed to display web pages. It powers Google Chrome and Safari as well as a variety of mobile devices such as iphone, ipad, and Android phones