It’s arguable whether or not UX folks need to know or understand CSS. Personally, when I design wireframes or mockups…I design for the browser. I like getting as close to the final product as possible, with click actions, scrolling, and all other benefits you get from seeing and experiencing the mockups on the browser level that you just can’t get with paper or photoshop mocks. I feel it helps both programmers and business folks conceptualize your UX and design ideas more effectively.
Also, I come from the school of table based layout. To get just the perfect spacings and design I need, tables and the ability to nest tables work pretty good. From a design and UI standpoint…I feel traditional tables based layouts can get me just about 90% of what I need as a UI guy.
So why CSS? Trust me…like anyone, I’m adverse to change, but picking up CSS skills is definitely worth the learning curve. Without going too much in depth, first CSS encourages semantic markup. In summary, a well designed semantic site further separates code/data from presentation layer (benefits of which should be welcomed and understood by all designers). It allows for easily transformable design on the fly (ala the famous CSS Zen Garden). And in these days where the medium can be as varied from browsers to mobile devices to API’s, this separation is crucial.
Also, a well designed CSS markup clearly defines each element on the page, and having semantic naming conventions on site elements can go a long way in working with a team of developers and even with ongoing site maintenance. If designers and UI people worked in a bubble, perhaps tables would be pretty sufficient. But in the real world, where projects include multiple designers and programmers, it’s important to have a system to define and understand every element on the page as unique.
I must admit, coming from the old school, I’m still learning to incorporate CSS into my best practices…yup still intermingling a lot of tables into my CSS due to speed of development vs learning something new…but you gotta start somewhere. Anyways…here’s what’s in my toolbox to help understand and develop CSS better:
Top 5 Tools for Working With CSS
1. Dreamweaver (been using this long before even UltraDev! Hard to let go of this great WYSIWYG editor…but it needs to be updated with better CSS support and make it run faster for Macs!)
2. CSSEdit (a highly popular CSS IDE for Macs)
3. Firebug (an awesome Firefox add-on to view CSS on any website. You can even manipulate website on the fly by editing their CSS. A great way to see other designer’s best practices.)
4. Web Inspector (the Firebug alternative for Safari)
5. CSS-Tricks.com (a great video tutorial/podcast site to get you started step-by-step with CSS)
Recent Comments