Category: CSS

Useful Links: Web Developer Toolbar, Pinterest, WCAG levels, Responsive Images

I urge all my students to use Chris Pederick’s Web Developer Toolbar. Recently Cynthia Says, which the toolbar uses for a number of tests, added CAPTCHA. Here’s an article that tells you how to replace Cynthia Says with the WAVE tool in the Web Developer Toolbar. Since WAVE is a far better tool than Cynthia Says, this is a good idea for everyone anyway, even if Cynthia Says hadn’t suddenly rendered itself inaccessible.

Pinterest for Designers has tips for getting started with Pinterest and using it to support your brand. The part of the article I found most interesting was the list of boards to follow for ideas about typography, print design, web design, package design, color, logos, and general inspiration.

Responsive Images – Interim Report from Bruce Lawson lays out the current state of things.

Understanding WCAG Level from Karl Groves can help you come to grips with WCAG priority levels.

 

Flexbox Tutorials from Web Designer Depot (Video)

I mentioned the first of these videos when it was first published at Web Designer Depot. The second one has come out now and I wanted share them both here, rather than just adding them as useful links. They are good tutorials and I think the two of them together would make a nice classroom experience and introduction to flexbox.

I’ll repeat my note about the vendor prefixes, since this technique doesn’t work in all browsers yet. 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;

If I were using this in a classroom exercise, I would couple it with less generic containers for the various parts of the content – the tutorials use divs for everything. HTML5 sectioning elements with ARIA landmark roles would be a good replacement for the divs.

Useful Links: Forms, Numbering, SEO

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.

Useful links: heading markup, CSS Zen Garden, Adobe again, flexbox

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;

 

Review: The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript

[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 cover

The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript by Peter Gasston is from no starch press (2013).

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.

  1. The Web Platform talks about HTML5 and new best practices, CSS3 and beyond, and CSS preprocessors.
  2. Structure and Semantics deals with new elements in HTML5, WAI-ARIA, semantic markup, microformats, RDFa, microdata, data attributes and web components.
  3. Device-Responsive CSS provides information about media queries, adaptive and responsive design, viewport relative length units, and responsive images.
  4. New Approaches to CSS Layouts talks about multi-columns, flexbox, and grid layout.
  5. Modern JavaScript looks at new features in JavaScript, JavaScript libraries, and polyfills and shims.
  6. Device APIs covers a whole bunch of APIs from geolocation to drag and drop as well as information about PhoneGap and Native Wrappers.
  7. Images and Graphics includes SVG and canvas.
  8. New Forms takes you through new input types, new attributes, datalists, on-screen controls, form validation, constraint validation and css for forms.
  9. Multimedia deals with media elements, media API, and media events.
  10. Web Apps talks about various kinds of apps and tools for creating them as well as application cache.
  11. The Future goes through some really interesting ideas that may become reality in the future such as decorators, the shadow DOM, regions and exclusions in CSS and more.

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)

Useful Links: Style Tiles, Posing, Video Slides

In a comment yesterday, Terry Morris mentioned Style Tiles. I was so impressed with this website that I wanted to add it here as a useful link, mostly so I wouldn’t lose track of it and because it is worth sharing. Thanks, Terry.

Stand up straight! Put your shoulders back! Yeah, I hear my mom, too. Whitney Hess reports that How We Pose Shapes How We Feel. She says, “It turns out that the way we sit and stand, the poses and postures we position ourselves in, have an enormous biological and emotional impact on us.” Or as Sheryl Sandberg might say, sit at the table and lean in.

This is a new idea. Video Slides that can create a presentation from a series of videos.