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