WebDU Keynote

HTML5 & the rise of our mobile overlordsTerry Ryan | Developer EvangelistTwitter: @tpryan

Who Are You?

A FEW RANDOM OBSERVATIONS

Actually, as they are chosen specifically to back up my points it may be a bit disingenuous to refer to them as “random.”

Source: netaverages.adobe.com April 29nd 2012

HTML5 Adoption

Content Editable 85.47%

Drag and Drop 83.58%

Data annotations 89.55%

getElementsByClassName 72.82%

Canvas 72.91.%

Semantic Elements 72.82%

Video Element 70.43%

Audio Element 69.82%

Inline SVG 64.22%

OffLine Web Applications 56.6%

Source: caniuse.com May 2nd 2012

Chrome version 14

October 4th 2011

Chrome version 15

October 26th 2011

Chrome version 16

January 6th 2012

Chrome version 17

February 17th 2012

Chrome version 18

March 28th 2012

Chrome version 18 Last Update

April 30th 2012

Gartner forecasts phones

overtaking PCs as most common

web browsing device by 2013

Source: engadet.com January 2010




HTML5 is not future tech

CONCLUSIO

N:


Source: understatement.com October 26th 2011

Even when the checkmark is

there, performance

isn’t.

Designing for devices is

hard

CONCLUSIO

N:

Testing is critical

Native Apps

Pros• Easy to monetize• Fit user expectations

Cons• Costly to develop• Restricted in delivery

Mobile Web Apps

Pros• More Flexible• More Reusable

Cons• Harder to monetize• Hard to target• Lack complete device

access.

No clear cut winner

CONCLUSIO

N:

Demo

Expressive HTML

CSS Transitions

CSS Animation

Canvas

Video

JS Frameworks that handle these things

People want an expressive

web

CONCLUSIO

N:

CONCLUSIO

NS:

We need the medium to be

more expressive

We need our work to work

on more devices

We need better tools

WE WANT TO BE EXPRESSIVE

Adobe Digital Publishing

PDF• Relatively small file

size• Some flexibility• Device issues

HTML• Tiny file size• Some flexibility• Lack of layout

control

PNG• Huge file size• Complete pixel

level control of layout

CSS PROPOSALS

CSS REGIONS

CSS EXCLUSIONS

Demo

CSS Regions and Exclusions

CSS SHADERS

Demo

CSS Shaders

I am sickand tired of seeing only 6-10fonts deemed “web safe”

I WANTMANYMORE FONTS

Tastefully though

Those last few slides were like font vomit

You’re in Australia, maybe “Character Chunder?”

Webfonts

• Webfonts are a solution to this– Require multiple formats– Require proper licensing

TYPEKIT

DEMO

Typekit

WE WANT TO BE EVERYWHERE

If you haven’t tested on the device, then you haven’t

tested

SHADOW

Demo

Shadow

Objective CAndroid Flavored

JavaBlackBerry Flavored

JavaWhatever Microsoft

is doing now

HTML, JavaScript & CSS

Why do we need native?

That last one is an Accelerometer

Access to device

components and OS API’s

Access to App Stores

PHONEGAP

PhoneGap powers native applications

using HTML/JS/CSS

PhoneGap gives access

to components

and API’s

PhoneGap Apps can be distributed in

stores

What do you mean by

“native” apps

UI is not native

Wikipedia

Zynga

Demo

PhoneGap

x

Still not great



PHONEGAP BUILD

Demo

PhoneGap Build

WE NEED BETTER TOOLS

EDGE

Demo

Edge

More tools are coming

CONCLUSIONS

Html.adobe.com

Hiring

Dmitry Baranovskiy

Adobe wants to create tools that allow you

to be expressive anywhere.

Then we want to sell those tools to you.

Follow up?

• Preso will be up at – http://slideshare.net/tpryan

• Feel free to contact me– [email protected]– http://terrenceryan.com– Twitter: @tpryan

Technology

WebDU Keynote