Next Generation Web

Next Generation Web

Next Generation WebWhat HTML5 and Responsive Design Are All About

Next Generation Web

About Me: Jake Goldman

• President (& chief engineer!) @ 10up LLC, a WordPress development & strategy agency

• Author of over a dozen WordPress plug-ins• Dozens of clients, from university like Bates

College to WP.com VIP clients like TechCrunch• Writer/expert reviewer @ Smashing Magazine• @jakemgold

Next Generation Web

About This

You’ll walk away in 45 minutes as experts in HTML5, CSS3, Responsive Design, and astonishing presentation / educational

techniques required to do that.

Next Generation Web

About This

You’ll walk away in 45 minutes as experts in HTML5, CSS3, Responsive Design, and astonishing presentation / educational

techniques required to do that.You’ll have strategic insight into what’s driving change in web and a glimpse at cutting edge

techniques.

Next Generation Web

What does this have to do with WordPress?

Understanding the cutting edge of client side development is essential to building amazing WordPress sites (and any sites) in the not so

distant future.

Next Generation Web

Audience Poll

How many of you think open / standard web technologies will become the dominant platform

for all app development in the future?(Is Google onto something with ChromeOS?)

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Non-Proprietary Platforms

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Platforms

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Platforms

I want to share information using my brand and graphics.

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Platforms

I want my customers to see our videos.

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Platforms

I want to make an interactive game.

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Platforms

I want to build a rich, native feeling application

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Universal Platforms

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Universal Platforms

I want it to work in Netscape and Internet Explorer.

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Universal Platforms

I want it to work on Mac and Windows.

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Universal Platforms

I want it to work on desktops and iPhones.

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Universal Platforms

I want it to work on their TV and tablet.

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Non-Proprietary Platforms

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Non-Proprietary Platforms

I don’t want to license Java for our new device.

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Non-Proprietary Platforms

When is Adobe going to update Flash for my _____?

Next Generation Web

My Unifying Theory of Web Change

More “Devices”+

Economic Realities+

High Consumer Expectations=

Exponential Growth of Non-Proprietary Platforms

What do you mean we can’t release a new OS without ____?

Next Generation Web

My Unifying Theory of Web Change

This is not new. Heck, it’s not even recent.

Next Generation Web

Implication

Over time, cross platform, low friction, open standards will continue to supplant

proprietary methods.

Basically, we prefer things that are easy and safe.

Next Generation Web

What does all of this have to do with this talk?

What’s exciting about these technologies is that they’re reaching a point where 90% of what

we’ve been leaning on proprietary solutions for will no longer be necessary.

Next Generation Web

Why is this “next generation” web?

(but seriously, many of these are draft specifications, and not all devices support them;

plus we devs are still figuring this all out)

Next Generation Web

Responsive DesignConcept: Adapting your layout to different

contexts – mobile, desktop, tablet, etc.

Next Generation Web

Responsive DesignIn Practice: CSS3 media queries (+ meta

viewport tags + smart JavaScript)

Next Generation Web

Responsive DesignIn Practice: CSS3 media queries (+ meta

viewport tags + smart JavaScript)

<meta name="viewport" content="width=device-width; initial-scale=1.0“>

Next Generation Web

Responsive DesignIn Practice: CSS3 media queries (+ meta

viewport tags + smart JavaScript)

if ( jQuery('body').width() <= 320 ) return;

Next Generation Web

Responsive Design

Can we use this in “current generation” web?

It depends on the use case, but for most practical use cases, yes.

Next Generation Web

TypographyConcept: We’re sick of Arial / Times New Roman / Georgia.

Next Generation Web

TypographyIn Practice: CSS3 @font-face

… with reliable methods (EOT format, SVG) for certain platforms.

Next Generation Web

TypographyIn Practice: Use a Foundry or Open Source Font Repository

(avoid licensing and conversion issues)

Next Generation Web

Typography

