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.
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.
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.
Carolyn Wood asked this question on Twitter yesterday.
I used plain old HTML and CSS yrs ago. Now so much to catch up with. If I only read 1 or 2 books to COMPLETELY catch up, what shd they be?
— Carolyn Wood (@carywood) June 9, 2013
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:
display: -webkit-flex;
display: -moz-flex;
display: flex;
[Disclosure: I received a free copy of this book from the publisher for this review. Opinions are my own. Links to Amazon are affiliate links. Here is my review policy.]
The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript
Recently I’ve been reevaluating that pyramid (or three-legged stool) image we have of what skills are used to create a web site. The traditional pyramid metaphor has been a broad foundational layer of semantic HTML, followed by a second presentational layer of CSS, with the complete pyramid being topped by a small peak of interaction created with JavaScript.
Now we have a modern web. We deal more and more often with responsive (or adaptive) thinking, with apps, with APIs, with new CSS layout techniques using programming concepts, and with images built from SVG or canvas. All these changes lead me to think that the foundational layer in the pyramid of web design skills should be recognized as JavaScript. Books like this one reinforce that idea. (I first began thinking about this when I reviewed Introducing HTML5, but I didn’t mention it at the time.)
There is concern over the idea of HTML5 as “pure” HTML vs. the idea of HTML5 and related technologies that often get labeled as HTML5. It’s a dilemma facing many authors today who tackle the topic of modern web technologies, because you can no longer talk “just” about HTML.
The web is moving toward scripting as a way of dealing with every part of a website. In this book by Peter Gasston, it’s very clear that what he calls “the demands and requirements of working on the multi-device Web” are interlaced inextricably with JavaScript. He’s writing about that broader range of technologies I mentioned.
This is a well-written book. In a clear and accessible manner, Gasston leads you through several chapters detailing the latest technologies and thinking in modern web design. The book isn’t for newbies, it’s for people who already have skills and want to keep informed on the latest thinking, trends, techniques, and possible future directions. Here’s a summary of the chapters. Every chapter has an extensive section called Further Reading with excellent resources for the reader.
There’s an appendix for browser support and one with further reading suggestions.
The style of presenting each concept is consistent throughout the book. He introduces a single idea, provides a spare code example, and shows the results. (He talks as if there are code samples available for download somewhere, but although I searched for a mention of the location of those code samples, I couldn’t find it.) Then he builds on the previous example with an new idea, a new code example, and a new result. It’s a very effective way of walking the reader through the new information and building an understanding of it step by step.
Summary: Trying to keep up? This book is an informative and up-to-the-minute look at modern web technologies.
A review by Virginia DeBolt of The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript (rating: 5 stars)
