In the course of expanding my documentation of color values, I failed to find a table that listed all 147 SVG-and-CSS3-defined keywords along with the equivalent RGB decimal, RGB percent, HSL, hexadecimal, and (when valid) short-hex values. There were some tables that listed some but not all of those value types, and one that listed all the value types (plus CMYK) along with a few hundred other keywords, but none that listed all of the CSS keywords and value types. And none that I saw used precise values for the RGB percent and HSL types, preferring instead to round off at the expense of some subtle differences in color. So I created my own table, which you can now find in the CSS area of meyerweb . Most of it is dynamically generated, taking a list of keywords and RGB decimal equivalents and then calculating the rest of the values from there. … Read the rest here

Jeffrey Zeldman, in a beautifully written piece titled, “ Web Design Manifesto 2012 ”: This redesign is deliberately over the top, but new ideas often exaggerate to make a point. It’s over the top but not unusable nor, in my opinion, unbeautiful…. We can’t keep designing as we used to if we want people to engage with our content. We can’t keep charging for ads that our layouts train readers to ignore. We can’t focus so much on technology that we forget the web is often, and quite gloriously, a transaction between reader and writer…… Read the rest here

There’s been quite a brouhaha over the past couple of days around the subject of standardising responsive images. There are two different matters here: the process and the technical details. I’d like to address both of them. Ill communication First of all, there’s a number of very smart developers who feel that they’ve been sidelined by the WHATWG . Tim has put together a timeline of what happened : Developers got involved in trying to standardize a solution to a common and important problem. The WHATWG told them to move the discussion to a community group. … Read the rest here

The fact that this: h1 {color: red;} h1 {color: green;} …results in green h1 text, but this: h1 {background: url(red-wave.gif) repeat, url(green-wave.gif) repeat;} …results in a red wavy h1 background does my head in every single time . And it’s the same with text and box shadows, too! In cases where backgrounds or shadows overlap, the first one you write “wins”, by virtue of being “in front of” the background images that are listed after it. I know that font stacks are also done in order of most-to-least preferred, but I don’t see them as being equivalent. The reason is that a font stack is a list of fallbacks—use this face unless it can’t render the glyph or doesn’t exist, in which case try the next one in the list, etc., etc. Multiple background images and multiple shadows, on the other hand, are not a series of fallbacks… Read the rest here

I’m working my way through a rewrite of Two Salmon (more on that anon), and I just recently came to the ch unit. Its definition in the latest CSS Values and Units module is as follows: ch unit Equal to the advance measure of the “0″ (ZERO, U+0030) glyph found in the font used to render it. …and that’s it. I had never heard the term “advance measure” before, and a bit of Googling for font “advance measure” only led me to copies of the CSS Values and Units module and some configuration files for the Panda 3D game engine . … Read the rest here

Kathryn Schulz, as quoted by Maria Popova : If we have goals and dreams and we want to do our best, and if we love people and we don’t want to hurt them or lose them, we should feel pain when things go wrong. The point isn’t to live without any regrets, the point is to not hate ourselves for having them… We need to learn to love the flawed, imperfect things that we create, and to forgive ourselves for creating them. Regret doesn’t remind us that we did badly — it reminds us that we know we can do better.” … Read the rest here

Earlier today Erik Spiekermann made mention of FF Chartwell , and, at least conceptually, it’s pretty fantastic. Similar to the way icon fonts replace keyboard characters with icons, FF Chartwell uses alphanumeric characters to generate beautiful charts on the fly. To my knowledge, however, this works only in software programs and can’t be embedded in web pages. Update: It can be embedded . It’s possible to embed it, but the current EULA doesn’t allow it. Demo by Yaron Schoen who says , “Besides the FOUT which was really hard (impossible?) to remove, it was glorious.” The family includes “weights” for creating bar, line, radar, pie, rose, and ring charts… Read the rest here

TL;DR: It’s challenging. Some of you know we homeschool our four children. Their U.S. grade levels range from 1st to 6th grade. … Read the rest here

It may be that from the ashes of vendor prefixes will arise a new way forward. As proposed by François Remy , vendor tokens would serve the same basic purpose as prefixes with a different syntactical approach, and with at east a couple of extra benefits. Instead of prefixing properties, you’d instead add vendor tokens to the end of a single declaration, much as you do !important (which of course we never ever use, amirite?). For example, you might write: border-radius: 1em !webkit-draft !moz-draft !o-draft; That’s it. The prefixed alternative, of course, runs to multiple lines and has spawned a whole subindustry of framework plugins and mixins and what-all just to take the repetitive authoring burden off our shoulders. I’ve been contemplating this proposal all morning, and perhaps not too surprisingly I’ve come down in favor of the idea. … Read the rest here

User research is an extremely powerful tool (or set of tools) for understanding customer needs and behaviours. As digital projects grow in size and complexity, the risk of building the wrong thing becomes an increasing danger. So it makes sense to spend a portion of your budget to ensure that you’ve done the due diligence and are investing wisely. Marketing teams have known this for years, so few company’s would dream of launching a product or service without first understanding the market and ensuring product-market fit. However for some reason this hasn’t filtered into the world of digital products… Read the rest here