Category Archives: CSS

Coding Horror: Is HTML a Humane Markup Language?

Coding Horror: Is HTML a Humane Markup Language?

One of the things we’re thinking about while building stackoverflow.com is how to let users style the questions and answers they’re entering on the site. Nothing’s decided at this point, but we definitely won’t be giving users one of those friendly-but-irritating HTML GUI browser layout controls.

I am also bothered by the gui widgets that people tend to like in pages, for one I want more control given to my designers over my ‘users’ pages. Generally people really abuse those controls and make the ugliest darn things. The worst looking emails tend to come from yahoo and other web mail products that have those darn things.

I also like the markup that markdown makes, easy to style into something that flows with the rest of the site. Not by me you know, but by my designers…

A Guide to Web Typography | i love typography, the typography blog

A Guide to Web Typography | i love typography, the typography blog

Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

A good quick treatise on typography as it applies (in my mind) to reading on the screen, specifically on the screen.

Good reading for this design wrecker as I embark on a new design road…

Automatically Version Your CSS and JavaScript Files

Automatically Version Your CSS and JavaScript Files: “

Because we’re always on the look out for ways to speed up our web application, one of my favorite tools for optimization is the YSlow Firefox extension. Based on rules created by research done by Yahoo engineer, Steve Souders (his book High Performance Web Sites is a must read for anyone interested in front end engineering), the tool hooks into Firebug and helps you diagnose issues that can shave seconds off your pages’ load times. While we were able to implement most of the suggestions fairly easily, Rule #3, which specifies adding a far futures Expires header required a bit of elbow grease that some of you might be interested in.

There are some good tricks in here, but sometimes I think that designers and developers really get into the ‘optimization phase’ way to early. There are so many sites to my mind that really could use some more time spent in who are they being built for, how are they being used and what can I do to make the experience more streamlined and useful.

Recently I noticed that the Bank of Americas around my house started replacing the ATM machines, and there seems to of been a lot done to make the experience much faster, not the machines being faster but the experience. And it really makes a difference….

(Via Particletree RSS Digest.)

Creating a Visual Language

Creating a Visual Language:

Amazon has a clear visual language for shopping-related buttons. (Figure 1) While the buttons vary in size, color, text, and iconography, they clearly share enough of the design elements that the variety enhances their purpose rather than complicating it.
  • Color
  • Iconography
  • Context & Flexibility
  • Copywriting

Worth reading if you do things like buttons and pretty things in your work. I tend not too, I’m the guy who builds the pigs I don’t put the lipstick on them ;)

(Via Garrett Dimon.)

Multi-Safari: Testing with 10 versions of Safari at once

Multi-Safari: Testing with 10 versions of Safari at once:

Michel Fortin has created special versions of Safari that allow you to run them all on the same machine. This allows you to test your Ajax application in a variety of versions.

There are similar things for explorer and firefox so this is a great addition to the developers tool box…

(Via Ajaxian Blog.)

Navigating the HTML email jungle

Navigating the HTML email jungle:

We’re ramping up our emailing efforts and decided to start sending out HTML newsletters to customers. (We’ve always sent out plain-text emails but figured some minimal styling would help liven things up a bit.) So we designed a nice, simple email using clean code. The first one is this brief Basecamp Newsletter.

It took a while to get to this version though. First, we ran our simply styled email through Mailchimp Inbox Inspector (demo), a useful tool you can use to view HTML newsletters in a variety of email apps.

It came up perfect everywhere except Outlook 2007, Windows Live Mail, and Lotus Notes. Strangely, it looked fine in Outlook 2006 but busted in Outlook 2007.

The reason? As Campaign Monitor put it, Microsoft decided to take email design back 5 years.

If you do find yourself inclineded to do html email generation it does behoove you too check out the mailchimp inspector and take the time to read some of these links…

(Via Signal vs. Noise.)