Can we use this in “current generation” web?

YES.

Next Generation Web

TransitionsConcept: Changing from one state to another (color, size, positioning, etc.) should be a little more gentle on the eyes, a little less binary.

No Transition TransitionNo Transition Transition

Next Generation Web

TransitionsIn Practice: jQuery effects for cross platform, or

cooler, CSS3 transitions.

Next Generation Web

Transitions

Can we use this in “current generation” web?

Only for nonessential effects. Not compliant with any shipped version of Internet Explorer.

(can still “jump” between states; if it’s essential, there’s always the jQuery / script way)

Next Generation Web

TransformsConcept: We should be able to take DOM

objects and perform basic transformations (e.g. rotate, skew) to them.

Next Generation Web

TransformsIn Practice: CSS3 transforms!

Next Generation Web

TransformsIn Practice: CSS3 transforms!

Next Generation Web

TransformsAlso… 3D transforms!

Next Generation Web

Transforms

Can we use this in “current generation” web?

Only for nonessential, basic effects. Internet Explorer supports 2D in IE9 (no 3D). Firefox just added 3D.

Implementation inconsistent for 3D.

Next Generation Web

Transitions + Transforms!+ other CSS3 stuff

This is where it gets trippy.

http://css3.bradshawenterprises.com/accordions/

http://www.shayhowe.com/wp-content/themes/letscounthedays/articles/css3-owl

/

http://designlovr.com/examples/dynamic_stack_of_index_cards

/

Next Generation Web

Better Embedded MediaConcept: We should be able to play videos and

audio without needing a proprietary plug-in built for our device / OS.

Next Generation Web

Better Embedded MediaIn practice: video and audio tags

<video src="video.mp4" width="320" height="200“ controls></video>

<audio src="audio.mp3“ controls></audio>

Next Generation Web

Better Embedded Media

Can we use this in “current generation” web?

Only with script-based fallbacks that leverage proprietary methods in the case of missing support.

Oh, and codecs can be a pain to sort out.http://html5media.info/

Next Generation Web

Local File StorageConcept: Native apps let you store data locally.

Why can’t web apps?(or, cookies aren’t good enough)

Next Generation Web

Local File StorageIn practice: HTML5 Web Storage

New “localStorage” and “sessionStorage” objects in JavaScript.

localStorage.lastname="Smith";document.getElementById("result").innerHTML= "Last name: " + localStorage.lastname;

Next Generation Web

Local File Storage

Can we use this in “current generation” web?

If you’re willing to forgo slightly older browsers (e.g. IE7), or build in workarounds should the browser lack

support for the new objects.

http://www.w3schools.com/html5/html5_webstorage.asp

Next Generation Web

Drag & DropConcept: Native apps have had intuitive drag &

drop events for a long time. Why can’t web apps?

Next Generation Web

Drag & DropIn Practice: New event handlers for drag and

drop events (plus new File API, for external drag and drop handling).

Next Generation Web

Drag & Drop

Can we use this in “current generation” web?

It will only work in Firefox and Chrome right now.

Next Generation Web

GeolocationConcept: My web apps should be smart about

where I am right now.

Next Generation Web

GeolocationIn Practice: new Geolocation API (for use in

JavaScript)

Next Generation Web

Geolocation

Can we use this in “current generation” web?

As long as there are fallbacks for IE8 and lower.

Next Generation Web

What about next, next generation web?

Native app parity.

Gaming.http://www.keithclark.co.uk/labs/3dcss/demo/

Next Generation Web

What about next, next generation web?

Primary Technical Hurdles:Performance, Bandwidth.

Next Generation Web

Audience Poll

How many of you think open / standard web technologies will become the dominant platform

for all app development in the future?(Is Google onto something with ChromeOS?)

Next Generation Web

Next Generation WebWhat HTML5 and Responsive Design Are All About

by Jake Goldman

@jakemgold

slides will be available at 10up.com