Propaganda Party » CSS

IE6 and My Blog Redesign

admin — Sat, 11 Apr 2009 16:15:59 +0000

Hey all (or all two of you)! I’m in the process of doing my yearly blog redesign and I’ve made the big decision not to support IE6 when the redesign is deployed. I’ll still continue to hack away for clients who insist that their IE6 crowd stays pleased but I figure the small amount of visitors I get overall probably aren’t using IE6 to begin with and the few who are, will still be able to get the information, it just won’t be pretty (they’ll also get a nice little message at the top of the page urging them to upgrade).

The Redesign

In the redesign I am trying something new for me that will, hopefully, help with some IE6 issues off the bat. First, I’m employing a modified version of Eric Meyer’s reset.css–I’m going to zero everything out and start from scratch. Second, I’m going to use the strict XHTML doc type opposed to transitional–IE6 is quirky enough without putting it in quirks mode. Third, I’m going to attempt to make the layout as semantic as possible–my goal is to use less div’s. Finally, I’m wading into the position:relative and position:absolute waters. I’m using some shadow effects for my design and instead of using a lot of drop-shadowed graphics, I figure if I layer things, I need two graphics instead of ten (not a real number, just tossing it out there). Another thing I’m going to attempt to do is change the way I name things. I read a great article written by Andy Clarke called “More on developing naming conventions, Microformats and HTML5” and am going to attempt to use his model for my mark-up.

The redesign will be a learning process for me and that is a good thing in my mind. I’d say I have a fair handle on CSS, except for the matters I stated above, and it’s about time I master those as well. It’s been an interesting proposition thus far and I’m enjoying and frustrated by it in equal parts. Hopefully, things will work fairly well in IE6 (except for the PNG graphics that allow the transparency I’ll need) without creating a separate stylesheet or hacking my way to get an eight year old browser to behave as current browsers do.

A Quick Tip for Large Background Images

admin — Wed, 01 Apr 2009 01:28:03 +0000

I have to admit I didn’t come by this tip by way of my own epiphany but rather from the Nike soccer (football) web site via Smashing Magazine. I’m currently working on a design where the background is one large image. I considered using a jQuery slider script to keep all the content on the same page however I have several issues with using that method, the first and main issue being usability. As designer’s or coder’s, usability should always be the first and last thought for any project.

How I’ve decided to solve one of the issues is to use this bit of code I spied in Nike’s CSS code.

body { background:#fff url(images/your-image-name.jpg) fixed no-repeat;

It’s the fixed part that makes this beautiful and so very smart. The content will scroll but the background stays in place. I love it when a solution to a problem falls into my lap like this. Now I can get rid of the sliding panel JavaScript that I was going to use and just have sections that are linked via an anchor.

CSS Superdouche—Not Leaving My CSS Feeling So “Fresh”

admin — Thu, 25 Jan 2007 22:57:32 +0000

With a fair amount of caution and curiousity, I tried this service with a horrible name, CSS Superdouche. According to the site:
This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names.

After deciding to give it a whirl, I noticed two things—first it reduced my blogs’ CSS file by a whole 1k (which isn’t much) and secondly, when I implemented the “cleansed” CSS file my layout was, well, jacked up! Uh-oh! So I quickly pasted my original CSS back in place and all was right with the world and my blog. Apparently the tool isn’t as intelligent as claimed.

I don’t know why it messed up my sites’ layout but it did and that was enough for me to confirm that caution needs to be used when implementing these kinds of services. Who knows, maybe I’m writing my CSS incorrectly in the first place—though it does validate—but if a tool that is “dugg” by over 1,000 people is going to be offered, the developer needs, at the least, have a disclaimer along with it—something that reads use at your own risk.

If you are going to use this kind of service, please be sure to back up your original file because more than likely, you’re going to need it.

Be Careful When Calling Yourself a Professional “CSS Architect”

admin — Thu, 18 Jan 2007 10:00:44 +0000

I try to be as magnanimous as possible when it comes to other designers and web design professionals being aware that we aren’t all on the same level. I know I still have a lot to learn but also know I’m ahead of the class compared to some. However, sometimes I come across things that raise my ire—this is one of those things.

If you are going to hold yourself out as a professional designer and dispense advice, you should be following that same advice on your own site. Maybe I’m just old-fashioned but walking the walk and talking the talk are two very different things—especially in a professional environment and community that doesn’t always get the respect it deserves from people outside the profession.

As I’d imagine most web professionals do, I check out the “competition.” I do this by surfing the abundant CSS galleries and award sites as well as keeping an eye on what people bookmark on del.icio.us. When I see something that a lot of people bookmark, I tend to check it out. I’m a big fan of lists because they’re easy to scan and digest. So I was excited to visit “10 CSS Tips from a Professional CSS Architect at 72 dpi In the Shade.”

The first sentence of the authors’ post was “I have been working with web standards based design for many years now and I see many rookie mistakes.” I continued reading on and found some decent tips so I wanted to leave a comment and couldn’t. I thought maybe it was a Firefox glitch so I tried it in Safari, no go—the submit button just didn’t work for me on a Mac (didn’t try it on Windows). Out of curiousity I decided to validate the site with my handy, dandy “Web Developer Toolbar” extension for Firefox—62 errors and warnings. In other words, the site failed validation therefore is not standards compliant. I’ll admit, the majority were created by using a tag I’ve never seen before—. I Googled it thinking maybe it was a new tag and came up with nada.

I’m a firm believer in walking the walk and the site just doesn’t do it. A bit of obvious advice to the author—maybe he needs to use a few of his own tips himself and make sure his site is indeed standards compliant. Who knows, maybe the author wasn’t responsible for designing the site but it still leaves me wondering if his advice should be given with such a grand display of “professionalism” or use a simple disclaimer saying that he didn’t design the site. But hey, I’ve been accused of taking web standards too seriously and making mountains out of molehills.