CSS-Tricks

Interview on Mactuts+

Chris Coyier — Fri, 13 Jul 2012 16:53:17 +0000

I was interviewed for a brand new Mac-focused Envato blog about my 18 years as a Mac user. If you just can't get enough I was also recently interviewed on 1stwebdesigner.

//AN_Xml:

Direct Link to Article — Permalink…

Interview on Mactuts+ is a post from CSS-Tricks

Smashing Mag CSS Q&A #2

Chris Coyier — Fri, 13 Jul 2012 16:47:34 +0000

In this one I answer questions about HTML email, baseline grids, resets, opacity issues, and more.

//AN_Xml:

Direct Link to Article — Permalink…

Smashing Mag CSS Q&A #2 is a post from CSS-Tricks

UI Pattern Ideas: Email Settings

Chris Coyier — Fri, 13 Jul 2012 16:16:34 +0000

Last week I asked people to participate in some group design thinking around a specific design pattern: email settings. This was the premise:

//AN_Xml:

Imagine there are three events that can happen in a web app that could trigger an email. We want to allow the user to decide whether or not they receive emails when those events happen.

//AN_Xml:

I looked through all the responses and these are the ones I thought were the most interesting and effective. This is not a comprehensive list. To see all responses, look through the comment thread on the original post.

//AN_Xml:

Note: I don't care about the browser compatibly of these. That's a different problem. There is always a way to get a design to work. That part should happen after the best possible solution is found.

//AN_Xml:

The Styled Toggle

//AN_Xml:

It's essentially the same as a checkbox (on or off), but the styling and ingrained text may make things more clear:

//AN_Xml:

View Pen

//AN_Xml: //AN_Xml:

This one uses a table layout:

//AN_Xml:

View Pen

//AN_Xml: //AN_Xml:

And iconography:

//AN_Xml:

View Pen

//AN_Xml: //AN_Xml:

The Don't Email Me

//AN_Xml:

These take one step back and first ask the user if they want to be emailed at all. If they don't they shouldn't need to make any individual choices. At it's simplest, it's like this:

//AN_Xml:

View Pen

//AN_Xml: //AN_Xml:

A bit fancier:

//AN_Xml:

View Pen

//AN_Xml: //AN_Xml:

The more choices there are, the more it makes sense to have an option to check all / uncheck all:

//AN_Xml:

View Pen

//AN_Xml: //AN_Xml:

Or just having a clickable "Never" option:

//AN_Xml:

//AN_Xml:View Pen
//AN_Xml: //AN_Xml:

The Finish the Sentence

//AN_Xml:

These are intentionally verbose, forcing a user to read and comprehend before altering.

//AN_Xml:

View Pen

//AN_Xml: //AN_Xml:

The Drag and Drop

//AN_Xml:

This forced interaction would likely leave little doubt to the user as to what's going to happen:

//AN_Xml:

View Pen

//AN_Xml: //AN_Xml:

Pick Three

//AN_Xml:

I said I'd pick three of what I thought the most interesting and success were, so I figured I'd pick them from different categories. Blake Pemberton, Frank Spin, and John. I'll email about the access.

//AN_Xml:

Great job, everyone.

//AN_Xml:

UI Pattern Ideas: Email Settings is a post from CSS-Tricks

Beefing Up Dull Text in WebKit

Chris Coyier — Wed, 11 Jul 2012 15:05:04 +0000

While doing a bit of cross-browser poking around on CodePen, I noticed that the font for the code editors was notably duller and weaker in WebKit browsers (Safari and Chrome) than it was in Firefox or Opera. I quite like Chrome and it was sad to me knowing that I would be spending a lot of time looking at inferior looking text, so I set about looking for solutions.

//AN_Xml:

Here's the "before" shot:

//AN_Xml:

View Full Size

//AN_Xml: //AN_Xml:

There used to be a text-shadow trick, but that has since stopped working and was actually for making text thinner, not beefier. Then there is the -webkit-font-smoothing stuff to play with. But no dice there. The value none looked gross and there was no visual difference between antialiased and subpixel-antialiased in this case.

//AN_Xml:

The answer came on Twitter, as usual!

//AN_Xml:

@chriscoyier try -webkit-text-stroke: 0.35px
//AN_Xml:
— Kevin Ennis (@kevincennis) July 11, 2012

//AN_Xml: