CounterMarch Systems Blog - css

Yahoo UI CSS

Fri, 07 Sep 2007 01:14:00 -0400

In response to my post from yesterday whining about IE. I feel it's my duty to follow up with some links to tools that help mitigate a good bit of that frustration.

Yahoo has been very aggressive about releasing and updating a number of UI components. These components assist you with drag and drop. auto complete. tablular data and a rich text editor (among many others). Their javascript libraries implement cross-browser support for a bunch of useful functions including ajax-type activities.

But the ones I am finding to be most useful are the CSS YUI tools. CSS is a major pain in the rear no matter what browser you're trying to work with. Peter Bell asked the question this morning whether it was even worth the pain of tweaking and refining a CSS-based layout.

A number of commenters fired back some great points regarding SEO and accessibility. I never really bought in to the whole "change one file and your entire site looks different" argument - whenever we do a layout revamp. we create an entirely new stylesheet AND base markup.

Curiously missing. though. was any mention of the fantastic running start that the Yahoo CSS Reset. Base. Fonts and Grids stylesheets will give you!

Ever since I discovered the Reset stylesheet. life with CSS has been much. much easier. By cleaning up the layout differences between the major browsers for me. the time spent making things work in different browsers is effectively zeroed out as well. The Base stylesheet adds a baseline style to all typical HTML elements - consistent styles that make it far easier to add color and set a decent layout.

"Fonts" assists with making the text consistent. a constant source of irritation for me. I don't like the idea of using a pixel-based font size (and it's not considered a best practice anyway). so using the "Fonts" stylesheet makes the percentage-based text sizes work the way they are supposed to. If you happened to see our site last weekend in IE. you would have found the text to be about 3px before the fix was applied.

The final stylesheet I have not yet used. but it would immediately address Peter's layout problems. "Grids" allows you to literally throw together a decent grid-based layout in just a few moments. Fluid and fixed-width layouts are supported in any configuration you can dream up. I almost trashed our layout to restart with YUI Grids. Probably will next time.

Best idea yet: a cheat sheet for these four stylesheets. Very convenient and currently hanging next to my desk.

Yahoo allows you to serve up these files from their servers. taking advantage of their (likely) faster servers and the performance boost that results from the files likely already being in your browser cache. The CSS is available in three forms too - compressed (crazy small). normal (readable) and debug (well commented and an education unto itself). Read a debug version of any of these files and you'll be amazed at the kind of effort Yahoo put in to these resources.

So if you couldn't tell. I'm a big fan of the YUI tools. Try them out - I bet it'll make your life easier too!

If you were at all curious. the Reset. Base and Fonts stylesheets are currently applied to our site. Yahoo

XRAY for IE

Wed, 22 Aug 2007 10:43:00 -0400

The worst part about dealing with IE is CSS support and trying to figure out why the *(&@$ that element isn't where it should be.

Enter XRAY. Like its cousin for Firefox. this add on allows you to see details about any element on the page.

This should be a useful tool for finding your way out of the hacked up box model that IE represents. I use XRAY. Firebug and View Source Chart in Firefox on almost a daily basis. Firebug is AWESOME!

CFM + CSS = blind spot

Tue, 17 Jul 2007 16:06:00 -0400

From the "Nope. that's not gonna work" category:



   
   Other - Please Specify:

Apparently we're now combining CFML and CSS into one large meta-language that means something somewhere. but results in one very nice compiler error on the server side. The saddest part of this is that it took me a full 10 minutes to catch it. Clearly. one of those days...

HTML and Outlook 2007

Fri, 12 Jan 2007 19:48:00 -0400

Yikes..looks like Microsoft is going to effectively cripple HTML-based e-newsletters received by people using Outlook 2007. They are switching the rendering engine from IE6 (lousy) to Microsoft Word (craptacular). A nice rundown of how nasty this is can be found here: http://www.campaignmonitor.com/blog/archives/2007/01/microsoft_takes_email_design_b.html Read it and (more than likely) weep. Considering the penetration of the Outlook bloatware. this is going to impact our mass email capabilities quite severely.

Revising Forms

Wed, 15 Nov 2006 10:54:00 -0400

I recently had to do some work on the recruitment system and as part of it decided that we were overdue for the redesign of a key data entry form. The form itself is a critical form for the entire system - it's the one that manages the recruit's biographical information. As we were developing the system. we kept finding more and more fields that needed to be added to the form. That's never a good thing when you're trying to balance functionality and usability without putting things in yet another tabbed panel. We've been hesitant to redo it because there are some who are very (how shall we put it)...resistant to change. especially when it comes to a key feature like this. I figured I better go for broke and build it. get them to review it. then roll it out. Unlike the dudes at 37Signals. I do tend to run things by users before dropping wholesale changes on them :-) Here's the old form: Hopelessly ugly - and desperately in need of a bit of design work. Using some of the techniques I blogged about on Monday. I was able to clean up the form and make some pretty significant improvements. Behind the old form was a 3 column table. The new layout is pure xhtml/css using label elements extensively. I also took this opportunity to make the required fields even more obvious. They're meeting to discuss the cosmetic change today. If they approve (which I'm sure they will). we'll probably launch it tonight. One template and a few hours can make a heck of a difference in usabilty!

CSS-ified Form Design

Mon, 13 Nov 2006 09:29:00 -0400

Anyone just starting out with CSS will inevitably run into a wall when trying to remove tables from their form layouts. Thanks to Digg for a link this morning to a great sample site: CSS based forms Lots (I mean LOTS) of great examples of how to compose a nice looking form without a table. Also has many examples of form feedback and validation methods that will be of interest to anyone. Highly recommended that you check it out!

View Source Chart

Mon, 19 Jun 2006 01:08:00 -0400

Everybody knows about the Web Developer Toolbar extension for Firefox...but not everyone knows about the "View Source Chart" extension that will pay off BIG TIME when things break in strange ways. It's awesome for showing you exactly where you deleted that closing div tag that caused your entire layout to go wonky. Not that I would know anything about such things. of course... Get it here. Thank you Jennifer Madden!!!

A new countermarch.com

Fri, 08 Jul 2005 13:22:00 -0400

Thanks to the wonders of CSS. I was able to completely restyle our existing company site in a matter of hours last night. This was done for two reasons: (a) people thought the kid on trombone was too dorky and (b) we have a big presentation to do on Saturday that is pretty important to where I see the company going. The site has to reflect who we are and what we do. There's a lot of artwork that needs to be created an inserted (including that banner...ugh. that banner!) but I think overall it's an improvement.

From design to CSS

Sat, 26 Feb 2005 20:55:00 -0400

I know this isn't a new rant from me. but i've been working on a site layout today for a client. It was decided long ago to go full CSS/XHTML for the layout. No problem...I like it! Problem is there's no great or easy way to translate a nice Photoshop layout into a CSS template. It takes time. lots of work. a pretty good amount of thought. and above all frustrating-beyond-belief attention to browser workarounds. ARGH! (thanks...i needed to get that out) So instead of working that way. I found a somewhat comparable layout to start from and am adjusting it to meet the approved design elements. Much easier. Thanks. CommunityMX!