Webdesigninformer.com

Adactio Go to the source

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

Cameron Moll Go to the source

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

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

Cameron Moll Go to the source

Don’t Expect Applause : Seth Godin: If your work is filled with the hope and longing for applause, it’s no longer your work—the dependence on approval has corrupted it, turned it into a process where you are striving for ever more approval. Who decides if your work is good? When you are at your best, you do. If the work doesn’t deliver on its purpose, if the pot you made leaks or the hammer your forged breaks, then you should learn to make a better one. … Read the rest here

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

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

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

Eric Meyer Go to the source

So HTML5 allows you (at the moment) to create your own custom elements. Only, not really. Suppose you’re creating a super-sweet JavaScript library to improve text presentation—like, say, TypeButter —and you need to insert a bunch of elements that won’t accidentally pick up pre-existing CSS. That rules span right out the door, and anything else would be either a bad semantic match, likely to pick up CSS by mistake, or both. Assuming you don’t want to spend the hours and lines of code necessary to push ahead with span and a whole lot of dynamic CSS rewriting, the obvious solution is to invent a new element and drop that into place. If you’re doing kerning, then a kern element makes a lot of sense, right? … Read the rest here

Snook Go to the source

I remember a couple years ago speaking at An Event Apart and mentioning how I don’t use the definition list. I may have said it a few times, to the annoyance of the audience. When pushed on why I don’t use definition lists, I mentioned that screenreaders read out that a term is equal to a definition. Somebody tested and confirmed with me afterwards that his particular screenreader did in fact read it out in a way that would be awkward if people were to use them. (Alas, I can’t remember exactly what it was that the screenreader actually announced.) It’s been a couple years since that fateful day and the situation came up at work. A co-worker was using a definition list and I mentioned the accessibility issue. … Read the rest here

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

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

Eric Meyer Go to the source

There’s a subtle aspect of CSS descendant selectors that most people won’t have noticed because it rarely comes up: selectors have no notion of element proximity. Here’s the classic demonstration of this principle: body h1 {color: red;} html h1 {color: green;} Given those styles, all h1 elements will be green, not red. That’s because the selectors have equal specificity, so the last one wins. The fact that the body element is “closer to” the h1 than the html element in the document tree is irrelevant. … Read the rest here

Snook Go to the source

I was making a change to a page that needed to pull from a remote API and make changes to various parts of the page. Sounds like the time to pull out jQuery and Ajax, doesn’t it? Instead, I just used old fashioned JavaScript. Actually, I used new fashioned JavaScript. Browsers haven’t stood still in the advent of libraries and frameworks. As a result, we can take advantage of those features when we need to bake in a little extra… Read the rest here

Andy Budd Go to the source

I was really disappointed to see a recent post from somebody I admire and respect defend the validity of the new UX Developer job title that has been cropping up of late. As well as being misleading, the title, UX Developer has implications that are damaging to the field of User Experience and will hasten the current devaluation of the term. Despite what many newcomers to the industry may think, User Experience Design is a well-defined specialism as distinct from visual or interface design. The practice of user experience design is a specific field of study with its own books, conferences, membership organisations and college courses. User experience designers therefore have a distinct set of skills and practices that form the core of their profession. That being said, user experience designers don’t own these practices any more than developers own the ability to code up wireframes. … Read the rest here

Snook Go to the source

My mind is on CSS quite a bit these days. At Shopify , I’m jumping into projects that already well under way. As a result, it’s been a great way to look at what I wrote in SMACSS and see how applicable it is to yet another project. (As if Yahoo! wasn’t already enough of a testing ground.) With Yahoo!, I (and a team of people) were writing the CSS from scratch and creating our mental map of the project as we went along. Jumping into the middle of a project as I am at Shopify, I have to try and figure out why things are done the way they are. Here’s an example of something that I ran into in the CSS: #loading-header .loading { background: url(spinner.gif) no-repeat 0 0; } [...separated by a few pages of code...] #content { [...separated by more code...] #loading-header { display:none; } .row { display:block; } &.loading { #loading-header { display:block; } .row { display:none; } } } The loading class has a spinner… Read the rest here

SimpleBits Go to the source

Yesterday, a copy of my latest book arrived in the mail, the Third Edition of Bulletproof Web Design . The first edition came out back in 2005, and I’ve been revising it every few years. This latest edit was a bit larger than the 2nd because so much has changed. HTML5, CSS3, Responsive Web Design—all of these things dovetail nicely into the core bulletproof concepts from the original book. If you have the 2nd edition, the new version is likely not a necessary upgrade (New Riders probably loves me for saying that). Meaning, the guidelines for building flexible websites are still there, but a lot of the code and some of the examples have been brought up to speed. … Read the rest here

Hicksdesign Go to the source

Todays 24ways article is Displaying Icons with Fonts and Data- Attributes , taken partly from Chapter 6 of the upcoming Icon Handbook , but rewritten to fit to the 24ways format. Instead of using the traditional route of PNG s, web fonts offer a scalable and resolution independent solution. Combined with HTML5 data attributes, you can create one CSS rule to style them all in one go. This article covers both the advantages and disadvantages of the technique. Thanks must go to Drew Wilson who helped me understand how to use data attributes. He created Pictos the excellent icon font used in the article, and his experience in making Pictos was a valuable source of research… Read the rest here

Jason Santa Maria Go to the source

These upcoming Kafka covers by Peter Mendelsund are really lovely. These beautiful stark shapes and colors make them unexpected, but also totally on the mark. Also, they make use of FF Mister K , a typeface based on Kafka’s handwriting. That’s one of the few appropriate uses for a handwriting font, and it really works here. via Jacket Mechanical … Read the rest here

Adactio Go to the source

I’m on a workshopping roll. Fresh from running my Responsive Enhancement workshop in Belfast , I’m now heading to Düsseldorf for Beyond Tellerand where I’ll be running the workshop on Sunday (and if you can’t make it, don’t forget that you can book the workshop for your own workplace too). As part of the process of building a responsive site from the content out rather than the canvas in, I talk about beginning with the individual components divorced from any layout context. Or, as Mark puts it, “start with the bits.” That’s the way I’ve been starting most of my projects lately: beginning with the atomic units of content and styling them first before even thinking about layout. This ensures that those styles are extremely robust—because they don’t depend on any particular context, they can be safely dropped into an part of a part. I’ve been calling this initial collection of markup snippets a pattern primer… Read the rest here

Eric Meyer Go to the source

Back on Tuesday, A List Apart opened the 2011 edition of The Survey for People Who Make Web Sites , the fifth annual effort to learn more about the people who work in the web industry. If you haven’t taken it yet, please do so! It should take about ten minutes I’m proud to have been a part of this effort since its inaugural launch back in 2007. It’s a major undertaking, mostly in analyzing the data and turning that into a detailed report, but it’s more than worth the time and effort. Before the Survey, we really didn’t know very much about who we were as a field of practice, and without it we wouldn’t have as clear a picture of who we are today. There have been growing pains, of course, chief among them UCCASS , the survey software we’ve been using since the outset. Its limitations and lack of updates finally pushed us to find another platform, and we chose to move over to Polldaddy . … Read the rest here