As one working exclusively on CSS-based layouts (that’s it, a little markup and a lot of CSS) day in and day out, I readily admit that it’s a tough thing to learn to do and it’s not an easy thing to master. Ben Henick’s 12 Lessons for Those Afraid of CSS and Standards serves both levels by presenting ideas that the novice needs to know and the intermediate needs to master. I recommend clicking that link and reading the article, no matter what you’re level. I’ll provide some of my thoughts on the article below (I’ll even try to make them match his order).

1. CSS is a very functional language. You really should think of it as an object-oriented language powered by inheritance and contextual properties. This is confusing at first (why does my headline render differently in one column than another?) but immensely powerful (I can make my headline render two different ways in two different contexts).
2. Rendering engines cause rendering bugs that make perfect presentation of a design very difficult. It’s not impossible, though. Using tools like position, you can really measure and execute designs to the pixel.
3. Most people don’t understand the skill and time involved in battling browsers, especially when your company or project is firsting starting out down the CSS road. It takes a while – especially for a new CSS programmer – to figure these things out and learn how long "simple" tasks will take.
4. I’ve fallen into the div-soup trap before. Real CSS mastery occurs when you realize that you don’t need divs anymore, that you can do the same thing using all those "basic" html tags that you’ve long forgotten.

5. In many cases, the person responsible for a site’s graphic design is not responsible for any other aspects of site implementation. When paired with a failure to create strict site- and section-wide wireframes, this lack of accountability results in unique comps for too many pages, and thus a lot more work for the stylist and producers.

   Please, designers, create consistent designs. There’s no reason why your columns should vary by a few pixels here and there. There’s no reason why a site should have more than a few base templates. Designers can either expidite the build process or bottleneck it with their creations. And, believe me, I’ve designed and built. When I design with building in mind, my design works better with fewer compromises.

6. Tracking down browser bugs takes time, and it’s most often that crunch time when a project is in its final phases. It’s a hectic thing.
7. The author left out one big benefit: really taking advantage of the cascade lets you do things, and change things, quickly. Want your left-hand links to be green? Tight CSS makes this a snap.
8. See #7. You don’t need all the markup that you think. This is a hard concept for novice programmers to grasp: their quickest action is to wrap everything in a div, style it, and walk away. I prefer to use divs as selectors, then use normal HTML markup as children of that selector. This makes stylesheets easy to read and easy to change. Plus, by using normal HTML markup, you can really improve that SEO, which everyone loves.
9. Without stylesheet hacks, your site won’t work. Plain and simple. Yes, /**/ is not valid CSS, but it works. Try to write code with standards and mind, but avoid blocking on standards. There are cases where you will need to eschew standards to get your work done. Don’t stay late looking for a "standards-compliant fix" when you won’t find one (believe me, I’ve looked), and the hack is the cleaner, easier way to go.
10. There’s nothing like writing a whole page, getting it into production, then seeing the "peak-a-boo" bug dropping off some text for no discernible reason. Or having blockquotes slowly shift your text off the screen. Or having…
11. position:relative is usually the first thing I try when trying to fix an IE bug. line-height sometimes works, too.
12. A background image on an <h1&gt makes a lovely, accessible, SEO-friendly headline. Standard design templates let you use and reuse backgrounds. Reusting common elements means less new browser bugs, and shorter development cycle, and much happier developers.

You can tell I’ve been doing this for a while, eh?

technorati tags:css, learning css, front end development, design, web standards, web development, front-end, user interface development

Blogged with Flock

How many programming languages have styleguides? Just about all of them. How about "web languages" like HTML, CSS, and JavaScript? On the development team level, there’s probably a lot. But there’s nothing close to the universal standard that Java enjoys. How do UI developers write code that other UI developers can understand? They use something like Dojo’s JavaScript styleguide.

