Posts Tagged web

A Precise CSS3 Color Table

Eric Meyer Go to the source

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

“This redesign is deliberately over the top.”

Cameron Moll Go to the source

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

Vendor Tokens

Eric Meyer Go to the source

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

Hillman

Jason Santa Maria Go to the source

Hillman Curtis, artist, designer, filmmaker, Brooklynite, bicyclist, friend, and explorer passed away last week at the young age of 51. I put off writing about him because I couldn’t find the words. Everything I would try to write felt so insignificant for such a significant man. Thankfully, as is usually the case, I found my words among friends. The folks over at Happy Cog have collected some thoughts on Hillman and invited a few of us staff alumni to share too. Below is my contribution: I followed Hillman’s work when I was first getting started in design. … Read the rest here

Linear Gradient Keywords

Eric Meyer Go to the source

Linear gradients in CSS can lead to all kinds of wacky, wacky results—some of them, it sometimes seems, in the syntax itself. Let me note right up front that some of what I’m talking about here isn’t widely deployed yet, nor for that matter even truly set in stone. Close, maybe, but there could still be changes. Even if nothing actually does change, this isn’t a “news you can use RIGHT NOW ” article. Like so much of what I produce, it’s more of a stroll through a small corner of CSS, just to see what we might see… Read the rest here

Element Customization

Eric Meyer Go to the source

A couple of weeks back I wrote about customizing your markup , but I got an important bit wrong and while I’ve corrected the post, I wanted to clear up the error in detail. I said that you wrap portions of your document (or the whole thing) in an element element and use the customized element inside. This is incorrect , and actually a very bad idea. In fact, you define your customized elements using an element element and then use the customized elements later in the document. Something like this: <element extends="h1" name="x-superh1"> </element> <h1 is="superh1">UltraMegaPower!!!</h1> <h1>Regular Old Power</h1> The line break inside the element element isn’t required—I just threw it in for clarity. … Read the rest here

Whitespace in CSS Calculations

Eric Meyer Go to the source

I’ve been messing around with native calculated values in CSS, and there’s something a bit surprising buried in the value format. To quote the CSS3 Values and Units specification : Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. In other words, two out of four calculation operators require whitespace around them, and for the other two it doesn’t matter. … Read the rest here

CoffeeConsole: A Chrome Extension

Snook Go to the source

Harry Brundage , a co-worker of mine at Shopify , does a lot of CoffeeScript development and said he would love to be able to do CoffeeScript right from the console in Chrome’s Web Inspector. I asked Paul Irish , a “dev relations guy” at Google, to point me in the right direction on building just such a thing. The result of today’s pet project is CoffeeConsole , a Chrome extension that adds a new panel inside the Web Inspector. Type in any CoffeeScript and then hit the run button (or hit Command-Enter or Shift-Enter). The code will be compiled into JavaScript and then run in the context of the current window… Read the rest here

Transiently Damaged PDF Attachments

Eric Meyer Go to the source

I have this very odd problem that seems to be some combination of PDF, Acrobat, Outlook, Thunderbird, and maybe even IMAP and GMail. I know, right? The problem is that certain PDFs sent to me by a single individual won’t open at first. I’ll get one as an email attachment. I drag the attachment to a folder in my (Snow Leopard) Finder and double-click it to open. … Read the rest here

A Typographic Refresh

SimpleBits Go to the source

A little over five years ago, Greg Storey suggested Whitney for the SimpleBits logotype that went along with a previous brand update . I’m thankful he did, because since then it’s become a favorite typeface around these parts, eventually becoming the base for the current ‘SB’ mark. Over the next few years,  Hoefler & Frere-Jones catalog became my standard go-to font choices for presentation slides. I was hooked. Over the weekend I made some subtle design tweaks here, and some not-so-subtle type refreshing. I’m honored to be beta testing H&FJ’s forthcoming webfonts offering. … Read the rest here

Invented Elements

Eric Meyer Go to the source

This morning I caught a pointer to TypeButter , which is a jQuery library that does “optical kerning” in an attempt to improve the appearance of type. I’m not going to get into its design utility because I’m not qualified; I only notice kerning either when it’s set insanely wide or when it crosses over into keming . I suppose I’ve been looking at web type for so many years, it looks normal to me now. (Well, almost normal, but I’m not going to get into my personal typographic idiosyncrasies now.) My reason to bring this up is that I’m very interested by how TypeButter accomplishes its kerning: it inserts kern elements with inline style attributes that bear letter-spacing values. Not span elements, kern elements. … Read the rest here

Designing in the Browser is Not the Answer

Andy Budd Go to the source

The argument for “designing in the browser” seems very seductive at first glance. The web is an interactive medium that defies the fixed canvas of traditional layout tools, so why not use the browser as your primary design environment? The reason is simple. The browser was intended as a delivery mechanism with HTML and CSS a means of describing content rather than defining it (a subtile distinction I know, but an important one). As such the browser lacks even the most rudimentary tools like the ability to draw lines or irregular objects through direct manipulation. Instead this process is heavily abstracted through code. … Read the rest here

Most Web Design Agencies Suck

Andy Budd Go to the source

