Loving the Web Inspector & Saving its Work
The past couple of months have been pretty intense and fast paced: a project that consisted of two interaction designers, two visual designers and three developers. A small and easy to overlook feature in the Web Inspector has actually had a noticeable impact in the way we've worked.
Saving out the CSS straight from the browser; its a bit like using a WYSIWYG editor that isn't awful.
Its as quick as editing the styles in the Elements tab as I'm sure you do a hundred times a day already, jumping over to the Resources, selecting that stylesheet and hitting Save As in the contextual menu.
Its not that I don't care about fonts and things...
We all want our work to look its best.
If you work in an agency, you probably work with designers and people who are passionate about typography, layout, colours, and so on. Really, this means you work with people who care about CSS (albeit sometimes indirectly).
I've worked on many projects where I've seen two people, typically the person in charge of typography, and a front-end developer spending hours in the Web Inspector nudging up and down the line-height values.
My experience is that any web designer worth their salt doesn't mind taking a few hours to learn the basics of CSS. I'm not suggesting we ask everyone to know about zoom:1, but if the people who make the typography styles can actually adjust the leading, kerning and sizing styles as they will be seen, then this is a good thing.
Teaching your design team the whole 'Right click, Inspect Element' thing and perhaps some of the styles below, and then asking them to save out their changes and send them straight to you for merging in can save impressive amounts of time.
font-sizefont-familyfont-weightletter-spacingline-heightmargin/paddingtext-transformcolor-webkit-font-smoothing ??
Not only does it let you get on with what you've got to do, but it allows the people who are in charge of the typography to work on it as and when they want. And thanks to this little feature, they can send you the actual code rather than an updated PSD document.
I've considered separating typography styles into its own stylesheet to make the merge process a cleaner one, but I'm sure the basics are there.
I like.