The document discusses the next generation of the web using HTML5, CSS3, and responsive design. It summarizes Jake Goldman's presentation on these topics, outlining key concepts like responsive design using media queries, using new CSS3 features like fonts, transitions, transforms, and embedded media, and HTML5 features like local storage, drag and drop, and geolocation. While many of these features are not fully supported across all browsers yet, the document suggests they allow building more advanced web applications and represent the future of web development on open standards rather than proprietary platforms.

1. Next Generation Web
What HTML5 and Responsive Design Are All About
Next Generation Web

2. 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

3. 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

4. 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

5. 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

6. 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

7. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
+
High Consumer Expectations
=
Exponential Growth of Non-Proprietary
Platforms
Next Generation Web

8. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
+
High Consumer Expectations
=
Exponential Growth of Platforms
Next Generation Web

9. My Unifying Theory of Web Change
More “Devices”
I want to share information
+
using my brand and graphics.
Economic Realities
+
High Consumer Expectations
=
Exponential Growth of Platforms
Next Generation Web

10. My Unifying Theory of Web Change
More “Devices”
I want my customers +
to see our videos.
Economic Realities
+
High Consumer Expectations
=
Exponential Growth of Platforms
Next Generation Web

11. My Unifying Theory of Web Change
More “Devices”
I want to make an+
interactive game.
Economic Realities
+
High Consumer Expectations
=
Exponential Growth of Platforms
Next Generation Web

12. My Unifying Theory of Web Change
More “Devices”
I want to build a rich,
+
native feeling application
Economic Realities
+
High Consumer Expectations
=
Exponential Growth of Platforms
Next Generation Web

13. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
+
High Consumer Expectations
=
Exponential Growth of Universal Platforms
Next Generation Web

14. My Unifying Theory of Web Change
More “Devices”
+
I want it to work in Netscape and Internet
Economic Realities
Explorer.
+
High Consumer Expectations
=
Exponential Growth of Universal Platforms
Next Generation Web

15. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
I want it to work on Mac and Windows.
+
High Consumer Expectations
=
Exponential Growth of Universal Platforms
Next Generation Web

16. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
I want it to work on desktops and iPhones.
+
High Consumer Expectations
=
Exponential Growth of Universal Platforms
Next Generation Web

17. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
I want it to work on their TV and tablet.
+
High Consumer Expectations
=
Exponential Growth of Universal Platforms
Next Generation Web

18. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
+
High Consumer Expectations
=
Exponential Growth of Non-Proprietary
Platforms
Next Generation Web

19. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
+
I don’t want to license Java for our new device.
High Consumer Expectations
=
Exponential Growth of Non-Proprietary
Platforms
Next Generation Web

20. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
+
When is Adobe going to update Flash for my _____?
High Consumer Expectations
=
Exponential Growth of Non-Proprietary
Platforms
Next Generation Web

21. My Unifying Theory of Web Change
More “Devices”
+
Economic Realities
What do you mean we can’t release a new OS
+
without ____?
High Consumer Expectations
=
Exponential Growth of Non-Proprietary
Platforms
Next Generation Web

22. My Unifying Theory of Web Change
This is not new.
Heck, it’s not even recent.
Next Generation Web

23. 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

24. 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

25. 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

26. Responsive Design
Concept: Adapting your layout to different
contexts – mobile, desktop, tablet, etc.
Next Generation Web

27. Responsive Design
In Practice: CSS3 media queries (+ meta
viewport tags + smart JavaScript)
Next Generation Web

28. Responsive Design
In Practice: CSS3 media queries (+ meta
viewport tags + smart JavaScript)
<meta
name="viewport"
content="width=device-width; initial-scale=1.0“
>
Next Generation Web

29. Responsive Design
In Practice: CSS3 media queries (+ meta
viewport tags + smart JavaScript)
if ( jQuery('body').width() <= 320 ) return;
Next Generation Web

30. 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

31. Typography
Concept: We’re sick of Arial /
Times New Roman / Georgia.
Next Generation Web

32. Typography
In Practice: CSS3 @font-face
… with reliable methods (EOT format, SVG) for certain platforms.
Next Generation Web

33. Typography
In Practice: Use a Foundry or Open Source Font Repository
(avoid licensing and conversion issues)
Next Generation Web

34. Typography
Can we use this in “current generation” web?
YES.
Next Generation Web

35. Transitions
Concept: 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 Transition
Next Generation Web

36. Transitions
In Practice: jQuery effects for cross platform, or
cooler, CSS3 transitions.
Next Generation Web

37. 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

38. Transforms
Concept: We should be able to take DOM
objects and perform basic transformations (e.g.
rotate, skew) to them.
Next Generation Web

39. Transforms
In Practice: CSS3 transforms!
Next Generation Web

40. Transforms
In Practice: CSS3 transforms!
Next Generation Web

41. Transforms
Also… 3D transforms!
Next Generation Web

42. 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

43. 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

44. Better Embedded Media
Concept: We should be able to play videos and
audio without needing a proprietary plug-in
built for our device / OS.
Next Generation Web

45. Better Embedded Media
In practice: video and audio tags
<video src="video.mp4" width="320" height="200“ controls></video>
<audio src="audio.mp3“ controls></audio>
Next Generation Web

46. 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

47. Local File Storage
Concept: Native apps let you store data locally.
Why can’t web apps?
(or, cookies aren’t good enough)
Next Generation Web

48. Local File Storage
In 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

49. 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

50. Drag & Drop
Concept: Native apps have had intuitive drag &
drop events for a long time. Why can’t web apps?
Next Generation Web

51. Drag & Drop
In Practice: New event handlers for drag and
drop events (plus new File API, for external drag
and drop handling).
Next Generation Web

52. Drag & Drop
Can we use this in “current generation” web?
It will only work in Firefox and Chrome right now.
Next Generation Web

53. Geolocation
Concept: My web apps should be smart about
where I am right now.
Next Generation Web

54. Geolocation
In Practice: new Geolocation API (for use in
JavaScript)
Next Generation Web

55. Geolocation
Can we use this in “current generation” web?
As long as there are fallbacks for IE8 and lower.
Next Generation Web

56. What about next, next
generation web?
Native app parity.
Gaming.
http://www.keithclark.co.uk/labs/3dcss/demo/
Next Generation Web

57. What about next, next
generation web?
Primary Technical Hurdles:
Performance, Bandwidth.
Next Generation Web

58. 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

59. Next Generation Web
What HTML5 and Responsive Design Are All About
by Jake Goldman
@jakemgold
slides will be available at 10up.com
Next Generation Web