Let's HTML5ify Drupal! // DrupalCon Chicago

Specifically, core needs support for HTML5 Form API so that contrib project maintainers can leverage the power of HTML5 forms. The markup for menus, scripts, styles, and published date is just too hard to change for people who aren't Drupal theming experts. They will get frustrated trying to make Drupal output HTML5. This is a good time to work on the default theme markup for Drupal core — the node, page, block, comment tpls, etc., as well as for Bartik. Core leads the community. Let's lead everyone into the future.

Presented March 9, 2011 at DrupalCon Chicago as an official core conversation.

Transcript

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. Eric Duran Alex Ross (bleen) Jack Aponte (jackalope) Jen Lampton Tim Plunkett Lin Clark Alan Burke Forest Mars Jared Ponchot (jponch) Jacine Luisi Theresa Summa (theresaanna) Mason Wendell (carnarymason) Andrei Matteescu (amateescu) Laura Scott (laura s) Je Burnz (jburnz) Mark Krug (devildogmrk) John Zavocki (johnvsc) Matt Farina (mfer) Pontus Nilsson Adrian Simmons (adrinux) (medden) Stan Angelo Paul Irish Nathan Smith Tom Behets (betz) António Almeida (perusio) John Roberts Wilson (jrwilson) John Albin Wilkins (johnalbin) Jody Hamilton (Jody Lynn) … AND MORE! Divya Manian (nimbupani) Dave Reid Jen Simmons
12. TWITTER @drupalhtml5 STICKERS LOGO
13. HTML5ify D8 Form API Hardcoded bits of HTML .tpls files in core modules and themes Input filters and security checks Javascript improvements with Web Workers Storage & caching Communication APIs Drag & Drop Progress & Meter and other stu …
14. IN CONTRIB Geolocation Tools Video and Audio Implementation Base Themes galore Things made with Canvas Websocket-based Features …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 Use HTML 4 default and nothing else OPTION 2 Use javascript to implement the better UX for all browsers. Works if javascript support is on. Falls back to option 1. OPTION 3 Use HTML5. Older browsers look like regular XHTML search box. Newer browsers get the better thing. OPTION 4 Use HTML5 plus a "polyfill". Basically Option #3 for modern browsers plus #2 for 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, making Drupal 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. PLAN FOR 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.
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. Mimic XHTML. Be HTML. 8. Value findability. Not mythology. 9. Value practicality over purity. 10. Support evolution.
33. CODE SPRINT FRIDAY HTML5 TOOLS & BASE