person:chris coyier

Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency | Smashing Coding
http://coding.smashingmagazine.com/2012/08/13/coding-qa-with-chris-coyier-responsive-sprites-responsive-f

This is a hot topic lately because of the rise in “retina” displays. But really, this problem has been building up for a while. Us Web designers often work in “pixels”, for instance, setting the width of an image: img { width: 100px; }. But what is 100px? It’s been a long time since that literally referenced a pixel on the screen. These days it’s a rather arbitrary measurement. 100px ends up being around an inch on a physical screen, regardless of its resolution.

Powerful New CSS- and JavaScript-Techniques (2012 Edition) | Smashing Coding
►http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniques

Since our last round-up of useful CSS techniques, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage.

Some of those techniques are just for showing off, others are well-worth revisiting.

#CSS

Interactive CSS3 Lighting Effects
http://attasi.com/labs/ipad

3D transforms are awesome, but they’re even cooler with lighting effects! The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms. (Best in Safari)

(de ►http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniques)

What’s Going On In The #WordPress Economy ? - Part 1 | Smashing WordPress
http://wp.smashingmagazine.com/2012/04/12/wordpress-economy-part-1

papier assez intéressant sur la mom-&-pop économie qui s’est construite autour d’un #logiciel_libre

#Icon #font #accessibility
http://fvsch.com/code/icon-font-a11y

When we use common image replacement techniques, including the smart ones, the user agent doesn’t know what’s the relation between the text content and a #CSS #pseudo-element or background. This is not even a “CSS is for decoration” issue. It’s a “your code lacks semantic information” issue

Technical Web Typography: Guidelines and Techniques
►http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques

The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?

Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read?

#webdesign #webfonts #typographie

Technical Web Typography: Guidelines and Techniques - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques

The Web is 95% typography, or so they say. I think this is a pretty accurate statement: we visit websites largely with the intention of reading. That’s what you’re doing now — reading. With this in mind, does it not stand to reason that your typography should be one of the most considered aspects of your designs?

Unfortunately, for every person who is obsessed with even the tiniest details of typography, a dozen or so people seem to be indifferent. It’s a shame; if you’re going to spend time writing something, don’t you want it to look great and be easy to read?

Technical #Web #Typography: Guidelines and Techniques - Smashing Magazine
►http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques

How to choose a font face
How to choose a font size
Using a grid
Working out the measure
Vertical rhythm and baseline grids
Choosing a typographic scale
How to use proper quotes
How to use proper dashes
How to use proper ellipses
How to hang punctuation
Dealing with images in grids

(via @RealET)

15 Creative Premium Portfolio Templates with PSD and HTML in Minimum Cost | DJDESIGNERLAB
http://djdesignerlab.com/2011/03/10/15-creative-premium-portfolio-templates-with-psd-and-html-in-minimum-