posts by tag

It’s been a while since I’ve noted some designs that I find interesting/compelling/inspirational, so here you go:

• http://sidebarcreative.com/—I flat out love their work (largely due to Steve Smith of OrderedList).
• http://www.deanoakley.com/—Very creative portfolio. While the horizontal scroll bar is often the devil in disguise to a web designer, he makes perfect use of it. Additionally, the graphics are awesome.
• http://www.projectvino.com.au/—Again, nice graphics. I’d like to see more padding around the content… it needs more space to breathe, but overall a nice design.
• http://orderedlist.com/—Of course. Steve Smith is one of my favorite designers. He just touched up his homepage a bit since he’s now a two-man shop. Nice.
• http://sessions.collectiveidea.com/—I just like it.
• http://jeffcroft.com/—Jeff Croft is a CSS mastermind. I think his site appeals to me because it makes use of the new CSS3 selectors only supported in Safari 3+ (read: make sure you look at his site in Safari 3+).
• http://www.tonygeer.com/—Easy on the eyes.
• http://www.netnova.com.au/—I’m a sucker for brown and blue.
• http://silverbackapp.com/—I absolutely love the technique to get the perspective; it’s very clever.
• Bonus logos for inspiration
• Bonus business cards for inspiration

Of course screen shots would have been much better than links, but that also requires a lot more time :-)

Theoretically, one should be able to design a site in FF, Safari, Opera, and IE7 without using hacks (IE7 being the questionable one, of course). And I’m usually able to do that, but when matching designs down to the pixel, even those browsers sometimes behave a little differently. I mentioned before how I usually approach that issue, but I think I may have found a new solution.

This is relatively old, but somehow I’ve missed it completely: CSS Browser Selector (source). It’s a smidgen of javascript that allows you to use CSS selectors (such as .ie7, .webkit, .gecko, etc) to target the imperfections among various browsers (and versions thereof). For instance:

.ie        #hdr { background-color: #111; }
.ie7       #hdr { background-color: #333; }
.webkit    #hdr { background-color: #555; }
.gecko     #hdr { background-color: #777; } 
.win.gecko #hdr { background-color: #999; }

I think the selectors are pretty self-explanatory. I’ve tested this out to some degree, and it seems to work incredibly well. I’m actually using it on a project at work. No more conditional comments! It’s pretty slick, I think.

Of course, then there are those who will say, “What if javascript is turned off?” Fine. You got me. My feeling there is, a person who browses without javascript won’t notice a few unaligned pixels, anyway. Plus, you’ve gotta draw the line somewhere, and that case is probably a foot or two past my line.

CSS alone is great, but CSS plus standard browser support would be even better. Unfortunately, I doubt that will ever happen, so we hack. I’ve finally limited my browser concerns to the following four: Firefox, Safari, IE7, and IE6 (with IE6 slowly dropping off the list).

As I’m sure you already know, the problem is mainly IE. I had high hopes for IE7, but I have to accommodate it, too. Before IE7 I used the * html hack (or “holy hack” as they call it) for my IE fixes. Since IE7 behaves differently than IE6, but is still not right, I need to attack it as a separate entity. I personally believe conditional comments to be the best alternative for this. It’s ugly, but most hacks are.

Here’s the top of (most of) the sites I build…

<link href="/stylesheets/default.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/safari.css" media="screen" rel="stylesheeet" type="text/css" />
<!--[if IE 7]>
<link href="/stylesheets/ie7.css" media="screen" rel="stylesheet" type="text/css" />    
<![endif]-->
<!--[if IE 6]>    
<link href="/stylesheets/ie6.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

It’s important to note the order, too. Always put the default styles at the top, then override them with the hacks. Oh, and in the safari.css file, just make sure your styles look like this:

/*\*/
html*ul#content-nav {
  top: 128px;
}
.
.
.
html*div#sidebar {
  margin-left: -10px;
}
/**/

And remember, in order to override behavior you have to define the selector the same way in your hacks file as it were in the default file due to specificity (ie if you have div p.errors in the default file, you can’t expect p.errors to override it since the latter has a lower specificity).

If you have other suggestions, I’m always interested in better ways to hack CSS.

A few designs I found appealing, in no particular order…