Over the years I’ve heard plenty of designers moan about their clients. I’ve also witnessed a recent outburst of complaints against authors and speakers on Twitter. However the group that rarely comes under fire in public, but probably should, are the mass of terrible agencies out there. Through my travels I get to speak to lots of designers and developers, and am constantly amazed by how smart, knowledgeable and engaged these folks are. … Read the rest here

The Web Ahead, Episode #18: Me!

Eric Meyer Go to the source

Last Thursday, I had the rare honor and privilege of chatting with Jen Simmons as a guest on The Web Ahead . (I’ve also chatted with Jen in real life . That’s even awesomer!) As is my wont, I completely abused that privilege by chatting for two hours —making it the second-longest episode of The Web Ahead to date—about the history of the web and CSS, what’s coming up that jazzes me the most, and all kinds of stuff. I even revealed, toward the end of the conversation, the big-picture projects I dearly wish I had time to work on. … Read the rest here

“The Vendor Prefix Predicament” at ALA

Eric Meyer Go to the source

Published this morning in A List Apart #344: an interview I conducted with Tantek Çelik , web standards lead at Mozilla, on the subject of Mozilla’s plan to honor -webkit- prefixes on some properties in their mobile browser. Even better: Lea Verou’s Every Time You Call a Proprietary Feature ‘CSS3,’ a Kitten Dies . Please—think of the kittens! My hope is that the interview brings clarity to a situation that has suffered from a number of misconceptions. I do not necessarily hope that you agree with Tantek, nor for that matter do I hope you disagree. While I did press him on certain points, my goal for the interview was to provide him a chance to supply information, and insight into his position. If that job was done, then the reader can fairly evaluate the claims and plans presented… Read the rest here

Pears

SimpleBits Go to the source

Yesterday, on stage at An Event Apart Atlanta , I announced Pears : an open source WordPress theme for creating your own markup & style pattern library. I wanted to create my own database repository of commonly used patterns and figured the tool might be useful for others as well. Breaking interfaces down into patterns has been immensely helpful in learning and re-evaluating the best possible code to implement them. I’ve just gotten started and will be adding more as I create them. But Pears isn’t about how I code these patterns—it’s a tool for creating your own . The theme is available on GitHub for those that want to chip in and make it even better. … Read the rest here

Eighteen

Adactio Go to the source

On Twitter the other day, Justin Hall wrote : hah! 18 years ago today, I posted my home page on the public web; here’s a 27 January 1994 version bit.ly/AraMW0 Eighteen years! That’s quite something. For reference, Justin’s site links.net is generally acknowledged to be the web’s first blog, before John Barger coined the term “weblog” (or Peter coined the more common contraction). If you go right back to the start of links.net, Justin explains that he was inspired to start publishing online by a 1993 article in the New York Times —he has kept a copy on his site . What’s fascinating about the article is that, although it’s talking about the growth of the World Wide Web, it focuses on the rising popularity of Mosaic: A new software program available free to companies and individuals is helping even novice computer users find their way around the global Internet, the network of networks that is rich in information but can be baffling to navigate. From a journalistic point of view, this makes a lot of sense: focusing on the interface to the web, rather than trying to explain the more abstract nature of the web itself is a good human-centric approach. When the author does get around to writing about the web, there’s a lot that must be explained for the audience of the time: With hypertext, highlighted key words and images are employed to point a user to related sources of information. … Read the rest here

Web Design Disciplines Explained Through the Medium of Dungeons & Dragons

Andy Budd Go to the source

First off let me apologise for the laboured metaphor I’m about to inflict on you, but I thought it could be entertaining to try and describe the web design industry using a medium I’m sure you’re all familiar with—Dungeons & Dragons. However I should point out that I’m no D&D expert, having played it last when I was 13. So please don’t leave comments to the line of “you got that all wrong as those character classes were changed in AD&D 2nd Edition, Unearthed Arcana.” or I’ll pull out my +2 broadsword and go Berserker on your ass. In the world of Dungeons & Dragons, characters could have a variety of professions such as Fighter, Thief or Magic-User. These professions were loosely related to a characters natural abilities. So if you were intelligent you’d be well suited to becoming a magic-user, whereas if you were dexterous, becoming a thief was a good option. … Read the rest here

Vigilance and Victory

Eric Meyer Go to the source

After the blackout on Wednesday, it seems that the political tides are shifting against SOPA and the PROTECT IP Act—as of this writing, there are now more members of Congress in opposition to the bills than in favor. That’s good news. I wil reiterate something I said on Twitter, though: the members of tech community, particularly those who are intimately familiar with the basic protocols of the Internet, need to keep working on ways to counteract SOPA/PIPA. What form that would take, I’m not sure. Maybe a truly distributed DNS system, one that can’t be selectively filtered by any one government or other entity. I’m not an expert in the area, so I don’t actually know if that’s feasible… Read the rest here

A List Apart: Issue 342

Jason Santa Maria Go to the source

The latest issue of A List Apart is one of my favorites in recent memory, and has three articles you can’t miss. In “ An Important Time for Design ”, Cameron Koczon challenges designers to be all that they can be: The web is going to increasingly shape our world and consequently our daily lives. We can either sit on the sidelines and submissively assist those who are doing the shaping or we can take a more active role in creating the future we want. This year, thanks to a spike in demand, designers have a chance to actively nudge the world in any direction they like. It’s a huge opportunity with a tiny window. Let’s not let it pass by. … Read the rest here