Resources for the new HTML template element

In draft state at the W3C, the new <template> element is making its way into the HTML spec. The description of the document states, “This specification describes a method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents.”

If you’ve used server side includes, or library items in Dreamweaver, or templates (not the same thing as the proposed <template> element) in Dreamweaver you understand the concept. Certain parts of a page or site with identical contents get inserted into the page using special commands or tags. The contents of those repeating elements are defined elsewhere than right on the page.

Implementation is a ways down the line, but you should be aware of what’s coming. Here’s a list of resources where you can read more about the <template> element.

As you can see from looking at this brief list of resources, the description of the proposed element and the code examples for how it will be implemented are sparse. In my opinion this is not ready for classroom instruction or implementation into web pages. But if you feel like constructing test cases you could add useful information to the topic.

Useful Links: DW CC Tutorial, print styles, POUR

Dreamweaver CC is very different in appearance and interface from previous versions. The wizard for creating CSS rules that has been in place since the early days is gone. Here’s a nice tutorial with downloadable files that will walk you through some of the ways to use the software interface now while making a simple web page.

Tips and Tricks for Print Style Sheets brings you up to speed on the modern way to create print styles.

Pragmatica11y: Teaching Accessibility Core Rules is the second of two posts by Dennis Boudreau. The first boiled down the rules for the Perceivable part of POUR. This post covers the Operable, Understandable, and Robust aspects, simplified down to the ‘core.’

Useful links: UX Video, remote control, Instagram video, mobile #fails

How to Fail at UX in 3 Steps is a very short video, but it makes strong points.

Where will this lead? Microsoft shows off a wall of 200 Windows Phones you can control remotely.

In case you’re already deeply committed to Instagram’s new video service, here’s How to Embed Instagram Video on Your Website.

Mobile Web Problems and How to Avoid Them is a series of problems collected by Brad Frost and Jen Simmons over the last few months. You see screen shots of the problem and get tips on how to avoid the errors.

Main element added to HTML 5.1

Main St 1903
The <main> element was added to the HTML 5 specification recently. The element name is pretty obvious in meaning, but just in case you want the W3C’s definition, it is the “main content of the body of a document or application.”

The <main> element can include only content that is unique to a page. Repeating content such as navigation, copyright information or banners do not belong in the <main> element. There can only be one <main> element in a document, and the element should not be a descendant of an <article>, <aside>, or <nav>.

The W3C does suggest that a <main> element could “a grouping content or sectioning content element as appropriate.” I interpret this to mean you can nest a <main> element in a <div> or a <section>. If I’m misunderstanding what this means, I hope someone will speak up with a correction.

Coding with <main> until the new wears off

Until assistive devices include a keyboard command that will move the focus directly to the <main> element, a best practice suggested for accessibility is to include the ARIA role “main” as an attribute of the element. For example:

<main role="main">

Some browsers (and validators) won’t recognize <main> immediately, although browser support is coming quickly. If you start using it now, be sure to include this in your CSS, along with the other HTML5 resets:

main {display:block;}

For older versions of Internet Explorer, add this to your script.

<script>document.createElement('main');</script>

The html5shiv now includes <main>, so make sure you have a current version of that if you are hosting it on your own server.

Code Examples

You can see a couple of code examples demonstrating appropriate use of the <main> element on this W3C page.

Useful links: Forms in Tables, Customer Service, Female Gamers

A complicated question about making a form within a table that is accessible gets a great answer from Jared Smith at Web Standards Sherpa’s Facebook page.

You read A List Apart without me having to remind you to, right? Nevertheless, I thought this customer services post called Designing for Services Beyond the Screen was really excellent. How can you take the lessons from this article and apply them to your site?

Wow, talk about going mainstream. Ms. Magazine is getting into the fray on the topic of the miserable representation of women in gaming. Actually, About Half of Gamers are Women. It’s a good summary of the topic if you haven’t paid much attention before.

Useful Links: Mobile Tips, Wireframes, Prepare for the End

Mobile Website Design: 30 Pro Tips at Creative Bloq makes some excellent points and has some graphics that look helpful to use in a classroom. This graphic, for example, in tip 15.

content stacking wireframe

In keeping with that wireframe image, take a look at this inspiring collection of wireframe sketches from various designers. UI & Wireframe Sketches for Your Inspiration.

July 1 will be the end of Google Reader. Are you prepared? I’ve been using Netvibes after trying it out along with Feedly for a week long trial period. Netvibes won. Here’s a list of 12 alternatives to Google Reader. Just a reminder that there are links in the sidebar so that you can subscribe to the RSS feed for this blog using what ever reader you love the most.

Useful links: female game characters, 3D transforms, Yahoo email

I was impressed by this headline, People Want Female Warrior Gaming Miniatures So Much That They Funded This Kickstarter Campaign In 30 Seconds. After I read the amazing story I went to the actual Kickstarter page for Raging Heroes to see what the total raised was. Then I was really amazed. Game makers, if you think there’s no support for women in gaming, you’re either in denial or throwing away a ton of profit.

Understanding 3D Transforms is from Opera Dev.

Do you have a Yahoo email address? I do. I have it set to forward to my regular email, however, so I almost never sign in to Yahoo to look at it. If you haven’t signed in to your Yahoo email within the last 12 months, you will lose your account. Log In to Your Yahoo! Mail Address or Lose it On July 15th. When signing in to Yahoo to let Yahoo know I want to maintain that account, I noticed they are using two-step verification now.