• http://www.cabedge.com/—Extremely plain, but well suited for what it is. It’s hard to miss the floating clouds and isolated introduction paragraph, which was obviously their intention.
• http://jinabolton.com/—This one is for the logo pretty much… I think it [the logo] is awesome.
• http://oaktreecreative.com/—All around great design. I love the white strip through the middle. And while it’s somewhat of a trend, I’m partial to the “one concise sentence to explain what we do” idea.
• http://www.rikcatindustries.com/—It’s a common misconception that color is required for art/designs to be appealing, but I think this site proves otherwise (as does black & white photography).
• http://www.blogonize.com/—It sort of has that “blogger” feel to it, which in a way gets old, but in a way is still nice.
• http://www.positionlab.co.uk/—The upper half of this site is what draws me in. The colors blend well and it’s kind of cool that they used a topographic map background to play off of their slogan. Simple and clean always works.
• http://9rules.com/—I love the 9rules leaf. I don’t really think of 9rules as a social network, but I guess it is. Anyway, I enjoy the main page design.
• http://www.turncolor.com/—This is another case of brown and blue and how well it works. There’s hardly anything to this site, but I think it’s a perfect blend of color. I love the “scratchiness” of the header, and the contact form is awesome. It’s hard to believe brown can be so inspirational.

UPDATE

• http://cmsthemer.com/—One more I felt compelled to add to the list.

I just came across a pretty clever way to prevent comment spam (or any web-form spam for that matter). It’s straight forward and sticks to the basics. I’m honestly surprised I’ve never thought of this before.

In order to leave comments here, you must first fill in the spam-prevention field, which basically asks, “Are you human?” Since any extra field is a pain, I’m storing a cookie for you (if you answer correctly once, chances are you’re a human forever). I realized, today, that I can essentially do the same thing without the extra field. Since humans typically fill in fields that aren’t hidden, I could have:

// somewhere in the form...
<input type="text" name="verification" id="verification" />

// somewhere in the css...
input#verification { visibility: hidden; display: none; }

If a value from the verification input is posted to the server, it must be a robotronic spambot that fills in hidden fields, which is obviously not allowed. Personally, I think that’s a pretty clean way to deal with spam. I might use it on golf trac.

I’ve come to learn that IE6 is the devil when it comes to CSS and web standards, but I had no idea it would execute JavaScript inside of a CSS file. I really enjoy min-width and max-width, and have always found it a pain that IE6 does not support it. I’m not sure JavaScript inside of CSS is the answer I’m looking for, but then again, it’s just about as good as any of the other IE hacks I’ve learned to use.

CSS3 should provide the ability to automagically uninstall IE6 and replace it with Firefox—that’s the real solution to the problem.

I’ll start off by saying I despise Internet Explorer—all versions. I mentioned my desire for a fresh site, and so over the last couple of days (mainly the weekend) that’s what I’ve working on. I only have a few more hours left, mostly on admin-ish type features (as of now, I have no way to post, edit, delete anything). I’ll save the details for the “grand opening” post.

But I do want to express my frustrations with building the layout. First, CSS is amazing; second, IE is not. I know I could ignore IE, since hardly anybody I know uses it, but it’s tough for me to accept my site not working in certain browsers. It’s an unfortunate disease.

I’ve decided on a 3-column layout (my first ever). I wanted the side columns at a static width, while the center column (the content) was liquefied. Despite what you may think, that’s not the easiest cross-browser layout to achieve—for me, anyway. So I decided on 1 of the 10,000 ways this could be done. Everything was going as I expected it to (in Firefox). Those expectations also included the layout not working in IE6. And of course, it didn’t.

So I started writing some * html hacks, and got everything aligned to match Firefox. I finished it up, pulled in some real data, and everything looked good. I was satisfied. Then I thought, “well, I had better check IE7,” just to be sure. Lo and behold, the left column was missing entirely. I was livid. Here we go again.

I stripped out all of the * html crap and made separate CSS files: a default, one for IE6 hacks, and now, one for IE7 hacks. So currently, I’m using conditional comments to load separate style sheets. What an ugly pain. The thing that bothered me the most is how IE6 was closer to being correct than IE7. For IE6, I really only had to adjust the left hand column width a bit (and a few other things, of course), but at least I could see the column. For IE7, I had to entirely change the positioning. Once I found it and brought it back, it wouldn’t re-adjust with the fluidness of the center column; it would either gap or overlay it, which was hideous.

Based on what I know about CSS, Firefox did exactly what I expected. Both IE’s did not. Granted, my CSS may not have been ideal or I should have done it a different way, IE has done nothing in the past that would let me believe it was my fault. I expected more out of IE7, not less.

In closing, here’s the status. I’ve approved the layout in the following environments:

• Windows: Firefox, Flock, IE6, IE7
• Mac: Safari, Firefox, Flock

And all is well, finally. I didn’t bother with IE on a Mac, because I figured anyone with a Mac is NOT using IE. And if they are, they’re not interested in my site :-) And now I have class tonight and tomorrow night, so that will more than likely delay progress for two more days. Blah. I’ll keep you posted.

