▼Blog

Lack of planning, organization will unravel your project

I’ve never really created something with a plan in hand.

I am the kind of builder who puts together a house by eyeing it. Blueprints? A schedule? Who needs ‘em! I can guess on how much wood, shingles and plaster I need. Be glad I’m not a builder.

And while this strategy has served me well over the past 27 years, I’m beginning to learn that for large projects, having a blueprint is not a bad idea.

As I write more and more of my own code and decipher the old writings of previous designers, the more and more I realize the value of a plan and organization.

One of the best bits of advice I can give any Web site creator is to be organized and think what another might encounter if he or she opened your coding and had to perform maintenance on it.

Don’t name your styles in a style sheet by the attributes that they describe. In other words, no classes called “orangetext” for text that’s supposed to be orange. What if you want to make that text blue? The best style classes and ids match their function, such as “.middle p,” which might be a way of styling the text of a middle paragraph. It really depends on the project and your needs.

MySpace, incidentally, is one of the most high-profile offenders for its CSS. Among the classes: .blacktext12, orangetext15, .btext and .redbtext.

Also, be sure to leave commented out text in your style sheets and coding so sections of code can be easily searched for or identified.

I’ve long looked at the CSS on my blog and thought I should clean it up. While organizing and trimming code will make my pages leaner and easier to maintain, I am afraid that erasing one class or attribute that I made many months ago will cause my design to unravel.

This is the problem with large Web sites that have been around longer than this blog. Multiple users have multiple ways of doing things. Rather than carefully scoping out the coding of another, these users go in and lay down their own conventions. This create redundancies and also bloats  the size of the coding. Good luck going in and trying to fix something. I think that’s why you’ll find so many !important‘s in large site style sheets.

This much advice I can offer. As for planning, I need to stop making it up as I go and actually outline the names, styles and organization I’ll need before I write something up. This will help me cut down on bloated coding, debugging and maintenance time.

I could never write one, but I know many of my high school teachers loved when we outlined what we were going to write in an essay before we wrote it. Again, this felt very unnatural to me. I write as I go along! An outline seems to destroy writing as a creative, exploratory process.

But, an outline saves a ton of time, and when project deadlines are tight, going into it with a plan might not hurt, even if it’s not that much fun.

8 places I turn to for my daily soundtrack

I don’t see the sun much — or gray sky, we do live in Ohio — during the day.

But hey, how much can I complain? I have an office, a real space with plaster-backed grey walls and desk, but, alas, with no windows. This is my first noncubical workspace ever. I’m actually starting to feel like a grown-up, a thought I don’t want to dwell on at age 27.

While it will be awhile before I nab one of the coveted offices at work with a window, there are things I can do to liven up my workspace and spirits. In my new role as full-time Web guy, I find myself sitting at my computer in my windowless office a lot. What propels me beside caffeine? Music.

I can’t stand much commercial radio, except NPR and an occasional trip to stupid land paying attention to one of the A.M. or P.M. drive-time shows. While in the office where I have no, nor want a, radio, I listen to a variety of Internet music/talk sources to fuel my daily soundtrack. Among my favorites:

• Soma-FM: Indie Pop Rocks – Available via iTunes or the station’s Web site, Soma plays a decent variety of indie artists, sometimes even personal indulgences like the Shins or Arcade Fire.
  
• Pandora – Based on the Music Genome Project, Pandora pairs its listeners with artists or songs like the ones they already like.
• Muxtape – The dead and resurrected site previews several indie artists’ albums in an easy-to-use interface. More music is  coming.
• Blip.fm – At Blip.fm  you can spin your own mix of songs like a DJ. Think Twitter for music affacianos. This isn’t the best option for when you’re working, but is useful if you’re looking to hear a specific song. Find a DJ you like and listen through his or her playlist.
• NPR music archive - NPR regularly broadcasts live concerts of awesome artists like Ted Leo and the New Poronographers. But if you live in Northeast Ohio, you would no know better, thanks to the very conservative programming of the local NPR affiliates. Even if your station doesn’t play these concerts, you can listen to them live via NPR’s All Songs Considered archive. The library’s easy-to-use interface allows you to pick a song or concert and put them into a playlist. You can also download the full concerts for later listen on your iPod.
• iTunes podcasts – iTunes has all sorts of podcasts that I never pay attention to but probably should. Nerdy-awesome NPR Science Fridays alone makes the iTunes store worth a glance.
• Others – I’ve read AOL has a good repository of music, although most of it seems too mainstream for my tastes. And don’t forget Pitchfork Media, purveyors of all things awesomely indie.

Tips on getting your HTML e-mails to look right

If you hate Internet Explorer, you’ll loathe Outlook. Better yet, Outlook 2007 will make you love IE 6. Really.

Designing HTML e-mails is a challenging art and far worse than any struggles you’ll have trying to make a page look pretty in IE or Firefox.

Remember Web standards? Toss them. You’ll have much more luck coding at random — and I wish I were kidding. Designing engaging HTML e-mails is a great challenge.

Blocked images

Not only do different e-mail clients support various Web standards, many also block images by default. Users can choose to download or view the images, if they even notice their absence. Some clients show broken image icons; others do not. Not all show the images’ alt tags, either.

So don’t expect your pictures to be seen. You must design as if no one will see the e-mails’ supporting graphics. While you, Mr. Web Designer, may understand this reality, you will have to explain this extra carefully to the copywriters and graphic artists who are working on your e-mail project. The e-mail’s words are the verbal glue that keeps the message together.

How an upgrade can be a downgrade

Believe it or not, Outlook 2004 supports CSS better than 2007. Campaign Monitor, a Web e-mail marketing software company, outlines 11 e-mail clients’ handling of CSS. The 2007 edition even drops floats for block-level elements. Why?

Amazingly — unbelievably — 2007 switched from Internet Explorer HTML rendering to Word(!).

2004 features that 2007 drops

• Background-image and -repeat
• Display
• List-style-image, -position and -type
• Position
• Width
• Word-spacing

These words come to mind when I describe Outlook 2007. Microsoft took a huge step back with this edition.

Coding advice

So you want to create an HTML e-mail. My best advice:

• Put everything in tables if you want it to layout right
• Don’t use an external style sheet or style sheet in the head. Make everything in-line.
• Double up on your styles, and use old, deprecated HTML style tags to step in just in case your in-line CSS isn’t working. Learn to love font tags — they’re back!
• Test! Start in Outlook, then send test e-mails to Google, Yahoo, AOL, Hotmail and any other e-mail client your users are likely using.
• Markup your code in HTML comments so you know where your tables and sections start and end.
• Study Mail Chimp and Campaign Monitor‘s free e-mail templates.
• Support the E-Mail Standards project and look at its list of e-mail clients and their support of various Web standards.
• Despite the restrictions, e-mails can look pretty, assuming your images make it through.