Tips, web design book reviews, resources and observations for teaching and learning web development.
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.
Troubleshooting CSS is from Codrops.
I mentioned my new blog yesterday. I was thinking about using a carousel on it. Now Jared Smith and Craig Grannell are saying this: Accessibility Expert Warns: Stop Using Carousels. Well, Jared, you convinced me.
Making an Accessible form with ARIA, part 1 is from Deque.
No, Google Glass is not the ending point of Moore’s law, just another step along the way. Smart neural dust could carry sensors deep into the human brain, send data back out is further proof of where we’re going as a society with technology. So why can’t we find a form of energy that doesn’t create a hot planet?
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.
Easy-peasy REM Conversion with SASS is from Stubbornella.
3-D printing is capable of anything, apparently. What won’t we make with 3-D printing in the future? Now there’s a duck with a new foot thanks to 3-D printing. How about a house? A bus? A person (beam me up, Scotty)?
Coding Tools to Make Life Easier is from Ann Maria’s Blog.
Which JavaScript Library Should I Pick? Here are some tips to help you evaluate the numerous JavaScript libraries that are available now so you can make an intelligent choice.
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.’
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.
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.
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.
You can see a couple of code examples demonstrating appropriate use of the <main> element on this W3C page.