Design and CSS….secret techniques of the CSS Masters

So I learned 2 things tonight…there’s an awesome tool to help evaluate your css and get you on the right track for when you create new css selectors, and that tool is CSS Lint and can be found at csslint.net and is pretty cool….something else I learned is that although I’ve always thought id’s in selector’s made for faster css….I was wrong. The article that changed my thinking can be found at http://oli.jp/2011/ids/ and is genius. Well thought out, and backed up by numbers.  He used this online app for analyzing the css http://stevesouders.com/efws/css-selectors/csscreate.php and creating test cases.  Something I didn’t know, was that css selectors are evaulated right to left….definitely something to think about.  And finally….I found an interesting article on web fonts and making sure they display properly without the faux bold or italics. It comes down to adding additional references to the font-face……a possible solution if your designer is looking on his Mac and it doesn’t match what shows up on your PC…I know how picky designers can be.  Article can be found here: http://alistapart.com/article/say-no-to-faux-bold

What’s new in Design

So I’m mostly been on the other side in the web development process.  Getting PSD’s from   designers and converting them into a website.  So the latest thing I’ve been exploring is called flexible design, also called fluid design, or even responsive design and by the very technicaly term progressive linearization.  Now as far as i can tell it all revolves around tags like

@media only screen and (max-width : 360px) and (orientation : portrait)

These let the designer specify certain css tags based on a particular screen width, so you can use the same front end code base to create multiple views for devices with different screen sizes.  I love the idea…it’s way better then having to create a separate mobile website and is way more reusable.  It seems like most of them are using %’s and em’s as well for variable size text and buttons, but I’m still getting a handle on that aspect.  There are also a new css  meta language called SASS that is getting very popular and a bunch of new css frameworks that support these flexible designs, like YAML.  My next new project is converting my affiliate website http://www.bestcellphonespyapp.com/ to YAML because most of the traffic there is coming from mobile phones, and the current layout is horrid for a phone sized screen.   Let me know your thoughts and experience on the subject.