Ever since its inception, this site has carried somewhat of a blur. I don’t know if anyone has noticed, but the combination of colors was making me feel like I needed to rub my eyes as if I just woke up. That’s a little hard on readability (even though most of you are probably coming through an RSS reader). Anyway, after class this evening, I took some time out to sharpen those dull colors just a bit. Nothing major, just a few HEX values darker in some cases. I also made a few other insignificant CSS/template changes while I was at it (such as a new comment form, clickable portfolio images, etc.). So if things are looking a little weird, you may want to refresh your browser to get rid of that dull CSS stored in your cache—just a heads up.

Much like photos, I enjoy looking at random CSS designs. And for that very reason, I have a bunch of feeds from a number of different galleries. Here are a few of the better designs I’ve come across over the last few days.

• http://www.haveamint.com/—Shaun Inman is an extremely talented graphic/web designer. He almost makes me want to use Mint, just so I can look at it (screenshots: 1 and 2).
• http://opendesigns.org/—I love green and white designs.
• http://www.peter-monte.com/—Flash based.
• http://www.younggogetter.com/—eh, it’s decent.
• http://www.justinshattuck.com/—easy on the eyes.
• http://www.goodwidgets.com/—I like the footer.
• http://www.valentinaolini.com/—a little heavy on the images, but clean nonetheless.
• http://www.futureofonlineadvertising.com/—part of the Carson Systems collection.
• http://orderedlist.com—there’s something about green on a dark background.
• http://www.drewwarkentin.com/—very clean with a splash of paint.
• http://www.reinvigorate.net/—only for beta testers, but it looks promising.
• http://whoisjengordon.com/—nice blend of colors.

I’ve been using Pixie for years now, and I don’t know how I could write CSS design something (web-related) without it. It has to be the most convenient and effective way to capture colors for a site. See a color you like? CTRL+ALT+C gives you the HTML color code for any color your mouse is hovering over. CTRL+ALT+X opens the color mixer in case you want a slight variation of that color. It has proven itself to be very handy.

This is kind of an odd way to be inspired, but it worked for me. I had to get light bulbs the other night and they just so happened to be close to the paint section. Walking by the paint aisle, with all of those snippets of colors, I thought of designing. I stopped for a minute and started matching up colors. Sometimes the hard part about designing is coming up with the color combinations that work. Having hundreds right in front of me was kind of nice. So I found a few blends that I probably wouldn’t have chosen had I not been able to randomly associate one with another; I put them in my pocket (they are free). No HEX codes, just raw colors. I think I like that approach. Maybe I’ll start a paint store.

I’ve heard of IE having difficulty with text inside of floating elements. Now, I get to deal with this problem first hand. I’ve been getting a couple of complaints about the text on my site not showing up in places until you select it or hover over it. I know this problem is related to the CSS and floating elements, but I don’t know how to fix it (or if you can). I’m guessing IE7 works a little better, but there are still a lot of people who don’t have IE7.

The latest of my reading suggested putting a “position” with every “float” in the CSS (I’m guessing position: relative?). Before I go through and add that to all of my floating elements, I was wondering if anyone else has a better solution, or knows if the “position/float” combination will fix this??? Please leave a comment if so. Thanks.

It simply doesn’t exist. A highly desirable pseudo-class, and IE doesn’t support it. But it doesn’t deny it either. You see, when IE finds something it doesn’t support, it returns UNKNOWN. For instance, p:first-child in IE would return p:unknown, since IE doesn’t support :first-child. Naturally, you would expect it to do the same for :hover since it doesn’t support that, either. But it doesn’t. It recognizes the :hover, but doesn’t do anything with it unless it’s a link. Since IE does support behaviors, though, I believe you can use .htc or .hta files to attatch to specific elements through CSS, and change the behavior to whatever your little heart desires. But I’ve never done this and probably never will. I’ve yet to be in a situation where there was an extreme need for the :hover class.

Anyway, this spawns from my attempt (or lack thereof) to apply hovering effects to the Flickr images on my site. It took literally 1 minute to do in Firefox (img:hover). After all, it’s a fair and simple thing to want and based on what we know about CSS, a fair and simple thing to achieve. The intuition I’ve gained from writing CSS is acknowledged by the intuition of Firefox when reading CSS. IE is awkward, ugly, and annoying. Once it works in IE, FF tells me I’m wrong. So, there I am… hacking away in the stylesheet (refusing to use onmouseover for this) until I come back to Earth. Who cares if it doesn’t work in IE? I don’t use IE and those that do probably don’t pick up on how things like that add to a design, anyway. I’ve done it before, I just don’t have the perfect combination right now. I’m tired of having to hack for IE when the solution is so simple everywhere else. For now (and unless mandatory), I think I’ll surrender to IE by simply ignoring its crudeness.