Adopted from the Java Programming Conventions Guide, Dojo’s JavaScript styleguide is the common syntax that Dojo’s developers use. The Dojo Foundation is no slouch when it comes to programming, and they’ve created a styleguide that encapsulates many of the "standard quirks" of JavaScript development (like smooshing together if-else blocks and placing {s on the same line as your function header). In all, it’s an effective resource for getting everyone (especially Java guys who refuse to do anything in a non-Java syntax way) to write code in nearly the same language.

technorati tags:javascript, styleguide, development

Chartreuese gives us Why Paris Hilton Is Famous (Or Understanding Value In A Post-Madonna World). No, don’t laugh when they point out what Paris Hilton does well (no, really): she drops names. What does this accomplish? Everyone loves free publicity, and she gets free stuff in return.

So, how can this help you, the web developer? Use Paris’s mantra: if you give free attention (in our case links outward), you’ll get free attention back (in her case, $2000 sunglasses, in our case, links in). If you want to be noticed, give notice first to those you want to take notice of you. You’d be surprised how many people will follow a trackback, and how many visitors you’ll gain from something so simple. Instant SEO based on this almost-Golden Rule: do unto others so they will do back to you.

technorati tags:seo, marketing, trackbacks

Blogged with Flock

How much could you possibly want to know about CSS opacity? Mandarin Design covers just about all of it here, including a look at how to achieve "Photoshoppy" image and text effects using just CSS.

Here’s the biggest thing to remember when working with opacity? You’ll need to use a couple different flavors of opacity to maintain cross-browser compliance:

• Firefox lets you use the real deal, opacity and the proper range of 0.0 to 1.0.
• IE makes you use filter:alpha(opacity=x), where x is a number from 0 to 100 (see-through to fully opaque).
• Older Mozilla browsers require -moz-opacity, which ranges fom 0.0 to 1.0, like standard opacity

My personal opacity favorites: using opacity on an image to create a CSS-based drop shadow, and using opacity on a large background element to create a transparent overlay on a page. Both give that Photoshop-quality look with pure CSS.

I’ll admit it: I’m a closet designer. Yeah, writing code is great, but there’s absolutely nothing like writing code to build something you designed. It’s like the best of both worlds: you’re really building from scratch everywhere, and you have complete artistc freedom to create. (Plus, you have a great opportunity to design for implementation: you can build a design with code in mind, instead of just making something that looks cool than passing it over the wall).

Here’s one of my designs that made it live. Stone is my big big boss’s (my company’s CEO) blog. The design is straight out of my head and, I think, looks pretty good (and let me make copious use of my Photoshop skills). Note the free benefit of that textlink on the right-hand side. Thanks Marc!

Ever need a character code for that one goofy character you have to stick in your HTML? TnTLuoma.com has one of the most-comprehensive character code lists I’ve ever seen (and I’ve seen a lot of them). I keep this one bookmarked at all times.

While on this topic, here are a couple tips for when and how to use character codes:

• If you’re building an email, always use a character code and make sure to substitute character codes for non-standard characters when pasting from a Word Doc. Read that last part again. You cannot paste from a Word Doc into an HTML file and expect it to work. MS uses special, decorated qutoes and apostrophes that wind up (most often) as ? in your HTML code.
• Use the numerical code equivalent, because textual code equivalents are not always supported. While numerical codes are not guaranteed support, they are better-supported than their textual equivalents (and every textual code’s numerical equivalent is supported while the reverse is not true).
• Always preview your HTML when it contains character codes. It’s very easy to forget that last ;, the code istelf might not work, and these items look better and different font sizes (generally a larger size than your document’s base font). Preview, preview, preview!

technorati tags:html character codes, ascii, ascii codes, html, web development

QuickRef.org uses "active search" to give you very quick access to documentation on all kinds of programming languages. Type in a method name, language, or object, and, odds are, you’ll get very fast results that document what you’re looking for. QuickRef’s archive is drawn entirely from free documentation; most of it comes from the actual "official" doc.

QuickRef does its job well: it gives you fast access to information. However, it also does its job well because it uses a UI that supports the user and the search process; it’s a very user-centered design. From a graphic design perspective, there’s not much there: it’s a giant search bar. But, this is what it should be: the user’s primary focus is searching, so give them - what else? - a giant search bar. That’s good (user-centered) design.

But, there are a few other very solid UI gems that help give QuickRef a delightful user experience. QuickRef’s search results are color-coded by topic. This speeds visual browsing, helping users easily jump to and select the information they’re looking for. Is color the best choice? Probably, even though it’s not fully visually accessible. However, it ultimately helps users by promoting "browseability".

QuickRef also makes use of AJAX where it’s actually needed and does a lot of good. QuickRef allows users to minimize search results in little "windows" like a desktop app. Think of the benefit for the user: odds are, you’re going to be working on that project for which you’re tracking down information on the DOM for more than just one visit; persisting the results gives a huge benefit for the user. It’s something not often seen: AJAX for more than AJAX’s sake; it’s Web 2.0 building an intiuitive feature that’s beneficial to the user. In all, keeping those results around is a great use of technology that’s a big help.

QuickRef looks like it could be a very good user-centered resource.

technorati tags:quickref, user-centered design, user focus, ajax, reference

Blogged with Flock

GMail Drive is a Shell Namespace Extension that creates a virtual filesystem around your Google Gmail account, allowing you to use Gmail as a storage medium.

viksoe.dk - GMail Drive shell extension

And I hardily recommend it. I’d actually used it heavily when it was first introduced, then I lost my previous laptop and the link to GMail Drive. I just stumbled on the link today (thanks to Digg), and I’m going to do the reinstall shortly. Definitely a solid piece of software.

technorati tags:gdrive, gmail, online storage

Blogged with Flock

Google Image Labeler, a new feature of Google Image Search that allows you to label random images to help improve the quality of Google’s image search results.

Google Image Labeler is Google’s attempt at crowdsourcing image tagging. Why have people do it? because computer vision is poor.

Google gets big benefit out of this: they get correctly tagged images, thanks to the double-team, you-both-must-agree-on-tags approach; they can then pop those tags directly into their image search results. What do the users get? Points. Prizes? No. Points? Yes.

This is less a fascinating study in Google harnessing people to do work than it is in the power of people to build a thriving community around something they enjoy. People are donating their time because they enjoy doing it: the only incentive is a little recognition and a small amount of human interaction. But sometimes, a little recognition is more than enough to pull users in: we’re all motivated strongly by the desire to get our name in the headlines. Often enough, this is what a website needs to build a thriving community: it needs a hobby with a scoreboard.

Beast: An open source Rails forum in under 500 lines of code. Yeah, that headline caught my eye, too. The thing is, I checked out the demo, and it looks great and is robust. They’ve definitely captured the everything you expect from a forum. Even if it was 10,000 lines of code, it’s great software; the "brevity" of Beast just makes it that much better. It’s open source, and is definitely worth a look if you’re rolling on Rails.

technorati tags:rails, ror, beast, forum

Blogged with Flock