the singularity of being and nothingness
Posts tagged CSS
Emails in Outlook 2010…Ugh.
Aug 14th
At work, we recently kicked off an effort to make sure that all of the emails coming from our applications are Outlook 2010 compliant…meaning that they render in a reasonably acceptable manner–at least as emails go. On the surface, this doesn’t appear to be that big of a deal. However, for us it is, because the prior version for which we tested emails was Outlook 2003.
So what’s the problem? Well, if you didn’t hear, Microsoft made the brilliant move of deciding to switch their email-rendering engine from IE (Outlook 2003 and before) to Word. In short, this means a massive decrease in support for HTML standards, CSS support, etc. In fact, the move is so counter-standards that an entire movement has been started to try to pressure Microsoft into fixing the problem…so far, nothing.
But arguments about the “smartness” of this change aside, the facts on the ground still require that my co-workers and I fix some emails. So far, my experience has been that in terms of layout, not a huge amount of revision has been necessary. What has caused issues, however, is the lack of CSS support. If you ever find yourself needing to get an email looking decent in Outlook More >
On Becoming a Better Web Designer – 7th Detour
Aug 19th
Okay, I'm going to take a bit of a detour here from the "series-in-a-series" that I've been doing to quickly blog about an invaluable CSS trick that every designer needs to use as often as possible.
So here's the scenario: You have a blog that's going to have pictures in it. The thing is, you want to be able to float the images either to the right or to the left with some margins applied. Oh yeah, you also want to have, say, seven different border-color options. And did I forget to mention that you also want different padding between the image and border?
What to do, what to do? When I first started, I would have sat down and mapped out a class for each "scenario." For example, for the left-blue-2px-bordered option, I would have created something like "img.leftbluetwoborder." While this will, of course, work, it's not usable. Who can remember "leftbluetwoborder", not to mention the 23 other similarly named classes? So what's the alternative to this terrible mess?
Enter what I call "class overloading." What is this? Simply, it is applying more than one class to whatever you're applying classes to. So if I have an image with "class='myimage'", with More >
Quick-'n-Dirty Thumbnail Image Sizing
Aug 12th
Okay, so at some point as a web designer you're going to come across a project where you have to design some kind of gallery with image thumbnails.
In an ideal world (e.g., Photoshop), all of the thumbnails will be precisely the same size, so plugging them into nice little skins (the "pretty" that you put around them) is cake. Unfortunately, the real world ain't like that. In the real world, you have hundreds of thumbnails to deal with, none of which will probably ever be exactly the same size.
Now, of course, the thumbnail skins still have to work. So what should you do?
The first thing to NOT do is hard-code the "width" and "height" attributes of the <img> tag. Super bad idea. Okay, not a TERRIBLE idea, but it will inevitably lead to some funny looking thumbnails as the img tag will stretch or shrink your image to fit these values.
So what's the alternative? Well, ideally, you'd be using Coldfusion 8 and could use the super-cool built-in image manipulation tools to properly scale and crop every image to be the same size. Ah, but we're not in an ideal world!
The second alterative I've found that works to a limited More >
On Becoming a Better Web Designer: Default CSS
Jul 5th
When I got into web design, table-based design was already anathema. So for me, CSS was the most natural thing–it was the ONLY thing I knew. CSS made sense to me, and I really liked how I could granularly control the behavior of everything that I slapped on a web page.
One downside to this, however, is that I went a bit overboard. To get this control, I went with what I thought was the best route–uniquely class EVERYTHING. This, of course, led to bloated stylesheets and difficult to maintain code.
My problem? I failed to take advantage of default element CSS behavior. What do I mean? Well, consider the <h1> tag. By default, this tag is a block level element which means it will take its own "line" and force content which follows it to appear below. The same is true with the <p> tag. So what's the point? Well, let's say we use good semantics and have our page title be wrapped in <h1> tags. If we simply use the default behavior, the title of the page will be separated from any content that follows it–that makes sense, so why not use it?
And <p> tags? As most are aware, More >
