Image from Syfy
Motorola building a ‘world-class’ wearables design group says The Verge. I hope Motorola will make me one of those high tech suits like Rachel Nichols wears in Continuum. That suit makes the stuff we thought was cool in The Matrix look antique.
Using placeholder text in HTML5 forms across all browsers comes from TechRepublic.
CSS Zen Garden is back at the same old URL with a responsive design and a whole new set of design challenges and opportunities for web designers from all over the world.
HTML5 and ARIA Design Patterns is at .net magazine. It provides design patterns for main elements, navigation elements, sections, details, summaries, and figures and figcaptions. In each design pattern, the appropriate ARIA roles are shown.
The Tower Blog explains how they did the CSS3 transforms in their sidebar in CSS3 Transforms by Example.
How to Teach Industry Ready? is at Unicorn Institute.
Large Background Images in Web Design: Tips and Techniques. Nice summary of the various options.
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:
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:
For older versions of Internet Explorer, add this to your script.
now includes <main>, so make sure you have a current version of that if you are hosting it on your own server.
You can see a couple of code examples demonstrating appropriate use of the <main> element on this W3C page.
Carolyn Wood asked this question on Twitter yesterday.
I responded with two suggestions that are current favorites of mine. I’ve reviewed them both here. If you’d like to know more about what I recommend as the two best books for catching up, here are my reviews:
I often see people in my classes who learned HTML and basic CSS back in the day and who need to bring themselves up to date. These two books will be a big help if all you want to deal with is two books.
Excellent forms tutorial by Roger Hudson at Web Usability. Even includes screen reader results.
Automatic Figure Numbering with CSS Counters at Codrops not only explains how to number Figures, it provides downloadable code.
Could a Responsive Website Design Hurt Your SEO is from Copyblogger. Don’t dismiss it because it’s from Copyblogger – it’s worth a look. He goes into how search engines act, when responsive design can help or hurt, and draws conclusions.
How to mark up subheadings, subtitles, alternative titles and taglines now that hgroup is officially out of the spec.
CSS Zen Garden is 10 years old. Dave Shea has announced a revival. Designers take note.
Here’s what Zeldman says about the changes at Adobe: Adobe Love. It certainly isn’t what I was expecting to read on his site.
How to use the Flexbox layout method (part 1) at Web Designer Depot is worth viewing. Note that the order of the properties they use should put the actual property last after the vendor prefixes are listed. Like this: