This document discusses efforts to make Drupal more compatible with HTML5. It describes an HTML5 working group working on tools and base themes to implement HTML5 forms, elements and templates in Drupal 6, 7 and 8. The goals are to use HTML5 today on websites, figure out best practices, and "HTML5ify" Drupal 8. It lists contributors to the projects and 11 guiding principles for the work, such as supporting older browsers, prioritizing accessibility, semantic markup, and practical solutions over purity.

1. LET'S HTML5ify
DRUPAL!
core conversation
HTML5 WORKING GROUP

2. SLIDES AT:
jen.cm/h6

3. WHAT IS
HAPPENING
ALREADY
and has been since July 2010

4. HTML5
DRUPAL
WORKING
GROUP
groups.drupal.org/html5
irc: #drupal-html5

5. THE GROUP'S GOALS
Use HTML5 today on Drupal 6 & 7 websites.
Figure out best practices for Drupal + HTML5
through real world experiences, sharing knowledge
and building community consensus.
HTML5ify Drupal 8.

6. HTML5
TOOLS
MODULE
drupal.org/project/html5_tools

7. TOOLS
Implement HTML5 Forms
Simplify the output of:
$scripts, $styles, $submitted, etc.
Add HTML5 Elements to the
Filtered HTML input filter
basically alter core's XHTML before
it's markup goes to the theme

8. HTML5
BASE
THEME
drupal.org/project/html5_base

9. HTML5 BASE
Override core templates
(node.tpl, page.tpl, block.tpl, comment.tpl,
comment-wrapper.tpl, region.tpl, html.tpl, etc…)
basically HTML5ify Stark

10. We are working in
the HTML5 Tools &
HTML5 base
issue queues
and on g.d.o

11. Andrei Matteescu Mason Wendell
Eric Duran Alan Burke
(amateescu) (carnarymason)
Lin Clark Dave Reid Je Burnz Tim Plunkett
(jburnz)
Alex Ross Theresa Summa
Nathan Smith Jen Simmons
(bleen) (theresaanna)
Jack Aponte John Zavocki
Forest Mars John Albin Wilkins
(jackalope) (johnvsc)
(johnalbin)
Laura Scott Jared Ponchot Adrian Simmons
(laura s) Matt Farina
(jponch) (adrinux)
(mfer)
Stan Angelo
Jen Lampton Paul Irish
Jacine Luisi
Tom Behets
Divya Manian (betz)
(medden) Pontus Nilsson
(nimbupani)
Mark Krug
(devildogmrk)
António Almeida John Roberts Wilson
(jrwilson) Jody Hamilton
(perusio) … AND MORE!
(Jody Lynn)

12. LOGO
TWITTER
STICKERS
@drupalhtml5

13. HTML5ify D8
Form API Javascript improvements
with Web Workers
Hardcoded bits of HTML
Storage & caching
.tpls files in core modules
and themes Communication APIs
Input filters and security Drag & Drop
checks
Progress & Meter
and other stu …

14. IN CONTRIB
Geolocation Tools Things made with Canvas
Video and Audio Websocket-based Features
Implementation
Base Themes galore
…everything else
*core just has to stay out of the way

15. Pro HTML5
Programming
Peter Lubbers,
Brian Albers,
and Frank Salim
prohtml5.com

16. 10 GUIDING
PRINCIPLES

17. 0. HTML5ify
HTML5 is the future.
It's ready now.
Drupal core should output HTML5 markup
and use HTML5 APIs.

18. 1. SUPPORT OLDER
BROWSERS
Remain fully compatible with
Internet Explorer 6, 7, 8
and other older browsers.

19. 2. LEAN IN TO
THE DIVERSITY OF
DEVICES
Drupal websites do not have to work or look the same
on every device. They already don't.

20. 3. MAINTAIN
EXISTING
FUNCTIONALITY
To swap-out existing technology with HTML5-
powered replacements, polyfills are required.

21. "POLYFILL"

22. OPTION 1 OPTION 2
Use HTML 4 default and nothing else Use javascript to implement the better
UX for all browsers. Works if javascript
support is on. Falls back to option 1.
OPTION 3 OPTION 4
Use HTML5. Older browsers look like Use HTML5 plus a "polyfill". Basically
regular XHTML search box. Newer Option #3 for modern browsers plus #2 for
browsers get the better thing. older browsers. Falls back to #1 for IE w/o js.

23. 3. MAINTAIN
EXISTING
FUNCTIONALITY
Use polyfills when replacing existing functionality
with an HTML5 implementation.
Consider polyfills for new functionality on a
case-by-case basis, leaning towards simplicity.

24. 4. PERFORM
Slow performance is a problem.
HTML5ifying Drupal cannot make Drupal slower.
If fact, there are a lot of things about HTML5 that
could make Drupal run faster. Let's do that.

25. 5. BE ACCESSIBLE
If a choice has to be made between
the recommendations of HTML5 spec authors
and accessibility experts,
choose the accessibility experts.

26. 6. GET SEMANTIC
Historically, getting Drupal to output
semantic HTML has been a very low priority.
To do HTML5 well, content must be marked
up semantically. This is a chance to get serious
about valuing semantics.

27. 7. FULFILL THE
COMMON USE CASE,
NOT THE EDGE CASE
If certain markup makes sense for the majority
of usecases, but not all, let's do it. It can be
overridden for the rest. Choosing to be super
generic instead is not a solution for anyone.

28. 8. MIMIC XHTML.
BE HTML.
Use XML syntax in forming our HTML.
Quote our attributes. Use lowercase.
Everything we are already doing.
*although maybe make an exception for boolean attributes like 'pubdate'
Do not do XHTML5. Period.
Meaning no mime-type of "application/xml"

29. 9. VALUE FINDABILITY.
NOT MYTHOLOGY.
Look to web standards leaders,
not the SEO industry,
for information on best practices.

30. 10. VALUE
PRACTICALITY
OVER PURITY.
Just like the Design Principles of HTML5.
If we have to ‘cheat’ to make it work, oh well.
*We already have hacks to make it work in IE, why is this a time to get purist?

31. 11. SUPPORT
EVOLUTION
We will keep changing Drupal's
"HTML5y-ness" over time.
It's not all or nothing.
It's a process.

32. 10 GUIDING PRINCIPLES
1. Support older browsers.
2. Lean into the diversity of devices.
3. Maintain existing functionality.
4. Perform.
5. Be accessible.
6. Get semantic.
7. Fulfill the common use case, not the edge case.
8. Mimic XHTML. Be HTML.
9. Value findability. Not mythology.
10. Value practicality over purity.
11. Support evolution.

33. CODE SPRINT
FRIDAY
for
HTML5 TOOLS & BASE